お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

【デザイン】文字情報を分かりやすく見せるためのポイント

どうもこんにちはJBです。

Webでもアプリでも、読ませるコンテンツが結構あると思うのですが…体裁が整っているのと整っていないのとでは、読みやすさが全然違うと思われます。
そんなわけで、どうやったら読みやすい体裁になるかしらーということを、順を追って実践していきます!

大まかなステップ

は、以下の様な感じです。最後の2つはどっちが先でもいいですけど…

  1. 情報の整理
  2. グルーピング・階層付け
  3. 味付け
  4. 余白を調整

例として、こんな感じの情報を整理していきたいと思いますよ。
no_formed
注文の多い料理店です。見にくくて宮沢賢治氏のステキな文章が全く伝わらないですね!
それでは実際にいじってみましょう!

情報の整理

言わずもがなですが、文字情報を整理します。多分誰もが無意識にやっていると思いますが、デザインを適応させるには明確化させた方がいいですよーということでしてね。
見出し・本文・付加情報などを明確にしていきます!そう、こんな感じにね。
information_organized
…みんなWordでもやってるよ!馬鹿にするなよゴラァ!となったら申し訳ないですが、まあ、そこはよしなに。

グルーピング・階層付け

続いて整理した情報について、

  • 重要度はどちらが強いのか?
  • 情報の階層はどこにあたるのか?
  • 似た情報・まとめられる情報はあるのか?

などなど検討していきます。

例えば見出しでも、大見出し > 中見出し > 小見出しみたいに力関係・従属関係があったり、同じ付加情報でも性格的に別な情報だったり…といった部分をしっかり明確にしましょう!

index_order

見出しの力関係の例です。

あとは、「同じタイプの情報には同じルールを適応させる」ということを意識して、情報の性格・力関係・階層などが同じものをキチンと認識・まとめておきます。
「うるせぇめんどくせぇーんじゃぁああ」という方は、頭の中でやってもOKです。私は面倒くさいので頭の中でやっております。
ちなみに宮沢賢治はこんな感じに。さっきとあんまり変わってないなあ…でも力関係を明確にしてみました。
organized_example

味付け

整理・検討した情報に対して、明確な区別を付けるように味付けします。
端的に言うと、

  • 重要度が強いものほど目立たせる
  • 重要度が低いものは存在感を減らす
  • 異質な情報は、差をしっかり出す

と言った感じ。続いて具体的な味付け例を挙げていきます!

フォントサイズ

フォントサイズで差を付けるタイプです。
ぱっと見分かりやすいのでいいですが、大きくする場合はスペースをとりがちになること、小さくしすぎると可読性が下がることが難点ですね…
font-size

太字/細字

フォントの太字表示/細字表示で「違う感」をアピール。文字サイズが限られている場合はこんな方法も有効です!
boldandthin

文字色の濃淡・配色

強調部分は濃いめのグレー、サブ情報は淡いグレーなどはよく見ますよね!
ただし、淡い色は濃い色より膨張して見えるため、同じフォントサイズだと逆に大きく見えてしまうことがあるので、ちょっと注意した方がいいかもしれないです。
color_difference
また、目立たせたい部分や、他とは正確が異なる情報に対して、色を使って明示するのも分かりやすい手ですねー。

装飾

見出し部分に装飾がついているのもよく見る光景。タグっぽくしたり、罫線を引いてみたり、アイコンを置いてみたり…など、手軽に他と違う感が出せます。
ornament

フォントを変える

思い切ってフォント自体を変えるのもアリです。
font
ただ、あまり多くのフォントを使うとごちゃごちゃするので注意が必要ですよ!
特に日本語フォントは複雑なので、フォントの多用はあまりお勧めしません…英語とかはかっこいいんですけどね…

こんな感じでいろいろな味付けを組み合わせて、強調表示したい部分、抑えたい部分などを練り込みます。
忘れてはならないのが、「同じタイプの情報には同じルールを適応させる」ということ。特に同一画面内なら、なるべく遵守したいところですねー…

現在の賢治はこんな感じです。

現在の賢治はこんな感じです。


レイアウト・余白調整

味付けしたものをレイアウトしてみます。こちらも整理した情報を基に、ルールを当てはめていきますよ!
グループが違う部分は、余白をたっぷりとるとか、長文の行間と付加情報の1行1行の行間は変えるとか、階層によってインデントを変えるとか…なんてのがありますね!情報の区切り部分で罫線を入れてみたり、背景色をほんのり変えるのもアリです。
layout

そんなこんなで調整すれば、何となく読みやすくなっているのではないでしょうか!どうでしょうか!
layouted_example

まとめ

いかがでしたか?
「文字は流し込みゃーいいんだよ!!」というのは大間違いで、見やすくするためには色々考えなきゃいけません。Webなどの記事を読んでくださる方、アプリを使っていただくユーザーの方、資料を配付する取引先の方、レポートを提出しなくてはいけない上司…
少しでも相手に気持ちよく読んだり使ったりしてもらいたい!
そんな時は、ちょこっとこんなことも考えてみてくださいなー
それではー!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00