ウェブサイト、ランディングページの構成の次は、デザインに進めるためにワイヤーフレームで設計図を作成します。
スプレッドシートの情報だけでもデザインできますが、情報設計に齟齬がないようにワイヤーフレームを作成するとデザイナーと方向性を合わせられるため便利です。
ワイヤーフレームのイメージ
ハイファイブの自社サイトを作成する際にAdobe XDで作成したワイヤーフレームです。
全ページ分の構成をワイヤーにすると工数が多くなってしまうため、汎用的な部分はコンポーネント（パーツ）としてワイヤーを作成する場合もあります。
自社サイトということもあり着色や装飾のイメージまでワイヤーの段階で作成していますが、通常はモノクロで情報設計をメインとした制作となります。
ヘッダーの要素や各ページのセクションの内容、ボタンの配置などを確認できるよな設計図です。
ワイヤーフレーム作成のポイント
先述の例ではモバイル用のワイヤーフレームがありませんが、設計時に意図したモバイルの振る舞いがある場合にはモバイル表示用のワイヤーも作成します。
- クライアントにサイトの構成が伝わる
- デザイナーがデザインできるだけの情報がある
基本的には上記のような内容が伝われば問題ありませんので、スプレッドシートをワイヤーフレーム替わりにするケースもあります。
コンポーネントのワイヤーフレーム
サイトに必要な要素（コンポーネント）だけをデザインする想定のワイヤーフレームです。
CMSでコンテンツを直接作っていく場合に作成しています。
WordPressなどで固定ページを作成し、ブロックエディタでコンポーネントを組み合わせるイメージです。
サイト運用者が自分でページ構築がおこなえる場合に採用することがあります。
簡易な動作の確認も
XDやFigmaでワイヤーフレームを作成する際、メニューの動きやスライドショーなどの動作も同時に確認ができるように作成しますが、この段階ではイメージに留まるため作り込みはいたしません。
メディアサイトのワイヤーフレーム
メディアサイトの構築やウェブサイトにブログを導入する場合に、投稿画面のパーツのデザインが必要です。
ワイヤーフレームの段階で利用するパーツを決め、あらかじめ約束事を考えておきます。
実際にブログ記事を投稿する方に使っていただきながら、運用中に修正することも可能です。
使ってみないと分かりづらいことが多いですので、取り組みながら改善をおこないます。
情報設計で気をつかうところ
トップページだけで完結しお問い合わせに繋がれば、1ページだけというのがベストではあります。
が、なかなかそういう訳にもいきません。
ハイファイブではサイト運用・保守の際にはヒートマップを導入してユーザー行動を分析していまが、1ページを最後までスクロールするよりも、ヘッダーメニューや途中のリンクをクリックする数は多く、ユーザーは自分が見たい情報があれば回遊することが分かります。
各ページに十分なコンテンツを掲載しつつ、回遊を意識した導線設計が重要だと実感しています。
グローバルナビ
グローバルナビ、いわゆるヘッダーにあるメニューは、特に分かりやすく設計しましょう。
サイトを訪れるユーザーが見たいページを優先順位をつけて配置します。
ウェブサイトのリニューアルなど、すでにアクセス解析のデータやヒートマップが見れる場合は、人気のあるページに回遊しやすいように構成を考えます。
CTA
お問い合わせページにつながるボタンも分かりやすく目立つ配置にしましょう。
サイトによっては複数のCVポイントがあります。
ページごとに最適なCVポイントを用意する場合の配置や、遷移したあとの使いやすさも注意します。
・サービス紹介ページには、そのコンテンツの資料ダウンロードボタン
・会社概要ページでは、会社説明の資料がダウンロードできるボタン
・事例紹介ページでは、事例集をダウンロードできるボタン
など、お問い合わせ以外にもCVポイントがある場合には、ワイヤーフレームの段階で整理しておきます。
フッター
フッターは案外軽視されやすい箇所かもしれません。
ヒートマップを見ていてもページの最下部まで進むユーザーは確かに少ないですが、下まで進んで行く先がないと離脱の原因になりかねません。
フッターはある程度サイト内のリンクを充実させ、回遊しやすい設計にしましょう。
次回はデザインについて考えていきましょう
ワイヤーフレームが作成できれば、次はデザイン工程です。
設計図に色塗りをするだけでなく、コンテンツの魅力が引き立つようなデザインが出来ると良いですよね。
私はデザイナーではないため技術的なことは詳しく書けませんが、例えば「デザインを発注する際に気を付けるポイント」のような視点で次回からの「デザイン編」をお送りできればと思います！
