今まで私が作ってきたバナーのコンセプトや裏話を勝手にまとめてみました。

今まで私が作ってきたバナーのコンセプトや裏話を勝手にまとめてみました。

杉原ミシェル

杉原ミシェル

はじめに

こんにちは!デザイナーの杉原ミシェルです。

私は1年半前にLIGに入社し、アイキャッチやバナー、背景ジャックといった自社のクリエイティブを作成してきました。

入社時はまったくもってPhotoshopが使えず、毎日技術を勉強しながら右往左往して、今では自社デザイナーのジャイアン(リーダー)みたいな立場になりました。

今回は、そんな私が突っ走って作り続けたバナーの一部を、勝手にコンセプトやら裏話やらを添えてご紹介しようと思います(怒られたらごめんなさい)。

LIGブログのバナー広告クリエイティブ

現在LIGブログのバナー広告はレクタングル(Retina:600px × 500px)のサイズを採用しています。
もうひとつ背景ジャックというトップのビジュアルにあたる広告領域もありますが、そちらはまた別の機会にご紹介いたします。

一番最初のシクロマーケティング様の「ミギウデ」というバナーはクリエイティブが複数ございますのでまとめて紹介いたしますが、以降は制作順となっておりますので、私の技術がどう向上したのかがわかっていただけるのではと思います。

ミギウデ

入社して初めて作ったバナー

私がLIGに入社して1週間で初めて作成したバナーがこちらです。
もうすごい衝撃的でした。初めてのバナーのブレストでまったくついていけませんでしたね。
「女性だけで騎馬戦しよう!」とか「地球に隕石降らせよう!」とか。
意味がわからないままに作りました。

まったくPhotoshopが使えなかった私は「隕石作らなきゃいけないのか…」と思い、手描きで一生懸命描いてたら、先輩デザイナーが「隕石の画像の素材を買って、煙とか炎とかのブラシを使って加工すれば?」と教わって、なんと!そんなことができるのか!とそういった意味でも勉強になったバナーです。

最後の最後で「その丸の中に桃太郎の犬いれよう」と言われて完成しました。
今も意味はわかりません。

先輩「そういえば昔ふんどしで撮った写真あったよね」

シクロマーケティング様のミギウデというサービスは、弊社のLIGブログの読者様ととても相性が良く、バナーを何度も作らさせていただいております。

サービスの内容がとてもキャッチーなため、どんなビジュアルでもクリックされるだろうと弊社も自由にクリエイティブを提案させていただいております。

こちらはライターの紳さんがふんどしを履いている写真があったから使ってみたという、ただそれだけのバナーです。

今までミギウデの文言は「月額●万円で制作依頼し放題」で一貫しており、値段が気になってクリックするようなデザイン設計にしています。「大事なところを隠している」という点においては、文言もふんどしもコンセプトが合っていますね。

荒波の中でサボテン

ミギウデのバナーは初期の頃から「このサービスがあなたを支えます」というコンセプトのもと、騎馬戦をモチーフにしたデザインを使用してきました。

それじゃあ別の組体操に変えてみよう!ということで、いい大人の男性3人で組体操のサボテンをしてもらいました。
「荒波のような逆境の中でもこのサービスはあなたを支えますよ」というコンセプトです。

キャリタスLINQ

余った手を貸してくれる千手観音

バナーサンプル4
ディスコ様の「キャリタスLINQ」という、転職などの仕事の悩みを相談できるQ&Aサイトのバナーです。
千手観音が余った手を貸してくれる、そんななんともありがたいサービスを表現いたしました。

ちなみにモデルのづやさんの肌をPhotoshopで金ピカにする方法を検索してたら、隣に座ってる先輩デザイナーが描いた記事が出てきました。

このように「知見を得るために検索したら自社のブログに行き着く」ことを、私は“地産地消”と呼んでいます。

ピンクダイヤ

商品名が一切出てこないバナー

banner_1606727_m
マリアージュ様の「ピンクダイヤ」の商品のバナーで、クリックするとLIGブログ内のマリアージュ様の広告記事に飛びます。

彼女が彼氏に「ピンクダイヤの指輪いいなあ」ってやんわりせがんでる図ですね。
でも実は「ピンクダイヤ」の文言は一言も書いてないんですよね。

一方で、インプレッションに対するCTRが高めで、効果があるバナーでした。
たぶんモデルのユリナーシュカさんがかわいいからだと思います。かわいいですよね。

