Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

見えざる力:サイズ、コントラスト、バランス

by
Length:ShortLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Alignment, Direction, and Focus
Invisible Forces: Spacing and Shape

Japanese (日本語) translation by obamik (you can also view the original English article)

この記事はデザインの「見えざる力」に関する全3回の連載の第2回目です。 前回の記事では、整列を使って方向と焦点を作り出す方法について学びました。 この記事では、サイズを変えることによってコントラストとバランスを作り出し、情報をよりわかりやすく伝えられるようにデザインする方法について学びます。

大きなものは重要に見える

これは明らかですが、要素を大きくすれば、他の小さな要素に比べて重要に見えることがよくあります。

しかし、これは視覚的な階層構造(visual hierarchy)に影響を及ぼす他の要因とあわせて考える必要があります。 例えば、次の2つの要素は同じように重要に見えます。サイズが同じだからです。

違いがあるとすれば、上の要素を先に見て、それから下の要素を見るくらいでしょう。

しかし、下の要素を上の要素よりも大きくすると、下の要素の方が重要に見えます。

ただ、太字フォントや細字フォントといった視覚的な重み(visual weight)や色のコントラストなど、サイズ以外のことによってサイズの効果が逆転することもあります。

この図では、サイズは大きいにも関わらず薄い色の要素の方が重要度が低く見えます。

しかし、同じ図の背景を濃い色にすると、薄い色の(大きい)要素の方が目立ちます。これは小さい要素よりも背景の色とのコントラストが大きいために起こるのです。

根拠のあるサイズ変更を行う

特に昨今の小さな画面向けにデザインをする場合、サイズを変える時は意図的に行う必要があります。 フォントをむやみに大きくして、画面の貴重な表示エリアを不必要に使うのは無駄というものです。

上に述べた内容を使って視覚的な階層構造を変えることができるのですが、いずれ何らかのものを他のものよりも大きくする必要が生じるでしょう。 そういう場合でも、いい加減にやらないこと。

次の要素を見てみましょう。各要素が上の要素よりも大きくなっています。

上のレイアウトと次のレイアウトを比較してみましょう。どちらがわかりやすいですか?

2つ目の例の要素は等比スケールに基づいたサイズになっています。 つまり、各フォントサイズは、それぞれ一つ下のサイズに対する比率と、一つ上のサイズに対する比率が同じになっています。

等比スケールのフォントサイズは、お互いに比率が等しいという関係にあるのですが、 その等比の関係を使うと、デザインに統一感が生まれるのです。

実際に等比の関係を使っている例として、メール配信サービスのMailChipのロゴを見てみましょう。

チンパンジーの様々な部分を表す円は、それぞれが0.75倍になっているのがわかります。 例えば、お腹の部分を占める円は体全体の円の0.75倍といった具合です。 Hicks Designというイギリスのデザイン会社がこのロゴをデザインしたのですが、意図的にこのようにデザインしたのです。

黄金の輝きに惑わされないこと

これを読んでいる方の中には、よく話題になるいわゆる「黄金比」のことを考えている方が多いと思います。 黄金比とは約 1:1.618の比率のことです。 チンパンジーは黄金比に基づいていたとしてもその魅力に変わりはないと思いますが、客観的に見て黄金比に基づいていた方が魅力的だとは言えません。 よく話題になっているにもかかわらず、黄金比がそれ以外のよく使われる比率(0.75や0.67など)よりも美しいという証拠はないのです。

このことを示すために、メーリングリストで上の四角形の中でどれが一番美しいと思うかというアンケートを行ったことがあります。 選択肢は、正方形に加えて、短辺と長辺の比率がそれぞれ3:4、2:3、「黄金比」の長方形の計4つです。 どの四角形が一番美しいと思いますか?

アンケートの結果は以下の通りです。

  • 左上 (正方形):8%
  • 右上(3:4の長方形):29%
  • 左下(2:3の長方形):37%
  • 右下(「黄金比」):25%

見てわかる通り、いわゆる黄金比の長方形はいいところまで行きましたが、一番美しい長方形というわけではありませんでした。

2:3の長方形がここでは勝ちましたが、これについてあまり深く考える必要はありません。 ここで言いたいことは、黄金比から3:4まで、長方形であれば何でも正方形よりは美しく見えるということです。

この知識を使って、タイポグラフィーを美しくし、かつ時間を節約する方法があります。あらかじめ決まった比率の等比スケールをタイポグラフィーに使うのです。

例えば、私がいつも使うフォントサイズは次の通りです。 それぞれのサイズは、一つ上のサイズの約0.75倍のサイズ(端数は四捨五入)になっています。

黄金比ではなく0.75の比率を使うと、頭の中で計算をするのが簡単というメリットもあります。16の75%は何だっけ?簡単ですね。16の61.8%は何だっけ?えーと・・・

まとめ

サイズをどう変えるかについて考えることで、デザインはさらにわかりやすくなると同時に、使いやすくなったり、コンバージョンが増えたりします。 等比スケールを使えば、優れたデザインをより早く行うこともできます。

さて、この連載の最後の記事では、整列とサイズを使ってページを作り、空白について考えることで、デザインをもっとわかりやすくする方法について学びます。

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.