実技 ECサイトデザイン実習②　2025年11月21日

講師：若松　勇次　先生

-本日のアジェンダ-

---

本日のテーマ

まずはバナー「模写」で表現の完全コピーを目指しましょう

覚えておくと良い基本操作

• レイヤースタイル
  Photoshopのレイヤースタイルの使い方【全種類一覧解説】
• ブレンドモード(描画モード)
  【Photoshop】描画モードの基本と効果的な使い方
• 塗りつぶしツール
  Photoshopの塗りつぶしツールの使い方と使い道、徹底解説！

バナー制作で覚えておきたい復習

• スマートオブジェクト
• 調整レイヤー
• トリミング復習
• レタッチ復習
• クリッピングマスク
• レイヤーマスク
• ベクトルマスク

本日の課題

バナー作成練習 (模写)
ご自身で選んだジャンルのバナー模写を作成し、5時限目終了までにご自身のポートフォリオサイトにアップしてください。
※バナーサイズ設定は自由です。
※目標2つ以上で制作しましょう。
※講評はありません。

■ タイトル　サマーセール用ファッションバナー（模写制作）

参考モデルバナー

模写制作

■ 目的

海外ファッションECの広告レイアウトを参考に、
写真配置・余白・文字の強弱の付け方を学ぶために制作しました。
特に、左右に人物写真を置き、中央に情報を集める三分割構成を模写し、
視線の流れとバランスを意識しています。

■ ターゲット

シンプルで洗練されたテイストを好む大人の女性を想定。
落ち着いた色合いで、上品さと軽やかさが伝わる印象にまとめました。

■ 制作環境・使用ツール

・Adobe Photoshop
・レイヤーマスク、クイック選択ツール、グラデーションツール、テキスト配置などを使用

■ 制作内容

写真の明るさや雰囲気を揃えること、中央の余白の取り方が特に難しく、何度も配置調整を行いました。
模写を通して、バナー制作における「整列・余白・視線誘導」の重要性を改めて感じました。

■ タイトル「紅茶の時間」ミルクティー バナー（模写制作）

■ 目的

「午後の紅茶」の公式バナーを参考に、商品写真の見せ方・色味の統一・余白の取り方を学ぶために制作しました。
特に、背景の淡いトーンに対して商品の色が自然に浮かぶよう、質感と光のバランスを丁寧に再現することを意識しています。

■ ターゲット

落ち着いた飲料広告のデザインが好きな大人の女性を想定。
優しい色合いとやわらかい光で、“ひと息つく時間”をイメージできるようまとめました。

■ 制作環境・使用ツール

・Adobe Photoshop
・ベクトルマスク、ぼかし、ガンマ補正、トーンカーブ
・文字配置調整、カラーコード指定
・紅茶の時間ペットボトルはフリー素材サイト「歯科素材.com」より引用させていただきました。
　https://www.dental-sozai.com/

■ 制作内容

右上・右下に出てしまった細い境界線の処理がもっとも苦戦した工程でした。
背景のグレーが安っぽく見えないよう、ガンマ・ぼかし・明度補正を組み合わせて複数回調整し、ミルクティーの“まろやかさ”と背景の空気感がつながるように仕上げています。
テキストは「NEW」を中心にフォント・字間・濃度を調整し、商品イメージを損なわず上品に見える配置を検討しました。
今回の模写では、シンプルな構成ほど“光・質感・余白”の精度が仕上がりを左右するという気づきを得られた制作でした。