本日のテーマ

オリジナルバナー作成と、
そのサイズ展開の準備です。

1限目
学科 ECサイトデザイン基礎③
バナーの作成について

2限目
学科 ECサイトデザイン基礎③
バナーの作成について

3限目
学科 ECサイトデザイン基礎③
提案をすることについて

4限目
学科 ECサイトデザイン基礎③
再現力の重要性について

5限目
学科 ECサイトデザイン基礎③
制作過程について

バナー受注の一例

・参考バナーを頂く。
・入れて欲しい要素を伺う。
・その他の確認内容の確認。

＞ウィズとハイト
＞フォトショップ・イラストレーター
＞素材データ
　自分で探す場合、見積もりが変わる。
　→著作権もチェック

⬇️

デザインパターン・アイデアは複数提供する。
・ファイル名を明確に
（クライアント様名・日付・案件名）
・ファイルごとの提案の違いを明確に

ファイル名の修正
⬇️

■１つは参考バナーに忠実に再現する案を提出する。

・レイアウト
＞余白　無駄にスペースを空けない
・文字　
・配色　
＞参考バナーの配色文字　枠の色と太さ

■２つ目以降
ベース（参考バナー）を大切にし、自身が思う《より良いデザイン》提案を提出する。

・ロゴの移動
・スペースを活かすためイラストを配置（参考サイトより。必要なのかもしれないという推測から）
・配色を目立つ色・区別がつく様に変更
・線の細さ（提案を生かして）

提案は３個用意するのがベスト。
それ以上だと迷いが生じる可能性がある。

クライアント様の返答

■「お役立ち資料集」をもっと目立たせたい
→提案の黒文字は採用されなかったので可視性を上げたいのでは、と推測。
→文字の太さを太くし、資料ダウンロードの部分を控えめに変更

デザインする上で大切なこと


・忠実に再現できる能力
・提案できる能力
→この２つを見せることによって
デザインの幅を提案することができる。

制作依頼２
前回と同じクライアント様からの依頼
SNS用のバナー制作

クライアント様からの依頼内容がクリアでない場合、案を作成する数が増えてしまう。

ここでも以下を基本に４・５パターンくらいに絞る。
・レイアウト（配置）で違いを見せる
・フォント（文字）で違いを見せる
・カラー（配色）で違いを見せる

案はアイデアの提案として考える。
『この様な方向性ですか？』

■文字のパターンは明朝・ゴシックは必須で提案する。

■カラー（配色）も希望が不透明な場合
全体のベースカラーは癖の無い（白）をベースにして、背景の表現を変える。
→白・黒は色ではなくトーン。

・文字のレイアウトは変わらず、中央の素材の配置を変えて提案。
・フォントはゴシックで決定。
・青と赤は参考バナーから。
・白はWEB上で白バックになる可能性も考慮し境界線を付ける。

ABC案（３パターン）を作成時
工程の初稿・２回目・３回目の
区切りの制作物も保管しておくこと！
工程をやり直すことも多々あるため。

同じ内容で２サイズ作成
オリジナルを作成
内容を同じでサイズを変えて作る。

＜参考＞
【資料】

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「バナーの作成について.pdf」　

【動画】

参考サイト

バナーサイズの一例

形状表示サイズ (px)作成しやすいサイズ (px)用途例
正方形　1080 × 1080（原寸）Instagram、Facebook、
LINEのフィードなど
横長1　300 × 250600 × 500 (2倍)PC・スマホ双方で見やすいサイズ
横長2320 × 50640 × 100 (2倍)スマホ下部用
縦長120 × 600240 × 1200 (2倍)PC向けWebサイトの左右サイドバー

作品の見せ方は完了までの過程も大事です！

ポートフォリオサイトに乗せるバナー等の作品は、ブラッシュアップも含めて掲載しましょう。
最初に作成したバナーから、他のデザインを見たり聞いたりして、もっと良い作品にしていく過程も解り易く掲載して「制作過程」を明確にして成長力もアピールしちゃいましょう！！