写真・イラスト未使用でもクールなデザインアイデア集&デザインのポイント【実務で即応用できるテクニックを紹介】

様々なデザインの仕事を請け負う中で、写真やイラストの指定が特にない案件や、残念ながら支給されたビジュアルのクオリティが低い案件、探すにしても抽象的だったり予算の関係だったりでビジュアル素材を探したり、購入したりするのが難しい案件があります。

案件をメインの写真やイラストなしで乗り切りたい、でもビジュアル的なクオリティも保ちたい時のデザインアイデアとポイントを、バナーデザインを例に挙げながらキャリア15年以上のデザイナーが解説します。

真似しやすいよう、主にレイアウトの工夫でバリエーションを展開しています。このアイデアをベースに写真やイラストを追加したりして手を加えていけば、デザインバリエーションは何通りにも広がりますし、もちろんバナー以外でも応用可能です。

デザインを始めたばかりの方、興味のある方に特にオススメの記事になります。

では、早速みていきましょう。

写真・イラスト未使用でもクールなデザインアイデア集&デザインのポイント

今回は手持ちのフォント・背景・テクスチャ素材などはデザインに利用してもOKとします（さすがに全くないと難しいので…）。

▼今回はこの状態（たたき台）からスタートします。

このたたき台はすぐに他のデザインに応用できるよう、ある程度作り込まれた状態です。たたき台のデザインのポイントは記事の後半で詳しく解説しています。

写真・イラスト未使用デザインのバリエーション

ここからは実際にわたしがデザインした架空のバナーのバリエーションをご紹介します。

少し物足りない印象のものもありますが、バリエーションや考え方のプロセスを見せたいので、デザインはシンプルに、色も減らしています。実案件ではもっと画像やテクスチャを足したり、目的に合わせてアレンジしてみてください。

▼先程のたたき台の背景に長方形を配置してみました。「SALE」が後ろの長方形から飛び出したように見え、これだけで奥行きが出ます。

▼デザインAをちょっと斜めにするだけでも印象がガラッと変わり、動きがたたき台よりも動きが感じられます。周囲にイラストや写真を配置すると、セールっぽいにぎやかな雰囲気をいっそう演出できます。

▼デザインA-1をさらにアレンジし、上から訂正してみた風のデザインに。訂正した箇所が強調されます。

▼デザインA-1アレンジの別パターン。上から影のオーバーレイをしいてみました。影のオーバーレイをかけるだけで、デザインが壁に貼られているような、空間が感じられるデザインに。

▼デザインAアレンジの別パターン。背景の長方形を台形にし「最大70%OFF」を丸で囲みました。「SALE」が白いテーブルの上に乗り、円が宙に浮いているような、空間を感じられるデザインになりました。

▼デザインAの「SALE」の書体を変え、それにあわせて微調整した例。「最大70%OFF」は円で囲み、デザインのアクセントに。「SALE」が黒くてかなり重い印象なので、ボディの色を変えたり、テクスチャや写真にした方が良さそうです。

▼デザインBの「SALE」の色を変え、文字を複製したものを塗りなし・線に色をつけてちょっとズラして重ねたもの。これだけでガラリと印象が変わります。デザインBの文字の圧迫感が解消されました。

▼日本語がメインのバナー1例目。日本語を単純に大きく使うだけだと、どうしても野暮ったく見えがちです。かといって写真もイラストもない場合は、フォントに少し手を加えたり他の要素をからめたりして、周囲から浮かないようにすることが大切です。

▼日本語メインキャッチのバナー2例目はこちら。大きさだけで比べると「Sale」がいちばん大きいのですが、色を薄くして背景化してしまえば「特大セール」がメインに見えるだけでなく、懸念事項の「日本語メインキャッチの悪目立ち」感のないデザインに仕上がります。

▼日本語メインキャッチのバナー3例目。「Sale」の「L」が「大」にからまったデザイン。最初は日本語書体をもっと細いもので試したんですが、Saleの文字に埋もれてしまったので太めの書体に変更しました。

