目を引くアイキャッチ画像の作り方、50の作成事例とデザインのアドバイス
Post on:2015年7月7日
あなたのブランドを魅力的に見せるアイキャッチ画像は、非常に大切です。どんなカラーパレットを使うか、どんなタイプのイメージを選ぶか、どんなフォントが一緒に機能するか、デザインのプロセスは多岐に渡ります。
Webページやブログのヘッダ、プロダクトの打ち出し、ブランドのメッセージなど、見た人の印象に残るアイキャッチ画像の作り方、50の作例とデザインする際に役立つアドバイスを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201502/20150702100.png)
Steal These 50 Branding Kits For Your Startup
下記は各ポイントを意訳したものです。
元記事ではアイキャッチ画像と同テイストの名刺も同時に紹介されています。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/01.png)
Whimsical: サンプル画像
- 抑えられたトーンとミニマルなタイポグラフィ
- 画像にソフトなカラーフィルタを使いトーンを抑え目にし、タイポグラフィをミニマルしたデザイン。デザインにほんの少し遊び心を取り入れることで、魅力的に見せています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/02.png)
Corporate: サンプル画像
- カラーで区切り、角度はシャープに
- コーポレートデザインを退屈にしなければならないと誰が言いましたか? 大胆なカラーで面を区切り、シャープな角度を使うことで、美しいモダンなデザインを作り出すことができます。もしあなたの会社のデザインを少しモダンにしたいと考えている時は挑戦してみてください。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/03.png)
Minimal: サンプル画像
- シンプルなカラーパレットと印象的なタイポグラフィ
- デザイナーのニコラス・バローズ氏はかつて「ミニマリズムとは何かの欠如ではない。その価値をパーフェクトにするものである。」と言いました。
イメージの外側にはシンプルな要素をバランスよく配置し、小さなカラーパレットと背が高いフォントを使うことで、フレシキブルでミニマルな印象を与えています。メンテナンスのコストが低いデザインにも完璧です。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/04.png)
Bold: サンプル画像
- 印象的なタイポグラフィとビビッドなカラー
- あなたのブランドは強いメッセージを持っていますか? もしあなたの選んだカラーがビビッドなカラーであるなら、こういった大胆なデザインを使ってメッセージを伝えるのも効果的です。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/05.png)
Orchard: サンプル画像
- ソフトなトーンとクリーンなタイポグラフィ
- イメージはフィルタなどを使い、彩度を控えめにしたソフトなトーンで、そこにクリーンなタイポグラフィを添えることで全体的に洗練された印象を与えることができます。フォントのカーニングは少し広めにするのがポイントです。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/06.png)
Ventures: サンプル画像
- ジオメトリックの要素とハイコントラストのパレット
- 高いコントラストのデザインを作成することは気軽にできるものではありません。シンプルではありますが、シャープなラインと印象的なカラーパレットがユーザーの注目をすぐつかみ、あなたのメッセージを伝えます。メッセージには洗練的な要素を加えるために、すらりとしたフォントを使用しています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/07.png)
Spray On: サンプル画像
- ハイコントラストと印象的なアクセントカラー
- 印象的なエフェクトを与えるために、モノクロのイメージにブラシで書いたような大胆なフォントを使用しています。タイポグラフィを傾けることで、非常にパンチがきいたデザインになっています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/08.png)
Floristree: サンプル画像
- ロマンティックなイメージとエレガントなタイポグラフィ
- デザインで優雅さや優美さを表現したいと思っていますか? ロマンティックな印象を与えるにはソフトなカラーにグレーのトーンを使ってみてください、黒のようなどぎついカラーは避けてください。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/09.png)
Bespoke: サンプル画像
- 大胆なグラフィックとテクスチャのイメージ
- 非常にモダンで、大胆なデザインを作成するには、シャープな形状とタイポグラフィをテクスチャのイメージに使用すると、大胆で人目を引くデザインになります。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/10.png)
Cafe Noir: サンプル画像
- 暖色系のトーンとミニマルなグラフィック
- この暖色系のサンプルは、シンプルながら非常に魅力的です。暖色系のブラウンのトーンをベースに、下部にはそれと対になるポップなカラーを使用してデザインを活気づかせています。クリーンでフレンドリーな印象を与えているポイントは、カラーがホワイトのセリフフォントです。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/11.png)
Wilderlands: サンプル画像
- バランスとフレッシュ
- 鮮明なカラーを使ったパレット、クールなフィルタを使ったイメージ、バランスのとれたタイポグラフィを組み合わせ、クリーンでクリアなイメージを表現しています。フォントをうまく使うことで面白そうに期待させるとなお完璧です。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/12.png)
Bans Olden: サンプル画像
- クラシックなタイポグラフィとエレガントなエレメント
- 古き良き時代の魅力がある不朽のデザインを探しているなら、このデザインはどうでしょう。優雅なセリフフォント、超シンプルなパレットでつくられたデザインはどんなビジネスにも適しており、フレキシブルです。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/13.png)
Clean and Green: サンプル画像
- はっきりしたタイポグラフィと自然のイメージ
- クリーンでクリアというのは、多くのデザインで目標とするものです。テクスチャとして使っているイメージと対になるよう大胆なタイポグラフィを使用すると、クラシックで美しく、クリーンな印象を与えます。イメージには自然系の落ち着いたものをいろいろ組み合わることができます。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/14.png)
Tourkyo: サンプル画像
- 都会的なパレットと印象的なパレット
- モダンで大胆なデザインは、高彩度のイメージから印象的なカラーを選び、抑えられたグレーとそのカラーを対にすることで魅力的なコントラストを作り出しています。カラー以外にもこのデザインでは、すべての要素のバランスも大切です。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/15.png)
Hip Hop: サンプル画像
- テクスチャとシャープなグラフィック
- シャープなグラフィックにざらっとしたテクスチャを対にすることで、効果的なビジュアルをもつデザインを作ることができます。シャープなグラフィックはロゴやアイコンなどを使用することができます。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/16.png)
Hello Media: サンプル画像
- スタイリッシュなパターンとシンプルなタイポグラフィ
- このデザインは読みやすくて過度に複雑ではなく、しかし新鮮で面白いを求めているブランドにぴったりです。カラーパレットは非常に少なく、タイポグラフィもシンプルで、テクスチャに使用しているパターンがデザインに面白い効果を加えています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/17.png)
Sailor's Pub: サンプル画像
- 鮮やかなパレットとシャープなグラフィック
- このデザインは正しい種類の注目を得るために、十分なコントラストの印象的なパレットを使用します。鮮やかなカラーと鮮明なグラフィックはこのデザインを面白くし、魅力的で目を引かせます。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/18.png)
Tres Bien: サンプル画像
- 装飾されたタイポグラフィと艶やかなパレット
- 品があり、チャーミングでもあるこのデザインは、ゴールドとピンクのトーンで艶やかなエフェクトをつくり、シンプルで装飾的なタイポグラフィを組み合わせることで魅力的なコントラストを作り出しています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/19.png)
Consulting: サンプル画像
- 洗練されたタイポグラフィとシックなパレット
- これはモノクロームで、新しいブラックです。パレットはチャコールグレーとブラックで、スリークで美しいテクスチャを組み合わせています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/20.png)
Wedding Planners: サンプル画像
- リッチなトーンと印象的なアクセントカラー
- このデザインは低い維持コストと高い効果をもっています。印象的なカラー、大きいタイポグラフィ、ミニマルな要素はデザインを読みやすくし、カスタマイズが簡単であるようナビゲートしています。エレガントなタイポグラフィを使うことで、視覚的に非常に魅力的で洗練されたものになります。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/21.png)
Digital Marketing: サンプル画像
- クリーンなラインとフレッシュなカラー
- シンプルでフレッシュなパレット、シンプルなフォント、シンプルな要素を組み合わせ、シンプルづくしのフレッシュなデザインを生み出しています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/22.png)
Urban Architecture: サンプル画像
- 洗練されたイメージと豪華なタイポグラフィ
- 白黒の魅力的な写真にすらりとした美しいフォントを組み合わせたデザインです。フォントにはクラシックのセリフ書体を使い、シンプルながら豪華なイメージを演出しています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/23.png)
PR Agency: サンプル画像
- 蛍光色とジオメトリックの図形
- 本当に速く多くの注目をつかむことを望むのであれば、こんなデザインはどうでしょう。デザインの基本はかなり単純で、ビビッドなカラーに印象的なジオメトリックのフォントとたくさんの空白スペースを使用して、デザインは活気に溢れています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/24.png)
Shipping: サンプル画像
- 大胆なラインとデュオトーンのイメージ
- 2色網版のデュオトーンの画像にタイポグラフィやグラフィック要素をオーバーレイさせたデザインは、非常にシンプルでフレキシブルです。背景には好きな画像を使用してください。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/25.png)
Online Store: サンプル画像
- ミニマルな要素とツートンカラーの背景
- このデザインはオンラインからプリントまで、ほぼどんなコミュニケーションメディアででも完璧です。ミニマルで、ジオメトリックで、時代に流されず、大いに柔軟で必要な要素を自由に組み合わせることができます。このデザインでは若干の奥行きを作り、ビジュアルコミュニケーションにブランドを与えています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/26.png)
Law Office: サンプル画像
- 抑えめのフィルタとシンプルなタイポグラフィ
- 水平と垂直の力強いラインで構成された、モダンでプロフェッショナルなデザインです。タイポグラフィはエッジに沿って配置し、デザインの周りにユーザーの目を導くのを助けます。画像に使用している控えめのフィルタはソフトで静かな効果を引き起こすのを助けています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/27.png)
Radio Station: サンプル画像
- ジオメトリックの図形とオーバーレイの要素
- モダンでスタイリッシュなデザインです。ジオメトリックの図形に大きめの画像を重ね、タイポグラフィはセリフ書体を使いダイナミックにデザインします。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/28.png)
Marx Worldwide: サンプル画像
- 洗練されたカラーとクリーンなタイポグラフィ
- カラーはブルー、特にネイビーのブルーは信用・知性・安定性をイメージさせます。多くのビジネスにあうデザインです。濃いブルーに対して強いコントラストを作るために、サンセリフフォントを組み合わせています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/29.png)
Hivery: サンプル画像
- モノクロのパターンと空白スペース
- パターンはブランディングに非常に効果的なツールで、さらに十分な空白スペースを使いバランスを取ることで非常に魅力的なデザインになっています。ここで使用しているパターンはジオメトリックなレトロ風のもので、洗練されたイメージになっています。カラーを加える時は1色にしておいてください。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/30.png)
Branding Agency: サンプル画像
- 鮮烈なカラーと流行のフォント
- イエローは知性・幸福・友好のイメージを与えるカラーで、それを鮮やかな色味で使用することでユーザーの注意を引きつけています。美しいセリフフォントを使いコントラストをつけ、優雅なデザインになっています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/31.png)
Design Studio: サンプル画像
- コントラストの強いカラーと大胆なタイポグラフィ
- レッドとブルーとブラックのコントラストが強いカラーを使い、間隔を広くしたシンプルなタイポグラフィは大胆でモダンな印象を与えます。グラフィック要素は最小限なので、短時間で容易にできるデザインです。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/32.png)
Bookstore: サンプル画像
- 暖色系のトーンとブロック状のカラー
- このデザインはシンプルで、暖かく、非常に魅力的です。ブロック状に区切ることで情報は読みやすく、ナビゲーションも容易で、正確に必要な要素を配置することができます。カスタマイズ性にも優れており、さまざまなものに適応可能です。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/33.png)
Museum: サンプル画像
- エレガントなパレットとクラシックなタイポグラフィ
- 古き良き時代の優雅さと現代のモダンを組み合わせたデザインです。このデザインの最大のポイントはフォントで、ヘビーなセリフフォントを使い、メッセージには暖色系のカラーを使いハイライトさせています。カラーはシンプルで控えめなパレットで、ミニマルにデザインします。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/34.png)
Clothing: サンプル画像
- 印象的なカラーと大胆なタイポグラフィ
- ブランドで強いメッセージをだすときにぴったりなデザインです。明るいカラーを使った大きくて美しいタイポグラフィはそのメッセージを視覚的に重要であることを伝えます。背景に使った印象的なカラーとタイポグラフィのバランスは空白スペースでとり、デザインに力強さをだします。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/35.png)
Flora and Fauna: サンプル画像
- ぼやけたイメージとくっきりしたタイポグラフィ
- 奥行きを使った美しいデザインを求めている時は、この方法を試してみてください。イメージはその本質をとらえたまま美しいグラデーションのようにぼやけさせ、その上にシンプルでクリーンなタイポグラフィを配置します。フォントに使うカラーはまずは、ホワイトを使ってみてください。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/36.png)
Design Studio: サンプル画像
- 陽気なカラーと力強いタイポグラフィ
- チャーミングなカラーパレットと力強いタイポグラフィの組み合わせは、陽気で楽しくクリエイティブな印象を与えます。濃いパープルの背景に対して美しいコントラストを生む力強いタイポグラフィを使うことで、ユーザーにメッセージや情報をしっかりと伝えることができます。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/37.png)
Inbound Marketing Agency: サンプル画像
- 力強いカラーとシャープなアイコン
- ブランドのカラーを大胆に使い、シャープな美しいアイコンを組み合わせるとさまざまな企業グループに使えるプロフェッショナルなデザインを作成できます。アイコンはそのビジネスを表現するものを使用してください。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/38.png)
Naïveté: サンプル画像
- シャープな形状と艶のあるダーク系トーン
- スマートなダーク系のパレットは、洗練されたイメージを与えます。ブラックの背景にホワイトの細いラインを使うと、デザインはシンプルですらりとした美しくさを演出します。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/39.png)
Stockton Cafe: サンプル画像
- クールなグレーとシンプルなパターン
- 洗練されたデザインは、退屈なデザインからかけ離れたものです。クールなグレーのトーンとスタイリッシュなジオメトリックのパターンを組み合わせることで、この魅力的な美しいデザインは生まれます。フォントにセリフを選択しているのは、デザインをよりスマートな洗練されたものにするためです。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/40.png)
Midsummer MF: サンプル画像
- ジオメトリックのボーダーと読みやすいタイポグラフィ
- 多くの情報を提供しつつ、シンプルで美しくしたい時は、このデザインです。情報をボックスに分けることで整理され、重要な情報はフォントのカラーやサイズを変えて目立たせます。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/41.png)
Culture: サンプル画像
- 彩度を減らしたイメージとミニマルなタイポグラフィ
- クリーンでシンプル、そして都会的でシックな印象を与えるデザインです。たくさんの空白スペースとシンプルなジオメトリックなフォントは、クリーンでシャープで美しいです。画像は魅力的な外見を与えるためにフィルタを使い、彩度を減らすことでデザインにブランドを加えるのを助けます。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/42.png)
Haage Auto Shop: サンプル画像
- パンチがきいたカラーと印象的なタイポグラフィ
- このデザインはタイプやカラー、ボーダーやグラフィックエレメントなど、すべての要素が大きくて大胆です。より大胆なブランドを作り出す時に完璧です。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/43.png)
Spark.org: サンプル画像
- 穏やかなイメージと落ち着きのあるトーン
- 落ち着きのあるカラーとエレメントは信頼を与え、デザインをプロフェッショナルに見せます。穏やかで懐かしそうなイメージとさわやかなフォントを組み合わせるのもポイントです。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/44.png)
The Xocolate Atelier: サンプル画像
- スマートなパレットとオールドスクールのフォント
- このデザインは古き良き時代の魅力の典型です。当時のお店の看板のようなカラーとタイポグラフィは少しノスタルジアです。セリフとサンセリフを混ぜて使うのはクラシックな印象をより強くし、クリーム色のパレットもヴィンテージを彷彿させる外見を作り出しています。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/45.png)
Sullivan & Sons: サンプル画像
- 優雅なタイポグラフィと暖色系のパレット
- 暖色系のチョコレートブラウンのシンプルなパレットとエレガントなセリフフォントを使ったデザインはシンプルながら非常に美しく魅力的で、しかも簡単にカスタマイズできます。シンプルでありながら、品位がある魅力的なブランドにぴったりです。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/46.png)
Organik: サンプル画像
- 新鮮なカラーとクリーンなタイポグラフィ
- 活気に溢れたカラーと写真をブロックで区分けし、シンプルなタイポグラフィを使うことでヴァイタリティとエネルギーに満ちたイメージを獲得しています。写真画像を使用しないでも、魅力的なカラーを全面に使うことで、フレッシュで目を引きつけます。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/47.png)
Balkan Studio Arkitektur: サンプル画像
- 抑えられたフィルタとソフトなカラー
- 写真は彩度を抑えるフィルタを使い、カラーにはブラックの代わりにクールなグレーを使うことで、穏やかで教養が高いイメージにデザインしています。写真やカラーで暗くなりがちですが、写真そのものやタイポグラフィを鮮明に仕上げるのがポイントです。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/48.png)
East Coast Barbershop: サンプル画像
- アースカラーとアーバンタイプ
- アースカラーとすらりとしたタイポグラフィを組み合わせるとクールでカルチャーな見栄えをつくり、都会的なブランドにあうデザインになります。メッセージに注意を向けさせるには、セピアとグレーのトーンでイメージを彩色してください。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/49.png)
Swim: サンプル画像
- ジオメトリックのタイプとクリーンなパレット
- フレッシュで軽やかなデザインを探しているなら、このデザインはどうでしょう。たくさんの空白スペースはクリーンで、シンプルで細いタイポグラフィはクリーンさを保ち、カスタマイズ性にも優れています。背景に配置する画像は美しいほど、効果的です。
![画像のサンプル](http://coliss.com/wp-content/uploads-201502/2015070211/50.png)
Creative NY: サンプル画像
- ソフトなトーンとスマートなタイポグラフィ
- ソフトなフィルタとマットなグレーを使うことで、シンプルなタイポグラフィが力強く見え、このデザインをプロフェッショナルなものに見せています。
sponsors