私のWeb制作フロー公開！スムーズな進め方のコツ

Webサイトをつくるときって、デザインやコーディングに入る前に、やることが実はたくさんあります。
進め方がバラバラだと時間がかかってしまったり、後から「あれ？ここ決まってなかった…」と慌てることも。

今回は、私が普段やっているWeb制作のフローをまるっとご紹介します。
これからWebサイトをつくりたい方や、仕事として受けるときの参考になればうれしいです。

① ヒアリング・要件整理

まずはここがいちばん大事！
「どんな目的で」「誰に届けたいのか」をしっかりヒアリングします。

• サイトを作るゴール（例：問い合わせを増やしたい、サービスを知ってもらいたい）
• どんなデザインのイメージが好き？
• 必要なページ構成（TOP、サービス、ブログ、お問い合わせ…）

これをおろそかにすると、あとでデザインを何度も直すことになってしまうので注意です。

② ワイヤーフレーム作成

ページの設計図をざっくり描く段階です。
私はFigmaやAdobe XDを使うことが多いですが、最初は紙に手描きでもOK。

• どこにメニューを置くか
• TOPで何を一番に見せるか
• CTA（問い合わせボタンなど）の位置

をここで決めておくと、このあとのデザインがめちゃくちゃスムーズです。

③ デザイン作成

いよいよビジュアルに落とし込み。
ここでは、ヒアリングで聞いたイメージやワイヤーをもとに色や写真を選びます。

私はここで、

• 色は2〜3色にまとめる
• 写真はトーンをそろえる
  を意識しています。

同じ情報でも、デザイン次第で印象はガラッと変わりますよね。

④ コーディング・CMS構築

デザインがOKになったら、コーディングやWordPress構築へ。

• HTML/CSS/JSでレスポンシブに対応
• SEOの基本設定（title、description、alt属性など）
• お問い合わせフォームやブログ機能の実装

このとき「PCでOKでも、スマホで崩れてないかな？」を必ずチェックしています。

⑤ テスト・納品・操作レクチャー

サイトが完成したら、

• 表示崩れがないか（PC/スマホ/主要ブラウザ）
• リンク切れはないか
• フォームはちゃんと届くか
  をテストします。

納品後には、お客さまが自分で更新できるようにちょっとしたマニュアルを作ったり、Zoomで操作レクチャーをしたりもしています。

スムーズに進めるためのコツ

1. 最初のヒアリングをしっかり丁寧に
2. 都度確認をとって、「これで進めますね」と共有する
3. デザインに入る前にワイヤーで全体像を決める

これをやるだけで、後戻りがグッと減ってお互いに気持ちよく進められます。

まとめ

Web制作は、ついデザインやコーディングに目が行きがちですが、
ヒアリングやワイヤーといった**「準備の時間」こそが一番大事**。

同じように制作している方や、これから自分のサイトを作りたい方の参考になればうれしいです！