ブログ

ユーモアのあるサムネイル画像をデザインするための発想法

blog_panda_penguin

こんにちは、デザイナーのTantanです。

抽象的なテーマについてユーモアを加えてデザインに落としこんでいくにはどうするか、発想やアイデアを詰めていく過程を紹介しようと思います。

私はこの方法を広告デザイン会社にいた時に訓練しました。
大型キャンペーンなどではひと目で分かるインパクトのあるアイデアが求められます。例えば新発売されるお菓子の味の特徴を、視覚的にどう表現するかというような課題です。

そういう時は一晩で何十枚もの手書きアイデアスケッチを描かされて描いていました。この思考過程は小さなイラストにも応用できると思います。
イラストでも具体的な物をただ描写するだけではなく、比喩や暗示が効いていればイラストの価値がそれだけ高まると思いますので、ぜひやってみてください。

アイデアの出発点

発端は、最近ブログでよく使うので「SEO」カテゴリの画像を増やしたいという事情がありました。

SEOというのは抽象的なモチーフです。
「検索順位を上げる努力」というものは、あまり一般的に分かりやすい実体を持ちません。それをなんとかして視覚化するにはどうするか。
関連するモチーフをうまく組み合わせたり何かに例えたりすることで、伝えたいテーマを連想させないといけません。

アイデアをまとめる手順

モチーフをたくさん集める

手がかりになるキーワードを書き出す

SEOを連想させる言葉を考えます。メモ帳にでもどんどん書いていきましょう。私は今回手帳に殴り書きしました。恥ずかしいですがこんな感じです。
DSC_0229
手がかりのキーワードは「パンダ、ペンギン、サーチエンジンの働き、ランク付けする」です。ちょっと少ないです。本当はもっと広げたほうがいいと思います。

名詞・動詞などなんでもいい

絵になりそうなもの、表現したい動作、SEOに関わる物事ならなんでもいいです。
パンダ、ペンギンは絵にしやすそうなので最初に出てきました。あとは「ランク付けする」と書いていますね。パンダアップデートやペンギンアップデートはWEBページをランキングする仕組みなので、パンダやペンギンたちがランク付けしているという動作を考えました。

比喩を考えるときは、物事を色々な言葉に言い換えるといいです。それもできるだけ簡単で具体的な言葉に言い換えるとイメージが広げやすいです。
サーチだったら「検索」「調査」よりは「探す」「選ぶ」「見つける」といった言葉のほうが別の何かに例えやすくなります。

伝わりやすい表現を探す

比喩やひねりを加える

パンダとペンギンを登場させることは心に決めつつ、彼らが何をしていればSEOを表現できるか考えました。
「WEBサイトをチェックリストで審査している」「検索結果をブロックのように積み上げて、順番を入れ替えている」などを考えました。
サーバの裏側で起きていることを具体的な動作として視覚化できないか悩みました。

誰が見てもわかることが大切

「WEBサイトをチェックリストで審査している」「検索結果をブロックのように積み上げて、順番を入れ替えている」どちらも説明が複雑です。
「WEBサイト」「検索結果」というのを誰が見てもわかるイラストにするのは難しいと思いました。あることを説明しようとするときさらに難解なワードを持ち出すのは愚策です。

そこで、「虫めがね」を思いつきました。検索のアイコンとして広く定着しているので、多くの人に検索を連想してもらえると考えました。
ただ、「パンダとペンギンが虫眼鏡をかざして検索している」となると、ちょっと意味がずれるかもしれません。虫眼鏡で検索するのはユーザで、パンダアップデートやペンギンアップデートはそれをサポートする存在です。
そこで、「パンダとペンギンが虫眼鏡の動きをサポートしている」という方向で考えてみることにしました。

構図を描いてみる

様々な角度を検討する

