尽管人们说网站很重要，但实际上，很多人可能不知道网站是如何制作的。更确切地说，如果不专业学习，就无从知晓，这也是事实。

互联网上虽然有很多关于HTML和CSS等技术性解释的文章，但解释整体概况和流程的内容却不多。肯定也有很多人觉得“只要知道流程就行了”。无论做什么，了解基础都很重要。

这次，我将全面解释网站的制作方法，所以，无论是即将从事网站相关工作的人、自己公司制作网站的人，还是单纯感兴趣的人，都请务必参考一下。

此外，这次记载的方法虽然是理论，但细节是我们的做法。请注意，个人或公司之间可能会略有差异。

首先，进行访谈。并制定计划。

无论是“面向客户”还是“自营服务”，方法都会有所不同，但基本上，最初都是从访谈和计划制定开始。不不仅仅是网站，任何事情都是如此。最初都是收集意见，制定计划。

目的、设计、配色、制作什么内容等，有很多事情需要决定，但我们会尽可能从一开始就详细确定。我们可以参考其他网站，或者在展示的同时，逐步汇总意见。

然后，我们还要确定与本次完成形象接近的参考网站。这样设计师在进行设计时，更容易理解方向。如果最终能找到2到3个参考网站，事情会进展得很快。如果要加入动画等，也请寻找动画的参考网站。

在功能方面，也要尽可能地提出议题，例如是否可更新、邮件表单如何处理、如何与社交网络联动等。尽管日后可能会有变动，但提前提出讨论可以避免日后遗漏。

即使中途有一些小改动，但如果之后才提出“想添加这样的功能”的意见，在开发上会造成很大的麻烦。务必彻底地提出所有被认为必要的内容。

汇总到企划书中，并给出时间表。

访谈和企划头脑风暴完成后，接下来将讨论的内容整理成资料。图解制作多少页的“网站地图”。以及“时间表”。仅描绘网站布局的“线框图”也只需粗略制作首页即可。以下是线框图。

当然，头脑风暴中讨论过的配色、方向性、设计、参考网站等内容，也都要记录下来。如果是客户项目，为了避免“说过”和“没说过”的纠纷，将资料整理并留下记录非常重要。即使是公司内部企划，通过整理信息并事先深思熟虑，也能获得更深刻的见解。

提交报价也是在这个时候。只有在讨论并整理成资料的阶段，才能首次看到应该制作什么样的网站的整体概况。如果整体概况不清晰，或者不清楚想制作什么样的网站，就无法给出报价。

在正式确定网站需求之前，最好假设存在大约上下30%的误差。因为在过程中可能会出现新的需求或额外的要求。有些情况下，这可能意味着“需要额外报价”。如果一开始就明确表示“这个价格可以完成”，那么通常会以预估的额外费用来报价。

无论是制作网站的一方，还是委托制作的一方，都应该避免过早确定价格。在制作过程中，新的想法会不断涌现，因此随时添加这些想法，更容易做出更好的作品。

如果汇总资料的内容全部通过，则开始制作。首先，为所有页面制作线框图。

线框图，正如我之前提到的，是一种只包含网站布局和内容的蓝图。它基本上以灰色方框、线条和文字等简单形式呈现，尚未包含设计。

在汇总策划阶段，通常只制作首页的线框图。然后，当策划方案确定下来后，再制作所有页面的线框图。

此时，是选择从电脑还是从智能手机制作线框图，取决于策划内容。我个人建议即使在智能手机盛行的今天，也最好从电脑版开始制作，因为屏幕空间更宽广，可以自由发挥，更容易毫无保留地呈现信息。

如果以智能手机的狭窄屏幕为前提进行制作，往往会过于注重易读性，导致需要展示的重要信息被简化的情况屡见不鲜。最好先在电脑版宽广的屏幕上充分展示所有信息，然后再考虑如何将其适配到智能手机屏幕上？这样对大多数人来说更容易思考。如果从智能手机版开始制作，则电脑版的重要性会降低，并且只适用于预算较少的情况。

此外，Google也从2016年2月左右开始，转向以智能手机为中心的理解方式。如果只专注于制作电脑版网站，而智能手机网站只是电脑网站的简化版，那么搜索排名会迅速下降。即使屏幕尺寸狭窄，也不应吝惜信息。

因此，基本的线框图通常会同时制作电脑版和智能手机版，但现实是数量越多，预算也会越高。如果预算有限，可以制定一个“规则”，说明当从电脑版屏幕切换到智能手机版屏幕时，哪些组件会如何改变布局，然后委托工程师进行制作（稍后我们会简单解释工程师会做哪些工作）。

为了制定规则，例如，只制作前两页以及变化不明显的地方的线框图，然后让工程师按照规则制作智能手机版的布局，也有这种情况。无论如何，如果有预算，最好完整制作所有线框图和设计。

如果线框图没有重大修改，则进入设计阶段。

一旦线框图经过客户、公司内部、同事和自己的确认，如果没有特别问题，就可以进入设计阶段。设计通常使用Figma工具制作。

