コーポレートサイトのワイヤーフレーム、気をつけるべきポイント。【ページタイプ別】

2021年04月05日 2022年01月07日

たぐと申します。
東京のweb制作会社でプロデューサーをしています。

今回は、webサイトのワイヤーフレームを作成するにあたり、ページタイプ別に気をつけたほう良いと思っていること、押さえておいたほうが良さそうと思っていることをリストにしておきます。

※こちらの内容、ひとまず、ざっと思いつくものをあげた感じなので、都度更新をしたいと思ってます。

0. 共通・ナビゲーション

グローバルナビゲーションのメニュー個数は7つ以内を目安にする。
ナビゲーションの表示はスマホ時の表示がどうなるかをあわせて検討する。（コンテンツ幅は最大でも1140px程度を目安にする。可能ならリキッドで対応。）
下層コンテンツへのリンクなのか、他のコンテンツカテゴリへのリンクなのかは識別できるようにする。
お問い合わせ導線を配置する。
カルーセルやエキスパンドで情報を隠すことは好ましくない。縦のスクロールと横のスクロールを同時にユーザーに強いるのは酷。隠しているものは見られなくても良いものとして優先度を与えたものと認識すべき。
ドロップダウンメニューやフッターサイトマップは必要性を考慮した上で配置する。
ドロップダウンメニューに配置するコンテンツのルールを作る。（表示するコンテンツの階層、全出しかピックアップか）
それが押せるものなのかどうかは、一目で理解できること。（アロー、補足テキストなど。リンク色やシャドウだけでは不十分なことが多いと心得る。）
パンくずリストを配置する。
日本人にわかりやすい表記にする。（英語を情報の主体にはしない。）
コンテンツ表示領域を狭めるスクロール追従要素は最小限に。ユーザーは価値を理解した上でコンバージョンする。

1. トップページ

企業の価値や強みをファーストビューで伝える。
メインビジュアルはリンク可能にする。
サイト全体の目次としても機能させる。下層ページへの重要導線を配置する。
最新情報や重要なお知らせをページ上部に配置する。
重要なお知らせは通常のお知らせとは別扱いにして目立つ形にする。
キャンペーンや推したいサービスは画面上部に配置し、更新性を担保する。
バナーをずらずら並べない。バナーのクオリティがwebサイトの印象を左右しないように工夫する。

2. カテゴリトップ

目次機能と訴求ポイントをバランスよく配置する。
ラベルや項目名ではなく、訴求ポイントを見出しにする。
そのカテゴリで訴えたいポイントを明確にし、キャッチコピーなどで訴求する。
情報に優先度をつけて配置する。

3. 一覧・検索ページ

一覧性を確保する。探すために必要な情報は絞る。
高度な検索機能は、検索対象のアイテム数など必要性を検討する。数が少ない場合は、余計な検索機能を持たせないほうが探しやすいケースが多い。能動的な検索行動はハードルが高いと認識すべき。
絞り込み検索機能を持たせるときは、絞り込んだ時にリストがどうなったか認識できるようにする。（絞り込み検索機能の領域を狭くする、検索結果部にアンカーで飛ばす、等）
検索のヒット数を明示する。

4. 内容詳細ページ

ユーザーの課題解決に繋がる情報になっているかという視点で検証する。
閲覧開始ページはトップページではなく、内容詳細ページである前提で導線を配置する。
ユーザーの検索キーワードを想定し、そのの答えを提示する。
結論をまず伝える。
キャッチコピー・見出しを流し読みすることでページの内容が理解できるように工夫する。
関連コンテンツへのリンクを配置し、回遊を促す。
コンバージョン導線をページの下部に大きく配置する。
SNSボタンの配置は慎重に。コーポレートサイトのお知らせはシェアされない前提で考えたほうが無難。

5. フォームページ

入力・確認・完了の３ページ用意する。
完了までのステップを表示し、今どこのステップにいるのかを明示する。
入力エラーは、各項目別にそれとわかるようにする。エラーメッセージとあわせて、入力欄そのものにも色をつけるなどしてガイドする。
入力必須項目がそれとわかるようにする。必須項目には明確に「必須」というラベルをつけ、「※」などで代用しない。
ページ遷移のボタンは大きくわかりやすく。次に進むボタンは右、前に戻るボタンは左に配置する。
個人情報取扱については、同意をしてもらわないと次に進めない仕組みを取り入れる。
いきなり入力フォームを提示するのは不親切。サイト規模にもよるが、お問い合わせガイドやよくあるご質問といった情報を含むクッションページを挟んであげるべき。