【現役Web制作者が教える】Web制作の流れを完全解説

今回は、現役でWeb制作を行なっている僕が

Web制作の実務の流れについて完全解説していきます！

Web制作を学習中の人は、ここさえ乗り越えれば案件を獲得していけるので

頑張っていきましょう！

Web制作の流れ

Web制作者が実務でWeb制作を行っていく場合の流れは、以下の通りになります。

それぞれを詳しく解説していきます。

①ヒアリング

まずは、ヒアリングを行いクライアントがどのようなサイトを制作したいのかを深掘りしていきましょう。

最初に行いますが、重要な工程です。

直接依頼の場合は、ヒアリングシートを利用して行うと聞き漏らしがなくなりますが、クラウドソーシングサイトを利用している場合だと、依頼文に書いてある内容で　必要ない場合もあります。

疑問点や不明点がある場合は質問してみましょう。

• どのようなデザインにしたいのか？
• 新着記事紹介などの実装したい機能はあるか？あるとしたらどこに配置するのか？（トップページなのか、記事ページで一覧として出すのか？など）
• SEO対策やマーケティングは行うのか？

など、「何をやるか、逆に何をやらないか（やる必要がないか）」を明確にしましょう。

また、参考サイトは必ず提出してもらうようにしましょう。

クライアント側の要望を聞いてサイトを制作したのに、「思っていたのと違った」となってしまうのを防ぐためです。

WF・DC作成、提出

次に、WF（ワイヤーフレーム）やDC（デザインカンプ）を作成し提出します。

ワイヤーフレームとは骨組みのようなものでサイト内の要素の配置を示したものです。

あくまで配置を示しているので、デザインや形状などは変化する場合もあります。

デザインカンプとは、

FigmaやAdobe Ilustorator、XDなどで提出されることが多いので、Webコーダーでもこれらのソフトの基本的な操作方法は知っておいた方がいいです。

WFやDCは、どちらか一方を提出する場合も多いです。

ただし、WordPressでの既存テーマでの制作の場合は、WFやDCを提出する工程をはぶいて

いきなりテスト環境でサイトを制作し、完成したらクライアントに見せることも多いです。

サイト制作

WFやDCが作成できたら、いよいよサイトを制作していきます。

できるだけカンプ通りのサイトを制作していきましょう。

最初は作るだけで精一杯かもしれませんが、慣れてきたらただ作るだけではなく

セマンティック構造やSEO的な観点を考えて作成することを意識しましょう。

例えば、見出しの順番は

h1 > h2 > h3 > h4 > h5 …

となりますが、ロゴタイトルでh1を使用したら、各セクションの見出しはh2で揃える

セクション中にカード型のリストがあり、その中で見出しを使用するならh3にする、といった階層構造をきちんと考えて制作していくといった感じです。

セマンティック構造やSEO的な観点を考えて作成することができれば、Web制作会社からの仕事を依頼されることも増えてきますよ！

チェック・修正

サイトが完成したら、クライアントにチェックしてもらいましょう。

1発合格の場合もありますが、修正依頼や「やっぱりこうして欲しい」という要望が来ると思いますので

該当部分を修正していきましょう。

また、この段階でリンクが切れている箇所がないかをチェックしておいたり、新規で取得したドメインの場合は

早めにnoindexを外しておくことも検討しましょう。

新規で取得したドメインに関しては、検索に上がってくるまで1〜2週間程度かかることがあります。

納品

修正を繰り返し、納品しまそう。

どのような形を納品とするかは、クライアントによって変わってきます。

• 「静的サイトのファイル一式をギガファイル便で送ってください」
• 「これで完成ですが、3日ほど問題やエラーが出ないか確認させてください。エラーが出なかったら完了で大丈夫です。（URLを提出する形式）」
• 「検索上でサイトが上がってきたのが確認できたら、納品とします。」

これは、全て僕が言われたことがある納品方法です。

静的に制作したサイトの場合はhtmlファイルやcssファイルを送ったり、WordPressで制作したサイトはURLを送る場合が多かったです。

また、FTPソフトを経由してサイトをアップする方法もありますね。

どのような納品方法を言われても、対処できるようにしておきましょう。

最後に

ということで、今回は現役Web制作者が「Web制作の流れ」について完全解説していきました！

この流れをきちんと覚えてしまえば、案件を取っていくことも可能なので

ぜひ何回も記事を読んでみてください！

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。