学科ＥＣサイトデザイン基礎②

2025.03.28

本日の講義

バナーとは
レイアウトデザインのポイント
バナー制作に向けて
バナー制作に向けての情報収集
バナー制作に向けての情報収集

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

ワンポイント：まずは模写をして徹底的に真似する

　　　　　　　制作者の意図や技術、技能、表現を理解する

　　　　　　　文字や見やすさ、レイアウト、配色などを考える

バナーの作成

まずは模写

どのようにすれば再現できるかを考える

文字の見やすさ、レイアウト、フォント、配色を意識する

Photoshopで作成する

「デザインのレイアウト」の分析、特徴の理解

＊バナーはサイズに決まりがない（横長、縦長、正方形など）

バナー制作練習で必須のコツ

制限時間は1時間

「手間」「無駄」「無理」をしないこと

・生産性を下げない

・手間がかかるなら別途費用をいただく

・無理なことはきちんと伝える

*バナーを見ている人は0.7秒ほどしか見ない

*時間をかけて作ると生産性の面では損をしてしまうから

レイアウト・デザイン

レイアウトを考える
余白を考える
グループ化できるものを見つける
アクセントに注目する
文字に注目
読みやすさの工夫を考える
配色
読みやすさを維持しつつ「作品の世界観」を守れているか考える

レイアウトデザインについて

レイアウト：何をどこに配置するか

意識すべきは面積

　面積が大きいほど伝わるメッセージは強くなる

余白：ホワイトスペース・何も配置していない場所

・ゆとりを持つ

・文字間、文字とスライドの端・文字と図の間

・スペースが美しければ作品も美しい

point

　作品の周りに余白を取る

　各項目の周りにも余白を取る

　枠の中は窮屈にしない

レイアウトデザイン

「要素の配置とグループ化」

・近接

　関連する項目をまとめてグループ化する

・整列

　内容に一体感を持たせ、組織化できる

　写真とテキストの上辺、タイトル文字と文章の頭

・反復

　デザイン上の特徴を繰り返し使用すること

　反復例：太字体、色、アイコン
　一貫性や統一感のあるレイアウトを実現する

・対比

　要素の優先度を明快にデザインで示す

　優先度に応じて大きさや色などに強弱をつける

「アクセント」

脇役と主役の構成

　・脇役となる内容と主役になる内容の順番を意識してみる

point

コントラスト	見た目をハッキリ分ける差別化
ジャンプ率	本文の文字サイズに対するタイトル見出しのサイズとの比率
アイキャッチ	文字や図形、イラスト、写真など効果的なアイキャッチャーにする可読性を損なわないようにする文字の邪魔にならないようにする太字、イラスト、写真、ふきだし

文字デザイン

レイアウトを整えたら文字デザインを考える

・可読性

・視認性

・判読性

可読性

背景色と文字色の組み合わせ

短文は太文字・長文は細文字

視認性

文字を太くする

色を強くする

文字書体を考える（フォント）

判読性

間違えて読まないように意識する

　→余白を作ることで見やすく

文章の意味を伝わりやすくする工夫

誤読、誤解をさせないようにする

配色

赤といっても…色相、彩度、明度が違えば違う赤になる

　　　　　　　カラーコードを意識する

point

　CMYKとRGBでは色数が大きく異なる

　色の3属性は「陰影」「柄」どちらか使い分ける

　グラデーションの使い方は十分に気を付ける

　　→違和感につながりかねない、自然に

CMYK（カラーモデル）紙媒体

Cシアン・Mマゼンタ・Yイエロー・Kブラック

インクの色、色を重ねるごとにブラックに近づいていく

RGB（カラーモデル）WEB

Rレッド・Gグリーン・Bブルー

光の三原色、色を重ねるごとに明るくなる・等しいと白になる

グラデーション

陰影と柄の意識

表現に気を付けること

サムネイルとバナー

サムネイル：検索語に出る広告、検索する人は興味を持っている

バナー：途中で出てくる広告、検索するわけではないので興味を持っていない

　　　　バナーのほうが興味を引くものにしないといけない

　　　　見る側は1秒も見ないので、制作に長い時間かけると損をする

模写のコツ

母の日ギフトの場合

①文字を見る…一番見てほしいものを考える

　構成を考える

　・タイトル

　・キャッチコピー

　・日付

　・送料無料

＜優先度＞

タイトルを一番に伝えたい
バナーは入り口であり、出口は購入してもらうこと
目的意識をはっきり持ち、それ以降の優先度を決める
購入させるためにいつまでにを優先
送料無料を出して購入を促す
キャッチコピー、アイキャッチ

②情報の構成の模写・レイアウトの模写

Photoshopでの操作
チェックはどう描くか
ドロップシャドウを用いる
文字の周りを白くする
余白
アクセント
読みやすさ
世界観

「バナートレースについての記事抜粋」

意識すべき点についてまとめた

カラーイメージ
フォントイメージ
デザインの特徴
ターゲット
構造について
どんな「視線誘導」を使っているか
このデザインをもっとよくするための工夫を施すとしたら
所要時間

上記8点を作成後まとめることで、模写から学ぶ点に気づきやすいようなので実践してみようと思いました

＼最新情報をチェック／