本日のアジェンダ
1限目
実技 ECサイトデザイン実習③
クライアント確認について
2限目
実技 ECサイトデザイン実習③
バナー作成
3限目
実技 ECサイトデザイン実習③
バナー作成
4限目
実技 ECサイトデザイン実習③
バナー作成
5限目
実技 ECサイトデザイン実習③
バナー 講評
本日のテーマ
馴染んでください
バナーを作成したら、スクリーンショットしたページに当て込んでみましょう。違和感が無かったら成功です。ページに馴染むようにデザインの基本ルール「レイアウト」「文字」「配色」に気を付けて作成してみてください。
ご自身で選んだジャンルのバナーを作成し、ページ画像に当て込んで下さい。
4時限目終了までにご自身のポートフォリオサイトにアップしましょう。
5限目に講評を行います。
※バナーサイズ設定は自由です。
※目標2つ以上で制作しましょう。
本日のレポート
制作物
夏ギフトバナー
作成したバナー（700×500）
使用ツール：Photoshop
制作時間：2時間30分
デザイン説明
まず、LOHACOのバナーデザインの特徴は以下だと考えました。
- 商品の切り抜き画像は全て薄く影が付いている
- ゴシック体または明朝体を使っている
- アイコンのようなシンプルなイラストを使っている
- 背景や文字に過度な装飾はなくシンプル
- テキストは横書きのみ
以上の特徴を崩さないように、「夏ギフト」のバナーデザインをしました。
- 全体的に「日本の夏」「お中元」のイメージで作成しました
- 明朝体、金魚のイラスト、花火のイラスト
- テキストの色をサイト内で使用されている黒（#333）と同じ色を使用しました
当て込み前
⇩
案2 当て込み後
水族館イベントバナー
作成したバナー（320×193）
使用ツール：illustrator
制作時間：1時間
デザイン説明
水族館のバナーデザインの特徴は以下だと考えました。
- 青系・白・黒のみを使っている
- ゴシック体を使っている
- 写真を背景に使っている
- 過度な装飾はなくシンプル
- テキストは横書きのみ
以上の特徴を崩さないように、「水族館イベント」のバナーデザインをしました。
- シャチのショーだと直感でわかるように写真を背景に使いました
- 「スプラッシュ」を表現するために文字を立体的にしました
当て込み前
⇩
当て込み後
