ワイヤーフレームとは？WEBサイトの設計に必要な設計資料の見方と確認方法

ブリッジのWEBディレクターの藤田です。

この記事は、制作会社から提示されたワイヤーフレームとは何か、どのように確認すればいいのかわからないという方に向けて書かれています。

ワイヤーフレームの役割や、デザインとの違い、確認する際のポイントについて説明しています。

専門性の高いものに感じられるかもしれませんが、ワイヤーフレームとはどのような考えでつくり、活用すべきかを理解してもらえることを目的しています。WEB制作をスムーズかつ効率的に進めていけるようにイメージして書きました。ぜひこの記事をお読みください。

ワイヤーフレームとは

ワイヤーフレームとは、ウェブサイトに掲載する構成要素を決定するために作成される、デザインを排除したシンプルな線画の図です。

WEBサイトのデザインの制作を行うためには、掲載する内容や順番が決まっている必要があります。

WEBサイトを機能させるためには、企業が伝えたい内容や順番ではなく、ユーザーの興味関心や心理状態に応じて情報を提供し、ニーズを満たすことで行動を促すことが求められます。そのためには、ワイヤーフレームを使用して、どのような情報をどのような順番やレイアウトでページに配置すれば良いかを検討します。

ワイヤーフレームを作るにはページの役割の定義が必要

検討するためには、WEBサイトを構成するそれぞれのページが果たすべき役割を定義する必要があります。

ページの役割を定義することで掲載するべき内容が明らかになります。

例えば、サイトのトップページの目的を「興味を引き、サイトに引き込むことで次のページに進んでもらうこと」と定義をすれば、トップページではユーザーが興味を持ちそうな内容を配置するべき、と考えることができます。

その際に、長々と説明をするのではなく、あくまでも興味を引くことを目的に、目に留まるような見出しをつけ、次のページにどのような内容のコンテンツが待っているかを端的に伝える方針が決まります。

このように、ワイヤーフレームを用いて各ページの情報設計を行い、クライアントと認識を合わせた上でデザインの制作へと進みます。

ワイヤーフレームとデザインの違い

ワイヤーフレームは情報設計を行うために作成するドキュメントです。ビジュアルデザインは、情報設計をもとに、情報を効果的に伝えるための視覚的な表現として作成します。

WEB制作の発注に慣れていないクライアントからは稀に、

「最初からデザインを見せて欲しい」

というご要望をいただくことがあります。

自社サイトをどう表現するかに強く興味が向いている場合、ワイヤーフレームを見てもイメージがわかないので、早くデザインを見たい、判断したいとお考えになるようです。

しかしながら、WEBデザインは、先ほどお伝えしたように、情報を欲しているユーザーの視点で、適切な情報を適切な順番で伝えることを目的として作成される必要があります。

達成すべき目的を決めずにデザインをすることは、何をゴールにデザインを進めれば良いのかがわからないので、私たちにとっては非常に難しい仕事なのです。

情報設計と視覚表現は分けて考える必要性がある

見た目の印象や好みでWEBサイトのデザインを決めてしまうと、どんなに美しくビジュアル表現がされていたとしても、そもそものサイトの目的を達成できないばかりか、ユーザーにとって有益ではないというネガティブな印象を与えてしまうことさえあります。

WEBデザインは、見出しや本文の文字のサイズ、写真や図版の大きさや位置、リンクなどのナビゲーション、ニュースなどの更新エリアなどを整理しながら視覚化していくので、設計なしに作ると一つの修正を行うにあたり、相対的な見直しが必要になったり、全体を再構成が必要になることもあります。

こうした手戻りは費用やスケジュールに大きな影響を与えることになるので、ページの構成要素を決め、設計フェーズでの承認を得た上でデザイン作業へと進むことが通常の進め方です。

例えば、家を建てる場合に「早く見てみたい」「早く住みたい」からと行って設計なしでいきなり作り始めることがないように、WEBサイトも設計なしではつくることができないのです。

余談ですが、「キレイなだけのサイト」という言い回しを耳にすることがあります。これは、その言葉の通り、ビジュアルデザイン「だけ」が提供されていて、ユーザー視点での情報設計が行われていないサイトのことを指し示しているものだと思います。キレイなだけで誰にも刺さらない、機能しないのは当然のことだと考えます…。

ワイヤーフレームの確認方法

では、制作会社から提案されたワイヤーフレームはどのように確認すればよいのでしょうか。ワイヤーフレームは、会社やビジネス、サービスやプロダクト、ターゲットとなるユーザー、サイトの目的やゴールなどについての詳細なヒアリングをもとに作成されます。

クライアント側では、制作会社とのヒアリングとディスカッションによって認識を合わせた、WEBサイトやページで達成すべきことが実現できそうかという視点で確認をしてもらえれば良いと考えています。

主な確認ポイントは以下に示すとおりです。
重要なのは、自社の視点ではなく、すべてサイトを訪問するユーザーの視点でチェックするということです。

