本日のアジェンダ
1限目
学科 ECサイトデザイン基礎②
バナーとは？
2限目
学科 ECサイトデザイン基礎②
レイアウトデザインのポイント
3限目
学科 ECサイトデザイン基礎②
バナー制作に向けて
4限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集
5限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集
本日のテーマ
今後のバナー制作に向けて情報収集をしましょう。
まずは、模写をして徹底的に真似をしましょう。
そのバナーの制作者が、意図していていた技術・技能・表現などを、Photoshopでどのようにすれば再現できるかを考えながら作成してみましょう。
これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみましょう。
本日のレポート
バナーの作成
バナー広告とは？
バナーはウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。
本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。
主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。
レイアウトデザイン
レイアウトは、デザイン、建築設計、書籍や雑誌などにおいて「何をどこに、どのように配置するか」を指す言葉。
レイアウトを変えることでデザインの伝わりやすさは変わります。
まずはそれぞれの「面積の意識」をしてみましょう！
- 最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識 - 次に「文字」に注目
「読みやすさ」を徹底的に意識 - 最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか
余白
作品の周りに余白を取る
各項目の周りにも余白を取る
枠の中は窮屈にしない
配置した内容のグループ化
近接：関連する項目をまとめてグループ化
整列：目に見えない線を意識して配置を整える
反復：デザイン上のある特徴を繰り返し使用する
※例えば、同列の商品なら同じパターンで作るなど、同じルールで同じ表現をする。
アクセント
コントラスト：２つの要素が異なる場合に見た目をはっきりと異ならせる
ジャンプ率を変える：コンテンツの意図に合わせてジャンプ率（フォントの大きさ）を変える
アイキャッチを考える：可読性を損なわずに、一瞬で人の目を捉えるための素材
文字
可読性：文字の読みやすさ
視認性：パッと見た瞬間の認識しやすさ
判読性：誤読がないか
配色
- CMYK（印刷物）とRGB（Web）の色数の違いを理解する。
- 色の3属性は「陰影」として表現するのか「柄」として表現するのかをしっかりと見極める。
- グラデーションの使い方は十分に気を付ける。
感想
バナー作成におけるポイントや注意点を学んだ。
次回実践日に時間内に2作品の模写を終えられるように頑張る。
