透過した背景をデザインに効果的に使った12の実例

Canvaは透過背景も自由にデザインできます!
今すぐCanvaでデザインを始める!
How to effectively use transparent backgrounds in graphic design

グラフィックデザインにおいて背景というのは、部屋の壁をペンキで塗ったり壁紙を貼ったりするようなものです。

これを上手に使うことができれば、メインの部分に調和させながら注目を場面をより引き立たせることができます。しかしこれの使い方を誤れば、目に痛く、本来目を惹きたい要素への注目に対しても逆効果となるのです。

ウェブサイトやフライヤー、ソーシャルメディアの背景がどうなっているのかということを考えるのは、その他の主な要素と比べると比較的些事のように感じられるかもしれません。しかし、例えば下手な絵を飾ったり壁紙の間違ったチョイスをしたりなどすることによって自分の部屋がどのような悪影響を受けるかを考えれば、一考に値することであると考えられるはずです。

以下では、デザインにおいて背景というものを存分に活用するためのテクニックについて確認していきましょう。もちろん、白一色やその他の単色の背景が悪いということではありません。しかしここでは、透過することの有用性について確認するため、そのような例を見ていきたいと思います。

01. 背景のシンプル化

イラストを用いている背景や柄が入った背景を用いることでデザイン全体を個性的なものにすることができますが、その分テキストが読みにくくなってしまうこともあります。背景を透過させることが、シンプルさと個性を両立させるための解決策となります。

以下の例では、綺麗なビンテージスタイルのイラストを背景画像として用いています。このままではイラストに埋もれてテキストが読みにくくなってしまいますので、テキストボックスが必要になります。このテキストボックスを半透明化することでイラストの質感は失われず、同時にテキストの読みやすさをも両立しているのです。

Via Behance. Design by Sara Dávila Evangelista.

別の例として、以下のポストカードでは丸いテキストボックスが半透明になっていることで、素晴らしい写真の全体を隠すことなくテキストを配置しながら、同時にカラフルさも加えることに成功しています。それを踏まえた上で、次のテクニックを見てみましょう。

Design by Sarah Champion.

02. テキストを見やすくする

印刷物でもウェブデザインでも、それが商品の広告でもウェブサイトのヘッダーでもソーシャルメディアであっても、背景に何らかの写真を用いるというのは一般に人気のある選択です。しかし、写真や色、その明るさなどの組み合わせによってはテキストをその上に配置するのが適切でない場合も考えられます。

以下の例では、半透明のブロックを重ねて用いることで白文字のテキストを読みやすく配置しています。段階的に透明度が低くなっていることで、見た目としてのエフェクトも非常にユニークなものとなっています。

Design by John Florez.

ここで別の例を見てみましょう。以下のウェブページでは、透過された白のテキストボックスを配置することで、モノクロの背景に対して黒いテキストを読みやすくしています。

Via Dribbble. Design by Ben Schade.

そしてこのテクニックは、色が豊富な背景に黒いテキストボックス、そこに白い文字という逆のパターンでも有効です。

Via Dribbble. Design by Bart Ebbekink.

ちなみに、デザインに用いる画像をお探しならこちらのページを参照すると良いでしょう。

03. クリーンで空気のような雰囲気を作り出す

デザインの各パーツが透明だと、レイアウトがシンプルに、かつ空間が広がるような雰囲気になります。以下のウェブサイトデザインでは、テキストボックスの透明度を高めてクリーンなフォントと組み合わせ、配置を整頓することで、ミニマルデザインを実現しています。

Via Behance. Design by Thorben Pöhlmann.

Via Behance. Design by Thorben Pöhlmann.

以下のカタログの表紙もまた、単色を半透明に、写真と重ね合わせるようにして大きく配置しながらテキスト量を制限することで、同じくシンプルなデザインになっています。

Design by Studio Beige.

04. 見る人の目線を注目させる

