ファーストビューの下、コンテンツ部分を作成します。
内容を整理し、適切な見出しをつけつことでユーザーに興味を持ってもらいましょう。
Webページは開いて数秒で内容が把握でき、ユーザーに「このページを読もう」と思ってもらえることが重要です。ファーストビュー以外でも、見出しを使ってユーザーの興味を惹くコンテンツが有ることを示しましょう。
コンテンツのゾーンニング
デザインの４原則「近接」で行ったように、それぞれのページに掲載する情報はブロックで整理・構造化しましょう。
そして、グルーピングした情報のブロックをユーザーの行動特性に合わせて、並び替えます。
デザインの４原則でも使用した下図は、LPで良く目にする構成です。
- ユーザーがサービスに関心を持つ
- 商品の良さを知る（納得する）
- 購入/予約というアクションを起す
この流れが出来やすいように、情報のブロックに“流れ”を作って配置しています。
では、何らかのサービスや商品を直接的に売るわけではないホーム・カテゴリのページはどうしたら良いのでしょうか？
一覧ページの場合は、情報ブロックの優先順位を基準に考えることが多いです。
ユーザーは上からスクロールしてページを見ていきます。
ですので、優先順位が高い（見せたい）情報を上に配置すると良いでしょう。
例ではショップページの一番上は店舗のコンセプトにっていますが、もし「新商品を最も見て欲しい」という場合は一番上に新商品のバナー等を配置するイメージです。
トップページに表示する内容・ターゲットを考えて表示順を決めましょう。
見出しの設計
見出しはユーザーにWebサイトに興味を持ち、本文を読んでもらうためのきっかけとなる部分です。
Webサイトを訪れたユーザーがページの内容を隅から隅までじっくり読む、ということはほとんどありません。
ぱっと画面全体を見て、気になった部分があればその項目を重点的に読んでいきます。
本文を読んでもらうためには適切な見出しの設計が必要なのです。
下記の簡単な例を見てみて下さい。
左が見出しを設定していないページ。
右は見出しを設定して、テキストにメリハリを付けたページです。
上図の例の場合、左側は目を引く要素が無く、あまり文章をじっくり読もうという気にはならないのではないではないでしょうか。そうするとユーザーはページ閲覧を止めてしまい、予約など目的のアクションを取ってくれません。
このため見出しは本文中でどんなことを伝えているのかを、ユーザーの興味をひく端的な言葉、かつページを眺めた時に目立つ形で配置する必要があります。
また、適切な見出し(hタグ)の設置は、音声読み上げツールや、検索エンジンロボットに対してもWebページのコンテンツ構造を伝えるために必要です。
見出しはユーザビリティとSEO、どちらの面でも非常に重要な要素と言えます。
見出し作成の基本
- webページで使用する見出しは
<h1>～<h6>まであります。 - 見出しの文字サイズは数字が若くなるほど大きくなるのが基本です。
- ページ全体のタイトルにもなるH1のみはメインビジュアルなど写真の上に配置する場合もあります。しかし、H2以降の見出しは基本的に文章中の見出しとして機能させます。
- IR情報を掲載するサイトなど情報構造が深くなるサイトの場合は見出しをH6まで使用しますが、そうでない場合はH4くらいまでの使用にとどめることもあります。
H1見出しの考え方と実例
H1見出しはページを統括するタイトルとして配置されます。
webサイトのトンマナ（トーン＆マナー/デザインに一貫性を持たせるルール）に応じて、H1見出しは様々なデザインが使用されています。タイトルでもあり、デザイン的に重要な要素でもあるのです。
テキストではなく企業ロゴなどの画像をH1見出しとする場合もあります。
例えば「武蔵野美術大学」では左上に表示されているロゴがH1タグで囲まれています。
次に「PayPay」の公式サイトを見てみましょう。
![](https://popshub.s3.amazonaws.com/uploads/ckeditor/pictures/4464/content_image-1600670404709.png"")
こちらは「スマホひとつで かんたんに お支払いはPayPayで」がH1見出しになっています。
トップページにはPayPayのサービス内容やメリットが書かれていますよね。“ページを統括するタイトル”として考えるとキャッチフレーズ部分の方が適切なため、こちらをH1見出しに利用しているのでしょう。
最後に詳細ページのH1見出しを見てみましょう。
下図は「softbank」の経営理念のページで、赤枠で囲った部分がH1見出しです。
ページタイトル＝H1見出しですね。
大きな文字+中央寄せになっているため、何について書かれているページなのかがすぐに分かります。トップページであればデザイン要素が強い場合もありますが、詳細ページのH1見出しはページタイトルをより明確に伝えるために利用することが多いです。
H2以降の見出しについて
見出しの文字サイズの考え方
文字サイズは小さいものから順に検討しましょう。
例えば、H4見出しまでを使用するサイトを作る場合、本文の文字サイズを16pxと決めます。
本文の文字サイズを基準にして、H4は16pxのボールド(太字)、H3は21pxのボールド、H2は28p×のボールド、と徐々に文字サイズを大きくしていきます。
こうした本文の文字サイズに対する見出しの文字サイズの比率を「ジャンプ率」と言います。
ジャンプ率を低く設定しすぎるとコントラスト感が弱く、見出しの優先度合いが分かりにくくなります。
基本的には、差が明確に分かるくらいに差を付けます。
ジャンプ率が高いほど賑やか・ポップな印象に、ジャンプ率が低いと大人っぽい・落ち着いた印象になります。このため、テキストがメインの論文サイトなどではジャンプ率を低く設定している場合もあります。
見出しのマージンの考え方
見出しに合わせてマージンも大きくとります。
H2~H4まで、数字が若いほどマージンも大きくなります。
見出しのマージンは図のように、要素の「上」に付いていると考えて設計するのが一般的です。
ただし、マージンの値や付け方に厳密な規定はありません。
コンテンツエリア最上部では、マージンを無くす場合もあります。
見出しのまとめ
人がWebサイトを見る時の速度は、車の窓から外を眺めるようなものです。物凄いスピードで情報が流れていきますね。大きな看板であれば目に留まりますが、小さな文字が細々と書かれていれば通り過ぎてしまいます。
Webサイトを開いて数秒で的確にサイトの内容を把握してもらう・止まってしっかり読みたいと思ってもらうために、見出しの設置が非常に重要になります。
◆実習
1.コンテンツを配置する
では、実習ヘアサロンサイトのワイヤーフレームにコンテンツを配置してみましょう。
少し特殊なタイプである「問い合わせ」は一旦置いておき、以下３ページ分を作成します。
- ホーム
- カテゴリ
- 詳細
このサイトはファーストビュー（ヒーロエリア）に入れているテキストをH1見出しとして、コンテンツエリアではH2以下の見出しで構成します。
テキスト決定時に優先順位も決められていますので、それに沿ってテキストと画像を配置していきましょう。
基本となる本文テキストのサイズは16pxとしました。
まずホームの配置です。
用意されている画像とテキストを配置し、見出しにコントラストを付けてみます。
②サロンの雰囲気を伝える写真(×３枚)の表示方法やリンクは後ほど考えましょう。
【ホーム】
カテゴリ（About）も同様に優先順位に合わせ、概要とリンクを配置していきます。
【カテゴリ】
より予約・お問い合わせに直結しやすい詳細ページでは、例に出てきたLPの構成に近い形のレイアウトになりますね。
【詳細】
2.パンくずリストの設置
カテゴリ・詳細ページには、ユーザーが現在地を把握しやすいようにパンくずリスト（ブレッドクラムナビゲーション）を設置します。
【カテゴリ】
【詳細】
3.クロージングの作成
ここまでで、３ページ分のコンテンツ配置ができました。
それぞれのページの下部にクロージング部分＝予約やお問い合わせなどのアクションを起こしてもらえるコンテンツを配置しましょう。
今回の実習では問い合わせ電話番号と予約フォームへのリンクをクロージングに入れるように指示されています。
パソコンレイアウトでは左右横並びの配置で設定してみましょう。
（※目立つように背景色を変える、の意味で色を反転させています。）
どこからでも予約アクションが取れるように、作成したクロージングはホーム・カテゴリにも複製して配置してください。
まとめ
いかに詳しく親切な本文（サービスの紹介・説明など）を書いても、見出しが分かりにくく、同サイズの文字がみっしりと表示されていると大半のユーザーは読もうという気持ちになりません。何について書いているのか数秒で内容を把握できるよう、インパクトのある見出しを設置して情報を整理しましょう。