同じ四角でも、黒いほうが重く感じられる。
同じ文字でも、太いほうが重い印象になる。
同じカードでも、情報が詰まっているほうが重く感じる。
デザインにおける「重さ」とは、実際の重さではなく、見た目の重さのことです。
上図では実際の重さで言うなら右の石のほうが重いはずですが、デザインとしての重さは左の花びらのほうが強く感じます。
この記事では、このようなデザインの文脈における「見た目の重さ」について解説します。
本記事の内容は5月25日発売の書籍『デザインは重心。サクッと学べる 重さとバランスの心理法則』でも重さをどう扱うのかを含めて体系的に解説してます。
デザインの「重さ」とは
デザインの重さとは、見た目の重さのこと。実際に重いかどうかではなく、見たときにどれくらい重さを感じるか、強く感じるかなど人の「感覚的な重さ」を指します。
重い要素は視線を引きやすい
大きいもの、暗いもの、太いものは視線を引きやすいため重い要素がある場所は目立つ傾向があります。
重いものは強く、はっきりと見え、主役のような印象になることが多いです。反対に軽いものは主張が控えめで背景になじみやすく、補助的な情報として受け取られやすくなります。
つまり、重さは「視覚的な存在感」や「見た目の強さ」に近い考え方です。
目立つものが必ずしも重いとは限らない
重いものは目線を引きつけやすいため、目立つ力に近いですが必ずしも目立つものが重いわけではありません。
例えば、上図のような濃紺と黄色では黄色のほうが目立ちますが、重さという点で見た場合は左の濃紺のほうが重く感じます。
重さはひとつの条件だけで決まらない
重さは、一つの要素だけで決まるものではありません。大きさ、色の濃さ、線の太さ、情報の密度、細かさ、コントラストなど多くの要素の組み合わせで決まります。
小さくても、真っ黒で太い文字なら存在感は強く、大きくても、薄い色で余白が多ければ軽く感じられることがあります。このようにひとつの条件だけでなく、全体の印象として「どちらが強く見えるか」を見るのがポイントです。
大きいものは重く見える
同じ色、同じ形であれば、大きいものほど重く感じられます。画面の中で占める面積が大きくなるほど、存在感も強くなるためです。
小さいものは、視界に入る量が少ないぶん軽めの印象になるため、まずは「面積が大きいほど重い」と考えるとわかりやすいでしょう。
同じ形なら大きいほうが重い
同じ円形でも、大きい円は強く見え、小さい円は控えめに感じます。
色も形も同じであっても、サイズが変わるだけで印象は大きく変化します。面積は、視覚的な重さに大きく影響する要素です。
文字も大きいほうが重い
文字も、サイズが大きいほど存在感が増して重く感じます。
見出しが本文より強く見えるのは、文字サイズによって重さが増しているのが大きな要因です。
写真も大きいほうが重い
写真は、もともと情報量が多い要素です。
大きく配置すると強い存在感を与え、画面全体を重く感じさせます。
小さな写真は補助的な印象。大きな写真は、画面全体の空気を決める主役になりやすい要素です。
重く見えやすい色
同じ大きさで背景が白い場合は、明るい色より暗い色のほうが重く感じられます。
色の明るさは、見た目の重さを大きく左右します。
黒は白より重い
黒い四角は重く、白い四角は軽く感じられます。
形や面積が同じでも、色が変わるだけで印象は別物です。黒は見やすく、強く見える色です。
濃い色は淡い色より重い
濃い青は強く、淡い青は軽やかです。
濃い赤、濃い緑、濃い紫などのダークトーンは重く感じやすく、ペールトーンなど淡い色はやわらかく、軽い印象になりやすくなります。
暗い背景は全体が重く見える
背景そのものが暗いと、画面全体に重さが出ます。明るい背景は、軽く開放的な印象になりやすいです。
同じ色の文字や写真を置いても、背景色が変われば全体の重さも変わります。背景は、デザイン全体の印象を決める大きな要素です。
重さに影響を与えるのは色そのものではなく輝度コントラスト
ここまでの説明は、背景が白い場合を前提にしています。「背景が黒の場合」は白や薄いグレーなど明るい色のほうが重く感じられることがあります。
上図のように背景の色が変わると「黒が軽く」「白が重く」感じることがあります。
重さを決めるうえで重要なのは色そのものではなく、背景とのコントラストです。
コントラストが強いものは重く見える
背景との差が大きいものは、強く目に入ります。
はっきり見えるほど視線を引き重く感じられ、背景になじむものは目立ちにくく軽い印象を与えます。
濃い文字は薄い文字より重い
前述した色についてと同様ですが、白背景に黒などの濃い文字は重く、白背景に薄いグレーの文字は軽く見えます。
文字色が濃いほど、重く感じるだけでなく、読みやすさも向上します。
強い枠線は重い
くっきりした枠線は重く、薄い枠線は軽く感じられます。
枠線が太く濃いほど、要素の境界が強くなります。境界が強いとそのパーツ全体の重さも増します。
強い影は重い
濃く大きな影は重く、薄く小さな影は軽い印象になります。
影は立体感を出すだけでなく、要素の存在感も強めます。影が強すぎると、パーツ全体が重たく感じやすくなります。
細かいものは重く見える
細かい模様や装飾は、見た目に重さを生みます。目で追う情報が増えるほど、視覚的な負荷が高くなるためです。
無地やシンプルな形は、見る情報が少ないぶん軽い印象になります。細部の量も、重さを決める大事な要素です。
模様があるものは重い
細かい模様がある面は重く、無地の面は軽く感じられます。
面積が同じでも、中に細かい情報が入ると重さは増します。パターン、柄、テクスチャは、見た目の重さを強くする要素です。
装飾が多いものは重い
影、縁取り、グラデーション、装飾線がある文字は重く感じられます。シンプルな文字や図形は軽やかです。
装飾が増えるほど情報量も増え、見た目の重さは重くなります。
細部の多いイラストは重い
描き込みの多いイラストは重く、シンプルな線画やフラットなイラストは軽く感じられます。
線の数、色数、影、質感が増えるほど細部量が増え、イラスト全体の見た目の重さも増していきます。
塗りが多いほど重く見える
線や文字は、太くなったり塗り面積が増えるほど存在感が増し重く感じ、細いものは、繊細で軽い印象を与えます。
文字、線、アイコン、枠線などは、太さによって印象が大きく変わります。
太い線は重い
太い線は強く、細い線は軽やかです。
同じ長さの線でも、線幅が変わるだけで印象は変わります。太い線は力強く、細い線は繊細に見えます。
太字は重い
太字の文字は重く、細字の文字は軽く感じられます。
見出しに太字を使うと、強く目立ちます。細い文字を使うと、上品で軽い印象にしやすくなります。
詰まっているものは重く見える
情報が詰まっているものは重く感じられます。文字、画像、ボタン、装飾が近くに集まると、見た目の密度が高くなるためです。
密度が高い場所は、見る情報が多く感じられます。そのぶん視覚的な負荷も大きく、重い印象につながります。
行間や文字間が狭いと重い
要素がぎっしり詰まったカードは重く、余白が広いカードは軽く感じられます。
同じサイズのカードでも、中に入っている要素の量で印象は変わります。余白が少ないほど、窮屈で重い見た目になりやすいです。
文字量が多いと重い
文字が多いブロックは重く、文字が少ないブロックは軽く見えます。
長い説明文や細かい注釈が集まると、その部分だけ重く感じられることがあります。文章量も、見た目の重さを作る要素です。
要素同士が近いと重い
要素同士の距離が近いと、ひとつの重いかたまりに見えます。距離が離れていると、軽く見えやすくなります。
余白は、ただの空きスペースではありません。見た目の重さを軽く感じさせるための要素でもあります。
余白をうまく使うと、要素を足さなくても主役を軽くしたり、目立たせたりすることができます。周囲の情報密度を下げて軽く見せる具体的な考え方は、デザインに余白を取り入れるコツで詳しく解説しています。
写真は情報量や暗部量で重さが変わる
写真は、文字や図形よりも重くなりやすい要素です。写っているものが多いほど、見る情報が増えるためです。
写真の重さは、明るさ、色数、被写体の量、余白の量で変わります。同じ写真枠でも、中身によって印象は大きく変化します。
暗い写真は重い
暗い写真は重く、明るい写真は軽やかです。
同じ被写体でも、明るさが違うだけで印象は変わります。暗い写真は、画面全体に重厚感を出しやすい要素です。
物が多い写真は重い
人や物が多く写っている写真は重く感じられます。空、壁、余白が多い写真は軽めです。
写っている情報が多いほど視線を向ける場所が増え脳への負荷も増します。その結果、写真全体の圧迫感が強くなり重く感じやすくなります。
色数や彩度が多い写真は重く見えやすい
色数が多い写真は目を引きやすく重く感じられます。逆に色数が少ない写真は落ち着いて軽い印象になりやすいです。
カラフルな写真は存在感が強い反面、画面の中で主張も大きくなります。写真を軽く見せたいときは、色数や明るさも意識したいところです。
図形の重さ
図形の重さは、面積、色、塗り、線の太さで変わります。シンプルな図形でも、条件が変われば印象は大きく変化します。
同じ四角でも、黒く塗られた四角と薄い線だけの四角ではまったく違う見た目です。図形は、重さの違いを理解しやすい基本要素です。
塗りつぶしは重い
塗りつぶしのアイコンや図形は、線だけのものより重く感じられます。
同じ形でも、塗りの有無で重さは大きく変わります。塗りつぶしは「面」として見えるためです。
角や突起が多い形は重く見えやすい
角ばった形は硬く強い印象になりやすい形です。角の丸い形はやわらかく軽い印象になりやすくなります。
ただし、角丸でも色が濃く面積が大きければ重く見えます。形の印象は、色やサイズと組み合わせて見る必要があります。
複雑な形は重い
複雑な形は重く、単純な形は軽く感じられます。
ギザギザ、装飾、細かな凹凸がある形は、目で追う情報が増えます。形が複雑になるほど、見た目の重さも増えやすくなります。
図形の印象については以下の記事も参考にしてみてください。
重さは条件の組み合わせで決まる
実際のデザインでは、重さはひとつの条件だけで決まりません。大きい、輝度コントラストが強い、細かいといった条件が重なるほど重くなります。
反対に、小さい、明るい、細い、余白が多い、シンプル、といった条件が重なるほど軽い印象に。
重さは、複数の要素の足し算として考えると理解しやすくなります。
大きい、暗い、太いはかなり重く、小さい、明るい、細いは軽い
大きい要素は重く、黒い要素も重く見えます。
さらに太字や太枠になると、かなり強い見た目です。見出しやタイトルが目立つのは、こうした重さが重なっているためです。
逆に小さい文字は軽く、明るい色も軽い印象になります。
さらに細字になると、かなり控えめです。補足文や注釈などに向いた軽さです。
どちらが重いかは条件の合計で見る
面積が小さくても、その他の要素が重ければ小さい文字が重く見えたり、大きくても、薄くて余白があれば軽く感じられたりすることもあります。
重さは、ひとつの条件だけで判断しません。重くなる要素をどれだけ含んでいるか、で考えると重さの調整がしやすくなります。
まとめ
デザインの重さとは、「見た目の重さ」のことです。実際の重さではなく、目に入ったときにどれくらい重く感じるかを指します。
特に大きな要素が以下の3つです。
- 大きさ（面積）
- 背景との差（輝度コントラスト）
- 細かさ（細部量）
多くの要素の組み合わせによって見た目の重さが変化します。
重さの先にある「重心」や「バランス」へ
重さを見分けられるようになると、次に「その重さがどこに集まっているか」も見えるようになります。そこから、重心やバランスの考え方につながっていきます。
重さ、重心、バランスまで体系的に学びたい方は、書籍『デザインは重心。サクッと学べる 重さとバランスの心理法則』もあわせてご覧ください。
コメント