本日のテーマ

今後のバナー制作に向けて情報収集をしましょう。

まずは模写によるバナー制作です。制限時間は1時間です。

制作の制限時間を意識しましょう。コツは「手間」「無駄」「無理」をしない

ワンポイントアドバイス

１．最初はしっかりと「レイアウト」を考える「余白」「グループ化」「アクセント」を意識

2．次に「文字」に注目「読みやすさ」を徹底的に意識

３．最後に「配色」を見てみましょう。「読みやすさ」を維持しつつ「作品の世界観」を守れているか

レイアウトデザイン

「余白」※余白の取り方、ホワイトスペースへの意識

余白のポイント①作品の周りに余白を取る

余白のポイント②各項目の周りにも余白を取る

余白のポイント③ 枠の中は窮屈にしない

「配置した内容のグループ化」

グループ化のポイント①近接(Proximity)

グループ化のポイント②整列(Alignment)

グループ化のポイント③反復(Repetition)

「アクセント」

デザインの特徴、作品の象徴的な部分を考えてみましょう

脇役と主役の構成脇役となる内容と主役になる内容の順番を意識してみましょう

アクセントのポイント①コントラスト(Contrast)

アクセントのポイント②ジャンプ率を変える

アクセントのポイント③アイキャッチを考える

次は文字デザインです。

文字や文章の｢読みやすさ｣は、可読性、視認性、判読性という３つの要素から成ります。

・可読性、文章が読みやすいか・視認性、パッと見た瞬間の認識しやすさ

・判読性誤読がないか

最後に配色を確認してください

ポイント！

１．CMYK（印刷物）とRGB（Web）では色数が大きく異なります。

２．色の3属性は「陰影」として表現するのか「柄」として表現するのかをしっかりと見極めたうえで使い分けましょう。

３．グラデーションの使い方は十分に気を付けましょう。安易なグラデーションは違和感でしかありません。配色にも意味がある事をしっかりと意識してみましょう。

学科 ECサイトデザイン基礎②【オンライン】

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
バナーとは？

2限目
学科 ECサイトデザイン基礎②
レイアウトデザインのポイント

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

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

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

本日のテーマ

今後のバナー制作に向けて情報収集をしましょう。

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「デザインの考え方」の教科書④.pdf

【動画】「デザインの考え方」の教科書④

バナー広告とは？

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

参考サイト

ワンポイントアドバイス

まずは模写をして徹底的に真似をしましょう。
そのバナーの制作者が意図していていた技術・技能・表現などを真似することによって自分のものにしましょう。またPhotoshopのソフトでどのようにすれば再現できる考えながら作成してみましょう。これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみましょう。

本日の課題

(課題提出はありません)
模写したいバナーを収集をしましょう。
バナー掲載先のページをメモしておいてください。