透明の背景の使い方はデザイン全体に広く配置するだけではありませんし、必ずしも四角や丸でなくても良いのです。例えば切り抜いたり『窓』を作ったりすることでそこから背景を覗かせたり、透明度を調整することでデザインの特定の部分に注意を引かせたりすることが可能です。

以下のポスターでは、色がついた半透明の背景とそれの切り抜きにより効果的に『注目するべき点』を作り出し、それぞれのポスターの主役がどこにいるのかを分かりやすくしています。

Design by Willem Henri Lucas.

そして以下のデザインでは半透明の三角形を配置していく中で、自然に注目するべき点(この場合は女性の顔)を浮きだたせています。

Via The Nina Project. Design by Anna Kövecses.

05. 中身を見せる

パッケージングやカバーに関するデザインをするとき、透明の外装を使い中身を見せることで商品そのもののアピールをすることが可能になります。

以下の雑誌デザインはタイトル部分を完全に透明の表紙にしていて、その背景が透けて見えるように構成されています。これによりメインとなる写真を2度楽しむことができ、かつ写真本来の美しさを損なわずに済むのです。

Via Behance. Design by Sidney Lim YX.

透明のパッケージを用いる戦略は、食べ物の包装で特に有効です。例えば以下のように、内容物そのものの形や色でアピールすることができるのです。

Design by Freddy Taylor.

以下の例はVoyageur du Temp(フランス語でタイムトラベラーの意)というカフェで用いられているもので、パンを入れる袋を半透明にすることでパンそれ自体を隠してしまうことを避け、それと同時に宇宙的なデザインを入れることでタイムトラベラーとしてのテーマにも結びつけることに成功しています。

Via The Inspiration Grid. Design by Character.

06. レイヤーを作り出す

透明の背景を用いるメリットのうちのひとつに、その要素を複数重ねたり、他のデザイン要素の上に透明の背景を重ねたりすることができるということです。これによりデザインにレイヤーとしての深みが生まれ、異なる色や写真、形を用いることで面白い効果を得ることができます。

以下のポスターは人の顔とシンボル的イメージを透明性を利用して両立させており、テキストもまたその背景を半透明化させています。こうして色とデザイン要素がレイヤー化され、全体としてダイナミックかつコントラストの利いた、深みのあるデザインが完成するのです。

Design by Rachel Wan.

レイヤー利用の別の例としては、以下のデザインが、写真と透明のブロック、そしてグラフィックパターンを組み合わせたものとなっています。

Design by Eight Hour Day.

07. テキストを浮かび上がらせる

テキスト背景を半透明化することでその背景画像を移すこともできますし、以下のように切り抜くことでその部分を大胆にメインのテキストとして使うこともできます。その切り抜きの下地になっている部分が若干の半透明になっているため、全体として調和の取れたデザインになっています。

Via Pinterest. Originally appeared on ae.com.

以下の例はこれまでのテクニックの合わせ技で、テキストをより分かりやすくする効果とレイヤー化の効果が現れています。緑の円が半透明になっていることで、画像部分とオーバーラップしている箇所がユニークな効果を実現しています。

Design by Cosa Visuales.

08. ソフトカラーをグラデーションと共に

デザインに色を加えるということを考えたとき、透過には様々な用途があります。単色の背景と比べると透過がなされている背景は、その色がけばけばしいものでなければ、よりソフトで繊細な印象になります。

以下のデザインでは、画像の上にテキストを配置する上で透過しているパステルカラーが用いられています。特定の形にするのではなくグラデーションにして少しずつ透明度を上げていくという使い方をしており、優れたデザインの一部となっています。

Via The Fresh Exchange.

透過のグラデーションを用いた他の例を見てみましょう。以下のグラデーションでは色の濃度、明暗、透明度を調整し、より目に強く訴えかける色がその終着点になっていますが、グラデーション効果のお陰で『やり過ぎ感』が抑えられています。

Via Dribbble. Design by Alexey Izotov.

09. クリエイティブに効果を重ね合わせる

