最初に身につけておきたいデザインの基本の勉強方法

Post on:2019年12月7日

良いデザインは、突然生まれるものではない

先週、私はビジターから質問をいただきました。

優れたビジュアルデザイナーになるためには、どうしたらよいですか？

この質問に対して、どのように答えるべきか考えました。というのも、私の経験は中国語で学んだものであるからです。新しい言語を学ぶとなると、まず基礎から始めなければなりません。名詞、代名詞、動詞などがより複雑な考え方を伝える基礎になります。

言語とは、人々が互いに概念を伝える一つの手段です。ビジュアルデザインとは、視覚的言語です。つまり、ビジュアルデザインを学ぶということは、新しい言語を学習することと同じ意味を持ちます。

良いビジュアルデザインは、生まれるものではありません。作られるものです。優れたビジュアルデザイナーになるための鍵は、基本を身につけること。あなたがやみくもに努力をしたとしても、それはビジュアルデザイナーとして単に上達するだけでしょう。

ビジュアルデザインを次のレベルに引き上げるためには、マスターする必要がある基本がいくつかあります。

デザインの基本その1: 基本はタイポグラフィ

タイポグラフィを見ることで、そのデザイナーについての多くを知ることができます。なぜなら、タイポグラフィがデザインの基本的なベースだからです。

Discount Logotype

タイポグラフィだけで、デザイン全体を作成することができます。また、あなたが選ぶフォントから、デザインをタイポグラフィに基づけることもできます。デザインのタイポグラフィを改善するには、まず基本を学びます。

タイポグラフィの勉強方法

文字を扱うには、ボキャブラリーを増やすことです。トラッキング、カーニング、リーダーシップのような用語について学びます。「Typography Terms」など、タイポグラフィの用語が一枚にまとまったチートシートが勉強に役立ちます。

Webにタイポグラフィを適用する方法を学びたい場合は、「Typographic Style Applied to the Web」が参考になります。

Typography: Google Fonts Combinations
タイポグラフィだけで、デザインを作成することができます。

最後に、フォントを組み合わせる方法を学びます。「Typewolf」「FontPair」が勉強になります。フォントを効果的に組み合わせられるようになると、あなたのデザインは劇的に変わります。

フォントの選び方やサイズの決め方など、より具体的なテクニックを学びたい時には、私の論文「Typography can make or break your design」をご覧ください。

デザインの基本その2: 空白を使ってバランスをとる

空白スペースはデザインにおいて、垂直と水平方向のリズムを作り出すのに役立ちます。これはビジュアルの階層を作成する上で重要なことで、要素間の関連を形成します。

Weekly Mixtape - 08 Margin
空白スペースで、バランスとビジュアルの調和を作り出す。

BehanceやDribbbleなどのサイトで、要素を配置する方法のヒントをいつでも見ることができます。しかし、空白スペースでバランスとビジュアルの調和を作り出すためには、自分自身の感性を磨くことが重要です。

タイポグラフィを学んだ時に、文字におけるスペースの重要性に気づいているかもしれません。フォントのカーニングやリーディングを調整することは、スペースをどのように使うか目を養うための素晴らしい勉強方法です。KernTypeでは、カーニングをゲーム感覚で学ぶことができます。

The Poster Design Awards
賞を受賞したポスターのデザインを簡略化。

デザイナーとしての目を養うための勉強方法

デザイナーとしての目を養うには例えば、既存のデザインで、x軸とy軸を描き、基本的な図形にデザインを単純化し、デザインがどのようにバランスをとっているかを分析し、要素を再配置してみるのもよいでしょう。その際に、空白スペースが要素のバランスにどのような影響を与えるかに注目してみてください。

黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ

デザインの基本その3: サイズを使用してビジュアルの階層を確立する

ビジュアルの階層を作るには、サイズを使用するのが他の方法より優れています。サイズを使用して要素間の視覚的な関係を伝えることで、フローを確立できます。

グリッドが有用である理由の1つが、サイズです。

グリッドを使用すると、比率を使用して要素のサイズを決め、重要度を伝えることができます。

要素のサイズを決定したら、要素のすべてのインスタンスで同じサイズにしておきます。デザインにおいて、一貫性は非常に重要です。

Intercom’s Developer Hub

サイズのための勉強方法

ランディングページをSketch、またはワイヤーフレームで用意します。友人にそれを見てもらうように依頼してください。そして、最も目立つ要素を円で囲んでもらいます。その後、ビジュアルのウェイトに基づいて、囲った要素に番号を付けます。その結果はあなたが期待したものでしたか？

この勉強方法をするときは、以下の点に留意してください。

ランディングページのコンバージョン目標は何ですか？その目標を達成するためにどのように最適化できますか？
異なる要素間の関係は何ですか？　どの要素を強調したいですか？
あなたのレイアウトはページを通してユーザーの目をうまく導いてくれますか？

デザインの基本その4: 意味を伝えるためにカラーを使う

カラーは、多くの役割を果たします。意味を伝え、感情的な共鳴を作り、デザインに調和をもたらします。

Desktop Search Results
カラーはデザインの意味を伝えるのに役立ちます。

デザインにおけるカラーについては、私の論文「Designing in color」にも詳しく書いています。その論文からポイントをいくつか挙げました。

カラーパレットを選択する前に、デザインの目的を決める。良いデザインは、カラーパレットを目的に合わせます。
ビジターを確認する。人々は異なって、カラーを認知します。個人の好み、文化や経験に基づいて、カラーは人々に異なる影響を与えます。
カラーパレットを選択するときは、シンプルさが重要です。背景にはニュートラルなカラーを選択し、プライマリとセカンダリのアクセントカラーを選択します。最後に、他のカラーに基づいて、エラーやサクセスなどの異なるステータスに使用するカラーを選択します。

カラー理論の基本をしっかりと理解していれば、あとは実験と繰り返しになります。積極的に、新しいカラーパレットを試してみてください。

映画やショーは、カラーのインスピレーションが大きな源です。

カラーのためにあなたの目を育てるのに役立つ勉強方法

写真や雑誌など、あなたの周りのものをカラーパレットにする時間を作るとよいでしょう。そしてそのカラーパレットを既存のデザインに適用してみてください。

その結果、デザインのトーンやムードがどのように変わるかをメモしておきます。それは意味も変えますか？

終わりに

あなたの仕事を技能として扱ってください、常に改善できる何かがあります。優れたデザイナーになるためのモチベーションを身に付けましょう。

最初に身につけておきたいデザインの基本の勉強方法

良いデザインは、突然生まれるものではない