読ませるページデザインのセオリー

読ませるページデザインのセオリー

「どうすれば見やすいデザインができるのだろうか?」
Webの知識がまだまだ足りない私は、日々勉強中です!
今回は、読んだ本で学んだ「可視性・視覚性を高めるためのコツ」を紹介していきますね。
まず、読みやすいデザインを実践していくには、「読みづらさ」について理解しておく必要があります。
最も多いのが文字組みの問題です。

1.余白の大切さ

余白

テキストのマージンが狭い、行間が狭い、段落と段落の間隔が狭いなど、適切な余白がないと可読性を低下させてしまいます。行間は文字サイズの70%前後、1行の文字数が少ないときは行間は狭まめの方が読みやすいといったタイポグラフィの基本を押さえているかどうかで、読みやすさに差が出てきます。

また、Webサイトは紙と比べて長文が読みづらいともされていますが、スクロールエフェクトなどを用いたWebならではの表現でストーリー展開を検討することもでき、同じ長文でも工夫次第でユーザーの印象は大きく変わります。
ただ、ナビゲーションやバナーといった要素が本文と同じページに混在することも多いため、視線が迷子にならないような余白がここでも重要です。

2.情報設計・言葉の整理

見出し
構成要素の重要度は、大きさや色、ビジュアル効果などで表現されます。
見出し・本文・図版キャプションなどのバランスはとても重要です。
大見出しは「大きく、太く」表示されるように、一目で「どこから読めばよいのか」把握できると読みやすいページになります。逆に、見出しと本文の区別がつかないデザインは閲覧者を混乱させるので、色分けで対応するなど、明確な重み付けが必要です。

3.適切なフォントの選択・装飾

文字の「過度な装飾」も気をつけなければなりません。
たとえばドロップシャドウを多用したり、本文に対して見出し用のWebフォントを指定するなど、見栄えのために可読性を犠牲にするのは問題です。

 

以上のコツを踏まえながら、可読性に優れたページ設計は紙媒体のデザインからも学ぶことができます。
可読性・視認せいを考えた「読みたくなる・つい読んでしまうページ」をデザインしていきましょう!

今回参考にした「Webデザインの見本帳」は目利きとして実力がある方々が厳選したサイトを5つのテーマに分類、Webページの画像を掲載し、
注視すべきポイントを簡潔に記されています。
パラパラとめくるだけで、イマジネーションが沸いてくる一冊ですので、おススメです。

61PZnbsxsxL._SX352_BO1,204,203,200_    本

参考:Webデザインの見本帳 実例で学ぶ最新のスタイルとセオリー

 

 


Previous: 見やすいデザインの一歩!余白を活かそう! Next: Webデザインで使える!「色」の特徴を知ろう

© 2017 ALL CONNECT Inc. All Rights Reserved.