デザインの引き出しが確実に増える! バナーに潜むデザインのさまざまなテクニックが詳しく解説されたデザイン書
Post on:2022年2月9日
バナーのデザインはもちろん、デザイン・Web制作に携わるすべての人にお勧めのデザイン書を紹介します。
本書は、本日発売!
バナーは小さなスペースに、すばやく伝わる情報設計、分かりやすいレイアウト、要素のリズム、視線誘導、品質を高めるフォント、イメージを伝える配色、効果的な装飾など、デザインのさまざまな知識やテクニックが詰まっています。本書ではこれらがたくさんの事例とともに詳しく解説されています。

一言でいうと、奥がかなり深い!
私はバナーの案件に携わったことは少ないのですが、Web制作に役立つデザインの工夫やテクニックが満載です。クリックしたくなるデザイン、伝わるデザイン、分かりやすいデザインにはっとした人は、要チェックの一冊です!
Kindle版も同時発売されています。
予約・早期購入キャンペーンも開催されており、PSDデータがゲットできます!
- 「バナーデザインのきほん」キャンペーンページ(2/22まで)
※オンライン書店で購入された方、要注文番号。
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

バナーデザインの重要なポイントは、「パッと一目で情報を伝える」ことです。そのためには、デザインとコンテンツ設計にさまざまな工夫が必要となります。
本書は7章構成、デザインの工夫とテクニックを実践的に学べます。

第1章は基本として、バナーデザインに必要な8つの基礎知識を学びます。情報を素早く、分かりやすく伝えるには、大きさや配置や色などに強弱をつけることで情報に優先度を与えられ、パッと見ただけで理解しやすくなります。

デザインの品質を高めるフォントの選び方、分かりやすい配置にした情報整理の仕方、配置や形を工夫してデザインにリズムを与えるやり方、雰囲気を直感的に伝える配色方法など、言葉で書くと面倒な感じがするかもしれませんが、本書では実例とともにやさしくていねいに解説されています。

バナーのデザイン書ですが、Webサイトやアプリにも役立つデザインのテクニックが満載です。

残りの第2章から第7章は、応用テクニック編。
第2章はレイアウトのコツで、限られた小さいスペースのバナーでどのように画像や文字を配置するかレイアウトのテクニックを学べます。

レイアウトのテクニックの1つ目は、分割です。意味に応じて分割すると、小さなスペースでも情報が伝わりやすくなります。さらに、斜めのラインを使用することで軽やかなリズムが生まれ、上下の流れが自然になります。
左と右を比べてみてください。右の方がスムーズに視線が動きませんか?

本書はコラムも充実しており、お得感も満載です。各章ごとに関連したコラムがあり、ここにもさまざまなデザインの工夫やテクニックが解説されています。

第3章は、文字の見せ方。
日本語の横書き・縦書き、バナーでは数字の見せ方も重要です。「数字を大きく」とは具体的にどうデザインすればよいか、複数の数字がある時はどうすればよいか、日付の数字も目立たせたいなど、実践的なテクニックがくわしく解説されています。

第4章は、情報のグルーピング。
帯を敷いたり、吹き出しを使ったり、ステップ形式にしたり、枠や色を使ったり、ボタンに見える要素を配置したり、情報のグループを意識したデザインのテクニックが解説されています。

第5章は、目を引くデザイン。
Webサイトやアプリでも人の目線をつかったデザインをよく見かけます。人間は人の顔、特に人の目線の先が気になり、注目してしまいます。目線の先に重要な要素を配置することで、伝えたいメッセージを強調することができます。

逆に、目線を隠すことでデザインが成功することもあります。商品を目立たせたいときなどは、目を隠すことで注目を和らげることがあります。
左と右を比べてみてください。左は顔を見てしまい、右は時計に注目しませんか?

第6章は、補正と加工。
デザインに使用する素材がイマイチな時の補正術と加工術です。ドロップシャドウや光彩の使い方、境界線の透過、高級感のある雰囲気にしたり、ポップで楽しい感じにしたり、中途半端なトリミングをかっこよくしたり、すぐに試したくなるデザインのテクニックが満載です。

第7章は、あしらいと演出。
デザインをワンランクアップさせる、形、要素、エフェクト、色の使い方など、さまざまなデザインが解説されています。

購入特典として、「デザイン納品前のチェック項目」「バナー配色手帳」のPDFがダウンロードできます。

「バナー配色手帳」はオススメの配色がキーカラー別にまとめられており、バナーなのではっきりと目立つコントラスト高めの配色になっています。
バナーデザインのきほんの目次

バナーデザインのきほんの目次

バナーデザインのきほんの目次

バナーデザインのきほんの目次
バナーに特化されたデザイン書は初めてで、どんな感じなんだろうと思っていましたが、これまた非常に興味深いデザイン書でした。小さなスペースにさまざまな工夫とテクニックがぎっしり詰まっており、デザインに携わるすべての人にお勧めします!
献本の御礼
最後に、献本いただいたインプレスの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors