実技 ECサイトデザイン実習③ 2025年11月25日
arisa講師：平井 美江 先生
– 本日のアジェンダ –
1限目
実技 ECサイトデザイン実習③
クライアント確認について
2限目
実技 ECサイトデザイン実習③
バナー作成
3限目
実技 ECサイトデザイン実習③
バナー作成
4限目
実技 ECサイトデザイン実習③
バナー作成
5限目
実技 ECサイトデザイン実習③
バナー 講評
本日のテーマ
馴染んでください
クライアントへの確認方法
デザインした制作物をクライアント（発注者）に確認を入れる場合は、そのまま見せる事が最も解りやすい方法です。バナーを作成したらページにそのまま当て込んで（テストアップ等）確認をとります。
ワンポイントアドバイス
バナーを作成したら、スクリーンショットしたページに当て込んでみましょう。違和感が無かったら成功です。ページに馴染むようにデザインの基本ルール「レイアウト」「文字」「配色」に気を付けて作成してみてください。
本日の課題
バナー作成練習 -あて込み-
ご自身で選んだジャンルのバナーを作成し、ページ画像に当て込んで下さい。
4時限目終了までにご自身のポートフォリオサイトにアップしましょう。
5限目に講評を行います。
※バナーサイズ設定は自由です。
※目標2つ以上で制作しましょう。
じゃらん 特集一覧 TOPバナー
■ タイトル
温泉特集バナーVer.1
温泉特集バナーVer.2
■ 企画意図
秋冬の静かな温泉旅行をイメージし、あたたかい光と ほっとする時間を視覚的に感じてもらえるようバナーを制作しました。
季節感と癒しを両立させながら、旅への期待が自然と高まるような雰囲気づくりを目指しました。
■ デザインの方向性
・落ち着いた光の色を活かしつつ、中央にやわらかいホバーを重ねて読みやすさを確保
・もみじのモチーフで季節感を添え、賑やかになりすぎない範囲でアクセント配 置
・文字の強弱（「温泉特集」を中心軸）を明確にし、視線誘導を意識
・全体の世界観が “やわらかい余白 × ぬくもり” にまとまるよう色味を統一
■ ターゲット
落ち着いた旅・温泉・癒しを求める大人の女性
（例：ひとり旅やゆったりした旅プランを好む層）
■ 制作内容
・Canvaでホバー形状を作成
・中央ホバーの色味を 光に馴染むやまぶき色と湯気をイメージするホワイトで調整
・文字の視認性を上げるため白文字＋配置調整
・もみじモチーフなど、素材の統一感・重心を見ながら配置
・全体トーンが秋冬の温泉らしく落ち着くよう明るさのバランスを微調整
■ 使用ツール
Photoshop、Canva
■製作時間
３時間
■学んだこと
背景写真が変わるとバナー全体の世界観が大きく変化する
やわらかいシェイプは透過度の調整が大事で可読性と雰囲気の両立が必要
旅系バナーは情報量より空気感がクリックを左右する
「見る・真似る・直す」の3ステップを回すことが大切
＼ 最新情報をチェック ／
