Webサイトの新規制作やリニューアルにおいて、いきなりデザインやコーディングから始めてしまっていませんか？
せっかく見た目が整った綺麗なサイトができても、「成果（お問い合わせや売上）につながらない」のでは意味がありません。
私たちエレメントでは、実際の制作に入る前の「戦略設計」と「サイト設計」に最も重きを置いています。
なぜなら、成功するWebサイトには必ず明確な「戦略」と、それを形にするための正しい「手順」が存在するからです。
今回は、実際に社内で実践している「成果を出すためのWebサイト制作フロー」について、その裏側を余すことなく解説します。
WEBディレクター、デザイナー、マーケティング担当者の方はぜひ参考にしてください。
【STEP1】ゴールは一つに絞る！戦略設計において「やらないことを決める」
サイトを作る前に、まずチーム全体で認識を合わせるべきなのが「戦略」の定義です。
私たちは、戦略とは「資源を分配・選択すること」であり、さらに噛み砕くと「やることと、やらないことを決めること」だと定義しています。
予算や時間、人的リソースは有限です。あれもこれもと詰め込むのではなく、「何に集中してリソースを割くのか」を決定することがプロジェクトのスタート地点です。
具体的には、以下の3つを言語化してシートに落とし込みます。
- サイトの目的（ゴール・コンバージョン）
お問い合わせ増なのか？
来店予約なのか？
採用のエントリーなのか？
営業に渡す前のリード（見込み客）獲得なのか？ - ターゲット（Who）選定
誰に届けたいのか？ - ベネフィット（What）の訴求
ターゲットに対して、どのような価値（便益）を提供するのか？
この土台が定まらないと、後のデザインやコンテンツ制作でブレが生じてしまいます。まずはここを固めることが最優先です。
【STEP2】サイトマップ作成：現状把握と情報設計
戦略が決まったら、次は具体的なサイトの骨組みを作る「サイトマップ」の作成に入ります。
1. 現行サイトの棚卸し（例）
リニューアル案件の場合、まずは現在のサイト構造（サイトマップ）を書き出し、現状を把握します。
どのページからどのページへ遷移しているのか、要素を洗い出すことで、「改修すべきページ」「削除するページ」「新たに追加すべきコンテンツ」が見えてきます。
2. 新サイトマップの作成（情報設計）
ここがWebディレクターの腕の見せ所です。新しいサイトマップを作成し、情報の階層構造を整理します。
- コンバージョンへの動線設計： どのページを見せて、どうやってCV（電話、フォーム、予約など）へ誘導するか。
- 各ページの要素定義： 各ページの大枠のテーマと、そこに入るべき要素をリストアップします。
この段階でクライアント（または決裁者）と、「情報の載せ方や動線に相違がないか」をしっかり握っておくことが、後のトラブルを防ぐポイントです。
【STEP3】ワイヤーフレーム：デザインの前に「言葉」を入れる
サイトマップができたら、すぐにデザインソフトを開くのではなく、「ワイヤーフレーム（WF）」を作成します。これはサイトの設計図のようなものです。
参考サイトの収集
ワイヤーフレームを作る前に、同業種や競合他社のサイトを10個程度ピックアップし、分析します。
情報の配置、UI/UXデザイン（使いやすさ）、どのような訴求（キャッチコピー）をしているかなどをリサーチします。
また、デザインの方向性を探るために、あえて異業種のサイトや、クライアントのロゴ・コンセプトカラーに合うサイトなども集め、クライアントや担当デザイナーへの共有資料として準備します。
テキスト原稿は「仮」でも必ず入れる
ワイヤーフレーム作成時の最も重要なポイントは、「テキスト（原稿）を入れること」です。
よくある失敗として、「ここにテキストが入ります」というダミーの枠だけで進めてしまうケースがあります。
しかし、中身の文章が決まっていないと、デザイナーは何を強調すべきか、どんなトーンでデザインすべきかが掴めません。
見出しやリード文など、この段階でライティングを行い、具体的な言葉をワイヤーフレームに落とし込みます。これによって、デザインの解像度が劇的に上がります。
【STEP4】デザイン制作：まずは「ファーストビュー」で合意する
ワイヤーフレームと原稿が完成したら、いよいよデザイナーへの依頼です。
しかし、ここでもいきなり全ページを作り込むことはしません。
ファーストビュー（FV）で方向性を決める
Webサイトの印象の大部分を決めるのは、トップページの最上部、つまり「ファーストビュー（FV）」です。
まずはFVのデザイン案を複数パターン（例えば3〜4案）作成し、クライアントに提案します。
- 信頼感のあるパターン
- 親しみやすいパターン
- スタイリッシュなパターン
など、いくつかの方向性を見せます。
ここで方向性の合意（チェック）を得てから、トップページ全体、そして下層ページのデザインへと展開していきます。
この手順を踏むことで、「全部作った後にイメージと違うと言われて全修正」という悲劇を回避し、プロジェクトをスムーズに進めることができます。
スマホ版（SP）のデザインも、PC版のチェックが完了した段階で進めていきます。
【STEP5】コーディングから公開、そして運用へ
デザインが確定したら、エンジニアによるコーディング作業に入ります。
- デモサイトへのアップ： テスト環境で、実際のブラウザでの表示崩れや動作を確認します。
- クライアントチェック： 最終的な表示確認を行います。
- 本番公開： サーバーへアップロードし、Webサイトを公開します。
- 計測ツールの設定： 公開後、Googleアナリティクスなどの計測タグやコンバージョン設定が正しく動作しているか再確認します。
公開はゴールではなくスタートです。ここからコンテンツマーケティングや広告運用を行い、最初に定めた「目的」を達成するための運用が始まります。
まとめ
Webサイト制作は、戦略立案、ディレクション、ライティング、デザイン、コーディングと、多くの工程と専門スキルが必要なプロジェクトです。
私たちエレメントでは、一人の担当者がすべてを抱え込むのではなく、各フェーズで専門スタッフ（フロントに立つディレクター、制作を担うバックエンド、ライター、デザイナー、エンジニア）が連携し、チームで制作を進めています。
- 戦略のないサイトは作らない
- 設計図（ワイヤーフレーム）に言葉を込める
- 段階的な確認フローで手戻りを防ぐ
これからWebサイトを作ろうと考えている方は、ぜひこのフローを意識してみてください。見た目が良いだけでなく、しっかりと「目的を達成するサイト」が出来上がるはずです。
Webマーケティングやサイト制作に関するご相談は、ぜひエレメントまでお問い合わせください。
エレメントに無料相談する ＞
