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

Post on:2019年12月7日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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