ワイヤーフレームの作り方（練習問題）

WEBディレクションの修練場では、Web制作の現場で起こるさまざまなタスクをこなしながらWebディレクションスキルを磨いていただきます。

今回のお題はワイヤーフレームの作り方。

ワイヤーフレームはWebページの設計書。
ワイヤーフレームでページに盛り込む構成要素が決まり、デザイン時のレイアウトもこの段階で固めます。
ワイヤーフレーム作りはWeb制作のスタート時の超大事な仕事です。

この演習を通して基本のワイヤーフレームをおさえておきましょう。

お題

クライアントから先日のサイトマップでOKが出た。
これからWebデザイン制作を進めるに当たって、Webサイトのトップページのワイヤーフレームを作りたい。

【今回のお題】
サイトマップを元にトップページのワイヤーフレームを作る。

トップページはサイトの顔となるページ。
サイトマップを見ながら全ページへの導線を漏れなく作ります。
ワイヤーフレームでは、情報の優先順位やCVポイントも意識しましょう。

ワイヤーフレームはパワポ（Googleスライド）、Excel（スプレッドシート）、Adobe XDなどで作ることが多いです。
使い慣れたツールであれば何でもいいですが、今回はGoogleスライドを使います。

Webページは「ヘッダー＋コンテンツエリア＋フッター」で構成されます。

GoogleスライドはA4縦に設定して作っていきましょう。
（縦の長さが足りない場合は縦幅を随時変更していけばいいです）

ホーム（ロゴ）と主要な親ページ（第2階層）へのナビゲーションリンクを入れます。
また、問い合わせ獲得がサイトの目的になりますので、CVボタンは右上に目立つように配置します。

コンテンツエリアは「メインビジュアル＋それに続くコンテンツ」で構成されます。

特にページを開いた時に最初に見える部分「ファーストビュー」が超大事です。
ファーストビューで魅力を訴求して、ページをスクロールして読んでもらったり、他のページの情報を見てもらうことが大事。
LPではファーストビューでの離脱率が7割もあるとかいうデータもあるぐらいです。

ファーストビューに当たる、ページ最上部の「メインビジュアル」と、それ以下に続くコンテンツを順に作っていきます。

会社、商品、サービスなどのキャッチコピーを大きく配置します。
また、問い合わせ目的でサイトを訪れる人もいるので、迷わずにすぐ問い合わせできるようにCVボタンも配置しておくのが定石です。

メインビジュアル以下のコンテンツは「各親ページの概要説明＋リンク」の構成が自然です。

「どの情報をどの順番で載せればいいか？」は会社・商品・サービスの認知度や、新規ユーザー・リピーターの割合などによって変わってくるところですが、今回は新規ユーザーが多いことを想定した構成にしてみました。

今回は上記以外のコンテンツについては優先度は低いと判断し、メインコンテンツには入れませんでした。
→フッターナビに盛り込みます。

強み

サービス案内

導入事例

お知らせ

会社案内

CVエリア

フッターは、ユーザーにサイト内をもっと見てもらえるように、サイト内のコンテンツリンクの一覧を設置しておきましょう。

完成形がこちらです。

ワイヤーフレームをダウンロードする
※「ファイル」→「コピーを作成」から保存してお使いいただけます

おつかれさまでした！

ワイヤーフレームは「トップページ1p＋下層ページ1p～」のパターンで作ることが多いです。

中にはトップページを複数案出す場合もあります。
下層ページはデザインのパターンだけ作ります。
あとはスマホ版を作ることも。

また、ワイヤーフレームはあくまでページの要素やレイアウトなどの情報設計をするものです。
ただ、お客さんによっては「イメージがつかめないよ」となるので、その場合はフォントや配色や素材やテキストなどを具体的なものを当てこんで（詳細度を高めて）作ることもあります。

ワイヤーフレームを作るツールは色々ありますが、パワポ（Googleスライド）、エクセル、Adobe XDなどがメジャーどころです。
ツールの使い方は現場で覚えればいいので、ワイヤーフレームの中身重視でいきましょう。