• サイトの訪問の目的を達成できそうか
• コンテンツの過不足がないか
• 迷うことなく進めるか
• 情報の優先順位は適切か
• 運用しやすい構造や構成になっているか

それぞれのポイントについて解説します。

サイトの訪問の目的を達成できそうか

ユーザーは何らかの目的をもってWEBサイトに訪れます。WEBサイトの目的は、ユーザーにWEBサイトを訪問した目的を達成してもらうことです。

つまり、ユーザーが目的を達成すれば、あなたの会社のWEBサイトの目的が達成されるように作られていなければならないということです。買って欲しい、問い合わせをして欲しいという企業側の視点でつくられたサイトは、ユーザー視点が欠如しているために、購入や問い合わせを得ることは難しいでしょう。

ユーザーは何らかの問題を抱え、課題を解決する方法を探してWEBサイトに訪れているはずです。訪れたサイトの製品やサービスを用いることで、その問題や課題を解決できる、解決できそうだと思えば購入や問い合わせにつながると考えることができます。

ウェブサイトに載せるコンテンツの過不足がないか

解決できる、解決できそうだと思ってもらえないとしたら、製品やサービスの良さをしっかりと伝えられていない、欲している情報にたどりつけない、情報が足りない、などの課題がある可能性があると考えることができます。

もちろん、WEBサイトを訪れたすべてのユーザーが購入や問い合わせといった行動を起こすわけではありません。

サイトにたどり着くまでの集客動線も検証すべき要素ですが、「まずはこのページを見れば、興味をもって次のページへと読み進めてくれそうだ」「行動してくれそうだ」というイメージが持てるかどうかが重要です。

そのために必要な情報に過不足がないかは確認ポイントの一つです。足りていなければユーザーの満足は得られませんし、逆に多すぎても読んでもらえないということもあります。

ユーザー視点で適切な情報を適量提供できているかが確認ポイントです。

迷うことなく進めるか。情報へたどりつけるか

次の確認ポイントは、ユーザーが求めている情報に迷うことなくたどり着けるかどうか、です。

メニューやリンクをたどっても欲しい情報にたどり着けないと感じたユーザーはすぐに離脱します。そして二度と戻ってくることはありません。

サイトメニューや見出し、説明テキスト、ボタンの文字、テキストリンク、などの情報提供が適切かどうか、間違えやすいつくりになっていないか、押しにくくないか。

クリックやタップした先で欲している情報を用意できているかなどを確認します。

ちなみに、「押して欲しいからボタンをとにかく大きくして目立たせて欲しい」といった要望をいただくことがありますが、自分がユーザーだったらどのように感じるかを考えてみるのも大切です。「わかりやすい、ありがたい！」なのか、「押させたいんだな」なのか、それとも「何も感じない」なのか。ユーザー心理を想像してみるのも確認をするうえで必要なことだと考えています。

情報の優先順位は適切か

企業が伝えたいことと、ユーザーが知りたいことは優先順位が異なっていることが多いです。

どのような情報をどのような順番で掲載するかは、ユーザー起点の発想で考え、設計をする必要があります。

自社が今注力をしていて打ち出したい内容が、ユーザーニーズと合っているのが理想ですが、必ずしもそうとは限りません。

あくまでもユーザーの視点で掲載すべき情報の内容と優先順位を考えます。

更新など運用の考慮

WEBサイトは完成がゴールではなくスタートだ、というフレーズを耳にしたこともあるのではないでしょうか。

WEBサイトの設計は仮説にもとづいて行われるので、実際にデザインをして公開してみないと正しく機能しているかどうかを判断することができません。

公開ごとの結果をもとに、情報設計やデザイン、あるいは両方を改善しながら目的の達成に向けて近づけていくことになります。

また、定期、不定期で情報を更新してくコンテンツもあります。ページの中でどの部分が更新の対象となるのか、そのために必要な機能は何かを特定するのもワイヤーフレームの役割の一つです。

テンプレート化をして運用の効率化を図る、機能として実現をする必要があるなどの検討もワイヤーフレームをもとに考慮が可能です。

ワイヤーフレームの精度がWEBサイトの出来を左右する

ワイヤーフレームはWEBサイトを制作する際には必須の設計資料です。WEB制作においては設計資料の精度がサイトの出来を左右するといっても過言ではありません。

私たちもワイヤーフレームをもとにクライアントとディスカッションを繰り返しながら、課題や訴求ポイントを共有し、解決方法を検討します。スケジュールの中でも前半にしっかりと時間をかけて設計を煮詰めた上でデザイン制作へと進みます。

この記事では、

• ワイヤーフレームとは何か
• ワイヤーフレームとデザインの違い
• ワイヤーフレームの確認方法

についてお伝えしました。

ユーザー視点でのWEBサイトをつくりたいとお考えの方、情報設計からの支援をご希望の方は、お気軽にご相談ください。