石橋 敦子
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？
実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。
ウェブサイト設計の時に役立つ７つのテクニック
- ファーストビュー
- 関連性
- 具体性
- ウェブライティング
- リンクの装飾と配置
- 目線の操作
- 他サイトでの慣習
まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。
ファーストビュー設計／4つのポイント
- 縦幅を節約する
- 適切なフィードバックを与える
- 下にページがつながる印象を与える
- 画像を置く
1. 縦幅を節約する
スクロールしないユーザもいるため、ファーストビューの見せ方はサイトの設計上最も重要です。ファーストビューエリアには無駄なものをなるべく置かず、縦幅を節約します。
ファーストビューラインは、主要なモニタサイズである「1024×768」に合わせます（ツールバーなどの幅も考慮してくださいね）。ただ、最近では「1280×800」が主流になりつつあるので、このあたりも意識しつつ、自社サイトを訪れる人たちのモニターサイズをアクセスログなどで確認の上、決めるとより良いです。
要チェック！縦幅は、ユーザ側の変化によって変わることもあります。今後はiPhoneやアンドロイドをはじめとするスマートフォンやiPadなどのタブレットで 閲覧した時のことも考慮に入れる必要があるサイトもあると考えられます。 【参考】画面横幅を900px以上にするメリットとデメリット。右端が欠けることに注意 タブを使って縦幅を節約する場合は下記も参考にしてみてください。 【参考】困ったときのタブ頼み？ |
2.適切なフィードバックを与える
リンク元の文言と関係性の高い情報をファーストビューに表示し、ユーザが期待していた通りの ページであることを明示します。主に「画像」と「H1要素（ページタイトル）」によって適切なフィードバックを返します。
例えば、検索エンジンの結果画面から自社サイトに入ったとき、ファーストビューで適切なフィードバックがないとユーザは間違えた！と思いその時点でサイトを去ってしまうこともあります。
要チェック！ほかの媒体からサイトに流入する場合、適切にフィードバックをしてあげることが必要です。 【参考】他媒体からユーザをスムーズに誘導するために、一貫性のある表現を ユーザ体験を考える上では、サイトの表示速度も重要な要素となります。 検索した場合に、検索結果がファーストビューに入るようにするのが、適切なフィードバックと言えます。 |
3.下にページがつながる印象を与える
ファーストビューで、ちょうどページが終わっているように見えてしまうと、スクロールしてもらえません。例えば、横線が引いてある、コンテンツがぴったりおさまっているなどの状態です。
ファーストビューのラインによって、コンテンツが途中で切れるように設計します。
Amazonの例
ファーストビューのライン近くに「大きめの画像」を置くことで、画面下端からさらに続く感じが生まれやすい
4.画像を置く
ファーストビューに画像を入れた場合、離脱率が低くなる傾向があります。文字ばかりのページではなく、分かりやすい印象になることが理由です。画像の内容自体は、良い印象を与えるものを選んでくださいね。
「ファーストビュー」については以上です。次回のテーマは「関連性」ですので、ぜひお楽しみに。
