サンプルページを読み解く

サンプル：整ったトップページ

このサンプルの読み解き

上部には会社名とメニューがあり、サイト全体の入口として機能しています。中央上には大きな見出しがあり、この会社が何をする会社なのかを短く示しています。

その下に3つのカードが横並びで配置されています。3つのサービスを比較しやすくするためです。下部には会社情報があり、ページの終わりを示しています。

なぜ整って見えるのか

• ヘッダー、本文、フッターの役割が分かれている。
• カードが同じ形で並んでいる。
• 余白があり、部品同士が詰まりすぎていない。
• 見出し、本文、ボタンの重要度が分かれている。
• 色や枠線が統一されている。

目視確認者に聞くなら

このサンプルを実際のページとして確認する場合、次のように聞きます。

• 最初に目に入るのは会社名ですか、見出しですか、問い合わせボタンですか。
• 3つのカードは同じ種類の情報として見えますか。
• 余白は広すぎず、狭すぎませんか。
• 問い合わせボタンは目立ちますか。
• スマートフォンで見たときに、カードは自然に縦並びになりますか。

最終まとめ