まずは平面の文字に平行に虫眼鏡をかざすのを真上の構図から描いてみましたが、動物が登場する余地がなくなってしまいました。
そこで文字に角度をつけたらどうかと考えました。また、虫眼鏡を巨大化して、小さな動物たちがそれをヨイショと操作しているのも考えてみました。見る角度を変えたりものの大きさを変えたりすると、新鮮な表現が見つかることがあります。

できるだけ単純な方がいい

考えてみたものの、どれもゴチャゴチャしてわかりにくい印象です。シンプルな面白いアイデアとは言いがたいです。しかも内容が複雑だと描画に時間がかかります。
説明が長ったらしいイラストはたいてい、時間がかかるわりに仕上がりはパッとしないものです。

アイデアを捕まえる

ひらめくタイミングがある

ここまで考えて、やっぱりシンプルな構図に戻ってみようとして正面向きのパンダを描きました。
ペンギンも並べようとして、ふと有名な映画のジャケット画像が浮かびました。
エイリアンを退治するサングラスのエージェントが活躍する、かっこいいあの映画です。SEOも三文字のアルファベットでちょうどいいですし。これだなと思いました。

ひらめくまでの準備運動も大切

キーワード書いたり構図考えたりは無駄だったんかい!
結局違う角度から突然降ってきたんじゃん!とツッコミが入りそうですね。

でもたぶん無駄じゃないと私は思ってます。
ここまでの流れは、頭を柔軟にする準備運動のような感じです。あっちこっちに思考を飛ばして頭を「アイデア出しモード」にすることで、突然思いがけない思考回路がつながります。(もしなにも思いつかなければ「パンダとペンギンが虫眼鏡の動きをサポートしている」という方向を突き詰めていけばいいですし。無駄じゃありません。)

ここまでで1セット

広告の企画などでは、これが何十枚もあるアイデアスケッチの一枚に過ぎません。
ひとつ思いついたらバリエーションを考えたり角度を変えたりしてスケッチを増やし、バリエーションが尽きたらまた最初の言葉探しに戻って違う切り口を探します。
そうしてインパクトのあるビジュアルを見つけていきます。(今回のように単価の安い一枚のイラストにはそこまで手間はかけられませんが。)

あとは形にするだけ

一応アイデアの核は決まったので、肉付けをしていきます。
「パンダはタレ目っぽいサングラスで、ペンギンは尖ったサングラス」とか、「バズーカみたいな小道具として虫眼鏡を持たせよう」「ホワイトハットSEOという言葉があるから白い帽子をかぶせよう」「SEOの文字は映画タイトルみたいな処理で」などのアイデアがすぐにまとまり、Illustratorで描きあげました。

かかった時間は、アイデア出し20分、描画50分程度でした。

おわりに

いかがでしょうか、アイデアは何もしないで突然降ってくるわけではないですが、理論を積み上げていけばたどり着けるというものでもないので難しいですね。
実際私も、何も出ないまま制限時間になって仕方なく関連するモチーフを並べて雰囲気だけで済ますことも多いです。ブログのアイキャッチ画像ですからそれほど時間もかけられないですし。

でもできるだけ、ひとひねりか半ひねりでも面白いイラストが描けるよう、訓練を続けたいと思います。
それではまた!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. lig_10 「いいオフィス 広島」のオープニングパーティーに参加してきました…
  2. seisaku エム・フィールド 広島オフィスで「広島フロントエンド勉強会 Vo…
  3. DSC_0704 広島フロントエンド勉強会 Vol.1 開催レポート
  4. 22964 ハロウィンなのでみんなで仮装して働いてみたらオフィスが楽しくなっ…
  5. news_study 第94回「WEB TOUCH MEETING」に登壇予定です
  6. Hirofuro-logo-8 広島フロントエンド勉強会 Vol.10 開催のお知らせ
  7. DSC_0072 広島フロントエンド勉強会デザイン部 Vol.5レポート
  8. WEBTOUCHMEETING-talk 第92回「WEB TOUCH MEETING」に行ってきました!…

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP