ちゃんとデザインしているつもり...でも意外と見落としがちな法則とは?
最近ではパソコンやスマートフォンからさまざまなソフトを使って、
ブログやサイトを開設して初心者(私もこの部類ですが)でも
文字や画像、イラスト、グラフさまざまなモノを駆使して、
しかも簡単にデザインができるようになっています。
しかし出来たはいいものの、読みづらかったり、ごちゃごちゃして見にくいし、
魅力がないWebサイトやブログになってるなと感じることないですか?
今回は、その原因を少しだけ掘り下げて考えてみたいと思います。
例えばマージンを考えていなかったり、文章の仕分け方やフォントの使い方、
色の使い方などなど、どれひとつとってもデザインやレイアウト上で
欠かせない要素だと教わりました。
見る人に「伝えたいことが、確実に伝わる」デザインを
一緒に考えてみたいと思います。
◆仕分けの法則
まずは、テキスト文章・記事を読んで内容が区切れるところで文章を分けます。
次に注意したいのは、できるだけ漢字を少なくできる「かな表記」に工夫をします。
例えば、
「~して下さい」を「~してください」
「~と言う」を{~という」
「~に見える」を「~にみえる」
というふうに、かな表記に変えるだけでも、
文章の印象はやわらかく、読みやすくなるといわれています。
また漢字をかな表記に変え、全体の30~35%にすると読みやすく、
40%を超えると黒っぽく見えるそうです。
逆に漢字が25%以下だとかなばかりで読みにくくなるようです。
◆マージンの法則
マージンとは、画面や紙面の周囲の空きのことです。
これが適正に保たれていないと、周囲に溶け込んでしまい、
読みにくくなったり、画像やイラスト、ロゴ、グラフなど
まとまりのないものになります。
マージンの存在が見えるようなデザインならば、
それは分かりやすい、読みやすいものといえます。
マージンはテキスト文字の1.5倍をつけると
周りから十分浮き出て見えます。
こうするだけで見やすく読みやすくなるそうですよ。
◆ユニットの法則
構成する文字などの要素を組み合わせてユニット化していきます。
文字など文章のかたまりをブロックとして見てみると、
情報が伝わりやすいかどうかがわかるというものです。
そして情報の重要度も強弱をつけて表現していきます。
格差を大きくつけることで、見る側に何が重要かが表現できるのです。
◆読みやすいフォント
フォントによって全体の印象が変わります。
本文用は明朝体が多い。
細いゴシックでも見慣れているので本文に使用できる。
(新ゴシック-R、新ゴシック-L)
行書体やポップ体は全体を決定付けてしまうので無理に使用しない。
タイトルに限って使えるフォント
HGP創英角ゴシック体 UB
HGS創英角ゴシック体 UB
HG創英角ゴシック体 UB
HG創英角ポップ体
HGP創英角ポップ体
HGS創英角ポップ体
見出しに使えるフォント
HGPゴシック E
HGSゴシック E
HG丸ゴシック M-PRO
HGゴシック E
本文に使えるフォント
MSゴシック
MS明朝体
◆格差を表現する法則
タイトルに始まり、中見出し、本文へと格差を表現します。
表現格差は伝えたい内容の種類とその数によって連動していくというものです。
画像でも格差は表現できます。大きなものはより重要なものを表現しています。
大きいものから小さいものへと格差を表現しています。また、配色によっても
格差は表現することができます。その場合も配色数は少なくして格差を表現
していきます。注目してほしい部分数か所に配色し、限定して表現することで
読み手の視線を迷わせないという効果があります。
<<ジャスティファイ=均等配置をかけて行末を揃える>>
左揃えした文字ブロックが右端で不揃いになる現象は経験したことないですか?
不揃いな凸凹は見た目にきれいではなく、印象が良くないですよね。
そんな時は文章か段落を選択して「均等配置」(=ジャスティファイ)を設定すれば
解決しますよ。ぜひやってみてください。
◆デザインの基本は「ソロエル」法則
揃える基本は、頭、中央、後ろの3種類ありますが、
一番印象が強くなるのは頭ゾロエになります。
視線は常に頭を基点に上から下へと動くからです。
頭ゾロエのかたまりに別の頭ゾロエが入っていても
リズムが生まれ、揃えた印象が変わることはありません。