ワイヤーフレームとは
サイト内のページの構成要素を定義するもので、画面設計図とも呼ばれます。
各ページにどの様な項目要素を設置するか、その重要度による優先順位を可視化する目的で作成されます。
ワイヤーフレーム作成における事前確認
どこまでワイヤーフレームで表現するのかすり合わせ
ワイヤーフレームとはそもそも画面の構成要素を定義する工程ですが、レイアウトや文字の装飾など一部デザイン工程を含む場合もあります。そのため要素のみ確認すればよいのか、レイアウトを確認すればよいのか、使用されている写真、テキストなどの素材まで確認すべきなのかといった、ワイヤーフレームの表す品質レベルのすり合わせが必要です。
ワイヤーフレームのチェックポイント
サイトの目的目標、目指すUXに沿っていること
大原則としてUXデザイン、サイト構造設計の反映が反映されていること
UXデザインに基づいた設計となっているか、上位概念のサイト構造の意図が反映されているかをチェックすることが重要です。
ベースレイアウトが反映されていること
各ページの構成を作成する段階で、主要ページの基本レイアウトを決定します。
この基本レイアウトのパターンをベースレイアウトといいます。
このベースレイアウトの適合によりユーザーはページを遷移してもコンテンツの閲覧やサイト遷移が容易になり優れたUXを提供することができます。
逆にページごとのレイアウトが異なっているとユーザーはナビゲーションやメニューなどを都度、探さねばならず、ユーザービリティを低下させUXを悪くしてしまいます。
近年のWebサイトはマルチデバイス対応のためレスポンシブルになっています。
PCだけでなくスマートフォンでの閲覧用レイアウトの確認も行ってください。
共通ナビゲーションが反映されていること
サイト構造の設計時にグローバルナビゲーションやローカルナビゲーションといわれる、コンテンツのカテゴリーごとの遷移をさせるボタン群や、カテゴリー内のコンテンツ間を移動する導線を設けるためのボタン群のルールを定義します。
個のナビゲーションもベースレイアウトと同様にページごとにルールが異なっているユーザービリティ低下の問題となることから、どのページを閲覧しても問題ないような構成になっているかの確認が必要です。
コンテンツに抜け漏れがないか?
Webサイトのページは各ページごとに役割と目的が存在します。ワイヤーフレームに掲載の文章や画像素材で役割を実現できるかどうか?実現するために抜け漏れがないかを検討します。
よくある例としては、テキストのみではわかりずらい情報に対し、イラストを追加したほうが良いか?といった検討が行われます。
コンテンツにおける優先順位が反映されていること
ページ内でのコンテンツでも優先順位は存在します。意図した遷移を実現できるようなコンテンツの並びになっているか?意図した遷移がされなかった場合でも、代替のコンテンツへの誘導ができているかなどをチェックします。
コンテンツ量は適正かどうか?
目的に沿って文章量を構成要素として入れていると、思わぬ長さのページになってしまう場合もあります。スクロールをたくさんしないといけないページはユーザーのストレスが大きく、快適な閲覧体験を阻害します。その場合はページの分割などの検討が必要です。
一般的には1ページの文字量は1500文字程度が最適といわれています。
※読み物として魅力があるものであれば1万文字などの際とも見受けられますので、コンテンツの属性にあわせて検討してください。
その他、掲載や強調の意図が理解できるかどうか?
コンテンツの内容や優先順位を除いた部分での、構成要素の意図の確認です。
サイトになんとなくで配置される要素はなく、すべての構成要素に意図があるはずです。違和感を感じる構成要素があれば、どの様な意図かを確認し、採用可否も含めながら検討をしましょう。
まとめ
ワイヤフレームは構成要素の確認ツールです。ワイヤーフレームの段階で共通認識を持つことにより、手戻りなくデザイン作業を行い無駄をなくすことができます。
チェックポイントを参考に、要素の過不足、サイトルールの反映、コンテンツの優先順位をしっかり確認して、最高のWebサイトを作りましょう。