デザイン作成ツールを用いることで、様々な色や画像、その他の要素を組み合わせ、透過やその他の設定も使いながら多種多様な効果を生み出すことができます。以下では、レイヤー化やテクスチャ、画像の利用などのテクニックの組み合わせを用いた例を見ていきましょう。

次のデザインでは、古い写真、そこへの紙の質感と手書き文字、インクの染み、ビンテージスタイルを意識した色使いの組み合わせが確認できます。この例ではデザイン要素を大量に組み合わせて使いながら圧迫感がなく面白い効果が生まれていますが、それは透過が様々なレベルで駆使されており、それにより全ての要素が全体として調和を保っているからです。

Design by Dubois & Barral.

次のデザインの背景は、多くの色が混ざり合う様子、それがどのような効果を与えているかということの両方に注目させています。こういった類いの色の組み合わせは、この類いのエフェクトを再現する上でよくある組み合わせです。

Via Behance. Design by Jack Crossing.

Via Paperless Post.

10. ブランディングの強化

デザインを考える際には背景もその一部として意識すると良いでしょう。例えばブランドカラーやその他分かりやすいビジュアルを背景に適切に利用することで、企業のアイデンティティやスタイルを親しみやすいものにすることもできるのです。

例えば、以下はGoogleの年次レポートであり、そのブランドのシグニチャーカラーを取り入れて、透過した背景として用いています。

Via Behance. Design by Brendan Jones.

続いてのウェブサイトデザインも似たようなアプローチをとっており、企業ロゴに含まれる色と幾何学的な形を使いながら透過し、全体の効果を生み出しています。

Via Dribbble. Design by Bart Ebbekink.

11. 強調したい部分を示す

特に目を引く色を使ったテキスト背景を用いることで、重要なテキストやその他のデザイン要素をハイライトすることもできます。

次の広告では、赤のバナーを透過し、モノクロのデザインの中で特別価格というオファーの部分を効果的に目立たせています。

Via Pinterest. Originally appeared in email from asos.com.

続いてのデザインでも、赤く透過されたテキスト背景を用いることで効果的に特定の場所に注目させることに成功しています。

Via Behance. Design by Milk Work.

12. よりクレバーな構図を

共通して重要なこととして、『クリエイティブであれ』があります。透明度やあるいは不透明度の設定を調整すれば、様々な効果が得られるということを踏まえた上で、その組み合わせや構図について色々と実験やテストをしてみましょう。そうする中で、ユニークなデザインがふと思いつくこともあるでしょう。

ここで改めて、クリエイティブかつ視覚的に『そそる』ような、透過というツールを効果的に用いているデザインの数々を見ていきましょう。

まず以下のデザインは、ある本の表紙のもので、最小の要素で最大の効果を得ている例です。透過しているブルーの部分が海を、そしてJAWS(鮫)のAの飛び出た部分が鮫のヒレを表現していることが分かるでしょう。

Design by Tom Lenartowicz.

次に、透過による複数の効果を同時に実現している例として、以下のポスターを見てみましょう。映画の象徴的な一コマをハイライトしながら、白文字のテキストに対する背景であり、雨を象徴しつつ、それがまた映画のタイトルをイメージさせているのです。

Design by Adam Juresko.

以下のデザインでは、透過された円を要素とすることで背景に色を追加しています。その上でコントラストの強い色を用いながら画像も相反する内容のものをハイライトし、同時にひとつの形としてそのふたつを統合しているのです。

Design by 1 Trick Pony.

Design by 1 Trick Pony.

Design by 1 Trick Pony.

最後に

色々なデザインを見てきましたが、それによりあなたが何かのインスピレーションを感じられたのであれば幸いです。また、透明化というツールが如何に有用性が高いのかということもお分かり頂けたのではないかと思います。楽しいデザイン作りの上で、ぜひ透過という手法を活用してみてくださいね。

 

実際に背景透過にする方法をお探しの場合は下記の記事がおすすめです。

 

他の背景関連記事はこちら

関連記事

すべて表示

アイディアを形に

もっとも簡単なデザイン作成サービス