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