バナー模写 #1
初めまして。ここから、START
2022年からWebデザインの勉強を始めました。
1月にPhotoshopの操作方法を軽く勉強した後、2月に入っていからfigmaにてバナー模写を始めました。１週間分を振り返り、まとめました。
N0.1
カテゴリー：フィットネス
ターゲット：運動不足の20,30代女性
目的：新規顧客獲得。特別価格でレッスンが受講できる。
構造：２分割でimage、テキストに分かれている。image、ロゴ、キャッチコピー、メインテキスト(目的)、サブテキスト(期間)
気づき：キャッチコピーのフォントが汗をかいているようで、商品イメージに合っている。背景の雫のレイヤーがあるので汗の臨場感が綺麗にイメージに当てはめている。コーポレートカラーを背景色にしている。imageとテキスト、ロゴの枠が背景に4点配置されているのが少し窮屈に見受けられる。
感想：figmaのインストールから始めたので時間がかかった。最初から日本語の入力でつまずいてしまった。見本のように背景色の上に雫のレイヤーを重ねるのは諦めてしまった。この加工はPhotoshopでないと出来ないようです。
No.2
カテゴリー：幼児教室
ターゲット：0歳から小学生を持つ母親
目的：新規顧客獲得。幼稚園前から通えるので子供と外出できる機会や核家族の親にコミニュケーション場、子育て相談場を提供。
構造：２分割でimage、テキストに分かれている。image、ロゴ、キャッチコピー
気づき：キャッチコピーのフォントが可愛い。要素が3点のみでシンプルであり企業理念を噛み砕いてキャッチコピーに用いている。ロゴも大きめに配置されている。コーポレートカラーの水色をベースに円形の写真やあしらいが可愛いイメージに仕上げてある。前回と違い写真を四角から円形にするとイメージが一気に変わる。
感想：figmaで写真を円形にするのに時間を要した。またキャッチコピーのフォントをカーブさせるのにはプラグインのインストールが必要なようで今回は諦めた。調べごとに時間をかなり割いてしまった。
No.3
カテゴリー：電気製品
ターゲット：アナログ写真に興味がある20,30代向け。
目的：新商品紹介。アナログカメラの魅力を大人に発信。フィルムカメラより手軽さがある。学生時代にチェキを利用していた休眠顧客を回帰を促す。
構造：2分割でimage、テキストに分かれている。imagex3、ロゴ、キャッチコピー、テキスト(商品名)
気づき：image写真は商品よりモデルが大きく写っていて一番に目を引く。イメージ俳優を起用して大人な雰囲気とアナログ感のあるカメラボディがワンランク上のチェキ感が伝わってくる。商品名のフォントが落ち着いたグリーンで差し色になっている。キャッチコピーははっきり識別できない程のカラーで全体の世界観を大事にしている印象。
感想：カメラをフリー素材から選ぶのに似ているものがなかった。代替えimageは大まかに似ているものにして今後は時間を割くのはやめることにした。目的は新製品の販売促進なのに製品の写真小さい場合もあるのが気づき。世界観も大切なのが理解できた。
No.4
ターゲット：お洒落に関心がある30,40代女性
目的：購買。特集記事にジャンプしてもらいオンラインショップまたは実店舗に訪問してもらう。
構造：3分割でimage、テキストに分かれている。imagex2、ロゴ、キャッチコピー、テキストx2
気づき：前回も写真2枚でしたが今回は斜めに配置することで、控えめに躍動感が出る。背景が落ち着いたカラーでターゲットの嗜好と合っていそう。テキストも淡い背景に映える感じの色にはせず控えめなため、写真に一番目がいく仕上がりでブランドイメージを大事にしている印象。インスタやwebサイトを確認したが背景色の色味と似ていた。
感想：写真加工に苦戦した。人物の周りの不要な部分を切り取る方法を検索した。また似たフォントを探すが大変だった。右下のテキストが白文字で背景の人物と色被りして視認性が悪かったのでシャドーをはっきり目に追加した。
今週の振り返り
独学で勉強しようと思っても何をすれば良いのか手探り状態なのですが、ツール自体を使えないとどうにもならないと思い、多くの皆さんが実践しているバナー模写をまずはやってみようと考えました。実際にやってみて、思うようにfigmaを扱えず、検索するにも、どのようなワードでヒットするのかが分からず調べごとに時間がかかりました。また多くの方の解説を読んでも思うように操作できないこともあり、その辺は今は諦めて小さく出来る事に目を向けて操作方法を習得して行きたいです。
Noteを書こうと思ったきっかけは、自分の学習記録として、更に言語化や考察する練習を行いバナー模写でツールの使い方以外にも学びの幅を広げる為です。デザインの勉強を初めて思ったのですが、言語化や考察ってどんなお仕事でも役に立つスキルですね。
※使用ソフト：figma、Photoshop(一部写真編集に利用)、canva(模写後のnote用に編集時利用)
写真、イラスト：フリー素材を利用
ロゴ、企業名、商品名：模写バナーは架空の物になります。