Web制作「設計」手順を制作事例から２ステップでご紹介【Web制作の流れ②】

• Webサイトを作るための「設計」手順が実際のサイト制作事例からサイトマップ、ワイヤーフレーム制作の２ステップで分かる。

実体験をベースに記事を作成していますので参考になれば幸いです。

Web制作設計の流れをオリジナルサイト制作事例から２ステップでご紹介

Web制作「企画」手順を制作事例から５ステップでご紹介【Web制作の流れ①】に続いて次は「設計」です。

Web制作（オリジナルサイト制作）の全体の流れは

• その１「企画」
• その２「設計」
• その３「制作：デザイン」
• その４「制作：コーディング」
• その５「制作：WordPress」

となっておりこの記事はその２「設計」となります。

その１「企画」で必要な情報、ページ内容について整理しました。

ステップ１：サイトマップを作成する

樹形図みたくトップページから階層に分かれていきます。ただ必要ページを並べるのではなくてどのページからリンクされているのかを明確にするということ。

このサイトマップを作るわけですが、最初は競合サイトのサイトマップの構成を整理してみてどんな感じになってるか探ってみます。

競合サイトのページ構成を調べる

競合サイトを見てサイトマップ化してみました。一つの例として下のようなサイトマップになってました。

あと2、3個サイトマップを作ってどんなページがあって、どうリンクしているのかを見てみました。自分が想定していなかったけれども必要なページが見つかったりします。

コーポレートサイトって構成ほぼ同じです。どんな業態業種でも何個か調べれば似たようなコンテンツページになっているので調べ方は同じです。

必要コンテンツページを洗い出す

競合サイトからこのページありだな、とか、このページは不要、とか考えて、その１「企画」で整理したことを見返して必要ページを整理します。

ページコンテンツをカテゴリ分けする

ページ数がそんなに多くなくカテゴリ分けも大変ではないので整理した必要ページを並び替えてサクッとサイトマップ化します。階層は「できるだけ少ない階層にする」といいのでこのボリュームだと3階層目までが迷わなくていいです。

パワーポイントで作成できます。パッと見て分かりやすいですね。こんな感じ。

このサイトマップは大きく２つの目的に分けています。競合優位性アピールと情報提供のページです。

また、分かりやすくするポイントとして第2階層目に下層ページの目次的役割ページを差し込むといいです。実際のページ（「事業内容」ページ）はこんな感じ。

エクセルにしてサイトマップを整理する

一覧性の担保、サイトマップ変更時対応がしやすい、付加情報（ここではURL、内容）を管理可能

というメリットがエクセルだとあります。

ステップ２：ワイヤーフレームを作成する

ワイヤーフレームは個々のページのレイアウトやコンテンツ配置を決める設計図です。

• 情報整理
• ページレイアウトを決める
• プロジェクトメンバーと認識を合わせる
• アイデア出しや議論の「たたき台」にする

というメリットがあります。こんな感じ。

ワイヤーフレームを作る基準は以下の通り。

• ページのコンテンツが、他のページに比べて大幅に異なるページ
• そのサイト特有のレイアウトを使用しているページ
• そのサイトにおいて非常に重要な役割を担うページ

サイトマップから必要ページを確認してみます。

サイトマップ図を挿入→ワイヤーフレーム制作ページに赤枠で印をつける

レイアウトを決める

1カラムレイアウトにしました。１列にコンテンツを並べるレイアウトのことです。最近の主流です。どの競合サイトを見ても1カラムだったのでという理由で決定。（他タイル型、マルチカラム、サイドバー固定、などあります）

一応メリットデメリット確認しておいて必要なコンテンツ内容を頭に入れておきます。

1カラムレイアウトのメリット

• 画面を横に大きく使うため、インパクトを与えやすい
• 上から順番に見えていくため、ストーリーが作りやすい

1カラムレイアウトのデメリット

• コンテンツの量が多いと縦に長くなりすぎるため、読みにくい
• 品質の高い画像や動画などの素材がないと寂しく見えてしまう

ある程度図や写真は必要だな、ということが分かります。

トップページワイヤーフレームの「下書き」を作る

僕はまず以下の手順でトップページのワイヤーフレームをざっくり作りました。トップページワイヤーフレーム下書きと言っておきます。