▼「最大70%OFF」をメインにした例。背景の白いオビは中心が細く、奥行きを感じさせるデザインにしてみました。「最大」と「特大セール」のピンク色は背景のピンク色より少しだけ濃くし、読みやすく微調整しています。

メインビジュアルになる写真やイラストがない時のデザインのポイント&便利なテクニック

メインビジュアルになる写真やイラストがないデザイン案件で、わたしが特に気をつけるポイントや、よく使う便利なテクニックはこちらです。

1. メインビジュアルにできる書体を始めとした、使いやすいデザイン素材を日頃から揃えておく
2. 漢字・かな・英語のバランスを考える
3. 大きさ・配色・デザインなどでメリハリを出す
4. 要素を重ねてデザインに奥行きを出す
5. テキストから、小さくてもアクセントになるビジュアル要素を作る
6. スクリーンの外の空気を感じさせる

ポイント&テクニック①：メインビジュアルにできる書体を始めとした、使いやすいデザイン素材を日頃から揃えておく

写真とイラストを使わない場合、やはりいちばん重要なのは書体選び。美しい書体はそれだけでデザインを成立させてしまう力があります。

突発的なデザイン案件に限ってメインに使えそうな画像が支給されないこともあるので、普段から使えそうなフォントを集めておくのがオススメです。良いフォントがあれば、いざというときもイメージ画像に頼らないデザインが可能ですよ。

またテクスチャやオーバーレイなど、メインビジュアルがないときにも役立つ素材をそろえておくことで、時間がないときも柔軟に対応できます。

ポイント&テクニック②：漢字・かな・英語のバランスを考える

クライアントから支給されたテキストが漢字ばかり、カタカナばかりでなんだかバランスが悪い時や、どうやっても日本語のキャッチコピーをメインにしたレイアウトがダサく見えるときがありませんか？

▼例えば下のバナーを見てみましょう。メインコピーが「特大セール」と「特別割引販売」の場合では「特別割引販売」の方は少し硬い印象で、ちょっと中国語サイトのバナーっぽく見えてしまうかもしれません。

デザインしてみてどうしても何かしっくりこない時は、そもそも字面を変えた方がデザインがよくなる場合があります。

• 意味は同じでも違う表現で置き換える（例：「3割引」→「30%オフ」）
• ひらがなからカタカナ、漢字からカタカナ、漢字から算用数字など、デザイン的によくなる方に変更する（例：「おすすめ商品」→「オススメ商品」、「出来る」→「デキる」、「一年間」から「1年間」）
• 「英語メインキャッチ＋日本語サブキャッチ」の構成にする（例：「半期に一度の特大セール」のみ→「SALE」＋「半期に一度の特大セール」の組み合わせに変更）

などなど、変えられそうな部分はないかクライアントと相談してみましょう。

ポイント&テクニック③：大きさ・配色・デザインなどでメリハリを出す

となり同士にしたり、重ねて使う要素は、ちょっと大げさなくらい大きさ・配色・デザインなどでメリハリをつけてみましょう。

今回は「SALE」の文字を他のどの要素よりもガツンと大きくしています。また、「最大70%OFF」内でも「70」だけ他の文字よりも明らかに大きくしてメリハリを出しました。

通常のデザイン案件では、クライアントとテキストの優先順位を話し合った上でメリハリを出していくことになります。

また「半期に一度の特大セール開催中」と「セール会場へ」は文字の大きさは似ていますが「セール会場へ」を黒いボタン&文字を白にして「半期に一度の特大セール開催中」と差別化し、隣同士に置いても全く違う働きの要素（コピーとCTAボタン）と認識できるようにしています。

機能が違うのに似たようなデザインの要素を隣どうしに置くと、デザインがぼやっとしたり、同じグループのものと認識されてしまうので、気をつけたいところです。

配色でメリハリを出すのも有効な手段ですが、まずはメリハリのきいたレイアウトができるようにがんばってみましょう。配色にこだわるのは良いレイアウトができてからでも遅くありません。

