1限目・2限目
学科 ECサイトデザイン基礎②
バナーとは？
まずは模写によるバナー制作　世にあるデザインの「レイアウト」・特徴を理解「かわいい」・ああすると「かっこいい」を分析
制限時間は1時間　　　目が慣れる。デザイナー修正時間含めて1時間で制作する。　　　　　　　　　
「手間」　「手間」がかかる作業＝別途費用か時間がかかることを伝える。
「無駄」　　仕事として認められない。
「無理」　　事前に伝える。

模写＝徹底的に真似をする。
　　　意図していていた技術・技能・表現
　　　「文字の見やすさ」と「レイアウト」「文字」「配色」を意識

１．最初はしっかりと「レイアウト」を考える
　「余白」「グループ化」「アクセント」を意識
2．次に「文字」に注目
　「読みやすさ」を徹底的に意識
３．最後に「配色」
　「読みやすさ」を維持しつつ「作品の世界観」を守れているか

レイアウトデザイン
「面積」の意識
「余白」を意識　→　ホワイトスペースと呼ばれる何も配置していないところ
　　　　　　　　　　ゆとりをもって配置できるようなスペース
「文字とスライドの端」、「文字と文字」、「文字と図」の間にはしっかりとスペース
＊スペースが美しければ、作品も美しい

余白のポイント① 　作品の周りに余白を取る
　　　　　　　　　コンテンツの周りには、最低でも本文の文字の１文字分の余白
　　　　　　　　　２文字分くらいの余白をとると、かなりゆったりした作品になり、確実に見やすくなる
　　　　　　　　　余白が多いほどオシャレな印象になりやすい
余白のポイント② 　各項目の周りにも余白を取る
　　　　　　　　　余裕をもって文章を配置
余白のポイント③ 　枠の中は窮屈にしない
　　　　　　　　　枠の中の文字が窮屈すぎると読みにくい（角丸の〇部分に文字が入ると読みづらい）
　　　　　　　　　少々文字を小さくした方が読みやすいこともある

配置した内容のグループ化
グループ化のポイント① 　近接 (Proximity)　関連する項目をまとめてグループ化すること
　　　　　　　　　　　　それぞれのグループ間の距離を少し大きめに取ることで、
　　　　　　　　　　　　直感的に情報の構成を理解できるようにして、同じ種類や系列の情報を近くに配置
グループ化のポイント② 　整列 (Alignment)
　　　　　　　　　　　　整列を用いることでページの内容に一体感が生まれると同時に、組織化につながる
　　　　　　　　　　　　整列を利用するときは、目に見えない線を意識
　　　　　　　　　　　　↳「写真画像とテキストの上辺」「タイトル文字と本文の頭」など要素や大きさ、色などを揃えること
グループ化のポイント③ 　反復 (Repetition)　デザイン上のある特徴を繰り返し使用すること
　　　　　　　　　　　　太字体、罫線、色、アイコンなど様々なもの
　　　　　　　　　　　　要素を繰り返し用いることで一貫性や統一感のあるレイアウトを実現

アクセント　　　　　　　特に強調したいために周りと違ったアプローチをした部分デザインの特徴
　　　　　　　　　　　　作品の象徴的な部分デザインの特徴、作品の象徴的な部分
　　　　　　　　　　　　脇役と主役の構成
アクセントのポイント① 　コントラスト (Contrast)　
　　　　　　　　　　　　２つの要素が異なる場合に見た目をはっきりと異ならせること
　　　　　　　　　　　　情報の優先度を考慮し、重要な要素はより目立たせるなど差別化
　　　　　　　　　　　　フォントの大きさや形、写真のトリミングに変化
アクセントのポイント② 　ジャンプ率を変える
　　　　　　　　　　　　本文の文字サイズに対するタイトルや見出しの文字サイズの比率
　　　　　　　　　　　　本文に対する相対的な大きさが、目立ちやすさや躍動感を決めている
アクセントのポイント③ 　アイキャッチを考える
　　　　　　　　　　　　可読性を損なわずに、一瞬で人の目を捉えるための素材
　　　　　　　　　　　　大きく太い文字
　　　　　　　　　　　　イラストなど
　　　　　　　　　　　　雰囲気のあるイラストや写真
　　　　　　　　　　　　ギザギザやふきだしなど

文字デザイン
・可読性　　　文章が読みやすいか　　　　　　　　細字（目が疲れにくい）＞太字
・視認性　　　パッと見た瞬間の認識しやすさ　　　ゴシック体＞明朝体
・判読性　　　誤読がないか　　　　　　　　　　　誤読・誤解をさせないかどうか

配色　　　　　「色相」「彩度」「明度」が変われば、違う色になる。
　　　　　　　「陰影」なのか「柄」なのかの判断と理解が必要。
　　　　　　１．CMYK（印刷物）とRGB（Web）
　　　　　　２．色の3属性は「陰影」として表現するのか「柄」として
　　　　　　　　表現するのかをしっかりと見極めたうえで使う。
　　　　　　３．グラデーションの使い方は十分に気を付ける。
　　　　　　　　安易なグラデーションは違和感でしかない。
　　　　　　　　配色にも意味がある事をしっかりと意識する。

色の3属性　　 3つの属性を組み合わせることによって色が決まる。
　　　　　　　（カラーピッカー）
　　　　　　　H 色相(Hue)　　　　　　　　　　　　色味・赤・黄・緑・青・紫など　　　　　　　　　　
　　　　　　　S 彩度(Saturation)　　　　　　　　　↔　色の鮮やかさの度合い
　　　　　　　B 明度(BrightnessもしくはValue)　　↕　　色の明るさの度合い
　　　　　　　トーン（色調）　　　　　　　　　　明度と彩度が似ている色を集めてグループ化したもの
　　　　　　　グラデーション　　　　　　　　　　色や濃淡を連続した階調で表現すること
　　　　　　　　　　　　　　　　　　　　　　　　「陰影」照明が当たった方向から見て、光と影の部分
　　　　　　　　　　　　　　　　　　　　　　　　「柄」

　　　　　　　CMYK（カラーモデル）　やや白飛び気味　印刷
　　　　　　　RGB（カラーモデル）　　色域が広い　　　WEB

バナー広告とは？
バナー はウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。
本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。
主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。

　　　　　　　　　　　　

3限目
学科 ECサイトデザイン基礎②
バナー制作に向けて

4限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集

5限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集