なんでかというと、細かくワイヤーフレーム作っていくにはトップページはボリュームが多かったから。ボリュームが多いとコンセプトとかコンテンツ内容とかがブレると思ったんです。なのでトップページだけは簡単に下書きを書いた、ということになります。

トップページワイヤーフレーム下書きの作成ポイントは以下の３点。

• 「企画」で定義したサイトコンセプトを左に書く
• その方向性とずれないようにレイアウト枠組みだけ並べる
• その右にそれぞれのコンテンツポイントを書き出していく

こんな感じ。

全ページに共通するところを詰めていく（ヘッダー、フッター）

ここからトップページワイヤーフレームの内容を詰めていきます。

まずは全ページに共通するところを作るのが分かりやすいです。つまりヘッダー、フッターのことですね。（このオリジナルサイトではフッターの上の「お問い合わせ」も全ページに共通するので合わせて詰めていきます。）

ヘッダーワイヤーフレーム

全ページで使用するサイトの一番上に表示される目次です。

• サイト全体の目次として情報を整理する
• どのページからでもエントリーできるようにする

ロゴは左寄せ、問い合わせは他ページと色分けして右寄せという他コーポレートサイトのセオリー通り配置していきました。

フッターワイヤーフレーム

ページの一番下に表示される要素。ここもヘッダーと同じく、全ページに共通して表示される部分。

サイト全体像が分かるサイトマップを配置するとユーザビリティが高まります。僕はサイトマップのフッターの上に「問い合わせ」への誘導リンクを大きく配置するようにしました。サイトの目的が「問い合わせして欲しい」もしくは「資料請求して欲しい」からです。全ページにあればいいですよね。

トップページワイヤーフレームを完成させる

トップページは一番最初に見られるであろう部分、サイトの顔です。なので一目で内容をなんとなく理解させ下層ページへ誘導していく、ということになります。

ポイントとして

• 見てもらいたいコンテンツから順番に並べる

です。頭から見て自分に関係のないサイトだと思われたら離脱されてしまいます。

という前提の元、下のワイヤーフレームを見てください。特に強調したい下層ページへのリンクボタンはオレンジで色付けして分かりやすくしています。

他ページワイヤーフレームを作る

「ヘッダー」「フッター」は他ページも同じなのでコンテンツエリアを考えていきます。

コンテンツエリアにはサイトマップのエクセル版にてまとめた「コンテンツ内容」を具体的にレイアウトしていきます。

ワイヤーフレームは全ページ必要ではなくて、特有のレイアウトになっていれば作っておく、ということになります。

サービス１、2、３とかだと同じレイアウトにはなりますしテキストと図を変えるだけならワイヤーフレーム はいらないですよね。

例として特徴ページは以下の通りです。

サイトマップ、ワイヤーフレーム制作ツール

実際の卒業制作ではパワーポイント、エクセルで作りました。個人で制作する分には十分。

この記事ではAdobeXDを使いました。画像書き出し（jpgに書き出す）ができるからです。

他プロジェクトメンバーがいるならCacooとかも選択に入るんですけど個人で制作する場合には使いやすいツールでいいかと思います。

「独学」で効率よく０からWeb制作スキルを身につける手順【案件受注につなげる勉強法】「設計」で使用するツールに概要ザクッと書いてますのでそちらも参考にしてみてください。

まとめ：設計はデザインの下書き

サイトマップは、

• 競合サイトのページ構成を調べる
• ページコンテンツをカテゴリ分けする
• エクセルにしてサイトマップを整理する

ワイヤーフレームは、

• レイアウトを決める
• トップページワイヤーフレームの「下書き」を作る
• 全ページに共通するところを詰めていく（ヘッダー、フッター）
• トップページワイヤーフレームを完成させる
• 他ページワイヤーフレームを作る

という流れで作りました。

「設計」はページの繋がり、配置コンテンツ、レイアウトのポイントを書くだけの簡素な図ですけどデザイン制作時にバリバリ活用していくので必要な工程です。

「設計」がしっかりしていると「デザイン制作」ではデザインのルールを決めることがメインとなります。細かいコンテンツについてはワイヤーフレームの通りにすればいいだけ、ということ。

設計はデザイン制作における下書きのようなものですね。

この記事はここまでです。