デザイン理論について学んでみよう!

17章 デザイン理論について学んでみよう!

17.1 この章の目的

  • デザインの4大原則について学びます。
  • ジャンプ率について学びます。
  • 色彩理論とは
  • 黄金比について学びます。

この章で述べられているのは、デザインの概論です。デザインの勉強っておもしろい! って思ってもらうのが目的ですので深くは扱っていません。

17.2 デザインの4大原則とは

デザインは紙やWebに関わらず、人が見てきれい! と感じる原則があります。

1-近接

似ているものを近くにまとめるということ。逆に関連のない情報は離します。

2-整列

一貫性をもたせて、中央揃え、左揃え、右揃えなどで統一すること。

3-強弱,対比

情報の優先度をはっきりとさせることです。伝えたい情報を決めて、それをはっきりさせます。

4-反復

同じトーンやマナーでサイトに一貫性をもたせることです。

以上のことがわかりやすくまとめてあります。下記を読んでおきましょう。
デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則(NxWorld)

17.3 ジャンプ率について

ジャンプ率とは、本文サイズに対する見出しサイズの比率のことです。

WEBの世界はW3Cが基準を作成しています。Web標準のサイズは18ポイントや14ポイントの太字が推奨されています。

ポイントとピクセルは違います。1pxは0.75ポイントです。また、グーグルでは読みやすいフォントとして16px、行の高さを1.2remにすることを推奨しています。

それがWebで用いる基準サイズとして、それが見出しでどの程度大きくなるか? というのがジャンプ率のことです。

ジャンプ率が大きいと、躍動感や賑やかなイメージを与えます。ジャンプ率が低いと、落ち着いたイメージを与えます。

日本経済新聞のサイトを見てみましょう。

タイトル 35px
見出し 24px
本文 12px

比率は 2.9:2.0:1となっています。

新聞など、記事を読むのがメインのサイトはジャンプ率が低くなる傾向があるようです。文章を読むのに躍動感は必要ないですね。それは文章で表現するものです。

Appleのサイトではどうでしょう。ちょうどiPhone11の発売時期でしたのでそのサイトを見てみました。

タイトル 91px
見出し 32px
本文 24px

比率は 3.7:1.3:1となっています。

躍動感が伝わるのではないでしょうか? 余白の使い方も上手ですね。

だだ大きくするのではなく、ジャンプ率を上げた場合には、余白も多めに取る必要があります。日本経済新聞のサイトと比較しても、文字数は少なく、余白が大きいのがわかります。

このサイトで、Appleが伝えたいのは、躍動感だと思います。それを直感的に伝えたかったでジャンプ率が大きくなっていますね。

基本文字のジャンプ率は3種類程度に押さえておくのが良いでしょう。それ以上の数のジャンプ率を使うとサイトがごちゃごちゃとしてきます。

17.4 色彩理論について

ここも範囲が多く、全ては触れられません。

まず色は基本の3色を覚えましょう。そしてその中間の3色。

この6色があれば、あとは組み立てられます。

色の中でも特に5役色だけ説明したいと思います。 まずカラーホイールを見てみましょう。

カラーホイール

https://color.adobe.com/ja/create/color-wheel/

色の中でも特に5役色だけ説明します。まずカラーホイールを見てみましょう。

Color wheel, a color palette generator (Adobe Color)

上記サイトで、カラーホイールを選択してみましょう。

類似色

似たような色が作成されます。基本このカラーホイールに並んでいる隣の色は、なかよしの色です。

モノクロマティック

単色のカラーパレットが作成できます。基本直線状に並んでいるのがわかります。

単色でもこんなに表現できることがわかります。それは明度、彩度、が違っているからです。

明度、彩度について
明度と彩度の違い(color harmony)

トライアド

色相環上で、120度間隔に位置する3色配色のカラーパレットが作成できます。

円グラフなどで、明確に色を分けたいときに利用します。

補色

色相環で正反対に位置する2色配色のカラーパレットが作成できます。

本来、仲が悪い色ですが、少しだけ使うと画面が引き立ちます。たくさん使うと良くないです。

コンパウンド

2色が色相環上で反対に位置するコンパウンドのカラーパレットが作成できます。

この色を利用して、その色の割合を上手に使えば、きれいなサイトになります。

シェード

純色に黒だけを混ぜた色を指すシェードカラーのカラーパレットが作成できます。

単色で、明度を調整するときに利用します。

カスタム

自分で自由に作る色のことです。理論が適用されていないと調和を図るのは難しいです。

17.5 5役色について

ここで色について理解したところで、5役色について考えてみましょう。
説明するより、見たほうが早いので見てみましょう。
次の写真を見てみましょう。

質問 自分なりに、この写真が、なぜかっこいいのか?を説明してみましょう。

