SNSでシェアする

cotoLi Webデザイン教室では、ホームページを上手にデザインするためのルールやコツを解説しています。

今回は、「同じであること、違うものであること」にもっと敏感なることの重要さを、例を確認しながら学びましょう。

デザインにおいて、見た目の美しさはもちろん、識別性を高めて使いやすい画面を作るための原則は、「同じものは完全に同じに、違うものはハッキリ変える」ことです。

中途半端に変えたり、あるいは同じはずなのに微妙に違っていることは、デザインの質を低くします。

以下で代表的な例を見ていきましょう。

色を変える

ホームページ内で使う色は、中途半端に似た色が無いように気をつけましょう。

色が同じなら同じ、違うなら違うでひと目で分かる必要があります。

例えば、この行は黒色ですが

この行になると紺色になっています。

これが交互に現れると、文章の内容以前に色がチラチラ変わることが気になってしまい

読みづらい文章になってしまいます。

形を変える

ホームページを通じて、同じものは全く同じ形で統一しましょう。

例えば下のボタンを見てどう感じるでしょうか?

微妙に形が違っているのが気になります。この違いに意味があるのか無いのか、どっちなのでしょうか?

一方、下のボタンではどうでしょうか?

形が明確に違うので、それぞれが違う意味を持っていることが明白です。

大きさを変える

大きさをハッキリ変えることも、プロらしいホームページを作るためのコツの一つです。

特に注意が必要なのは文章の注や引用の文字の大きさです。

ブログなどで、引用や注の文字を小さくしたくなることがあると思いますが、小さくするのであればハッキリ小さくする必要があります。

例えば、このように中途半端に文字のサイズを小さくするのは、文章への集中を損なう大きな原因になります。

もし文字のサイズを小さくすることで注や引用を表現したいのであれば、小さくする前の文字のサイズを大きめにとっておく必要があります。

小さくする前の文字のサイズに余裕が無いと、サイズに十分な差を付けることができなかったり、小さくした注が読めなくなったりしてしまいます。

余白を変える

忘れてはいけないのが、余白のコントロールです。

余白は情報のまとまりを表現するための重要な要素です。

例えばこのページでも、通常の文章中の行間の余白と、見出しの上にある余白との大きさを明白に変えています。

予め見出しの前の余白を大きくとることによって「ここで話題が変わりますよ」という予告をしているわけです。

このような目的で余白を使うためにも、変える時はハッキリ分かるように変える大胆さと、そうでない時は常に同じ大きさで揃える緻密さの両方が必要なのです。

SNSでシェアする