デザインのこつが分かる！確実に身につけておきたいプロ直伝の50のデザインテクニック -Pro Design Tips

グラフィック、タイポグラフィ、カラー、エフェクト、要素の構造、配置など、デザインのスキルアップに役立つ50のデザインテクニックを紹介します。

50 Tips to Make You a Better Designer

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

文字間と行間を調整して、文字をイメージにフィットさせる

行間を狭くすることで、文字はブロックのように構成されます。背景の椰子の木が分かるように文字は少し透明にします。背景のイメージは読みやすさを妨げる原因にもなるため、読みやすいようにクロップして使用します。

コントラストを活かした2つのタイポグラフィ

文言を強調するためにフォントのスケールを使っています。使用しているフォント「League Gothic」は太めで縦長のフォントで、「Yellowtail」のようなスクリプトフォントの次にコントラストをつくることができます。このデザインのポイントは、階層をつくることです。背景イメージと同じトーンで、文字のカラーを選択しました。色調を抑えた効果を出すために、イメージの透明度を増やしています。

文字の配置は重要

文字を配置するときは、それが読まれるということに重点をおき、改行位置を注意してください。改行のポイントはその文章のリズムです。文字で強調したい箇所がある時には、イタリック体などスタイルを変えて使います。

彩度と大胆なタイポグラフィでつくる印象的なグラフィック

この要素の組み合わせは高いインパクトを与えます。フォントは「Norwester」で、ブロックのような書体です。背景イメージはフィルタで低いコントラストと高い彩度を与えて、印象的なグラフィックにしています。

背景イメージに画像をストライプ状にして重ねる

美しいデザインをつくるために、常にタイポグラフィを含ませる必要はありません。ここではデザインの構成を使った方法を紹介します。背景に使う丘のイメージにグリッドを設定します。水のテクスチャを75%の透明度にし、背景にストライプ状に重ねます。さらにテクスチャの面白いポイントを見つけ、そこをクロップします。

文字をグラフィックのどこに置くか

グラフィックのどこに文字を置くべきか悩みませんか？ この例では背景イメージの水平線のラインを基準に少し傾けて配置しています。そしてこの傾きを補完するために、イタリックのセリフ書体を使用しました。視覚的なハーモニーのために文字のカラーは、背景の海のカラーを適用しています。

メッセージを届けるために力強い書体を使う

書体は何を選択するかで、そのメッセージのトーンに影響を与えます。この例で使用しているフォント「Anton」はボールド体のサンセリフフォントで、力強い声を届けます。イメージと文字のコントラストを強めるために、背景イメージにブラックのフィルタを適用しています。

ベタ塗りの代わりに、繊細なエフェクトを使い要素の透明度を増やす

このグラフィックはインスピレーションが沸いてくるイメージではないですか？ このデザインの要素のポイントは、文字間隔です。少しゆったりめに組むことで、文字が呼吸しているような印象を与えます。

形を利用したデザイン

形を利用してコントラストをつくり、それを背景イメージから文字を読みやすくするために使用します。

イメージを背景のテクスチャとして機能させるためにクロップする

目に見えるもの全てが手に入るわけではありません。例えばあなたがイメージを探しているとき、背景に使うべき面白いテクスチャが見つかったら、そのイメージの一部をクロップし、ズームして利用してみるのも面白いものです。

残りは別としてデザインを設定する

微妙なニュアンスを表現するために、文字を回転させてスタイルを作っています。文字は個々に配置し、それから回転させています。イメージはこの回転した文字を配置できるスペースを確保してクロップしています。また文字のLとEは花の形と一致するようにデザインしています。

文字を配置する形はカラーを背景から適用する

作成するグラフィックのカラーの一貫性を保つために、アイドロッパーを使ってイメージのトーンをチェックしてください。ここでは空のクリーム色を文字のカラーに使用しました。ほこりにまみれたビーチのような効果を出すために、背景のコントラストは低めです。

ばらばらの写真の一貫性を保たせる方法

複数の写真をグリッド状に配置し、美しいコラージュを作ってみましょう。デザインのポイントは一貫性のために同じフィルタを適用し、構成のハーモニーを確保することです。写真の主題が異なる時でも、一貫性が保たれた美しいグラフィックを作成できます。

文字や記号を使ってクリエイティブな形をつくる

この例ではアンパーサンドを使い、グラフィックのベースにしています。小さいコピーを挿入し、背景と文字にはモノクロのパレットを使って、強いコントラストをつくっています。

背景と文字のバランス

配置する要素にどのくらいのウェイトがあるか理解し、グラフィックのバランスを作ります。この例では背景イメージの左側に多くの木があるので、文字は右側に沿って配置しました。

明るい文字と低いコントラストの背景

