デザインのヒキダシ Vol.1「ポップなキャンペーンデザイン」

最近、デザインの勉強法で何か良いものがないかと探していたのですが、以前「サイトの“模写”」をオススメしている記事をいくつか見かけたことを思い出しました。

ただ、サイトのデザインを1pxも違わずコピーするのは骨が折れそうなので、今回はバナー画像など小さめの物のそれっぽいコピーから練習してみようと思います。デザインの勉強として続けていきたいと思うので、記事タイトルは「デザインのヒキダシ Vol.1」と名づけておきました。その名の通り「デザインの引き出し」が増えれば良いなと。

題材は何でも良かったのですが、今回は「キャンペーン」の画像を作ることにしました。googleで「キャンペーン」と画像検索してみると、ポップなものからエレガントなものまで色々あるようなので、いくつか真似してそれっぽい物を作ってみたいと思います。

参考資料

2012_summer_ph001 ページタイトル:キャンペーン1 | キャンペーン | いこステ【いこステーション】 
URL:http://www.ikost33.com/campaign/キャンペーン1.html
ページ確認日:2014/6/7

制作メモ

画像内の賞品写真は使えないので、その部分の空白がちょっとさびしいですね。それと、サイズは適当に作ってしまいました。

ikosute_420

まず、パッと見の色使いが綺麗だと思いました。これは黄と青、緑と赤紫がそれぞれ補色だと考えれば良いのでしょうか。2色選ぶ時には僕もよく補色を使っていましたが、色相環でちょうど4隅を取る感じの使い方もあるのですね(円で「隅」と言うのも変ですが)。早速勉強になりました。

無作為に題材にする画像を選んだつもりでしたが、顕在意識に上らなかっただけであって、潜在意識ではこの配色の良さに惹かれてこの画像を選んでいたのかもしれません。(…というような理屈っぽい言い回しを最近サブリミナル・マインドを読みなおして覚えました(笑))

次に、フォントについてもいくつか工夫された点を見つけることが出来ました。

まず、1番大きな「毎日当たる!」のひらがなの「たる」部分だけフォントサイズが小さく、メッセージが読みやすくなっています。(そういえばこれ、日本語(漢字+ひらがなorカタカナ)にしかないデザインだったりするんですかね?)

僕もしっくりこない時は同じことをやっているのですが、イマイチ徹底できていなかったり、どのくらい差をつけるかはその時の感覚で調整してしまっていたりします。

あと、同じく「たる」部分だけゴシックMB101でない書体(何かわからなかったので、似た感じのタカハンドを使いました)が使われていて、テイストが固くなりすぎないようになっていますね。

その他のテキスト部分も、「重要な部分(数字等)を大きくする」「日付の間のスラッシュはウェイトを細く、曜日はサイズを小さく、重要度の小さい情報は扱いも小さくする」「“!”の前は行間を詰める」など、基本の処理がきちんとされていました。

それと、「夏」のキャンペーンという事でなのか、ただの青色背景ではなく波や気泡を思わせる装飾があり、海チックなデザインになっていますね。

「5ポイント」を目立たせる為に配置された緑の円の下や、「10万円相当の〜」の白枠の下に気泡が配置されることによって、そこにそれが配置される理由・ストーリー(?)作りがされているように感じました。

また、気泡の位置もそうですが、要素の配置のされかた、波の向きなどで、全体的に左上から右下への流れがしっかり作られていますね。(僕のコピーの方では真ん中の賞品画像が無いのでちょっと印象が違いますが)

つづく

この記事用にもう2,3個作る予定でしたが、長くなってしまったのでVol.2、Vol.3も引き続き「キャンペーン」ネタで引っ張っていこうと思います。

コメントを残す

メールアドレスが公開されることはありません。