コンテンツを盛り上げる、逆引きデザインテクニック

• 作成：2015/07/27
• 更新：2016/06/29
• Webデザイン >

渾身の文章なのに読まれない、どうも読み飛ばされてる感じがする。文章内容の他に原因があるのではないか、そう感じている人はいませんか？

先週、実務で役立つ逆引きレイアウト集を掲載しましたが、今回は記事を読みやすくするための「コンテンツ」に関する逆引きテクニックをご紹介します。結構当たり前のことかもしれませんが、気をつけておきたいこと。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

イメージ

• 落ち着いた印象を出す
• 色をユーザーの記憶に残したい

写真

• アイキャッチ写真をポジティブにしたい
• 緊張感、写真を引き締める
• 幻想的な写真を使いたい
• メリハリのある料理写真

精読率

• 記事を一気に読ませたい
• ストレスを与えずに読ませたい
• 精読率を上げたい

安定感

• 視線を安定させる
• ヒエラルキーを明確にする

イメージ

落ち着いた印象を出す

DAKOTA PLANETS

全体の文字の大きさの差を緩やかにすれば、慌ただしさがなくなるので「上品で静かな」印象を与えることができます。これを「ジャンプ率を低くする」といいます。

きちんとして整ったイメージを与えたいページ、じっくりと時間をかけて読んでほしい契約フローのページ、プレミア感のあるページ、紙面ではメニュー表など。逆に文字や写真に大小差をつけると、読み手の興味や関心を惹きつけることができます。

色をユーザーの記憶に残したい

ウェブページに滞在している間、つまり記事内などで「同じ色」を繰り返してみせるようにします。同じ色を反復させることで印象に残します。

例えば、ロゴの色、h3/h4のような小見出しに使う色、リンクの色を同じにするなど、一貫性を出すほうが「このサイトはブルーのイメージだった」といった感じで、ユーザーの記憶にも残りやすいです。

写真

ダイレクトにメッセージを伝えたくないとき、様々な解釈を与えたいときは、写真やイラストなどによってメタファー（隠喩 いんゆ：間接的な表現）などを差し込むのも一手です。考えさせることで一瞬スクロールや視線移動を停止させます。

アイキャッチ写真をポジティブにしたい

悩み解決など、読者に希望を持たせたい記事を書く場合に使いたい写真の選出方法。

光が指す方向や視線の先に、広めの余白を取るとポジティブで希望的な印象をかもし出すことができます（主題を中心から外す）。逆に背後に空間を取ると過去を回想しているかのようなイメージ。

写真を囲うラインを入れる場合は、写真の邪魔にならないように無彩色（グレーがいい）の配色を使います。

緊張感、写真を引き締める

写真に反対色（緑ベースなら赤など）があると、全体が引き締まり活気がでます。

幻想的な写真を使いたい

深層心理を掘り下げていくものや、現実から離れたような内容を暗示するには、色相差が少ない配色の写真を使うと、幻想的な印象を出すことができます。

メリハリのある料理写真

料理写真などで中心にネギや鷹の爪など「色が強い」食材をトッピングすると中心がハッキリするので視線が落ち着きメリハリがつきます。

雑誌やレシピ集の料理写真を見ていると、結構共通していることがあります。

• 丸い皿は、全部入れない
• 長い皿は、斜めに撮る
• 光の当て方は、横、逆光を利用している
• 自然光を利用する
• 皿は、白色・木が多い
• 揚げ物やパンは、包み紙を下に敷く
• 被写界深度が浅い＞背景のボケを入れる
• フラッシュは使わない
• 露出補正を使う
• 横にスプーンやフォークを置く

精読率

記事を一気に読ませたい

同じ大きさ・要素を繰り返すと「続いていく」という印象を出せ、一定のリズムが生み出されます。基本原則でいうところの「反復」を使います。

正方形を並べていくタイル型グリッドレイアウト、ブログの記事でいえばh2/h3/img/リンク…など、「繰り返し」を取り入れれば、どこで「息継ぎ」すれば明確になるため、読者の集中力を低下させずに済みます。一気に読ませたいときはリズム感を意識したいところ。

ストレスを与えずに読ませたい

PCモニターの解像度が大きくなってきたり、ワンカラムの影響もあり、コンテンツの横幅を大きくしたいところですが、離脱率などが高くなっていませんか？

スムーズに読ませるために一行の長さを調整します。

行を長くすると視線の折り返しが少なくなり一気に読めるので、早く読ませたいときは便利です。しかし印刷物ならまだしも、モニター画面は横長のテキストが読みにくい。

PCモニターの場合、読みやすく適切な１行の長さは、筆者の体感だと和文で36~40文字程度（２カラムのコンテンツ領域の場合）。

エディタの幅を短くして文章を書いてみると理解しやすいかと思います。正解はありませんのでレイアウトやフォントサイズに応じて臨機応変に調整してみましょう。

精読率を上げたい

紙媒体とは違ってWebサイトでは、縦スクロールにより一気に視線が加速していきます。長文になると、記事の最後尾がどこなのか認識しにくいから、ドンドンスクロールする。

そして、子見出し（h3/h4）が分かりにくいと、見出し直下の文章も読まれにくいです。

最初はh3やh2にラインや色を入れずに、行間・文字の大きさ・文字間のみで読みやすくなるか、視線が疲れないかテストしてみましょう。

色や装飾は最後でいいかなと思います。見出しだけを読んで意味を理解できるか、少し早めにスクロールした時に読みやすくなっているか、リズミカルに視線を移動できるか。

安定感

視線を安定させる

不規則な要素があると目立つようにはなりますが、まとまりがなく不安定な印象を与えてしまいます。例えば記事中の写真やイラストは横幅を統一する、段落と写真の幅を合わせるなど、見えない線（グリッド）に沿って調整すると、ユーザーに心地よく精読してもらえます。

視線は左から右へ移動していくので、コンテンツ内のオブジェクトの端を左に揃えます。グリッドに沿って要素を配置することで、読者の視線を安定させます。

ヒエラルキーを明確にする

ヒエラルキー（階層ルール）をわかりやすいものにします。重要なものほど「はっきりさせる」。コントラストが強いほど、読者は注視します。

例えば全てを太字にせず、重要な文字のみ太字にする、h3とh4の大少差をつける、文章とh4の間に適度な余白が空いているかなど。全てを類似させないことがポイント。

あとは、精読を妨げるようなエフェクトやインタラクションがあれば削って完成。