【職業訓練記⑨ Photoshop編】 「デザイナー入門: 初めてのバナー制作」

職業訓練もWeek14〜Week15（三ヶ月半）に突入してきました
演習スキル演習での動画でインプットが続きました( 脳内シナプス活性化 )

前回までが一ヶ月間に渡り演習スキルでの動画インプット（数十時間視聴）　▶︎　Illustratorでの実技演習（制作物を仕上げて納品）の流れで学習を進めてきました🔽

Illustratorは少しずつ慣れてきましたが技術が定着した感覚はありませんでした。。

そして、今回はPhotoshopを使用した「バナー制作」

「仮想クライアントバナーのデザイン制作演習」を整理します。

今振り返ってみると、職業訓練を通して一番楽しかったのがバナー制作でした😃

Adobe Photoshopとは

Adobe Photoshopは、世界中で最も普及しているビットマップ（ラスター）形式の画像編集・デザインソフトウェアです。


写真のレタッチから、高度な合成、デジタルペインティング、Webデザインのパーツ制作まで、画像に関するあらゆる作業を行うことができます

Photoshopの主な機能

• 写真編集・レタッチ： 明るさや色の調整、不要なものの除去、肌の質感修正など。

• 画像の合成： 複数の写真を組み合わせて、現実には存在しないようなビジュアルを作成。

• デジタルペインティング： 多彩なブラシ機能を使用し、ゼロからイラストやアートワークを描画。

• AI機能（生成AI）： 近年では「Adobe Firefly」を搭載し、テキスト入力だけで画像の一部を生成・拡張する機能が強力になっています。

・３つの実技課題要件内容

実技課題

１. アパレルの課題要件

２. 健康食品の課題要件

３. 旅行会社の課題要件

以上の1〜3の課題要件から必ず１つ選び、Photoshopでバナー制作を行い納品の流れになっています🤔💭

【実技演習】　Photoshopを使ったバナー制作　【旅行会社編】

１週間かけて３つのバナーを制作すると決意していましたが、

結論から言うと、「旅行会社」と「健康食品」の２つのバナーを制作しました。（最低１つは仕上げて納品すること、２つ目の作品制作は任意である）

勿論、PhotoshopとIllustratorの操作内容は異なる箇所は多くあるのですが、

Photoshopの場合「色調補正」や「写真合成」など、写真を加工するヴァリエーションが豊富な印象を受けました。

制作手順:

・Pinterestや他のサイトで検索🔍バナー検索
・ターゲット、ペルソナ選定( 特に健康食品のバナー作成時に意識)
・フォント、配色、レイアウトの検討
・素材集め（フリー素材画像探し）
・Photoshopを使用して制作開始
・フォント・配色などの調整・再検討
・テキストの調整（カーニングなど）
・納品

ペルソナ設定

性別: 20代〜50代の男女

仕事: 会社員

居住地: 沖縄

年収: 250 - 350万円

趣味: スポーツ観戦　(特にバスケットボール)

インサイト: 旅行は好きだが、ホテル探しや航空券探しが少し面倒。旅行券＋ホテルのセットで安いチケットを探している。

ペインポイント: 国内旅行の物価高

＜旅行会社のバナー制作＞

制作で意識した点：

・目的である「キャンペーン特設サイトへの流入を促したい」を意識してバナーの最下部に特設サイト流入を促すCTA（行動喚起）ボタン「特設サイトはコチラをクリック▶︎」を大きく配置。

・テキスト要件である「航空券とホテルがセットであることが分かるライティングをお願いします」をバナー広告の中央に配置しテキストは赤色で強弱をつけてフォントと文字サイズを調整して訴求。

・配色は「スポーツ観戦」「国内旅行キャンペーン」をイメージしたカラー要件を意識。関連する某スポーツチームのチームカラーをテーマカラーとし、上半分を「金」✖️下半分を「ネイビー」とし、中央の円は「日本国（日の丸）」「バスケットボール」を想起するように工夫。

反省点：

・バナー広告はチラシ広告とは異なりサイズが限られているため、文字の大きさ、フォントの種類などが詰めが甘く、「視線誘導」を意識してもう少しスリム（スマート）に載せるためのテキストの情報を絞り込む必要があったと感じた。