デザイナーを目指している方は、最初は全てモノクロでバナーをデザインしてみるとレイアウト力が鍛えられますよ。

ポイント&テクニック④：要素を重ねてデザインに奥行きを出す

わたしがよくやるのは、要素を重ねてデザインに奥行きを出すデザインです。写真やイラストがなくても、奥行きを出すだけでデザインが垢抜けると同時に「さすがデザイナー！」とクライアントに喜ばれやすい手法でもあります。

▼例えばこちらの2点の違いは背景のみですが、印象がガラリと変わったと思いませんか？後者のバナーは奥行きが感じられ、デザイン的にもこちらの方が成立しています。

▼他にもこんなバリエーションがあります。

ポイント&テクニック⑤：テキストから、小さくてもアクセントになるビジュアル要素を作る

写真やイラストなどのビジュアル要素がないときは、クライアントから支給されたテキストを使って、小さくてもアクセントになるビジュアル要素を作ってしまいましょう。

最初はちょっと面倒くさく感じるかもしれませんが、アクセントになる要素を一つ作っておくと、ベーシックなデザインでも見栄えがよくなります。

▼こちらのバナーを比べてみてください。大きな違いは右下の「最大70%OFF」があるかないかです。

比べてみると、例1はどことなくしまりのないデザインになっているのに対し、例2は右下の「最大70%OFF」がアクセントになり、デザインのクオリティも上がったのがわかると思います。

ここに手持ちのテクスチャやイラストなどを加えていけば、支給されたビジュアル要素なしでも完成度の高いデザインをクライアントに提案できますよ。

ポイント&テクニック⑥：スクリーンの外の空気を感じさせる

▼インターネット上で完結していない、パソコン画面を飛び出した雰囲気を感じさせるのも、面白い表現方法です。

他にもヴィンテージ感を出してみたり、上にモックアップ素材のアイテムを置いてみたり、探せば色々な表現方法があると思うので、ぜひ試してみてください。

番外編：今回ボツになったデザインたち

いくつかデザイン案を出す中で「これはダメだ」となってしまったボツ案も思い切って紹介します。

▼とにかくアイデア出し！と思ってレイアウトしてみたものの、なんだか収集がつかなくなったボツ案1と、ボツ案1をベースに改良したデザインDを比較します。

▼「特大セール」が目立たないためボツにしたボツ案2を大改造した結果、デザインC-3になりました。

すっかり面影がなくなってしまったので復活プロセスは省略しますが、フォントの組み合わせが良くなかったり、同じような大きさだったりすると、やはりどちらも目立たなくなるので注意が必要です。

ボツ案の「特大セール」と「SALE」の大きさは大差ないですが、デザインC-3は「SALE」がドン！と大きいのがおわかりいただけると思います。

メインビジュアルが支給されなくても慌てないデザイナーになろう

写真やイラストなどのビジュアル要素はとてもパワフルで、使うだけでデザインをそれなりに成立させてくれます。

が、いつもいつもクオリティの高い写真やイラストが用意されている案件ばかりではありません。むしろ駆け出しの頃はそんな案件の方が圧倒的に多いと思います。

そんな案件に直面したときに、ぜひ本記事で紹介したポイントやテクニックを参考にしていただけると嬉しいです。

言葉にするとなんだか難しいテクニックのように感じますが、一度覚えてしまえば簡単なことばかりなので、ぜひ試してみてくださいね。

【4/30まで】約7万円相当のヴィンテージデザイン素材バンドルが29ドルの特大セール中

デザイン素材販売サイトデザインカッツからお得なバンドル「The Creative’s Collection Of Timeless Treasures」が2週間限定で販売中。複数のプロジェクトに商用利用できるプロクリエイトブラシ、イラスト集、英語フォントなど総額452ドル（69,791円）相当がいまだけ94%オフの29ドルで購入できるチャンスです。

デザインカッツなら購入後30日以内は全額返金。購入方法はこちら