2022年2月9日に『思わずクリックしたくなるバナーデザインのきほん』が出版されました。
目次の俯瞰
思わずクリックしたくなる バナーデザインのきほん
はじめに
本書の使い方
INTRODUCTION デザインの前に整理しよう!
PART1 伝わるバナーってどう作るの?
01 メリハリ - 情報を素早く、 わかりやすく伝えるためのコツ
02 フォント - 品質を高める、 フォント選びのコツ
03 レイアウト - わかりやすい配置で、 情報を整理する
04 トリミング - いらない部分をカットして、 被写体を目立たせるコツ
05 リズム - 単調な印象を崩して、飽きさせないコツ
06 配色 - 色を操り雰囲気を変えるコツ
07 視線誘導 - 自然な視線の流れを作るコツ
08 装飾・あしらい - さり気ない演出でイメージを伝える
COLUMN 着手前に必ず確認 目的や設置場所に合わせてバナーを作る
PART2 小さくてもわかりやすく! レイアウトのコツ
01 困ったら斜めに分割 - エリアを分けてパッと情報を伝える
02 左右に2分割 - 箇条書きや縦長画像のレイアウトに便利
03 アシンメトリー - 野暮ったい印象から抜け出すコツ
04 リズミカルに散らす- 楽しくポップな動きが欲しい時は
05 お皿を活用する - 飲食店の広告でよく使うテクニック
06 重ねて立体的に - 写真が目立たない時は
07 白い窓 - 時間がない時に使えるレイアウト
COLUMN いろいろな形に変身!バナーを違うサイズに展開するコツ
PART3 パッと伝わる文字の見せ方
01 縦書き - 単調な文字にリズムを与える
02 文字を図のように配置 - パッと目に留まるように文字を配置する
03 数字を大きく - 目を引くデザイン手法の王道!
04 斜体 - 勢いやスピード感をアピールできる
05 曲線に沿わせる - 文字に柔らかい動きを与える
06 文字を色で分解 - カラフルにしてデザイン性を高めるには?
07 袋文字 - ごちゃついた背景でも文字は読みやすく!
08 英単語を追加 - 原稿に無い文字をアクセントに追加
09 筆文字 - 高級感のある和の印象を与える
10 手書きフォント - 親近感や共感を得やすい
11 版ずれ文字 - 抜け感のある明るい雰囲気に
12 作字 - 文字を作ってインパクトを与える
13 文字を植える - 背景と文字をシームレスにつなげる
COLUMN 知っていれば作業がサクサク進む! バナーデザインに使える5つの便利サイト
PART4 全く違う情報をわかりやすく伝えるグルーピング術
01 帯を敷く - 背景を切り替えて文字を読みやすく!
02 吹き出し - 言葉を台詞にしてアクセントに
03 リボン - リッチでエレガントなあしらい
04 ステップの図解 - 順番をグラフィカルに伝える
05 枠で囲む - 込み入った文字をわかりやすく
06 色を反転 - ツートーンでも華やかに演出
07 ボタン - 「クリック」 したくなるデザイン
08 アーチ - 祭りやイベントなどの賑わいを演出する
COLUMN バナーデザインが苦手な人におすすめ 模写トレーニングで感覚を鍛える
PART5 人の顔や視線を使って目を引くデザインに
01 顔 - 人の習性を使って強く注目させる
02 人の目線 - 視線の方向で文字に注目させる
03 集合写真 - 人を多く配置して賑わいを演出する
04 ジェスチャー - 手の表情で情報を案内する
05 目を隠す - 注目を集めすぎる顔の存在を調整する
06 穴から顔を出す - バストアップの人物写真を自由に配置できる
COLUMN 違和感や不快感を与えないために やってはいけない人物写真の構図
PART6 イマイチな写真をよく見せる補正と加工
01 明るく補正 - 影を明るくして爽やかに
02 ドロップシャドウ・光彩 - 背景との境界を自然に作る
03 スクラップブック - ラフでポップな印象を与える
04 境界線の透過 - 商品写真と文字の両方を最大限に大きくする
05 鏡面反射 - 美容関係の商品写真で重宝するテクニック
06 ブラシで削る - 中途半端なトリミング位置を調整する
COLUMN 印象良く意図が伝わる写真に調整 よく使うPhotoshopの技
PART7 あしらいと演出で心惹かれるデザインに
01 三角形 - スタイリッシュに見える背景のあしらい
02 括弧 - 見出しの物足りなさに味付けをする
03 円 - どこにでも置ける万能な図形
04 アイコン - シンボリックな図で直感的に伝える
05 アメコミ - ポップでコミカル、 とにかく目立つ!
06 キラキラ - 光り輝く演出でパッと目を引く
07 花 - さまざまな華やかさを演出できる定番
08 メダル - 受賞歴や実績をしっかり伝える
09 チェックマーク - 箇条書きとセットで使いたい
10 紙吹雪・クラッカー - 盛り上がりをハイテンションに演出する
11 湯気 - 熱々の美味しさをそのまま届ける
12 和柄 - 伝統的で豪華な印象を伝える
13 放射線 - 線の方向で中心に視線を向ける
14 春 - 新たな始まりの季節
15 夏 - カラフルでトロピカル
16 秋 - 紅葉と収穫の豊かな季節を表現
17 冬 - クリスマスや煌めきでワクワク感を
18 正月 - 新年のおめでたさをアピールする
COLUMN 完成してもすぐには提出しない! デザイン納品前のチェック項目
総復習! バナー練習問題
キーカラーで選ぶバナー配色手帳
