ワードプレスサイト　なんだか見づらいと思ったら…　CSSだけでもすぐにできる視認性改善

ウェブコンテンツに限らず、ポスターでもマニュアルでも、何が書かれているのかを、なるべく一目でわかるように書かれているのが理想です。
私たちが扱うウェブコンテンツにおいては、一記事で1000文字～2000文字くらいになることもあり、一瞬で内容が頭に入るという事はあまりないでしょう。でも「一瞬で（どう読めばよいか、無意識に）わかる」レイアウトと、そうでないものがあります。
前者はスムーズに読み流せるのに対し、後者は無意識に考えながら読んでいるので疲れます。

せっかく書いたコンテンツ、読みづらいよりは読みやすく表示したいものですよね。ポイントは「セクションの塊」です。

読みやすいデザインを考える

ワードプレスの場合

弊社のホームページではワードプレスというCMSを使用しています。
ワードプレスの場合、数多くのテーマがありますので、それによるところが多いのですが、弊社のホームページでは、TOPページ以下のブログページ（ワードプレスでいう投稿ページ）で、情報量が多いページの場合、瞬時にコンテンツが目に入らないような感じがありました。

詳細は後程紹介しますが、問題は主に以下でした。

「視認性が良くない」パターンです。コンテンツの内容はシンプルなのに、なんだか読みづらい印象がありました。

• とはいえ、ワードプレスだから、既にスタイルが決まっているから変えるのは難しいのでは？
• プラグインを入れたり、難しいコードを書かないとならないのでは？

そんなことはありません。簡単なCSSが書ければ、ワードプレスでもスタイルデザインを変えることは可能です。

デザイン業務への重点

弊社はウェブマーケティング支援業務の一環で、解析や広告運用と並んで制作業務もありますが、「がっつりデザインをする会社」ではありません。

ブランド服や設計事務所のようなオシャレで美しいデザイン制作よりも、解析をメインにSEOを意識したホームページ設計に重点を置くため、「がっつり」デザインに重点を置くようなリソーススタイルではないので、時間はかけられません。

とはいえ、伝えたい事をコンテンツとして発信しているので、その文章が読みづらいよりも読みやすい方が良いわけです。

目指したいのは「一目で捉えられる」コンテンツの表示です。ここで触れているのは「デザイン」というよりは「レイアウト」と呼ぶ人も居るのではないでしょうか。

呼び名はなんであれ、CSSである程度は簡単に改善できます。
弊社ホームページで行った事例をご紹介します。ポイントは「セクションの塊」です。

弊社の事例

弊社ホームページのブログページ（投稿ページ）のレイアウト改善事例です。
次の画像を見てください。

1.　セクションの塊が一目で捉えられない（h2）

赤矢印の部分がh2の見出しです。ちなみにその間にあるのがh3見出しです。
h3がシンプル（すぎる）なのは後で触れますが、h2で始まるセクションが、どこからどこまでなのか、塊で捉えづらいのです。
そこで余白をつけました。

h2の上に余白を与えました。余白が境界線のように働き、h2で始まるセクションの塊が一目で捉えやすくなります。
この「一目で捉える」というのが大切なのです。読む前に捉えているのです。

後から知りましたが、デザイン界隈では「近接（情報のグループ化）」と呼ぶそうです。

2. セクションの塊が一目で捉えられない（h3）

弊社サイトではh3見出しが、かなりシンプルだったので少し装飾をつけました。これでメリハリがつき、一瞬でセクションの始まりが目に入ります。

また上述の情報のグループ化効果を狙って、h3上にも余白を付けます。

これにより、h3セクションが連続した時に「h3セクションの塊が一目で捉えられる」ようになります。

h3自体への装飾に加え、h3上に余白を与えたため、h3で始まるセクションを塊として捉えやすくなりました。

3. 画像とキャプションが塊として捉えられない