・今回の制作の場合、「RGKA（Ryukyu Golden Kings Airline）で行く」の特定名（固有名詞）を使用したバナーは規約違反のため修正は必須である。依頼された会社名・チーム名を使用する場合は規定に沿ってバナーを制作する必要がある。

・背景画が「スポーツ観戦」、「２色を使用した配色」等、ごちゃごちゃしてまとまりがなく、トーン（雰囲気）＆マナー（作法）🟰トンマナの観点からバナーを見る側の視点に立っていなかった。

・講師からのフィードバック【旅行会社編】

【実技演習】　Photoshopを使ったバナー制作　【健康食品編】

続いて任意課題で制作した健康食品（青汁会社）のバナー制作🔽


ペルソナ設定

性別・年齢: 20代後半〜40代前半

仕事: 会社員

居住地: 日本国内(関東圏内)

年収: 約300万

趣味: インターネットショッピング、健康食品探し、料理、サウナ、ウォーキング、動画視聴

インサイト: 青汁を試してみたいけど、なかなかその一歩が踏み出せない。買ってまずかったら飲まなくなるし損をしたくない

ペインポイント: 将来の健康が気になり出してきた。出産して肌荒れ、便秘など栄養不足だと感じてきた。

＜健康食品のバナー制作＞

制作で意識した点：

・目的である「広告の商品に興味を持ってもらうことでECサイトへの流入を促したい」を意識して、「青汁＝苦い、美味しくない」イメージを払拭するように「自分でも試してみようかな」と思ってもらうような意識で制作し、バナーの右下にCTA（行動喚起）ボタン「まずはお試し🔻」を配置して目立つように配色を赤色に選択した。

・「野菜不足や青汁への苦手意識といったユーザーにも幅広くお試しいただけるように、飲みやすさを強調して欲しい」と要望にあるようにFV（ファーストビュー）で「抹茶入り　おいしい青汁」と訴求し、「野菜不足解消」「飲みやすい」「粉末タイプ」とコンパクトに文言を絞り【ターゲティング】、幅広いユーザー獲得に繋げる意識で制作。

・フリー素材の写真を使用とのことだったので、マーケティングのターゲティングを意識し、２０〜３０代の女性でも「気軽に試せる」ようなフリー素材の写真を選定し、背景のあしらいに水滴を連想したデザインを配置することで「美味しそう」「飲みやすそう」「自分でも粉末で挑戦できそう」などの想起を狙う。

・丸みがあるフォントを選定し、バナーをみた時に柔らかいイメージを持ってもらう狙いがある。また、なるべく文字数を少なくして、左上の青汁の写真から右下のCTAボタンまでの「視線誘導」を意識して制作。

反省点：

・「野菜不足解消」が飲みやすいという印象を与えるライティングの要件に満たしているのか疑問符があるため、もう少しライティング案を練って配置する必要があったと感じる。

・吹き出しの「粉が溶けておいしい」の文字サイズ、フォントが細めなのでバナー広告した時に「視認性」が悪くなっている。本当に必要なデザインなのか再検討が必要だと感じる。

※講師からのフィードバック　バナー制作【健康食品編】のフィードバック依頼をしたのですが、（何かの手違いで？）講師からのフィードバックを頂けなかったです😭

この記事を読んで頂いた方からフィードバック、感想、意見等いただけたら幸いです😃よろしくお願いします🙇

💡まとめ💡

初めてPhotoshopを使ったバナー制作に挑戦しました。

要件を読み込み、

頭で整理し、

意図を持ったデザインを設計する。

自分の作りたいデザインではなく、

依頼者、CTAボタンを押すユーザー視点に立つこと。

マーケティングで得た知見を意識し、

誰がターゲットなのか

バナー広告の特徴を活かし

フォント、文字サイズ、レイアウトでバランスを整える。

デザイナーはデザインのことだけ

マーケターはマーケティングのことだけ

それだけでは機能しない。

バナーは顧客の行動を促す手段

デザイン✖️マーケティグを合わせることで

武器になり、売上に繋がるのだろう。

奥深い世界を見ている感覚だった。

また次の記事で会いましょう。

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

#職業訓練
#フォトショップ
#Photoshop
#バナー広告
#バナー制作
#駆け出しのデザイナー
#ターゲティング
#ターゲット
#デザインの設計
#健康食品のバナー
#旅行会社のバナー
#フィードバック