先日こんなPR広告をデザインしました。……まぁ自分のグッズの広告なんですけど。
jquery waypointを使ったアニメーション機能付きです。
日本語版表示のときはSUZURIページへ、英語版表示のときはsociety6ページへそれぞれphpで切り替えています。


基本方針 快適な作品鑑賞が最優先

作るにあたって一番気を使ったことは『主張し過ぎず、且つ一度は確実に視線を合わせてもらえる設計』です。
今回、Web広告といってもアフィリエイトとは少し事情が違います。皆さん画像検索などで私の絵やCGを見てこのサイトに訪問されることがほとんどなので、少なくとも私の作ったものに何らかの興味の一端ぐらいは抱かれているはず。。。抱いていて?\(´・ω・｀)

なのでサイドバーにもう1枚絵が出たところで『ぐわぁーーー鬱陶しい(#ﾟДﾟ) ｺﾞﾙｧ!!』みたいなことはないでしょう！

という解釈(甘え)の元で広告をデザイン。


一歩攻めた戦略、アニメーション！
そこで浮上したのが 動かす という選択です。

こだわりを語る前にざっくりとWebサイトで使われるアニメーションの歴史おさらい(｀・ω・´)

Webサイトの歴史の中では90年代後半、電光掲示板のようなアニメーション表現が流行りました。それまで文字ばかりだった当時のネットの中ではとても革新的でした。その後、データ通信の進歩やネット料金の定額化などにより「チカチカ目を引いたもの勝ち」という時代は終わりを告げ、グランジ系,キャンディ系といった様々な現実的表現を必死に取り込むようになります。この時点で一度は完全に『…Webページにアニメーションとか……だっさw』という空気になります。そして2012年頃、css3の普及と憎きIEの衰退、スマートフォンのような直感的に操作できる端末の登場によってWebアニメーションが劇的に息を吹き返し始めます。

今日ではHTML5の普及・成熟により様々なアニメーション表現、それこそ物理演算やジャイロ機能を使ったインタラクティブコンテンツなどバラエティに富んだデザインが溢れています。その流れはまだまだ続くことでしょう。

おさらいおしまい(｀・ω・´)/

何度も言うようですが大切なのは、本当に見せたいコンテンツに支障があってはいけないということです。私のページの場合、最初に作品画像を見る時間、次に少し文字を読む時間、その途中で一瞬広告に目をやってもらうのが良いだろうと判断しました。そこで興味がなかったら自分の感覚世界に帰っていけるような、そんなタイミングを探しました。

導き出した答え:カテゴリテキストが頂点に到達してから250ミリ秒後に700ミリ秒かけてスライド\(｀・ω・´)/



動くべき色は決まっていたm9(｀・ω・´)
次に問題になったのが色です。目立つことは大切ですが、ここで蛍光ピンクや蛍光グリーンのでっかいのがスライドしてきたら景色が大事故ですからねw京都のマクドナルドは茶色いんです！m9(｀・ω・´)

私の作品は主に3種類に分類出来ます。

1.水墨画基調の白黒のもの
suiboku_ryuu150125_white

2.浮世絵的な構図で色彩をビビッドに寄せたもの
ryuu140301

3.3DCGを使って日本的色彩を当てはめていくもの
2014-10-03-8.37.33

といった感じです……なんというか単純w
要はこの中で何か共通の色を探し出せば浮き過ぎることというのは無くなるわけですね。

また絵画やデザインを含めた色覚に訴えるもの全てを構成する際、かなり恣意的な作品とサイケデリックな作品を除いて色相環で補色の関係になる色を隣同士に配色することは滅多にありません。

それらを総合すると、適度に目立ち、補色にならず、私がほぼ全ての絵に使っている色

導き出した答え:落款、タイトルバックの朱色\(｀・ω・´)/

アニメーションを加えたものの大きさは感覚に頼らざるを得ない(当社比w)
そして最後がサイズです。横幅はサイドバーの横幅に合わせるとして、赤で目を引くことにしたPR部分のサイズ加減は相当難しいですよね。浮世絵もタイトルのサイズを間違えると数mm単位でも絵がおかしくなってきます。

デザインをする際デザイナーが常に気にしている1:1.618の黄金比ですが、私の中では物体が移動するときの気持ちの良さとの相関関係は正直見つけられませんでした。

何度もアニメーションをテストしながら、上のカテゴリとの余白を読みつつ、幅40pxあたりが先に書いた視認順を守る上での限界かなというところで現在落ち着いています。ここは今後クリック率が余りに悪かったりすれば変更になるかもしれません。
導き出した答え:幅40px 余白8pxの出ベソ型！\(｀・ω・´)/

ってことで完成\(・ω・´ )／≡≡333 3 3
……因みに売っているものですが、SUZURIではひとつ売れるごとに利益がメガ牛丼1杯分、society6では同等品でコンビニの1.5Lペットボトルのコーラ分ぐらいですね。。。厳しい。

お気に召しましたらどうぞどうぞ宜しくお願い致しますm(_ _)m



今日の水槽

image
生まれた稚エビたちが大人エビ囲んでお食事中。

ではでは(｀・ω・´)ノシ