ひぐれぽ!

新米デザイナー主婦があれこれ書くブログです。

手前味噌ですが…バナートレースしてみました。

最近TLを眺めていると、新人デザイナーの方やデザイナーを目指す方々によるUIトレースが流行っているようです。

私も同じくデザイナーを志している身なので、この波に乗ってみようと思います。

 

ということで、私はWebデザインを学んでいるので代わりにバナートレースをしてみました。(というかこれまでちょくちょくしていたので振り返ってみました)

 

備忘録がわりにもより細かく振り返るためにも、ひとまず書いてみます。

  

 

まずは今回元となるバナーがこちらです。

 

今回トレースするバナー

今回トレースするバナー

ちょうど私が求人広告会社でアルバイトしていることもあり、このバナーを選んでみました。


 

ところで、インターン期間+1人でお仕事を頂いていた期間+今のアルバイト期間の全てを通じて、デザインの考え方や技術的なことを教えてくれる先輩に遭遇してこなかった私には「トレース」という言葉すら耳慣れない言葉です。

 

なんとなく雰囲気で、「まねっこのことだろう!まねっこ!」という感覚で、自身の作業フォルダ名にも「まねっこ」と書いています。

 

そのまねっこする方法としては、真っ白なアートボードの隣に真似したいバナーを置いて、見よう見まねで同じようなバナーを作ってポイントを掴んでいます。

…トレースって全然違ったらどうしよう。

上からなぞることだけを指す言葉だったらどうしよう。

まあいいや。

 

 

そんなこんなでまねっこしてみたバナーがこちらです。

トレースしたバナー

トレースしたバナー

枠がないし微妙に画像ずれてる…。

以下比較です。

元のバナー
作ったもの
左:元のバナー 右:作ったもの

今見るとタイトルの上のマージン狭いし、画像同士くっつきすぎだし…などなどと反省点は多々あります。(とりあえずどんどん次!!といっちゃってます…)

 

が、次のようなことに気づけたことは収穫だったと思います。

 

◇右側部分は文字ばかりで単調になりそうだが、「日払い」「日給1万円以上」の白背景部分にわずかに影が施されているというそれだけで、「遊び」的役割を果たして全体のデザインに緩急をつけている

 

◇「今すぐチェック」の部分がバナー自体の配色に対してやや暗い色合いになってしまったことで、元のバナーのそれよりも奥にあるように錯覚し、訴求力が弱い印象になる

 

◇「冬休みの〜」部分は、明るい色on白文字とコントラストが弱い配色だが、「明度の高い青のフチをつける」×「明度の低い青のドロップシャドウをかける」ことによって可読性をUPさせている

 

 

デザインは

①伝えたい内容や相手、目的を決める

そうして、

②それを伝えるための配色・構成・フォント等を逆算して必然的に決める

といった手順を踏むものと思っていますが、

トレース練習はその際の「〇〇なら**」という引き出しを増やすのに効果的だと思いました。

 

またちょくちょく書いていこうと思います。