「彼女が求める指輪の秘密」という文言も、続きが気になるような動線にできたのではと個人的には思っています。

KOBIT

エクストリームスポーツならぬエクストリーム退勤

バナーサンプル5
クリエイターズネクスト様の「KOBIT」というマーケティングサービスのバナーです。

マーケターの仕事を減らしてくれる!マーケターの徹夜がなくなる!というサービスなので、元気に明るく退勤している様子がコンセプトです。

モデルのよすけさんには何回もジャンプしていただきましたし、何回もスーツを投げていただきました。
おかげさまで躍動感のある画になったのではないかと思います。

Mouseflow

クリッカブルな股間

バナーサンプル6
bnr_161207_m_hover
怒られるかもしれないと覚悟しつつも、私がどうしても作りたくて提案したバナーです。
まさかOKを出してくださるなんてAPOLLO11様は本当に懐が広い!宇宙のようです!

ヒートマップツールのサービスを説明するために、バナーにカーソルを持って行き、カーソルのところがヒートしているように見せることができればと考え、作成しました。

キーワードは「クリッカブルな股間」。もうね、こんなクリッカブルな股間を見たら、カーソルを合わせたくて仕方がなくなるんですよ人類は!

カーソルをホバーすることによって、ヒートマップ状態のバナーが出現し、股間がヒート!
ちなみにこちら撮影も私が担当しましたが、モデルのまさしさんは実は撮影時にパンツではなくてズボンをちゃんと履いてました。

バナーサンプル7
わたしがPhotoshopで脱がせました。
ミシェルを前にして脱がせられない人はいないのです。

CREATORS FAN

力の使いどころ、間違ってませんか?

バナーサンプル8
ドリームビジョン様のクリエイター向けの転職サイト「CREATORS FAN」のバナーです。

デキるクリエイターを戦隊レンジャーに例えて、彼らが営業のお仕事をしている様子を見せることによって「他のことで技術に長けているのに、今の仕事はミスマッチが起こってない?」ということを伝えるためのクリエイティブでした。

戦隊レンジャーっぽいクリエイティブにするためのテキストデザインやグラデーション使いなど、学ぶことがあったクリエイティブのひとつです。

WACUL

ブルゾンいなみ with AI

バナーサンプル9
バナーサンプル10
WACUL様の「AIanalyst」という、Webサイトを自動で解析して改善案を提案までしてくれるサービスのバナーです。

WACUL様の広告クリエイティブは時流のネタのオマージュをコンセプトに作成することが多いです。
時流のネタはバナーを見た読者様にも目について理解されやすく、クリックに繋がりやすいです(その分、いろんな危険も隣り合わせ…)。

こちらは時流ネタとAIanalystのサービスが文言でうまく合わさった一例だと思います。
テレビで見るあのネタでは実際には見えない背後にある情景を、ホバー前のオフィスとホバー後のクラブでうまく表現できたと思っています。

モデルのいなみさんにPhotoshopでメイクするのも楽しかったですね。その中でも特に、下がった眉毛を意識して描きました。

SUGOUDE-スゴ腕-

サラリーマンはそう、まるで、戦場に乗り込む戦士のよう

バナーサンプル11
ECサイトを運営しているお店の店長さんなど向けのECサイト制作のサービス「SUGOUDE-スゴ腕-」のバナーです。

店頭で商品を販売するプロの方を対象に、ECサイトの対応はECサイトのプロに任せようといった趣旨で、仕事が終わってもまだ仕事が山のように残っている様子を表現して、同じような環境にいる人にその問題を解決しようと思わせるようなコンセプトです。

もう綺麗なフラグを立ててます。これ、帰宅できないやつです。私、知ってます。
ただのオフィスの写真にダンボールを増設したり、炎がある方から光が強く射してるように見えるように、影やハイライトを追加したり、火の粉が舞っているようなブラシを使ったり、ひとつの空間のある環境を理詰めしながら作り出すのは楽しいですね。

そういえば先日、私が今まで使ってきたPhotoshopのブラシをまとめて後輩のデザイナーさんに送ったら「道場で刀を渡されたような気分になりました」と言われました。おもしろい例えですね。

モニタリングプラス

どうしても目を合わせて欲しい

バナーサンプル12
バナーサンプル13
スタートアッププラス様の「モニタリングプラス」というWeb監視ツールのバナーです。

