C-teamで作るバナー広告の効果がスゴすぎてひいた話

にのっかりエントリー。

去年の年末くらいに興味本位でバナーをちょろっと投稿してみました。







この2点。

結果から言うと

728x90 imp2,061 | クリック率0.0000%(順位 39位)
300x250 imp6,120 | クリック率0.1471%(順位 1位)

こんな感じ。


作った自分としてはキャッチも一緒で、それぞれのサイズでいい感じに表示できそうな写真を選んで加工しただけなのにこれだけ差が出てビックリしました。

これだけで「クリックされ易いバナーとは」は語れませんが作ったものがどういった結果を残したのかがとれるのは重要ですね。作った後の反応がなかなか分からないことが多いのでデザイナーさんが自分なりの勝ちパターンを見つけるのにとても良さそうです。

※あさましい話をすると良い順位になった時はけっこうなポイントが付与されてiTunesカードとかに交換できるので、これまた嬉しいですよ。

トップページから作りはじめて、下層ページ全て作り終わって改めて見るとズレを感じる時があります。
「あれ…？内容と見せ方がズレてる…？」

自分だけなのかもしれないのですが…。

下層ページとトップページの整合性をつけるために頭を悩ませたりすることもしばしば。そう考えると、独立した見せ方をすることが多いトップページは全体を作った後の方が良いのでは？と思うようになりました。


まだ導入したことはありませんので良い方法なのかどうか分かりませんが、実験的に試してみたいなぁと思ってます。

アクセスが欲しくなりますよね。書いているコト当たり前になるとおろそかにしがちです。

久しぶりに猫ブログ(まめとミーのしろくろ日記)の整備をし、せっかくだから人気ブログランキングにも登録してみたのですが登録後にこんな画面が出るのですね。



ついでに登録しておこう。と思わせるものでついついマイクロアドのページに飛んでしまいました。こういう出し方はとても参考になります。でもランキング系に登録するときってブログ作りたての時が一番多いのでは無いかと思うのですけど、ここからアメブロへ引越しのために遷移する方って多いのでしょうか…？

「ケーキはデコレーションが無ければ人は違和感を覚えるだろう」
「それと同様に影が無ければ人は違和感を覚える」

うーん、なんかこんな感じの文章をphotoshop駆け出しのころに本で読んだ気がします。うろ覚えですが要は「日常のあたり前をCGで再現するのは大切だし、気付かされることが多いよ」みたいなコトだった気が。

実際にphotoshopでグラフィックを制作する時に影にまで気がまわっていなかった当時の自分はこれを胸に刻み、今も影を作る時はうろ覚えのこの言葉を「なんだったけなー」と思い出しながら作業しています。



影がある画像



影が無い画像

こうやって見比べるとほんのささいなコトですが、違いを感じとれるのではないでしょうか。

ちなみに影は画像を切り抜いた後、ブラシで書き足していきます。

影にはおおまかに言うと二つの種類があります。
「濃い影」は対象と地面が近い時にできるもの
「薄い影」は対象と地面が離れている時にできるもの

これを意識し、さらに参考のものを見ながら描くとリアリティが出ます。想像で描いてしまうとありえないコトになってしまうこともあるのでなるべく資料を参考にしながら描くと良いです。そのうち経験で見なくてもかけるようになると思います。

影はいろんなところに出来ているので気軽に観察できるので良いですね。

photoshopでの具体的な手順は以下になります。

1.レイヤーを作成

2.ブラシを選択

3.濃い影を書く

描いてる途中の画面

PCの影はけっこうカンタンです。対象物の境界をまたぐところにブラシで直線を引くだけでできます。Shiftを押すとまっすぐな線が引けるのでやってみましょう。

4.透明度を調整

「あれれ、思ったより濃い」と思った時はレイヤー自体の透明度を変更しましょう。これでカンタンに調整できます。

今度は薄い影を描きましょう。

5.レイヤー新規作成

作業が失敗してしまった時を考えてレイヤーを濃いものと分けておきます。

6.ブラシを選択

今度はブラシのサイズを広げた分、ブラシ自体の透明度を下げています。
これでニュアンス程度の陰影を描き分けます。

6.薄い影を書く

ぐーりぐーり。

7.透明度を調整

またこれも濃いと感じたらレイヤー透明度で調整してみてください。

8.ぼかしをかける

ブラシのエッジがくっきりと見えてしまって気になる場合はさらにフィルタ→ぼかし→ぼかし(ガウス)を使用してやわかくしてあげましょう。

そうすることで自然な影を作ることができます。



影だけのレイヤーを見るとこんな感じ


ぜひぜひ、お試しあれ。

ちなみに今回のサンプル画像はlivedoor NEWSで制作した「livedoor ニュース - ミニノートPC特集」の画像を使用しています。



カラフルに作るのが楽しかったです。

時もあるのかな。と思ったことがありました。

去年の8月くらいに、やっと出来あがったQuillというメモサービスを社内で公開してみた時のこと。



開発中の画面


カンタンにメモが書けて良い!という評価とともに、公開/非公開のUIに関して指摘の声をたくさん頂いたのです。「本当に非公開になっているか不安」

