-本日のアジェンダ-

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

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

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

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

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

バナーの作成

Photoshopを使って作成。

まずは模写によるバナー制作

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

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

レイアウトデザイン

まずはそれぞれの「面積の意識」

「余白」には

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

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

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

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

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

近接とは、関連する項目をまとめてグループ化すること。

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

【近接】と同様に直感的に情報の構成を理解できるようになる。これが【整列】。

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

デザイン上のある特徴を繰り返し使用することを【反復】という。

「アクセント」

デザインや文章・建築などの世界では、特に強調したいために周りと違ったアプローチをした部分をアクセントと呼ぶ。例えば、全体が真っ白なファブリックで覆われたソファに赤の縁取りを施したデザインは、赤を指して「アクセントカ
ラー」と呼ぶ。

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

コントラストとは、２つの要素が異なる場合に見た目をはっきりと異ならせること。

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

「ジャンプ率」とは、本文の文字サイズに対するタイトルや見出しの文字サイズの比率のこと。

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

可読性を損なわずに、一瞬で人の目を捉えるための素材をアイキャッチャーと呼ぶ。

文字デザイン

可読性(文章が読みやすいか)

視認性(パッと見た瞬間の認識しやすさ)

判読性(誤読がないか)

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