-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎②
バナーとは？
Photoshop（フォトショップ）を使って作成。
まずは、真似を。レイアウトを分析どうするとかわいく、かっこよくなるか。
案件ごとにサイズが異なる。
まずは模写で練習。制限時間は1時間。
「手間」「無駄」「無理」をしない。
バナーを実際見る時間3秒まで。時間をかけて作ると沼にはまりやすい。
1時間以上かかったら一度ストップ。
１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
まず「面積の意識」
何をどのぐらいの面積にするか
・「余白」を意識
作品の周り：最低でも本文の文字の１文字分の余白を設ける。
２文字分くらいの余白をとるとゆったりして見やすくなる。
各項目の周り：文字が枠のギリギリになってしまうと、枠の近くの文字が非常に読みにくく。余裕をもって文章を枠内に配置。
枠の中は窮屈にしない
・グループ化
ポイント① 近接 (Proximity)：関連する項目をまとめてグループ化すること
ポイント② 整列 (Alignment)：「写真画像とテキストの上辺」「タイトル文字と本文の頭」など要素や大きさ、色などを揃えることで生まれる目に見えない線を意識
ポイント③ 反復 (Repetition)：反復させるものは、太字体、罫線、色、アイコンなど様々なものがあり、要素を繰り返し用いることで一貫性や統一感のあるレイアウトを実現
・アクセント
ポイント① コントラスト (Contrast)：２つの要素が異なる場合に見た目をはっきりと異ならせること。あえて差別化することで、要素間の関係性を表現。
ポイント② ジャンプ率を変える：「ジャンプ率」とは、本文の文字サイズに対するタイトルや見出しの文字サイズの比率のこと。ジャンプ率が低いと落ち着いた印象になり、ジャンプ率が高いと躍動感のある印象に。
ポイント③ アイキャッチを考える：可読性を損なわずに、一瞬で人の目を捉えるための素材をアイキャッチャーと呼ぶ。文字の邪魔にならない範囲で背景に大きな絵を入れたり、ギザギザやふきだし等を配置。どういうアイキャッチが使われているかいろいろ見てみるのが大事！
2限目
学科 ECサイトデザイン基礎②
レイアウトデザインのポイント
2．次に「文字」に注目
「読みやすさ」を徹底的に意識
・可読性：文章が読みやすいか
・視認性：パッと見た瞬間の認識しやすさ
・判読性：誤読がないか
３．最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか
最後に配色を確認
※色を意識させないぐらいが良い。
１．CMYK（印刷物）とRGB（Web）では色数が大きく異なります。
２．色の3属性は「陰影」として表現するのか「柄」として
表現するのかをしっかりと見極めたうえで使い分けましょう。
３．グラデーションの使い方は十分に気を付けましょう。
安易なグラデーションは違和感でしかありません。
配色にも意味がある事をしっかりと意識してみましょう。
3限目
学科 ECサイトデザイン基礎②
バナー制作に向けて
4限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集
5限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集
本日のテーマ
今後のバナー制作に向けて情報収集をしましょう。
ワンポイントアドバイス
まずは模写をして徹底的に真似をしましょう。
そのバナーの制作者が意図していていた技術・技能・表現などを真似することによって自分のものにしましょう。またPhotoshopのソフトでどのようにすれば再現できる考えながら作成してみましょう。これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみましょう。
本日の課題
(課題提出はありません)
模写したいバナーを収集をしましょう。
バナー掲載先のページをメモしておいてください。
本日学んだこと
バナー作成について
デザイン（特にレイアウト）のコツについて
感想
本日はバナー作成に向けてバナーとは？という部分とレイアウト→文字→色の順でそれぞれのコツについて学びました。
無意識になんとなく知っていたけどジャンプ率など言葉として知らない部分も多かったので、レイアウトの実践の際には意識していきたいです。
また、次回のバナーのトレース演習に向けて様々なバナーを見ていましたが、甘い飲料だと女性向けなのかかわいいデザインが多いなとか、車はシックなものが多いななど、まとめてバナーを見たことでの発見もあり面白かったです。
自分が街で見ていて覚えているバナーもいくつかあったのですが、だいたいが飲料系かファストフード系のおいしそうなデザインやかわいいデザインだったので、自分はこういうデザインに惹かれやすいのだなと理解することもできました。