バナー
使用したソフト：Photoshop
使用した画像：pixabay.com/自分の写真から
製作時間：９０分
周りや文章の周りに縁取りをして見やすさと遊び心とおしゃれな感じを出したかったので、なじむような色合いが出るようにグラデーションと透明感で工夫した。
写真のサイズ感で、大きさが変わったときに配置換えに悩んだ。全部一緒にはできなくてもイメージは同じように伝わるように配置できたと思う。
実技 ECサイトデザイン実習③
– 本日のアジェンダ –
1限目
実技 ECサイトデザイン実習③
バナー作成
2限目
実技 ECサイトデザイン実習③
バナーのサイズ展開
3限目
実技 ECサイトデザイン実習③
バナー作成
4限目
実技 ECサイトデザイン実習③
バナー作成
5限目
実技 ECサイトデザイン実習③
バナー 講評
本日のテーマ
オリジナルバナー作成と、同じ内容でサイズ展開したバナー作成です。
バナーのサイズ展開（リサイズ）
バナーは掲載される場所によって必要なサイズが異なるため、同じ内容でサイズ展開が必要になります。例えば、Instagramは正方形、Web広告は横長など形式が違います。ただ拡大・縮小するだけではレイアウトが崩れるため、それぞれのサイズに合わせて文字の大きさや配置を調整することが重要です。
どんなサイズ違いでも、一番伝えたいメッセージが正しく、また同じバナー広告であることが伝わるように整えましょう
ワンポイントアドバイス
サイズ展開とは、1つのデザインを「色々な広告枠」に合わせてリサイズすることです。
1. まず、基準となるバナー（例：正方形）を1つ作ります。
2. 次に、そのバナーに載せた「画像・文字・ロゴ等」をそのまま使って、別の形（例：横長や縦長）に、パズルを組み替えるようなイメージで配置し直します。
3. 形が変わっても「同じキャンペーンの広告だ」とひと目で分かるように作るのがポイントです。
バナーサイズの一例
| 形状 | 表示サイズ (px) | 作成しやすいサイズ (px) | 用途例 |
| 正方形 | 1080 × 1080 | （原寸） | Instagram、Facebook、 LINEのフィードなど |
| 横長1 | 300 × 250 | 600 × 500 (2倍) | PC・スマホ双方で見やすいサイズ |
| 横長2 | 320 × 50 | 640 × 100 (2倍) | スマホ下部用 |
| 縦長 | 120 × 600 | 240 × 1200 (2倍) | PC向けWebサイトの左右サイドバー |
Photoshopで縮小してファイルを書き出す例
① 「ファイル」→「書き出し」→「web用に保存」
② ファイル設定の形式を選択する（例：JPEG）
③ 画質を設定する
④ 画像サイズの「パーセント」を設定する（例：50%）
⑤「保存」をクリックして保存
本日の課題
ご自身で選んだジャンルのバナーを1点作成し、次にそのバナーのサイズ違いを作成します。
4限目終了までにご自身のポートフォリオサイトにアップしましょう。
5限目に講評を行います。
※バナーサイズ設定は自由です。
※目標はサイズ展開を含めて2点です。できるようであれば、3つ目のサイズ展開にもチャレンジしてみましょう。