Advertisement

10-visual-design-principles

 

ビジュアルデザインを学ぶうえでもっとも基本的なルール、原則10個を、現役ビジュアルデザイナーの José Torre が詳しく紹介しているので今回はご紹介します。

 

design-basic-rule-2017
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとに

 

 

ビジュアルデザインに必要な10の基本原則まとめ

#1 ポイント、ライン、シェイプ

点(英: Point)、線(英: Line)、形(英: Shape)は、どんなデザインにおいてもっとも基本的な構成要素です。シンプルなアイコンから複雑なイラストまで、これらの要素を組み合わせることでどんなデザインでも作成できます。

 

幾何学(英: Geometry)としては、ポイントはX座標とY座標の組み合わせで、Z軸を追加することで3Dになりますが、今回は2次元デザインについて詳しく知りましょう。

 

 

ふたつのポイントをつなげると線になり、無数の点でできた線を組み合わせることで、どんな形でも表現できます。上記サンプル例のように、この基本的な要素を利用することで、デザインに必要なものを自由に作ることができます。

 

 

#2 配色

人間の目は、赤から紫まで1000万色以上の色を見ることができると言われており、私たちは幼い頃から特定の色に関する意味や価値を学んでいます。

 

たとえば信号を想像してみましょう。「赤」は「止まれ」、「緑」は「進め」、「黄色」は「赤になる前にアクセルから足を離す」を意味しています。私たちは時には考えることなく、色によって全く異なる行動をとります。

 

 

色の持つ意味は、育てられた環境や文化により異なると考えられています。つまり、正しい色を選べば、形に意味や意図を持たせることが可能となります。デザインにあった色を選ぶだけで、意味やコンセプト、雰囲気をうまく追加できるでしょう。

 

color-theory-top
海外デザインブログCanva Design School Blogで公開された「Color Theory Tips and Inspiration」より許可をもらい
color-in-ui-design-2017-pt1
配色とは、他のデザイン要素と同じように、適度に使用することが大切です。最大で3つの色数に抑えることで、より良い結果を得ることができる傾向があります。デザインプロジェ
color-tool2015-top
PhotoshopVIP編集部: 2016年8月22日に公開された記事を再編集し、前回より17個のツールやサービスが増え、合計36ツールをご紹介しています。

 

#3 タイポグラフィー

タイポグラフィーは、デザイナーにとってもっとも重要で、理解するのが難しいデザイン要素のひとつです。タイポグラフィーは書かれている内容だけでなく、どのように魅せるかも大切です。

 

適切な書体を使用することで、一貫したテキストを作成できますが、簡単にできるわけではありません。間違った書体を選択するだけで、文章自体を完全に台無しにしてしまいます。タイポグラフィーは色と同様に、雰囲気やトーンを決めることができます。

 

 

ほとんどの書体は目的を持ってデザインされていますが、何であるかを学び、好みに応じて使い分ける必要があります。いくつかのフォントは、長い文章や見出しタイトルに適していたり、機能的ではっきりとした読みやすい書体かもしれません。

 

何千もの異なる書体がありますが、なにかユニークさや特殊なデザインが必要なとき以外は、クラシックな書体を利用するのをオススメします。自分だけのオリジナル書体を作成することもできますが、デザインの中でももっとも難しいチャレンジになることを覚悟しておきましょう。

 

1-bvoyx8imtwprv36xvy6ryq
デザイナーとして学ぶことができる重要なスキルのひとつは、書体を選択する力です。デザインの主要ポイントのひとつとして扱われることが多いフォント、書体は、デザインの仕上
10font-combination-top
海外デザインブログCanva Design School Blogで公開された「10 Golden Rules You Should Live by When Co

 

#4 スペース

余白スペースのバランスの取り方によって、特にタイポグラフィの見た目は良くも悪くもなります。各要素や文字がどのように関係しているかを考え、適度な余白スペース(ネガティブスペースとも呼ばれています)を取ることが重要になります。

 

 

ネガティブスペースをデザインの一部として、うまく利用する必要があり、余白スペースはユーザーの視線を誘導するのにも役立ちます。余白スペースが広すぎるとデザインが未完成っぽくなり、逆に余白が極端に少ないとごちゃごちゃした印象に見えるでしょう。

 

cts-top
海外デザインブログCanva Design Schoolで公開された「Designing for Engagement: How Color, Type and S

 

#5 バランス、リズム、コントラスト

この原則は、シンプルな要素でユニークで魅力的なデザインを作成するときに、特に役立つテクニックと言えるでしょう。ビジュアルにおけるウェイトを考慮し、デザイン上のすべての要素をバランスよく調整しましょう。

 

 

