【課題は多い】バナートレース20個達成を振り返る。

Web design

実施期間 2020年7月2日 〜 2020年7月12日

引き続きiPadのAffinityソフトを使用してバナートレースを行なっています。

  • 注意点
  • なぜiPadで始めたのか
  • Affinityシリーズって何?

についてはお手数ではありますが

こちらの記事をお読みいただけると幸いです。

【5つの気づき。】iPadでバナートレース10個やってみた。
始めにお読みくださいまず、iPadでの達成であることを強調しておきます。求人では応募要件に「IllustratorやPhotoshopが扱える人」の記載が多くあります。また、実際の現場を見たことがないので全力のオススメは...

追加事項としては

実務経験のない勉強中の者による意見であること です。

まだバナトレに取り組んだことのない方・同じく勉強中の身の方は、鵜呑みにせず

高みの見物をされにきた方は、温かい眼差しで

“ 1人の1意見” として読んでいただければと思います。🙇‍♀️

導入したこと

  • 1hチャレンジ(11〜15個目まで。)
  • 簡単なワイヤーフレームを書くこと。
https://pin.it/19VpUjx

やらなくなったこと

  • 操作手順を書かなくなった。

理由としては、ソフトの操作がわかってきたため。

私の手書きの文章を見てもらうとわかると思いますが、

どんどん感想が薄くなって空白が多くなっていきます。笑

新たに得た操作

  • シャドウ(fx)
https://pin.it/18lrfUd

私がトレースした(右)女性の髪の毛、

少しモヤがかかっているのが目に見えてわかると思います。

10個目までも背景と切り抜いたオブジェクトの

少し浮き出てしまう境界線が気になっていました。

結果としては、

  • マスクをかけて消去ツールで消す
  • シャドウを入れる

ことによって、以前よりは気にならなくなりました。

また、fxを使えるようになったことで

文字にも影をつける余裕もでてきました。

https://pin.it/1zuv36a

個人的には良さげな完成度だと思います。☺️

構成が見えるようになった。

これを得たきっかけとして

  • ワイヤーフレームを書くようになった
  • あるあるデザインを読んだ

が挙げられます。

バナーを見て「アレこうすれば、ああじゃん」というのが

パズルのような感覚でほとんど見えてきて、

時間をかけてトレースする必要性を感じなくなってきました。

(もしかしたらダメな感覚かもしれないけど)

https://pin.it/a3lbEEj

あるあるデザイン読んで以降、

あくまでレイアウトのトレースだったことを気付きました。

これにより文字をトレースする必要性を感じなくなりました。

10個目以降はジャンルに拘って選んでいましたが、

文章の文字をトレースするのは

明朝 か ゴシック か 筆記 か

くらいしか当てはめられないですね。

キャッチコピーとフォントを参考にする

という意図なら良いと思いますが。

フォントの知識を広げてくれるのは、

1日1サイトレビュー振り返りの記事でご紹介した 

What’s Font?』というChromeの拡張機能。

Webサイトを見る際の話にはなってしまいますが、簡単にフォントの知識を広げてくれます。

オリジナルが作りたくなった。

この症状が16個目をトレースするべき日におきました。

2日間バナトレをお休みして、

私の大好きな方々のイベント告知バナーを作りました。

宇野ちゃんのほうは満足していますが

日高くんはライブ写真なので素材を活かさなければならなくて難しかったです。😫💦

どちらも情報量を端折ってますし、

タイトルと日付のみなので比較的難易度は低いかと思います。

作業時間が減った。

オリジナルバナーを作成した翌日に、

トレース時に同じ苺の写真(背景)を使用したバナーを作成しました。

https://pin.it/4PQdR2z

これは午前中に2つとも作り終えています。

消去系ツールの使い方が曖昧になってしまっていたので、16のほうは夜に再調整しています。

速さが勝負というわけではないですし、作り込みができてない点では

