期間限定で最大99%オフ! お得なデザインバンドル情報はこちら

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

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

こんにちは! Keiko(@kmy_design)です。

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

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

▼この記事は、Twitterのアンケートで一位になった企画を記事にしたものです。投票してくださったみなさま、ありがとうございました!

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

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

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

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

今回想定したデザイン依頼
  • セールのバナー(幅300px・高さ250px)を制作する
  • クライアントから支給されたのはテキストのみ
  • セール商品などの写真やイラストの支給は難しい状態
  • セールに関しては不確定要素が多く、具体的な情報がない状態でデザインから納品までしなければいけない

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

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

架空のショッピングサイトTsukuru.depotのセール告知バナーの「たたき台」
デザインたたき台のポイント
  • 「SALE」を他の要素よりグンと大きくし、メリハリを出してアイキャッチにする
  • 日本語は字間をゆったりとる。詰め過ぎるとダサくなるので注意
  • 「最大70%OFF」は70を大きくし、他を小さくしてメリハリを

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

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

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

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

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

デザインA

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

デザインA-1

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

デザインA-2

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

デザインA-3

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

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

デザインB

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

デザインB-1

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

デザインC-1

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

デザインC-2

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

デザインC-3

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

デザインD

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

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

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

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

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

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

日本語フォントは漢字も使えるものを選ぼう
テクスチャやオーバーレイ素材はデザインのクオリティを高めたいときの強い味方

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

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

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

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

メインコピーが「特大セール」のバナー
メインコピーが「特別割引販売」のバナー

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

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

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

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

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

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

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

(悪い例)どの要素も同じくらいの大きさで配置してしまうとデザインがぼやける
(良い例)機能が違う要素はメリハリを出すとわかりやすいデザインになる

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

https://kmy.website/blog/wp-content/uploads/profile-pic.jpg
Keiko

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

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

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

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

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

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

ただ要素を並べただけだと奥行きは感じられない
「SALE」が白い長方形から飛び出したような、奥行きの感じられるデザイン。

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

文字を少しずらして重ねると、奥行きが出て今っぽいデザインに。
中央が細く、左右に向けて広がるオビを敷くことで簡単に奥行きを演出できる

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

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

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

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

例1:デザインアクセントがない
例2:右下に「最大70%OFF」をアイコン風にして加えたもの

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

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

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

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

手書きで訂正した感じを演出した案
外壁に貼られたようなイメージの案

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

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

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

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

ボツ案1
デザインD
ボツ案からの復活プロセス
  1. ボツ案を全選択し、一回り縮小
  2. 入れ忘れていた要素を加える
  3. 中央の白いオビを変形し、中央を細くする
  4. 「特大セール」と「最大」の色を背景色より濃いピンクに設定

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

ボツ案2
デザインC-3

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

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

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

shares