こんにちは、デザイナーのMです。

ワイヤーフレームはWEBページの作成や更新の土台として重要で、クオリティに直結する要素の一つです。
今回の記事ではその「ワイヤーフレーム」に関して、スムーズに作るにはどうしたらいいのか？といった考え方のコツを紹介していきます。

　

そもそもワイヤーフレームとは何か？

直訳では線（wire）＋枠（frame）です。その名の通り、WEBページデザインに取りかかる前に作成する「線と枠で作られた設計図」のことを「ワイヤーフレーム」と言います。

クライアント側の要望やニーズを具体的に視覚化したり、クライアント⇔制作会社間や、制作メンバー間での擦り合わせを容易にする役割を持っています。
色や文字サイズなどを細かく設計するWEBデザインとは別の工程で、ページ内に要素を「どこに」「何を」「どのように」配置するかを大まかにまとめ、レイアウトしていきます。

ワイヤーフレームを作る利点

・載せる情報や要素に足りない物や抜けが無いか、デザインに入る前に確認できる
・ユーザーが見やすく使いやすい動線になっているかを視覚的に確認できる
・完成イメージをクライアント間ならびに社内間で共有し、擦り合わせることができる

要素の数や位置関係、WEBページのテーマや目的の把握を具体的な図を通して行うことができるので、やりとりを円滑に進めることができ、スムーズなWEBページ制作の助けになります。

　

作業効率を上げる！ワイヤーフレームを作るときの考え方のコツ

①いきなりワイヤーフレームを作ろうとせず、簡単にでもよいので事前準備をすること

いきなりワイヤーフレーム作成に着手しようとすると、どのようなレイアウトにすればいいのか悩んでしまい、時間をロスしてしまいます。

・サイトマップ（WEBページの階層）の把握
・コンテンツ内容の把握
・競合サイト、参考にしたいサイトの分析

ページ全体の構成をしっかりと把握したのち、競合サイトや人気サイトを事前にたくさん確認して、まずコンテンツの配置や見せ方などを参考にすると、スムーズに作業を進めることが出来ます。

　

②作り込み過ぎない

これはよく陥りがちな失敗です。

（私も時々やってしまいます…）

要望が無い限りは、フォントや写真の配置、配色はワイヤーフレーム段階では行わない方が無難です。中途半端にデザインを入れ込んでしまうと、齟齬が生まれやすくなるばかりでなく、いざWEBデザインの作成に移行したときにアイデアの幅が狭まってしまう恐れがあります。
あくまでもワイヤーフレームは確認・共有・考え方の擦り合わせのために作っているということを忘れず、基本的にはモノトーンでシンプルにスピード感をもって作成することで、お客様をお待たせすることなくWEB制作を進めることが出来ます。

　

③「ファーストビュー」→「本文」→「締め文＆誘導」の三部エリア構成を基本に作る

◇ ファーストビューエリア

WEBページを開いたときにパソコンやスマートフォンの画面で最初に表示される範囲のことを「ファーストビュー」と言います。
このWEBページがどんな内容なのかが一目でわかるような文章や、ユーザーの要望やお悩みごと、疑問点についてくすぐる文言などを置き、ユーザーのニーズに訴えかけてどれだけ「もっと読みたい」と思ってもらえるかが大切なエリアです。

＜必要な要素の例＞

• WEBページのユーザーの目を惹くキャッチコピー
• ページの内容やメリットを要約して簡単に紹介するリード（導入）文
• キャッチ画像

◇ 本文エリア

次に続くのがページの中腹部分にあたる「本文」です。ページの内容をファーストビューよりも詳しく説明するとともに、「流れ」を盛り込むことで、ページを最後までスクロールしてもらえるように誘導する役割を持ちます。

＜必要な要素の例＞

• アピールしたい商品やサービスの具体的な中身や機能、効果の詳しい説明
• 事例紹介やお客様の声、よくある質問など、得られるメリットに関する具体的なコンテンツ

◇ 締め文＆誘導エリア

WEBページの内容を締めくくるエリアになります。
これまでの内容を総括した後に、ユーザーに対して何らかのアクションを促します。

＜必要な要素の例＞

• WEBページの内容をまとめる文章
• 「お問い合わせ」「資料請求」など、ユーザーにアクションを促すコンテンツ
• 「関連ページへのリンク」や「SNSボタン」などの誘導コンテンツ

　

④コンテンツは配置前に必ず優先順位を決める

・通常、WEBサイトはページの下に行けば行くほど、見られる確率が下がる
・ユーザーの視線は通常、画面の左上から右へと動き、端まで行くと下へ移り、
再び右へ動く…といった「Z」の形を描いて移動する

WEBページの配置は、優先度が高い情報ほどページ上部に置くことを基本として行っていきます。
ユーザーが求めている情報は一体何なのか？どういった流れで視線は移っていくのか？といった点を想像しながら先に優先順位を決めておくことで、コンテンツの配置順は自然と決まっていきます。

頭から読んでいく書籍とは違い、WEBページは検索エンジンなどから下層ページにダイレクトにアクセスすることも日常茶飯事のため、これらは下層ページの構成時にも適応すべき考え方です。

＜注意点＞

ワイヤーフレーム作成は必ずしもファーストビューエリアから行う必要はありません。
【ファーストビューエリア】はその重要性とコンパクトに分かりやすく作る必要があるという点で作成の難易度が高く、ここから作り始めてしまうと最初から作業が行き詰まり、時間をロスしてしまう可能性が高いためです。
既にクライアントから原稿を頂いている場合は別ですが、作りやすい【本文エリア】から制作することをおすすめします。

　

まとめ

いかがでしたでしょうか？
ワイヤーフレームがあれば完成イメージをクライアントや制作メンバーと共有することができ、デザインやコーディング後の修正を減らしたりアイデアを出しやすくなったりするなどのメリットがあります。
行き詰まってしまうポイントの原因さえわかってしまえば、ホームページ構成はぐっと作りやすくなります。
当記事が、時短とクオリティの高さを兼ね備えたWEBページ作りの一助になれば幸いです。