「同日かつ時間を空けずに、2つ連続トレースは良くなかったかな」と思います。

満足度が高めなバナー

https://pin.it/7gPIztv

自作のワイヤーフレームを見ていただくと伝わると思いますが

対照的な位置関係になっていることに加えて、

キャッチコピーも共通性があって面白いなと感じました。

ちなみに、オレンジ色はヤマハさんのコーポレートカラーでした!

https://pin.it/4UtiauM

個人的に好みのカラーなのもありますが、過去1番で満足度が高いです。

DEAN&DELUCAさんぽい白い箱を置くことで

バレンタインぽさを強くしました。

文章や対象がわかりにくいので改善案が出せたら最高ですね…

反省点

✔️ Unsplashの写真のみを使用するため、現実離れしている。

写真ACは登録しているはずなのになぜかログインができず、DLできず。

諦めて結局いつもUnsplashの写真を使用しています。

✔️ パターン背景のバナーを選ばなかった

アイコンは使うようになりましたが…

こちらも素材を探すのがめんどくさくて避けてしまいます。()

✔️ 雰囲気に着目してバナーを選ばなかった

20個目達成後に挑戦した

Chot.designさんのバナー実践にて

こちらの課題のペルソナとしては『30代の子供のいる女性』。

私の中でその年代で子供がいるというと

生活に余裕のある女性 → リッチ上品系(左側)

子沢山で買い物が大変な女性 → カジュアルポップ系(右側)

をイメージして作成しました。

女性のお客さんを惹きつけるバナーは

  • 細かいところまで手が込んでいる
  • 装飾が多い

という傾向にあると感じました。

私が実践した女性にフォーカスしているのだと

  • 05の女性向け転職サイトのバナー
  • 12のコスメメーカーのバナー
  • 14のウエディングのバナー

くらいですね。探すのも難しいです。

また逆に、

男性にフォーカスしたバナーもやってこなかった。

そういえば男性を使ったものは、日高くんが初めてだったな…と←

chot.designさんの第2回戦をやるつもりが

アイデアも良い写真に出会えず、ぜんぜんできなかったです。

悔しい…

ペルソナを作成する際に、

どこの年齢層・性別をターゲットにするか

という発想が必要になってくると思うので

自己感覚なので見つけること自体難しそうですが、、

そういうところへのフォーカスしたものを選んでいかないとと思いました。

✔️ ボタンを演出したバナーをやってこなかった

オリジナルバナーを作成する際に戸惑いました。😅

個人的な好みで選んでこなかったです。

そろそろお遊びも終わりたいこうか…ってところですね。

振り返ってみて今後の話。

  • まだまだ量は少ない
  • まだまだできることはある

って思いました。

先日、Twitterでフォロワーさんとお話しさせていただいた中で

『デザインのドリル』を知りまして気になるところですが

もう10個。30個の達成を成し遂げてみたい。

成し遂げた世界が見たい。という気持ちが大きいです。

まずは、「figmaでバナトレやってみよう」を重視して

取り組んでいきたいとの想いです。

なぜiPadからfigmaへ移ろうとしているかというと、

  • 業務上のデータのやりとりとして「iPadではまずいな」と感じたから
  • figmaを通すことで、少しずつiPadからMac Bookへ移行できていくと思うから

ほんとはAdobeを今すぐにでも取り入れたほうがいいと思いますが

  • 金銭的に厳しい
  • オリジナルの製作を優先したい
  • 一通りのコーディングができるようになることに時間を割きたい。

これからの課題としては反省点で挙がってきた

  • パターンが使われたバナー
  • 世代や性別といったターゲットフォーカスのバナー
  • ボタン演出のあるバナー
  • できればUnsplash 以外の写真も取り入れたい。

が、軸になってくるのかなぁ…と思います。

オリジナルを考えるための種にもしていきたいです。


最後まで読んでいただきありがとうございました!

コメント

タイトルとURLをコピーしました