デキるデザイナーはみんな使ってる！背景にすぐ使えるすごいデザインテクニックのまとめ
Post on:2016年7月21日
sponsors
画像や文字などを配置する時、背景をどのようにするかでデザインは劇的に変わります。
Webや紙のデザインに効果があり、すぐに使える背景のすごいデザインテクニックを紹介します。
Ultimate Guide to Designing With Backgrounds
以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- 背景のデザインとは
- ベタ一色の背景
- 高いコントラストのベタ一色の背景
- テクスチャの背景
- グラデーションの背景
- 写真をつかった背景
- 形をつかった背景
- 透明の背景
- ブラーを適用した背景
- カラーをオーバーレイさせた背景
- 文字のスペースがある背景
- パターンの背景
- イラストの背景
- 空白スペースをつかった背景
- グリッドをつかった背景
背景のデザインとは
背景はグラフィックデザインを築く基礎となるものです。
テクスチャとカラーはデザインに奥行きとコントラストを与え、グラフィックを際立たせます。構成されたイメージは文字をオーバーレイするためにスペースをつくるのと同時に、ユーザーにメッセージを伝えることができます。
背景を効果的につかうことであなたのデザインに多くの文脈を与え、あなたのコンテンツをサポートする視覚的な要素を提供します。
背景をどのようにするかで、デザインは劇的に変わります。グラフィックをより魅力的に見せたり、カラーをつかってブランドの認知を強めてもよいでしょう。
デザインに効果があり、見た目にも美しくて楽しい背景のテクニックを紹介します。
ベタ一色の背景
なにごとも基本が大切です。ベタ塗りの背景を使うことは、シンプルなデザインで非常に効果があります。この時に最も重要なのは、使うカラーでムードを作りだすことです。
非常に明るいカラーと暗いカラー、あるいはカラーホイールの反対側のカラーがインパクトを作りだします。軽いカラーの組み合わせはソフトで、落ち着いた効果を作りだします。
背景に明るいカラーを使う時は、文字の明瞭性に注意します。明るいカラーの背景でコントラストを増やすためには、文字を暗いグレーして軽いカラーのソフトな印象を残すようにするとよいでしょう。
チップス
同系色でトーンを変えた2色（上記ではピンクのトーン）を使った背景はバランスのとれたデザインです。視覚的なハーモニーを維持したまま、コンテンツを分離するのに役立ちます。
高いコントラストのベタ一色の背景
カラーを組み合わせるためにトーンの分離を使用することは、メッセージにインパクトを作りだします。互いに相殺色を使用することで、デザインは際立ち、ユーザーの目に止まります。このテクニックはフラットデザインでよく使われ、バナーやソーシャルメディアなどWebベースのコンテンツをつくる時に効果的です。
明るいカラーと対照的な暗いカラーを背景に使うことは、何かに注目させるのに効果的です。暗い背景がそれより軽いコンテンツを際立たせます。ボタンやリンクに明るいカラーを使うとユーザーのクリックを促すことに繋がります。
代わりに明るいカラーを使うと、現代的でモダンなスタイルを作ることができます。高いコントラストをつくるために、カラーホイールの反対側（類似色の組み合わせ）からカラーを選択してください。
チップス
カラーの数は制限します。最適な効果を得るために2つ以上のカラーを使わないか、視覚的なハーモニーをつくるために別のトーンをオーバーレイさせるのもよいでしょう。
テクスチャの背景
テクスチャはテクスチャ素材そのものか、小さい形のパターンから作成したものを使用します。テクスチャで大切なポイントは、カラーは少なめで、構成をシンプルにすることです。
全体的なデザインの流れからそこだけ浮いてしまうことを望まないでしょう。テクスチャは必要限小さくし、前景への注意を失わない程度に背景として振る舞うに使用します。
テクスチャは質感の錯覚を与えることができます。上記は再生紙の質感をもった背景です。招待状や手紙など、紙をイメージするコンテンツに使用すると非常に効果があるテクニックです。
チップス
もし自然のテクスチャを背景に使用するなら、手書きやブラシ風のフォントを使うことでさらにこのスタイルをとることができます。
テクスチャの意図は背景と文字の間のスペースを取り除く3次元の見た目をつくりだすことです。文字をあなたのメッセージとして効果的に見せます。
グラデーションの背景
グラデーションはWebでも紙のデザインでも素晴らしいテクニックです。グラデーションはどんな色と組み合わせても美しく、くすませてもはっきりさせても洗練されたデザインです。
グラデーションはベタ一色やブロックカラーより繊細なアプローチで、放射状や線状のグラデーションにかかわらず、デザインで異なる効果を与えることができます。グラデーションの方向はユーザーの視線に直接、影響を与えます。
デザインの目的の一つは、カラーや要素や文字を通じてメッセージを伝えたり、強調することです。上のグラフィックは、文字の重要性をグラデーションをつかって視覚的に表現しています。
グラデーションの背景でカラーを一色だけにすることは、ユーザーの注意を獲得し、効果的なデザインスペースを与えます。
写真をつかった背景
デザインに文脈を与える最もよい方法は、イメージ写真です。背景に写真を使うことで、ユーザーの注目を集め、視覚的にあなたのメッセージを伝えることができます。文字や要素を重ねる時は、画像のディテールに注意してください。
空白スペースがある写真は、そこに文字を重ねることができます。デザインは慎重に行い、要素がデザイン全体から浮くことがないようにします。必要があれば、テキストがよい位置になるよう画像をクロップしてください。
チップス
グラフィックの全体的な構成の効果を確認し、文字のつくりだす形がどのようにフィットするか注意します。
形をつかった背景
よりディテールがある画像は、要素を重ねるときに複雑にすべきではありません。前景と同様に、背景にも多くの情報があるとユーザーはそのビジュアルを認識することができません。これはユーザーとのコミュニケーションを困難にします。
これを回避するテクニックが、形をつかうことです。文字を形の中に配置することで、読むのが非常に容易になります。このテクニックは画像に文字を配置することが自信のない人でも簡単にできます。
チップス
形につかうカラーは背景イメージを相殺するカラー、あるいはトーンを選択します。そうすることでメッセージは目立ち、文字を配置する機能とデザインを構成する効果を与えます。
透明の背景
グラフィックデザインの多くのテクニックと同様に、シンプルにすることが重要です。
背景に透明度を増やし、前景の要素を読むことが容易なように背景のノイズやディテールを減少させます。透明をつかう時は、やり過ぎに注意です。
透明の調整は背景のイメージが薄くなるように調整するのではなく、文字が目立つようにします。これはデザインで欠けている明るさと弱い部分を補います。
チップス
モンタージュエフェクトを適用することで、さらにワンステップ上の効果が期待できます。背景につかった同じイメージを重ねて、透明を増やします。モンタージュエフェクトにするには、上部のイメージをクロップやサイズ調整をして興味をそそる構成をつくります。
このテクニックはかなり高度で、コピーしたイメージの明るさや透明度をつかってコントラストを増やし、読むことが容易であるように調整します。
ブラーを適用した背景
背景として写真画像をつかう場合、画像のディテールが文字を重ねることを難しくします。これを解消するには2つのテクニックがあり、一つはブラーのフィルタをつかってぼかすこと、もう一つはオーバーレイを加えることです。どちらを使うかは使用する画像で判断します。
ブラーは背景から文字を目立たせるための効果的なテクニックです。ブラーをつかう時のポイントは、少しずつです。ぼかす時にはその画像が何か分かるようにディテールを維持します。そのため画像を選択する時は、面白い形があることに注目してください。
ブラーを適用した後は、文字とのコントラストが最適になるように背景をオーバーレイさせたり、クロップして調整します。
カラーをオーバーレイさせた背景
上記のもう一つのテクニックは画像にオーバーレイを加えて、背景のノイズを減らすことです。オーバーレイはいろいろな方法で適用でき、ちょっとコントラストをつくるためにブラックやホワイトのオーバーレイを重ねることができます。
もちろんカラーのオーバーレイも可能で、ブランドカラーをつかっても効果的です。
画像を選択する時は、色を重ねるのに充分な色調があることを確認してください。
画像をクロップする場合、背景イメージの構成を確認します。文字の可読性を確保するためには、背景が暗い場所には明るくし、その逆もまた同様です。
文字のスペースがある背景
構図はしばしば見落とされがちですが、最も基本的なデザイン要素の一つです。デザインですべての要素がどのように配置されているかは、ユーザーに大きな影響を与えます。そのためにスペースを利用する手段として、背景イメージを使用することができます。
文字を配置するスペースは、画像の空白かネガティブスペースがよいでしょう。上のようなフラットな空間をもつ画像は、文字のスペースとして最適です。空白スペースの周りのオブジェクトは文字にフォーカスをもたらし、カラーのコントラストは読みやすさをアップします。
パターンの背景
背景にパターンをつかうのは非常に面白いテクニックです。しかし多くのテクニックと同様に、配置に注意する必要です。パターンが損なわずに、デザインのコンテンツを紛らわさないようにします。
文字を含んだパターンをつかう場合、それ自身を構成する文字のために使用することができます。幾何学的なパターンは印象的なラインをつくりだし、文字を重ねることが簡単です。
イラストの背景
イラストはユーザーのためにインタラクティブなエクスペリエンスをつくります。またイラストはデザインのコンテンツに合わせて調整できる利点もあります。他の背景テクニックより遊び心にあふれ、はっきりしたデザインです。
イラストをつかう時に注意すべきは、イラストは簡単にデザインを妨げ、コンテンツを紛らわせてしまうことです。これを避けるには、配置に1/3ルールを使います。階層とバランスを考慮することが重要です。
上の例では、広いスペースにイラストを配置して、文字によるメッセージがはっきり伝わるようフォーカスのポイントを与えています。
空白スペースをつかった背景
デザインにおいて、空白スペースは非常に大切です。要素が多すぎたり、ごちゃごちゃしてしまう時こそ空白スペースのシンプルさを効果的に使用します。
イメージや要素をデザインに加えるのと同様に、空白スペースを加える感覚を身につけ、デザインの中で重要な要素にフォーカスを合わせる手段として使用します。このテクニックはトレンドであることに加えて、ミニマルなデザインでページ上の他の要素を目立たせることができます。
グリッドをつかった背景
グリッドはコンテンツを分割するだけでなく、レイアウトの構成にもつかうことができます。これはビジュアルにおけるアプリケーションと言え、コンテンツを魅力的に見せることができます。
空白セルの背景に画像の中にある色をつかうことは、トーンのハーモニーを作りだす巧いテクニックです。そのセルにはコントラストを確保した文字を配置します。もしくはユニークな構図をつくりだすために交差する線をつかうのも面白い方法です。
上の例では弱いトーンの明るいグレーを空白セルに適用しました。フォーカルポイントは文字があるセルになるでしょう。画像と文字の間には充分な空白スペースを与え、ビジュアルのハーモニーをつくりだします。
美しく構成されたデザインをつくるために、必ずしも文字要素をつかう必要はありません。クリエイティブなデザインをつくるために、グリッドを見た目が類似した画像でつくります。小さいグリッドがより大きいグリッドの中でフィットするように画像をクロップすると、より面白い構成になります。
画像をつかう長所はデザイン全体の組み立てに役立つことです。画像を単に並べるだけでなく、形や構成やスペースを元に戦略的に利用します。
sponsors