也有人使用Photoshop或XD等工具进行制作。但是，Photoshop主要用于照片处理，或者制作图形设计非常复杂的网站。XD预计未来将不再使用，并且应用程序支持也将终止，因此最好避免使用。还有人使用Illustrator工具制作，但这些人通常是从事纸媒出身的平面设计师。

对于编码员和工程师来说，Figma制作的数据是最好的。因为这样更容易进行“编码”工作，即以Google易于理解的方式构建网站，使其能够正常点击并添加动画。如果使用Photoshop等其他工具交付设计，通常会让人感到不悦。

顺便说一下，如果设计师完全不懂编程，他们制作的设计在编程阶段会大大增加工作量，导致工时增加，编程费用也会更高。如果需要委托设计，最好找对编程方法有一定了解的设计师。最近，越来越多的设计师能够自己进行编码。

设计师会根据线框图和需求制作设计。他们会添加颜色、调整间距、美化文字。这样，网站才开始有模有样。

通常，最初只制作首页，以确认设计方向。如果所有页面都制作完成后发现设计方向有误，那么所有页面都需要重新制作，这将是巨大的重复劳动。因此，首先要精心制作首页，确保设计方向不会偏离。

首页设计获得批准后，就可以开始制作其他页面了。基本上，其他页面会按照首页设计的风格一次性制作完成。所有页面设计完成后，会进行一次确认，如果获得批准，就进入编程阶段。

使用HTML和CSS语言，通过专用文本编辑器进行编程（编码）。

Figma等设计工具制作的是“图像数据”。虽然可以直接将图像作为网站发布，但那样不仅无法通过点击进行页面跳转，甚至不会被Google识别。

只有通过使用HTML和CSS语言对图像数据进行编程（编码），Google搜索引擎才能识别它，并将其显示为搜索结果。

此外，Yahoo!的搜索结果也使用了Google的系统，所以基本原理是一样的。以前Yahoo!也使用自己的系统，但后来只使用Google的搜索系统了。

为了让Google正确识别并使网站正常运行，需要使用HTML和CSS对图像数据进行编码。关于HTML和CSS的具体编码方法，已经有很多文章，请自行搜索查阅。

此外，现在点安装等服务，现在可以通过在线视频学习技术。如果感兴趣，它基本是免费的，而且点安装学习编码方法，会很有帮助。

此外，在进行编码时，还会进行响应式设计，使其能够在智能手机上浏览。在制作线框图时我们稍微提过。如果在设计阶段没有制作智能手机版的原型，那么在编码阶段才能首次查看智能手机版。

淡入淡出、其他动作、幻灯片和图片放大框等动画，也将在编码阶段实现。实现这些动作的语言不是HTML或CSS，而是JavaScript。有些工程师可能不擅长JavaScript，所以最好不要认为它们是同一回事。

WordPress化以及会员注册等复杂系统的实现放在最后。

使用HTML和CSS完成编码的阶段，基本上被称为“静态网站”，无法进行博客发布或会员注册。即使用户进行任何操作，它也不是像应用程序一样可用的状态，而只是起到“广告”的作用。

从那以后，能够更新博客、让用户注册会员、或者作为购物网站购买商品，都需要使用PHP或Ruby等其他语言进行编程。WordPress系统就是其中一种机制。

WordPress基本上是一个博客系统。它意味着一个能够实现博客更新全套功能的软件包，包括管理界面和更新功能等。软件包中包含许多以PHP为核心的程序文件，并且可以在一定程度上自由定制。通过将这个程序与之前创建的静态网站结合，就可以添加博客功能和更新功能。

通常认为使用WordPress可以轻松创建网站。这是因为可以使用模板。WordPress具有模板功能，如果直接使用模板，就可以轻松搭建网站。但是，如果想使用原创设计来使用WordPress，就必须遵循制作普通网站的步骤。

使用原创设计还是模板，工作量会大不相同。使用原创设计来使用WordPress的步骤是：首先使用HTML、CSS和JavaScript创建静态网站，然后整合WordPress系统。因此，这并非易事，反而比创建普通网站更费时费力。

此外，在创建会员注册或购物网站时，还需要在此基础上进行进一步编程。被称为系统开发的阶段是网站创建的最后阶段。按照以上步骤，完成整个系统开发后，网站才算真正完成。当然，如果只是静态网站，则无需进行系统实现阶段的工作。

总结

您觉得怎么样？我想可能也有人是第一次了解网站制作的步骤。实际上，无论是与客户合作，还是为公司或自己制作，如果团队所有成员都清楚整个流程，工作就会更容易推进。

这样就能避免事先出现认知差异、分歧或制定不合理的计划，从而能够与设计师和工程师顺畅沟通。

如今，网站制作已经变得非常普遍。对于任何企业和活动而言，网站都已成为一种展现其存在感的重要武器，以至于没有网站就可能“落败”。然而，即便如此，我有时也觉得，网站制作的流程、方法和手段仍然鲜为人知，甚至误解的信息反而广为流传。

通过深入理解步骤、方法、技术和工作量，项目是否会进展得更顺利呢？请务必学习网站知识，了解其能做什么和不能做什么。新的可能性和解决方案也一定会随之浮现。