画像はUnsplashから取得しました。良質なコンテンツがフリーで利用できます。

#生徒が考えるための余白です。答えが見えないために配置しています。

この画像を先程の、サイトで使われている色を分析すると 以下のようになりました。

カラーホイールで見るとこうなっています。

このカラーホイールを見ながら、5役色について考えてみます。

17.6 -5役色についての説明

  • 1-主役色

  • 2-脇役色 主役を引き立てるための色。反対色が使われることが置い。

  • 3 支配色(背景色)
    背景として全体のイメージを決定する色。

  • 4 なじませ色
    主役色が他の色から浮いてしまったときに、離れたところに渋めの色をおき、なじませます。

  • 5 アクセント色
    強い色を小さい面積に散らすと、全体が生き生きします。

支配色はブラウンです。全体のイメージを決定しています。主役は棒グラフの真ん中のオレンジの濃い色ですね。

脇役色はその反対にある、青い色です。少しだけ使われているので、画面が引き立ちます。

なじませ色は黄色ですね。明るいライトの色があるおかげで、馴染んでいます。

アクセント色は赤です。 背景の遠いところに赤いカクテルが置いてあります。背景にもところどころ利用されていますね。強い色ですが、使っている面積が小さく、画面全体が生き生きしています。

なお、デザインは主観が伴うので、ここで述べているのは違うという人もいるかも知れません。

それで良いのです。デザインの理論は数学で表せますが、最終的には感性に訴えかけるものです。大切なのは、何度も言いますが自分なりの哲学を持つということです。

プロとアマチュアの違いは何でしょうか?

プロは「なんでこうなっているの?」 と聞かれたときに、その全てに答えを持っているということです。なんとなく決めているのは素人です。

17.7 別サイトの5役色

このサイトを分析してみましょう。
ワイヤーなどの工場のようです。

Leader in manufacturing zinc and zinc-aluminium wire - Zinacor

ここのカラーホイールはこの様になっています。

背景の白の支配色以外はほとんど青です。主に青系の系統の色で決めているのがわかります。

工場なので元気な色ではなく、プロダクトが語るというコンセプトかもしれません。また、動画も入ってくるので、ある程度どの色が入ってきても合うように、ベース色を白にして、他の色を、あえて少なくしていると思われます。

かっこいいサイトですね。このように上記のように必ずしの5役色を明確に決める必要はないということです。

デザインの決定には、いろんな要素がありますが、自分なりの考えを持つようにしましょう。

黄金比について

1:1.62の比率のことです。この比率で分割すると人間は美しいと感じます。モナリザも、歴史的に代表的な芸術作品もたいていこの比率を利用しています。

ただ、初めのうちはどこに、黄金比を適用したらよいかわからないと思います。少しづつ慣れていくしかありません。

しかし、黄金比という理論があるということは知っておかないといけないでしょう。フィボナッチ数列も関係していて、自然界では黄金角でないと植物や動物がうまく成長できないようになっています。大切ですね。

こちらの記事も読んでおきましょう。

黄金比について
デザインを美しくする「黄金比」について理解しよう!(株式会社アーティス)

デザインで黄金比を用いる
黄金比ってなに?基本的な考え方とデザインへの取り入れ方(Canva)


まとめ

この章では色彩理論と、ジャンプ率や黄金比についても考えました。

勉強することがいっぱいですね。デザインは奥が深いです。

またここで述べているのも考え方の一つですので、当然違うこと思うこともあるでしょう。大切なのは、かっこいいデザインには、4原則、ジャンプ率、5役色などの理由があるということです。

裏を返せば、その理論がわかっていれば、センスが無くてもある程度は、かっこいいサイトが作れてしまうということです。理論は大切ですね。

次の章では、画像サイトの紹介やツールを紹介したいと思います。


Samurai HomeWork

Appleのデザイナーにジョナサン・アイブという人がいます。iMACなどをデザインしました。 彼はイギリスで初め、住設機器のデザイン、洗面所の配管のデザイン等をしていました。
しかし、ジョブズに見いだされて、どんどんとその才能を開花させます。
有名なデザイナーですので、その人の記事を読んでおきましょう。

2019年でアップルを退社するそうです。

ジョナサン・アイブ - Wikipedia

ジョナサン・アイヴがアップルを去る「本当の理由」(WIRED)

もし学習に行き詰まってしまったら...無料体験レッスンに
参加してみませんか?

侍エンジニア塾は、
月額7000円からマンツーマン
レッスンができます。

現役エンジニアがあなたのプログラミング学習を徹底サポート。
未経験でも挫折せず、最短で目標達成するために必要な
手厚いサポート体制が揃っています。
少しでも興味をお持ちでしたら、
無料体験レッスンへお越しください。