STEP 6：ワイヤーフレーム
サイトマップで必要なページを洗い出したら、いよいよ実際の画面の構成を考えていきます。この工程で作るのが、Webサイトのレイアウト設計図である「ワイヤーフレーム」です。ワイヤーフレームとは、線（Wire）と枠（Frame）だけで作られたシンプルな図のことです。ここを丁寧に行うことで、ユーザーにとって見やすく、使いやすいWebサイトの土台ができあがります。
色は使わない（モノトーンで描く）
ワイヤーフレームを作る際、最も重要な鉄則は「色を一切使わず、白・黒・グレーのモノトーンで描くこと」です。なぜなら、最初から色をつけてしまうと、見た目のデザインに気を取られてしまい、肝心の情報の並び順や分かりやすさへの意識がおろそかになってしまうからです。文字の大きさや強弱、各コンテンツの配置だけに集中するために、あえて色や画像抜きで組み立てます。
写真やイラスト・ロゴは、一旦灰色の四角などで代用して置くとよいでしょう。
また、本文の内容は一旦仮の文字列を入れることも多いですが、実際の文章を入れた時に全体のバランスが崩れるのを防ぐために、できる場合は実際に入れる文章を決めてワイヤーフレームの時点で入れると尚良いです。
情報の配置
サイトのページを開いたユーザーに対して、どの順番で情報を伝えるか考えながら情報を配置していきます。Webサイトを見るユーザーの視線は一般的に「Zの形（左上→右上→左下→右下）」または「Fの形（左から右へ読んだら、少し下がってまた左から右へ）」に動くと言われています。
文字・要素の大きさ
文字やヘッダー、ボタンなどの部品は大きすぎても小さすぎても見づらいです。初心者は大きくしがちです。裏を返して言えば、ここを押さえておくとプロらしいデザインに簡単に近づけます！
ポイント
- 本文の文字の大きさは14~16pxが基本：Googleが推奨しているのは16pxです。ただし、高齢者や子ども向けのサイトでは読みやすさを考慮して17~18pxにするといいでしょう。
- ヘッダーの高さ：PC版は70~140px、スマホ版は50~70pxが多いです。高さが大きすぎるとメインコンテンツが見づらくなるので気を付けましょう。
- 見出しを大きく：見出しの文字の大きさを本文より大きくして強弱をつけると情報が見やすいです。特に何pxがいいというのはないですが、他のWebサイトを参考にしながら調整していきましょう。
使いやすさ
見た目がどれだけ美しくても、ボタンが小さくて押せなかったり、メニューがどこにあるか分からなかったりするサイトは、ユーザーにストレスを与えてしまいます。例えば以下のようなことを気をつけます。
- ボタンは押せると一目でわかる形にする
- 文字の大きさにメリハリをつけ、読ませたい部分をパッと目立たせる
- 次に何をすればいい迷わないように、適切な位置に案内を置く
ワイヤーフレーム制作時によく「UIやUXを向上させる」のようなことを聞くかもしれません。UI、UXという言葉はそれぞれ以下の意味をもった言葉です。
- UI（ユーザーインターフェース）： ユーザーの目に触れるもの、操作するものすべて
- UX（ユーザーエクスペリエンス）： サイトを通じて、ユーザーが「体験する感情や結果」のすべて
コンテンツ幅
パソコンの画面は年々大きくなっていますが、画面の端から端までぎっしり文字が詰まっていると、横に長すぎて非常に読みづらくなってしまいます。そのため、一般的なWebサイトでは、情報をすっきりと収めるための「コンテンツ幅（文字や画像を入れる最大幅）」をあらかじめ設定します。
- パソコン： 1000pxから1400px程度の幅がおすすめです。ワイヤーフレーム1920pxの時にコンテンツ幅1000px~1200pxが最近のおすすめ
- スマホ： 一般的には、320pxから480px程度の幅が推奨。画面幅に対し90％
ワイヤーフレームを描くときは、このコンテンツ幅の中に文字や画像などの情報コンテンツが綺麗に収まるようにしましょう。また、ワイヤーフレームを作る際には、あらかじめコンテンツ幅の端にガイド線を入れると作りやすいです。
是非調べてみてください。
余白
既存のWebサイトを意識してよく見てみると、それぞれのコンテンツの間に適切な余白があったり、画面幅を縮めても、ほぼ必ず左右には小さな余白があると思います。これらの余白はデザインにおいて非常に大事な要素です。
- 上記の「コンテンツ幅」の左右に16~20pxほどの余白を入れる： 画面の端に文字などがあると読みづらいです。
- セクションごとに余白を入れる：
基本的に、セクション下に均等に余白を入れます。パソコンサイズだと60~120px、スマホサイズだと40~80pxくらいが主流です。
- 囲んだエリア内の上下左右には余白を： コンテンツを囲んだエリアを作る場合は上下左右に余白を入れましょう。基本的には上下と左右でそれぞれ均等に入れるとよいです。
- 関連度に応じて余白を変える： 関連度が高いコンテンツの間の余白は小さく、関連度が低いコンテンツの余白を大きくして、デザインの4原則の「近接の法則」に従うことで、ユーザーにとってよりコンテンツが見やすくなります。
レスポンシブ
今の時代、Webサイトはおよそ7〜8割の人がスマートフォンから見ています。そのため、ターゲットがスマホから見ると想定できる場合は、パソコン用だけでなく、スマホ用のレイアウトも同時に考えること（=レスポンシブ対応）がほぼ必須です。
PC版だと画面が広いので、横に3つや4つの要素を並べることができても、 スマホ版だと画面が狭いため、横に並んでいた要素を縦一列に並び替える、といったことがよくあります。
ワイヤーフレームを作る際は、PC版とスマホ版の両方をセットで作りましょう。
作る際のポイント
- 見出しの文字の大きさを少し小さく：でも本文よりは小さくならないようにしましょう！
- 本文を小さくしすぎない：見出しは小さくしても、本文は小さくしない、または1px程度文字のサイズを落とすぐらいです。
- 横並びがきつい場合は縦並びに：幅が足りない…と感じたら縦並びにしましょう。コーディングは簡単にできます。
- ヘッダーが入りきらない場合はハンバーガーメニューに：ヘッダーにページのナビを並べている場合、大抵幅が足りなくなります。そんな時はハンバーガーメニューに変更しましょう。