このグラフィックのポイントは、文字のネオンイエローのオーバーレイに対して少し暗い背景イメージが素晴らしいコントラストを生み出していることです。フォントは「Raleway」のThinを使っており、可読性に優れています。フィルタは繊細なブラーを適用しています。

正しいフォントでメッセージを伝える

フォントは視覚的にあなたのメッセージを伝えるために正しく使ってください。この例ではロジックを象徴させるために「League Spartan」を使用し、2番目の部分では想像力を描くためにクラシカルなセリフフォントを使用しています。さらにそれぞれの配置は、画像の異なるセクション空と海に分けています。

エレガントなセリフと組み合わせたジオメトリックなフォント

コントラストはグラフィックを作る上で非常に大切です。構造的な形式が一緒にうまく機能すると、さらに優れた組み合わせになります。ここでは、サンセリフのフォントとジオメトリックの形はよい組み合わせです。

メッセージを伝える文字の配置

テキストのボックスを分けると、興味をそそる文章をつくります。文字が正しい順番に読まれることは重要で、配置は慎重に行ってください。配置のポイントは、整列を意識することです。

一貫性のために色合いをイメージに適用する

これはグラフィック全体に同じカラーを使うことで、達成することができます。この例ではグラフィックのためにベタ塗りの背景にピーチを使い、それから類似の色合いのイメージを当てはめました。

メッセージを強く表現させるために形をつかう

アイデアをビジュアル的に表現する要素は、うまい構成を作ります。この例ではVIBESのVを現すために2つの形をオーバーラップさせています。Vのように見えるのと同時に、窓のように見える効果もあります。

写真のホルダーの一つをテキストボックスとして使う

しっかりと構成されたグラフィックは、最もよい影響を作り出します。一貫したカレーパレットのイメージを美しいグリッドで使うことは、人目をひくデザインを形成します。一様性のために、オーバーレイのテキストにはフラットなカラーで満たしたセクションを使います。

強調とインパクトのために、細いフォントと太いフォントを使う

「Open Sans」は、フォントのさまざまなウェイトを利用したい際に使うべき素晴らしい書体です。ここではThinとBoldを組み合わせ、特定の言葉にアクセントを置きました。タイポグラフィで階層をつくる賢い方法です。

シルエットを使い、輝度を減少させ、コントラストを増やす

シルエットはデザインでインパクトを作り出す素晴らしい方法です。シルエットでコントラストを増やすことで、グラフィックは暗い部分と明るい部分でトーンの分離を強め、イメージのディテールを減少させます。テキストがはっきりと読める位置に配置できるように、イメージはクロップしてください。

文字間を増やしたり減らしたりして、美しいタイポグラフィをつくる

これは単純な方法に思われるかもしれませんが、文字間のわずかな調整はグラフィックに大きな影響を与えます。この例では文字間を極端に減らし、文字によって作られたスペースが窓のような効果を生み出し、視覚的に面白いデザインになっています。

色合いのコンビネーションとクロスプロセスでツートンカラーのエフェクトをつくる

クロスプロセスとはリバーサルフィルムをネガ現像の工程（または逆）で現像する方法で、通常とは異なる色調に手法です。こういった効果を与えるフィルタを使い、水のブルーが強調されて雲はピンクになり、イメージの軽い部分が強調されます。
※参考：クロスプロセス -Wikipedia

文字はイメージの特徴をとらえて配置する

文字の配置を練習するために、イメージを用意してみてください。どこに文字を配置するかはそのイメージごとに決定的要因があります。まずはノイズが少なく、スペースが多いところを探してみましょう。

モノクロのグラフィックは決して古くなりません

モノクロの写真は、クールでスタイリッシュなエフェクトを提供します。トーンのバランスには、外見と形を利用します。この例では水辺のラインを構成の基準に「chill」を配置し、カラーをホワイトにすることで冷たい空気のビジュアル効果を狙いました。

透明度を調整してソフトな効果をだす

カラーオーバーレイはイメージのトーンを強め、ソフトな効果を作り出します。イメージ全体の上に透明な形を配置し、そこにノイズを少し加えて、ぼんやりした効果を与えています。

イメージの構成を利用した文字の配置

このイメージの美しいグラデーションの地平線にあわせて、文字を配置しています。文字の3行は、グラデーションの3層に応じてバランスよく配置しているのがポイントです。

最適なコントラストを作り出すタイポグラフィ

「Playfair Display」はエレガントなセリフフォントで、モダンな「Montserrat」と組み合わせました。この強いコントラストは、それぞれ別の2つのインフォメーションがあると明確に区別ができます。

スケールをビジュアルの要素として使う

文字や要素が異なるサイズで配置されていると、階層が作り出されます。このことはインフォメーションが読まれる順番にも影響を与えます。大きいサイズの文字はすぐに目に見え、階層においてより重要であると判断されます。

背景イメージの形に合わせて文字を回転させ、視覚的なハーモニーをつくる