同じエンジニアのゆたろさんをモデルにしているスタートアッププラス様の広告記事がとっても面白くて大好きです。元気になります。

この広告記事の雰囲気を活かしたくて、そのままゆたろさんをモデルにしました。
LIGの読者様がいつも通り記事を読んでると、どこからか視線を感じて、目を外すと「あなたのこと見てますよ…」と、言っているゆたろさんと目が合うという設計です。

ホバー前はロゴも何もないので最初はバナーには見えにくいかもしれませんね。
この目線が気になってカーソルをホバーすると、レトロなポスター調のうさんくさい笑顔のゆたろさんがサービスを紹介してくれます。

こういったバナーは一長一短で、目につきやすい一方で、LIGの記事を読んでる読者様に悪い意味で目についてしまい、不快感になってしまう可能性があります。読者様に嫌われたら元も子もない!ので、あまり多用はできないです。

Green

夜に撮影した写真を早朝に見えるように加工

バナーサンプル14
「ちくしょう転職だ」の文言で知られている、転職サイトのGreen様のバナーです。

きっと共感する人もいるだろうと、徹夜で明朝まで働いているサラリーマンを表現いたしました。
ちなみに元の写真データがこちら。

バナーサンプル15
外から朝日が差し込んで見えるように影をつけたりハイライトを足したり、窓の高さを変えたり、窓の外を切り抜いてちょうどいいところにスカイツリーが来るようにしたり「あしたのジョー」のあの名シーンのようにモデルのよすけさんを白い灰にしたり…1枚の写真のようですが結構がっちがちに合成しまくってます。

わたしがもともとデッサンなどをしていたからか、影や光を足す作業がとても楽しかったです。夜を朝に加工したのもいい経験になりました。

デジタルハリウッドSTUDIO上野 by LIG

理想の彼女はPhotoshopで作れる

バナーサンプル16
バナーサンプル17
最後は弊社のサービスのひとつである、Webクリエイタースクールのバナーです。

モデルの紳さんの顔をPhotoshopで女性にしてしまいました。可愛い女性だと思ってカーソルをホバーさせたら、紳さんの元の写真に変わるという設計で、こういった技術も手に入れられますよという意図のコンセプトです。

もうね、これね、めっっっっっちゃ楽しかったです!「Photoshopしてる」って感じでした!
紳さんの顔の造形を理解した上で、どこを活かして、どこを改変するかを考えながら作成いたしました。

彼女のいない男性のみなさん喜んでください!自分の顔さえあれば、Photoshopで理想の彼女が作れますよ!(※ただし、画面の向こう)。

LIGが運営するクリエイタースクール
STUDIO上野を詳しく知る

LIGブログでバナー制作を1年半続けて思うこと

私の手がけたバナーのデザインはまだまだありますが、ひとまずご紹介はこのあたりにしておきます。
Photoshopの右も左もわからない状態で「Photoshopと友達になる!」という付箋を壁に貼りながらクリエイティブを作り続けた1年半。

思うようにクライアントに気持ちが伝わらなかったり、技術不足でうまくいかず社内の人にも迷惑をかけたり、多くの失敗を繰り返してきました(本当に申し訳なく思っています…)。

そうした中で、私が今LIGブログの自社クリエイティブのデザイナーとして思うこと。

デザインは「設計」です。

  1. クライアントの要望
  2. ユーザー視点の動線
  3. LIGブログのブランディング
  4. 自分のやってみたい、自分が作っていて楽しいと思えるデザイン

これらすべてを叶えられるように「設計」するのが、LIGブログのデザイナーだと思っています。
私はLIGブログが好きでLIGに入社しましたし、ひとりでも多くの人にLIGブログのファンになっていただけたらと日々願っています。

バナーを制作依頼してくださったクライアント様もおそらく弊社特有の強みを期待して依頼してくださったのでしょうから、その期待に最大限に応えたいと思っています。

ユーザー様にもクライアント様にも喜んでもらえるデザインがしたいですし、それを自分自身おもしろいと自信を持って作ることができれば、デザイナーとして最高だなと感じるんです。

そうすれば、みんなハッピー。

Life is Good!

と、弊社の社訓にうまい具合にまとまったところで…。
今後も日々楽しみながら技術を身につけていきたいなと思っております。
これからもLIGブログ(のバナー広告)をよろしくお願いいたします。

LIGにバナー制作を相談してみる

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

人生において大切なのは、こまめに⌘+sすることだ。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL