バナー作成の概要
受講日：2025年04月18日
- 使用ソフト：写真を加工するシーンが非常に多く、Photoshopで作成する事が多い。
- 案件ごとにサイズは違うので、柔軟に対応できるようにする。
バナーに掲載する3要素
1.メッセージ（端的な文書やコピー）
2.イメージ（雰囲気を持つ写真やイラスト）パッと見て世界観が伝わる
3.アテンド（ご案内の内容）詳しくはこちらや、応募期間
バナー作成の所要時間
- バナーは1時間以内に1つ作る。
- バナー作りが1時間で間に合わなかったら、別のものを作る。
時間をかけると目が慣れてしまい、デザインへの依存性が高くなる。 - 実際にバナーが見られる時間は3秒位なので、凝った物を作るとかえって伝わりづらい。
バナーのコツ
バナー作成に慣れるために
- とにかく、数多く見て作る!!
- 人のバナーを見て真似するところから初めてみる。
- まずは模写によるバナー作成で練習する。
- とにかく「つながり」を意識。クリックした後に何をさせたいのかを考える。
模写の際に注目するポイント
- 文字の見やすさ
- レイアウト
- 配色
- ただ真似するだけじゃなく、何を1番伝えたいか。
- それを伝えるために文字・レイアウト・配色にしているかを観察する。
- 1番伝えたいものと、アテンド(伝えなければならないもの)を考えて構成する。
バナー作品のポイント
気づき
- なぜその「配置」「文字」「配色」にしたか？意識をする。全てに理由付けする。
お客様の依頼に対する再現力
- 忠実に再現するのが第一優先。勝手な事やらない。
考えて、もっと良くする提案を2案出す。
- でもこれは理想なので、まず忠実な再現力を示す。
- 希望通りパターンと、希望を汲み取りつつアレンジパターン。
- バナー作成の依頼内容から想定して作ってみる。AIに依頼してみる。
- 製作過程を明確化する。
バナー作成の手順
1.レイアウトデザイン
- 最初にレイアウトをしっかりとる
- まずはそれぞれの要素の面積比を意識する。
- 強調する部分の面積を大きくする。
余白・ホワイトスペースを意識する。
- 作品の周りに余白を取る。
- 各項目の周りにも余白を取る。
- 枠の中は窮屈にしない
配置した内容のグループ化
- 近接：関連する項目をまとめてグループ化。
- 整列：写真画像とテキストの上辺、タイトル文字と本文の頭など、要素・大きさ・色を揃える。
- 反復：太字体、罫線、色、アイコンなど、要素を繰り返し用いる。
脇役と主役の構成
- コントラストを付ける
フォントの大きさや形、写真のトリミングに変化をつける。 - ジャンプ率を変える
※本文の文字サイズに対するタイトルや見出しの文字サイズの比率。 - アイキャッチを考える
大きな絵を入れたり、ギザギザやふきだし等を配置する。
※可読性を損なわずに、一瞬で人の目を捉えるための素材文字や図形、イラスト、写真。
2.文字デザイン
- 提案時の具体例：フォントは明朝とゴシックを2個ずつ提案する。
（レイアウトは近しいもので比較してもらう）
- 可読性：文章が読みやすいか
- 判読性：誤読がないか
- 視認性：パッと見た瞬間の認識しやすさ
3.配色デザイン
- ベースカラーは癖のないもの。（白・黒・グレーなど無彩色をつかう）
実際にバナーを模写してみた
- 模写のテーマとなるバナーを選び、なるべく実物に忠実な模写をする。
- 但し、使用ソフトはPhotoshopのみとする。
- フォントのインストールは不可。学校のPC端末に入っているフォントの中から、実物に近いものを選んで使用する。
模写バナー 01 ドーナツの期間限定商品
- 作成時間 ：2時間
- 使用ツール：Photoshop
- 参考バナー：ミスタードーナツ
- illustratorが使えなかったので、左下の「20TH」のバナー形成が難しかった。
模写バナー 01 ドーナツの期間限定商品
- 作成時間 ：2時間
- 使用ツール：Photoshop
- 参考バナー：モスバーガー
- illustratorが使えなかったので、メインキャッチコピーの文字の装飾が難しかった。
（図形ツールで三角形を作り、文字の端に1つずつ付けた。）
バナー模写の感想
- 模写しなかったら気づけなかったデザインの工夫を知る事が出来て、とても勉強になった。
→パッと見では気づけなかった部分に、グラデーションやあしらいが施されていた。 - 模写をしてみると、実務でのPhotoshopとillustratorの使い分けがイメージしやすかった。
→ロゴや文字のあしらいは、Photoshopで対応するのが難しく、illustratorで作成する方がスムーズ。
