思わずクリックしたくなる バナーデザインのきほん|Tech Book Zone Manatee

マナティ

2950132711000000000i.jpg

購入形態

PDF
1,980円
数量:

カートに追加されました。カートを見る

カートに入れる
紙の本を買う

思わずクリックしたくなる バナーデザインのきほん

インプレス

新刊『作って学ぶ Next.js/React Webサイト構築』好評発売中!

バナーデザインで困った時は
この1冊で解決! 

バナーは情報量の多いWeb上に掲載されるので
「パッと一目で情報を伝える」必要があります。
なので、目に留めてもらう工夫が必須! 

この本では「パッと見て伝わるバナーデザイン」を作ることを目的とし、 
8つの基本と6つのカテゴリーに分けた工夫やテクニックをご紹介します。 

・バナー制作に時間がかかってしまう! 
・バナーを作るのが苦手…。 
・サイズが小さくで作るのが難しい 

基本も応用もしっかり解説しているので、 
デザイン初心者の方でもこの本を読めば、 
伝わるバナーが作れること間違いなしです! 

▼こんなシーンに役立つ
・WEB・SNSなどに掲載する広告バナー
・ブログやHPのアイキャッチ
・ネットショップのバナー
・記事の見出し画像

▼CONTENTS
PART1 伝わるバナーってどう作るの? 
PART2 小さくてもわかりやすく! レイアウトのコツ
PART3 パッと伝わる文字の見せ方
PART4 全く違う情報をわかりやすく伝えるグルーピング術
PART5 人の顔や視線を使って目を引くデザインに
PART6 イマイチな写真をよく見せる補正と加工
PART7 あしらいと演出で心惹かれるデザインに
総復習! バナー練習問題
キーカラーで選ぶバナー配色手帳

発売日:2022-02-09

ページ数:176ページ

目次

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

著者プロフィール

  • カトウヒカル(著者)

    カトウヒカル
    1984年生まれ。佐賀県出身、福岡市在住。2012年よりWebデ
    ザイナーとして活動。kanvas(カンバス)という屋号で企業の
    ホームページ制作を行う。これまで100サイト以上の制作に関
    わり、半数はデザインからHTML/CSSコーディング、CMSの
    組込までワンストップで対応。2020年2月からWebデザインの
    授業を視聴できるサービス「Webデザイン1on1レッスンチャン
    ネル」を主催。TwitterではバナーデザインのTipsを発信。

新刊『作って学ぶ Next.js/React Webサイト構築』好評発売中!