読みやすさを左右する「見出し」

「見出し」でページにメリハリを

見出しの役割とSEO

Webページに見出しを入れる主な理由はこちらです。

SEO対策においても、ユーザービリティの高いページが検索エンジンに評価されるため、多くの方に読まれ、分かりやすいページを作ることが、結果的に検索順位を上げることにつながります。

見出しはコーディングの際「h1」～「h6」のタグを使用します。基本的に1ページ1テーマが望ましいため、大見出しの「h1」はページに1つになります。また、ルールとして中見出し（h2）の中に小見出し（h3）、その中にさらに小さい見出し（h4）などを入れます。小見出しの中に中見出しが入るような、間違った階層構造にしないよう注意しましょう。

キーワードを無理に見出しに入れようとすると、伝えたいことが伝わらなくなり、読みづらくもなります。また、見出しの内容から「自分が探している情報ではない」とユーザーに判断されてしまえば、コンテンツを読まずに離脱される可能性もあります。

流し読みでもテンポよく読み進めてもらえるよう、簡潔で把握しやすい見出しを心がけます。

見出しのデザイン

本文の内容を一言でまとめた見出し。 ですが、せっかくいい見出しをつけても、見出しと本文が同じようなデザインでは、メリハリがなく読みにくいですよね。 見出しとして目立たせるために次の要素を取り入れます。

下記は弊社で制作させていただいたサイトの見出しの一例です。

• 

  イラストを配置し可愛らしく柔らかい印象で統一感を出しました。

• 

  サイズに強弱をつけてメリハリのあるデザインです。

• 

  大きな英字と日本語の組み合わせでコンテンツの区切りが明確になります。

• 

  太い下線とイラストがアイキャッチになります。

• 

  濃い背景色とアニメーションを使用した目に入りやすいデザインです。

• 

  左側に線を入れてシンプルに強調しました。

テキストのアニメーション

下層ページタイトルや見出しなどを印象付けたい時に、可読性を考慮したうえで、テキストにアニメーションを入れることもできます。
ここでは、cssだけでできるテキストのアニメーションをご紹介します。JavaScriptを使用しないため、ページ読み込みの負担もあまり気にせずに取り入れることができます。

こちらは、テキスト一文字ずつ、時間をずらして動きをつけています。
スピードを変えたり、フェードや強弱をつけることでイメージが変わります。

S h i n e プ ロ の ホ ー ム ペ ー ジ 制 作

背景色を左から入れたアニメーションで視線を誘導します。こちらも、時間差をつけて2行目、3行目に動きを入れてあります。背景の色や幅によっては、ペンでマークしたような印象になり、本文中でも重要な部分に使用できそうですね。多用すると読みづらくなるので注意しましょう。

一度色を入れて、その後にテキストを表示します。見出しに使用するなどすれば統一感やリズムのあるページになりそうです。

テキストがバウンドされます。インパクトがあり強調されそうです。

テキストがフォーカスインされます。下層ページのタイトルに使えそうですね。

タイプライターで一文字ずつ打たれているように表示され印象に残ります。
ただ、待ち時間が長いと閲覧者をイライラさせてしまうかもしれません…。

ページの読みやすさに重要な役割を果たす見出しについてご紹介しました。
サイトにアクセスしてくださるユーザーに向けて、より理解しやすいページとなるよう細部のデザインも丁寧に制作していきます。またご要望などありましたらお気軽にご相談ください！