タイポグラフィは模索するための優れたデザインのスキルです。この背景イメージには文字を置くための大きいスペースがあります。波に合わせて文字を回転させて配置し、ハーモニーをつくりだしています。1行目の2単語間のスペースは、2行目のアセンダのために利用しています。

美しいディテールを備えた背景イメージ

雲は美しいビジュアル効果をもっており、背景イメージとして本当にうまく機能します。カラーや形を変えて使っても面白いでしょう。またブラーを加えることで、雲をソフトにすることもできます。

輝度を増やし、退屈なイメージの新鮮さを強める

1色のイメージは、時々退屈に見えることがあります。ここに輝度を調整することで、イメージに新鮮さを与えることができます。あまり強くしすぎると、コントラストを減らすことになるので注意してください。

フォントのウェイトを言葉を強調するために使う

「Lora」は、こういったケースにぴったりな美しいセリフフォントです。繊細で優雅さを持つ伝統的なスタイルフォントです。このフォントはレギュラーとボールドでウェイトが大きく異なり、ボールドが適用された文字はうまく目立っています。

白い文字や形が強すぎると感じたら

白い文字や形は、少し強く見えてしまうことがあります。その強さを柔らげるには、その白い要素を少し透明にします。この方法は特にディテールが豊富な背景と組み合わされた時に効果的です。

等しく強いスタイルで、強いリズムを作り出す

これはデザインの原則における反復を使ったもので、「Oswald」のようなジオメトリックなフォントを使うとより強化されます。

フィルタでコントラストを減少させ、イメージのトーンの分離を直す

通常、イメージでコントラストを増やすことを望むのは自然です。しかし低いコントラストのフィルタも美しい効果を持っています。この例ではコントラストを減少させ、ヴィンテージ写真の効果を与えています。イメージのディテールがもっと多いと、フィルタの効果も明白になります。

イメージのクリアなスペースがあるエリアをクリエイティブに使う

このイメージには、優秀なスペースがあります。湖岸をベースラインにし、文字を配置することで、素晴らしいハーモニーを作り出しています。

パステムを使って面白い効果をつくる

このスタイルはヴィンテージの写真っぽい効果を作ります。この色味をだすには、バターのようなイエローを重ねました。

構成を補完するために、イメージをクロップする

効果的なレイアウトをつくるために、デザインを複雑にする必要はありません。うまくクロップされたイメージは背景のノイズを減らし、コピースペースをつくり、フォーカスを合わせて、構成のハーモニーを作る素晴らしい方法です。

同じ文言で異なるフォントを使う

すべてのフォントは異なる特徴を備えています。クリアにさせるために優雅なセリフフォントを使うと、洗練されたトーンを持つでしょう。またジオメトリックなサンセリフフォントを使うと、言葉は騒々しくて強いトーンを持つでしょう。

型にはまった効果のために異なるウェイトのフォントを積み重ねる

水平に重ねられたタイポグラフィは面白いテクニックです。特にサンセリフフォントは、文字を積み重ねるのに向いています。ジオメトリックな形は四辺のどの側でも列に揃えて配置することができます。

グラフィックのすべての要素に1色を使う

一貫性は視覚的なハーモニーを作る素晴らしい方法です。ブルーの文字を配置した背景に、ブルーの色合いを組み合わせることは落ち着きを与えます。最適な効果のために色合いを応用する前に、イメージをブラックやホワイトにしてみてください。

ソフトなトーンと透明なイメージを使い、落ち着いたクールなデザインをつくる

このエフェクトのために、青白いペールトーンの背景を使います。イメージにソリッドなフレームを与え、全体を空白で囲みます。文字を置くときには、透明度を増やします。

メッセージを伝えるために、適切なイメージを使う

まず文字ははっきりと読める箇所に配置します。コントラストが強いと、そのメッセージはより強力に見えます。フォントスタイルは内容にあったものを使います。この例では「F」をビジュアルの象徴にするために使いました。

文字の周りにフレームを使うことで、内容を包含させる

形やフレームは文字を含むメッセージに対する強いフォーカスを構成させるスマートな方法です。フレームを使うときは、そのボーダーの幅が文字のウェイトを小さく見せないようにすることに注意してください。

文字に使うカラーを背景イメージから選択する

デザインのシンプルなアイデアのいくつかは、非常に効果的です。このグラフィックの文字のカラーは、背景イメージの海から選択しており、そのメッセージは輝いて見え、大きいインパクトを与えています。

素敵なイメージとクリーンなテキストを過小評価しない

デザインは過度に複雑にする必要はありません。もしデザインで悩んでいるなら、シンプルである状態を保つことを考えてください。例えば背景に使える美しいイメージを見つけたとします、あとはコントラストのあるカラーを使ったテキストを重ねるだけです。