デザインと暮らしのメモ
とある会社員デザイナーの、デザインや仕事にまつわる記録です。
Webデザイン

バナーデザイン練習に。バナー模写の私なりのやり方・やってみた感想

バナートレースしたものを並べたところネットでWebデザインの勉強方法を調べていると、模写いいよーって書いてあるのをよく見かけたので、まずは小さなバナーから練習を始めました。

これまでグラフィック・DTPデザインの仕事を長くやってきて、Photoshopといえば画像の加工やイラストを描いたりするのに使うものでした。
なのでPhotoshopでデザインを作ることには慣れていませんでした……。
フォトショの練習と、デザインの引き出しを増やすことも目的です。
グラフィックをやってきたとはいえ、デザインのバリエーションとか発想力をあまり求められない環境にいたため、アイデアの引き出しは正直そんなに多くないです。

まずは見よう見まねで作ってみることに。

バナー模写のやり方・私の方法

1. 参考にするバナーを探す

レトロバナー」「バナーデザインアーカイブ」などのバナーの参考サイトや、pinterestで探したり、ネットをしているときに気になったものを保存したり。
何かテーマを決めて探してもいいかもしれません。
特定の業種のものを集中的にやる、苦手なテイストのものをやる、などなど。
私は「好きなデザインのもの」や「こういう表現を練習したい」と思ったものを中心に選びました。

2. Photoshopで見本のバナーを真似して作る

最初の頃は、見本の上にレイヤーを重ねて、なぞるように作っていました。
慣れてきたら、見本のバナーの隣にウインドウを並べて、見ながら作るようにしました。

なるべくそっくりになるように作ります。
画像は、見本のものをそのまま使っていましたが、素材サイトで良さそうな画像を探しても。

これをいくつもやっていきます。
1ヶ月毎日やると決めてもいいし、他のことの合間にやるとか、自分の今のスキルや時間的に無理のないペースでやるとよいのかなと思います。

バナー模写をやってみて気がついたこと

バナーにもデザインの基本が使われている

アキの広さが揃っている、文字の両端が揃っている、
イメージに合った配色、配色のバランス、など

使われているフォントが何なのかわからず、似たものを探すのに手間取ることが多い

知っているフォントが少ないんだなと改めて思いました…。
いろんなフリーフォントを見たり、前よりフォントに関心を持つようになりました。
模写するときに全く同じフォントがわからないときは、似たフォントで代用していました。

画像内のフォントを調べる「WhatTheFont」というサイトもあります。
(欧文フォント限定です)

いつもイラレでやっていることが、フォトショだとどうするんだろう?ということがよくある

わからないことが出てきたらその都度ググって、へ〜なるほど!って思うことの繰り返しでした。

情報のメリハリのつけ方

たとえばセール期間の日付の部分、月は小さくして日は大きくするとか、曜日は()で囲む以外にも表現方法があるなど、強弱のバランスをどうつけるか。
日付のメリハリのつけ方
いちばん大事な情報はどれで、大きさや配色などでパッと目がいくようにしているとか。
ひと目で伝わることが重視されていると感じました。

バナーだけが目立っているのではなく、サイトとイメージの合ったものになっている

いくらひと目で伝わるようなものといっても、やたらと目立たせてるわけではなく、サイト全体のイメージと合ったものであることも大事なんだなと思いました。

まとめ

街に出たときや電車の中でなど、広告のデザインや配色を意識して見ることが増えました。
見るだけでなく、手を動かさない身につかないんだということも改めて実感しました。
もう…自分の引き出しの少なさをひしひしと感じましたね……。
フォントや配色ひとつでイメージがガラッと変わるので、デザインは奥が深いなあ…と思います。