前回の記事で、ワイヤーフレームとは何か、なぜ必要なのかについてご紹介しました。【過去記事リンクする！】
今回は、実際のワイヤーフレームの作り方についてご紹介します。

(1) サイトマップを作る
サイトマップとは、読んで字のごとく「サイトの地図」です。
ページの構成をツリー上に表したもので、各ページにどのような内容を掲載するかを、ごく簡単に示したものです。
サイトマップの作り方については、過去記事でご紹介しています。
サイトマップの作り方【過去記事リンクする！】

(2) サイトマップを参照して、ページに必要な要素を書き出す。
例えばTOPページなら「サイトのイメージを伝える画像」「ロゴ」「メニュー」「会社情報」「事業情報」「SNSへのリンク」「キャッチコピー」「ニュース」など。
思いつくままに書き出してください。

(3) 優先度に応じて表示順を決める。
必要な要素を表示する優先度を決めます。
ホームページは、残念ながら書籍と異なり、最初から最後まで全ての内容を精読してもらえる可能性の高くないメディアです。
ですから、閲覧者がなるべく目をやる場所へ、優先度の高い情報を配置する必要があります。

(4) レイアウトを決める
他社のホームページを参考に、基本的なレイアウトを決めます。
ここでは、特に同業に拘ることはなく、良いなあと思うレイアウトを選んでいただいて大丈夫です。
こちらなど、参考になると思います。

(5) 手描きでラフ案を作る
情報の優先度とレイアウトに従い、どの要素をページのどこへ配置するかを決めます。
この段階ではきれいに仕上げる必要はないので、手書きでざっくりと配置を書いていきます。

この時に留意したいのは、ユーザー（閲覧者）の気持ちや視線です。
ホームページはPCやタブレットでの閲覧の場合、一般的に左上→右上→左下と、F字型に読まれます。
これは、ウエブ媒体特有の視線の動きで、「Fの法則」と言います。
ここでポイントなのが「F」であり「E」ではないということです。
つまり、下に行けば行くほど右側は読まれなくなり、右下はほとんど読んでもらえません。
また、スマホでの閲覧の場合は、視線は「I型」、すなわちまっすぐ下に降りていきます。
いずれの場合も、ページの最後までスクロールされる保証はありません。
つまり、長すぎるコンテンツは無駄になりますし、優先度の高いものは、とにかく上、できれば左上に配置するという工夫が必要です。
そして、文字のコンテンツばかりでは読みづらいため、適度に画像などを入れていくことが有効です。

(6) ツールを使って清書する
レイアウトがまとまってきたら、手書きを基にツールを使って清書します。
手書きだけでももちろん悪くはないのですが、データ化することで保管もしやすくなりますし、多くの人がアクセスしやすく作業しやすくなります。
ツールとしては、ExcelやPPTで十分です。

ワイヤーフレームとは何か、その必要性、作成手順についてご紹介しました。
大きなホームページだと、運営者自身がサイトのどこに何があるかがわからなくなってしまうことも多々あります。
自社でホームページを制作する場合はもちろん必須ですし、制作会社へ発注する場合も、手書きのざっくりしたものでもワイヤーフレームがあると打ち合わせはスムーズに進むでしょう。
また、web制作会社を選ぶのであれば、早い段階でワイヤーフレームを作成し、クライアントの目的に応じたコンテンツ作成に向けて話し合いを進めてくれるところが望ましいと思います。

（ライター　K.M）