ページ内の要素をレイアウトする方法は重要で、コントラストやリズムを作成し、自分のデザインを通してストレスなく目的地へと導く必要があります。重要な要素は他から目立つようにするなどしてみましょう。

 

flow-composition-top
海外デザインブログCanva Design School Blogで公開された「Design Principles: Master Compositiona

 

#6 スケール

スケールは、リズムのコントラストとバランスだけでなく、ビジュアル階層を作成するのに役立ちます。基本的には、デザイン内の全ての要素が同じ重要性を持つ必要はなく、うまく伝えるベストな方法のひとつが、要素の縮小拡大によるシェイプの変化です。

 

 

たとえば新聞のページを考えた時に、もっとも重要にすべき要素は何でしょう。見出しタイトルは通常、とても短いでしょう。これは新聞をパッと見て、内容が面白いかどうかを確認できるよう、文字テキスト数が調整されているからです。小見出しはやや小さくし、本文はもっとも小さなフォントが使用することで、快適な可読性を表現できるでしょう。

 

5visual-hierarchy-top
海外デザインブログCanva Design School Blogで公開された「5 Principles of Effective Visual Hierarchy

 

 

#7 グリッド&整列

テトリスをプレイしているとき、ゲームクリアするために最後のバーを消すと、何とも言えない満足感が得られます。バランスのとれた見た目になるようにデザイン要素の関係を作るのは、この満足感に似ているかもしれません。

 

 

グリッドや整列は、直接目に見えませんが、本や新聞を開くと、うまく利用されているのがわかります。グリッドに沿ってデザインすることで、デザイン全体が構造化され、消化しやすくなります。

 

意図的にごちゃごちゃしたデザインを表現しているときでも、一定のルールが必要となります。整列は、特に文字テキストで重要で、経験値としては左に揃えることですが、どんなプロジェクトを手がけているかによって決まります。一般的に人間は「左から右」、「上から下」方向に読み、中央または右揃えの文字テキストは読みにくくなるでしょう。

 

gridmethod-top
海外デザインブログCanva Design School Blogで公開された「15 Reasons Why A Grid Based Approach W

 

#8 フレーミング

もともとは写真の重要な概念ですが、ビジュアルデザインにおいても適用されている原則です。イラスト、または何かを適切に組み立てることですべての違いが生まれます。

 

 

伝えたいことを目立たせたり、メッセージを強調したいときは、画像をフレームのように切り抜くことで、ユーザーの注目をうまく集めることができます。

 

 

#9 テクスチャ&パターン

著者本人は、個人的にテクスチャやパターンを素材としてデザインに使いますが、必ずしも利用する必要があるわけではありません。人気トレンドというわけではないですが、立体的で魅力的な見た目を実現できます。

 

テクスチャは印刷する用紙に正しいものを選んだり、ベベルやエンボス、UV加工を追加することで、デザインの雰囲気をガラリと変えることができるでしょう。

 

 

繰り返しを表現するパターンは、フラットデザインにリズムとダイナミックさを注入したいときに利用でき、過剰な余白スペースを補う方法としても使用できます。

 

Gorgeous-Geometric-Patterns-1280x539 (1)
これまでに幾何学パターン(英:Geometric Pattern)を、デザインにうまく活用したことはあるでしょうか。すこし変な質問に聞こえるかもしれませんが、幾何学
Backgrounds-Banner-1280x539
望む目的にもっともよくかなうように、必要な要素を組み立てる計画がデザインです - Charles Eames(アメリカのデザイナー、チャールズ・イームズ) デ

 

#10 ビジュアル・コンセプト

デザインが何を意味し、表面的なイメージの背後にある深い意味が何かを決めるのが、最後の原則「ビジュアル・コンセプト」です。

 

ビジュアル・コンセプトは、デザインの素材サイトからダウンロードできるものと、素晴らしいデザインを区別するのに役立ちます。意思を持ってデザインし、デザインのあヂエアを結び付けるためのものでもあります。フォントを慎重に、そして目的を持って選び、デザインのあらゆる部分を基本コンセプトを元に考え、一貫性を表現しましょう。

 

 

じっくりと検討、考案されたデザインは、長年に渡って使用され続けるでしょう。流行のヒップスター・デザインは素敵で可愛いですが、有効期限があるということを覚えておきましょう。

 

 

 

さいごに。

 

いかがでしたでしょう。これが良いデザインを構築する、「私の」基本原則10個です。もっとも重要なのは、10番目の「ビジュアル・コンセプト」ですが、他のすべての原則にも注意を払い、素晴らしいデザインを作成してみましょう。では、デザインを楽しんで。

 

design-basic-rule-2017
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとに

 

参照元リンク : 10 Basic Principles of Visual Design – prototypr.io