ワイヤーフレーム(画面設計)の設計とレビューのポイント

キーワード
  • #運用改善
  • #マーケティング
  • #SEO

Webサイト画面設計におけるワイヤーフレームとは?

ワイヤーフレームはWFと略されることもあり、Webサイトのページを定める設計図になります。情報の優先順位や構成を決めるもので、基本は制作するレンプレートとなるページ、もしくは全ページのワイヤーフレームを制作します。
以下が実際に制作されるワイヤーフレームとなります。

図1
図1:ワイヤーフレームの例

要件定義だけですと実際の画面イメージが分かりにくいため、画面設計を行いレイアウトの確認を行います。作業工程の途中で項目が足りないとか、そもそもページが足りないなどが発生すると、工数は大きく増えてコストに跳ね返ります。そのようなことを未然に防ぐためにワイヤーフレームで画面設計を行います。
以前はパワーポイントやエクセルで制作されていましたが、現在はAdobeXDを利用して制作されることが増えてきています。

設計とレビューのポイントはナビゲーションとコンテンツ設計

ワイヤーフレームを設計するにあたりはじめに考えるのはナビゲーション設計です。駅や道路でいうと標識にあたります。分かりにくいと迷ってイライラしますよね。Webサイトでもナビゲーション設計が上手く出来ていないとユーザーは迷って離脱してしまいます。今はスマートフォンで利用するユーザーが多く、toBのWebサイトだとPC6割、スマートフォン4割、toCのWebサイトだとPC3割、スマートフォン7割程度の利用率です。必ずスマートフォンとPCのナビゲーションを同時に考える必要があります。ナビゲーション設計で大事なのはコンバージョンボタンをどこに設置して、どの程度目立たせるか。特にスマートフォンの場合は電話によるコンバージョン率が高いため、分かりやすい位置にタップして電話がかけられるようにすると良いでしょう。また、コンバージョンボタンの設置に画面上部、または下部に固定表示させるWebサイトが増えてきています。

図2
図2:ナビゲーションと固定表示

ナビゲーション設計の次は導線設計を考える

導線設計を考える時、ユーザーがその先の情報に興味を持つ情報量を考えます。例えばアパレル系であれば写真がメインとなり、カラーやサイズ、価格といった情報が必要になります。広告バナーでもクリックされるバナーとされないバナーでは10倍ほど差がつきます。どの程度の情報でユーザーが興味を持ちクリックするかを考えることは大変重要です。

図3
図3:情報を直感的に伝える

またページの遷移としてユーザーにどのような情報を提供すると興味が湧くか考えます。アパレルなどではレコメンドやランキングなどでユーザーに興味喚起を促しています。
次はUIですが、コンバージョンボタンと遷移ボタンのUIを考えます。例えばクリックすると遷移できる画像もありますし、できない画像もあります。この差をユーザーに分かりやすくすることと、ボタンの種類にルール付けをします。ルールが統一されず色々なボタンがあるとユーザーを混乱させるだけではなく、運用時にページを加する際にどのボタンを使ったらよいか分からず、どんどんルールが複雑化してしまいます。

コンテンツ設計は自分がユーザーとして俯瞰する

コンテンツ設計をするときはターゲットがどのようなユーザーで、どのような情報を求めているのかを考えます。そしてユーザーストーリーを思い浮かべ、このページがどのような役割か定義します。そして、ただテキストを羅列するだけでは読みにくいページとなってしまいます。そのページのグラフィックをどう活用するか。グラフィックやアイコン、イラストの役割は、沢山の情報量を直感的に表現できることです。できるだけグラフィックを利用してユーザーに直感的に情報を把握できる状態にすることがベストです。

図4
図4:情報を直感的に伝える

SEOのカテゴリ設計とhタグのマークアップ構造

最後にSEO観点を考えます。ユーザーに分かりやすい情報構造とGoogleなどのクローラビリティに分かりやすい情報構造は若干異なります。ワイヤーフレーム上でSEOカテゴリ設計とhタグ設計を行うことで、Webサイト完成時に不完全なSEO設計でGoogleの評価を下げることを回避できます。

リンクSEOのカテゴリ設計

以上の観点でワイヤーフレームの設計やレビューを行えば、画面設計で失敗することは少なくなります。はじめてワイヤーフレームを設計する人も、外部制作会社に発注してワイヤーフレームをレビューする人も是非参考にしてください。

Share on

お問い合わせはこちら

クーシーブログ