上の赤矢印がキャプションで、下の赤矢印はコンテンツの本文テキストです。
この二つのフォントはサイズも色も同じなのです。
これでは、キャプションなのか、本文なのか、「一目で捉える」のは困難です。

キャプションのフォントはそのままですが、色を変えて、斜体にしました。
この部分が画像の一部であり、本文テキストではないと「一目で捉える」事ができます。
これも「近接」の事例ですね。
この事例での画像には影をつけるなどするとさらに良いでしょう。

4.　幅が広すぎて文章を一目で捉えられない

最後に、コンテンツ幅です

最初の設定では、最大幅996pxとなっていました。
個人差はありそうですが、文字が横に伸びすぎて「一目で捉えらる」事が難しくなります。
短い文章であればさほど気にならないかもしれませんが、長い文章が横に広がるのはあまり見やすくありません。
また今ではスマホの細い画面に慣れていることも関係するかもしれません。
もう少し狭い方が「捉えやすい」というわけです。
800pxくらいにするのが良いとされています。

あくまでも、「読めるか読めないか」ではなく「一目で捉えられるか否か」で考えると良いかと思います。
一目で捉えられるコンテンツはストレスフリーでスムーズなのです。一方、そうでないものは「無意識に頑張って」読んでいる感じです。

（もちろんレイアウトが良くても文章がおかしかったら意味はないのですが）

ただし、企業ホームページのTOPページなどは、大きな文字や画像を広めに配置したりして、コンテンツ幅を広く取ることがよくあります。弊社でもそのようにしています。

「コンテンツ幅800px」というのは、あくまでブログ記事のページでの話です。文章メインの場合と、イメージメインの場合とで異なると考えればよいでしょう。

問題を整理する

今回行ったことをまとめました。

現状：

• セクションの塊が一目で捉えられない、セクションの切れ目がぼやけている
• コンテンツ幅が広すぎて、一目で情報が入ってこない

→一目で情報が捉えられず、頑張って読まなくてはならない感じがする

理由：

• h2とh3のデザインがシンプルで、他のテキストとあまり変わらず、「セクションの始まり」と捉えづらい
• タイトル上に余白がないため、「セクションの始まり」と捉えづらい
• 画像のキャプションが本文テキストと同じフォント設定

改善策：

1. <h2>上部に余白追加
2. <h3>上部に余白追加と装飾追加
3. キャプションのフォント調整
4. コンテンツ幅を狭くする

上記「改善策」は、CSSだけで簡単にできました。

さらに、例えばTOPページと投稿ページと固定ページで、それぞれコンテンツ幅を変えたりすることも可能です。（技術的な内容は、別の機会に紹介します）

「セクションの塊」を捉えやすくして、視認性アップ

上記で伝えた通り、かっこいい画像を入れたり、Jawascript等を使用して動きを出すという事ではなく、見やすいデザインにすることは可能です。
今回のポイントは「セクションの塊を捉えやすくすること」でした。

これはデザイン界隈でも「近接」というものだそうで、「デザインの4大原則」のうちの一つらしいです。

デザインの４大原則「近接」「整列」「反復」「対比」とは？｜Fare.（ファーレ） –

新しいテーマを使用している場合は、あまり考えなくてもそのように実装されている事が多いと思いますが、皆さんのホームページでも、コンテンツを「一目で捉えられる」かどうか、ぜひ一度見直してみてください

• セクションを捉えやすくするには、その始まりと終わりがはっきりすれば良い。
  • セクションの始まりである見出しに十分な装飾を付ける
  • セクション間に十分な余白を付ける
  • 画像とキャプションはまとめ、その下のテキストとは分かれて見えるようにする
• ブログ記事などの場合は、コンテンツ幅も広すぎないようにする

「メリハリ」と表現する人もいるかもしれません。
とにかく、一つのセクションがどこからどこまでなのか、わかりやすく、捉えやすくすれば、「セクションの塊」は勝手に浮き出てきます。

#ウェブサイトで見やすいレイアウト