Quillは個人用のメモツールというコンセプトなので、基本的には非公開で使用されます。公開する時はタイトル横のトグルボタンをクリック。



画面右にある目のマークの見た目が変わるUI

この「トグル」というのが問題だったようです。

カンタンに公開できるようにと、考えたUIでしたが気軽に出来すぎてしまうため不安を与えてしまうコトになっていた模様。



試行錯誤の結果、現状はラジオボタンを採用しました。さらに、「public」を選択すると画面中央にウインドウを表示させ本当に良いのかを確認することで、公開への意識付けを行うようにしています。




操作としては2手間ほど入るのですが、これにより不安は解消されて安心して使ってもらうことが出来ました。



操作をカンタンにするだけではイケナイこともあるのだなぁと学べた貴重な体験でした。
やっぱりサービスを作ったり、さらに良くなるように運営していくことは楽しいですね。

作りました。これもデッカい。

鮮やかな背景を作るのが最近のブームです。


ドメインというのは例えになるものがあまり見つからなくて、
デザインを広げるのにちょっと苦労します。

ドメインが取れるサイトで見た目がステキなのはやっぱり「ムームードメイン」さんですね。



カッチリとしてモチーフなどを使用しないデザインが多い中、「ロリポおじさん」とクマの「ツッキー」などキャラクターとその世界観でとっても可愛く作られています。かわいい。



なんとツッキーはブログもやってます。
お知らせも兼ねているようですが、ツッキーがけっこうな更新頻度でなに気ないことを書いています。イラスト付き! すごいなぁ。大変だなぁ。と思いつつスタッフさんのツッキーへの愛を感じずにはいられません。

誰かが作ったものを、再現するのはとてもタメになります。

個人的にはあんまり好きじゃないですが(デザインが引きづられてどツボに入ることが多かったのです…。)

でも、キチンとトレースするように心掛けると自分には無い新しい引き出しが手に入ったりします。

タイトルの時はこの書体でこのサイズ、ボタンの時はこのエフェクトでこのグラデ。など、
けっこう細かいところで自分のクセが出てきて、同じような出来上がりになったりするので
ストックが増えてまた新しいコトが出来るようになります。

余白や書体、その大きさ、グラデーションで使う色と色、凹凸を表現するためのphotoshopエフェクトなどなど。


前は良くこういうのを作ってた。


最近のはこう。

こういうボタンの作り方も最近覚えたことの一つ。これはphotoshopでグラデーション、境界線、光彩(内側)、たまにドロップシャドウや光彩(外側)も入れます。

今日もいくつか新しい発見が出来て、有意義でした。

シンプルに作ると「デザインされてない」と修正指示を頂くことがあります。

自分自身も、「あえて」のシンプルなんだけど「デザインされてない」と思われるのが怖くて、色気を出してしまうことがあります。


デザインされてない状態とシンプルデザインの違いだなんて、
こんなこと他のデザイナーさんには恥ずかしくてテーマにできないですね。


何も足すだけがデザインじゃないのですよー。ってことで。

1発集中型の自分は、デザイン案を1案しか作りませんでした。
「これっきゃ無いでしょー!」というのを校正に出しているつもりではあります。

ある時から上司に数案出すべきだよ。と言われなるべく2案以上は作るように努力中。





ワイヤレスキャンペーンの2案。





reader使うとlivedoor wireless無料版でも外部サイトが見られるでも紹介したreaderの特集ページも2案。


いままで4時間で終わっていたものが単純計算で1.5倍くらいになる訳ですから、「あれ？もっとイケた(作れた)よな自分」と作業工数のかかり具合にもどかしい思いをしています。

でもその時に言われた「選べるというのは安心感に繋がるんだよ」という言葉は確かに頷けるものでした。

1案だけ提出されて「何か違う」と思っても具体的に言葉で説明するのは難しいものですよね。自分も良く経験しています。

案件の入り具合によって、数案提出するものとそうでないものを分けていますが、
もっともっとスピードアップして全部全部数案作れるように頑張ります。

flashならデザイナーの守備範囲に入ってるので問題ないのですけど、
jsなどで「ぐにょーん」とか「ここ押されたらこの画像に変わって、さらにこの文字も表示される」とかデザイナーが決める時があります。というかデザイナーが決めてます。

例えばフォームの入力時

確認ボタンを押した時
↓
エラーが出た時

とか

■クレジットカード登録の手続の時
登録ボタンを押した時
↓
二度押し防止用にボタンを差し替えたり、動かしたり
新に文字をぴょこんと出したり

とかの時。


けど、なかなかそういうトコロを上手く伝える方法が無くて困ってる。
できればflash触りたくないし…。

今のところはfireworksで細かく作ってますが、いい方法ないのかしら。



Adobeのサーモとか言うやつはどうなったんだろうと思って調べたら
名前が変わっていたのですな。

http://builder.japan.zdnet.com/news/story/0,3800079086,20383965,00.htm

会社の先輩がAdobe MAXに参加していたのできっとflash catalystも貰ったハズ。後で入れてみよう。