バナー作りたい方必見【思わずクリックしたくなるバナーデザインのきほん】

バナーデザイン勉強中の方に大人気の１冊「思わずクリックしたくなる バナーデザインのきほん」！

すでにお持ちの方も多いと思います。

バナーデザインの作り方を学ぶなら、ダントツでおすすめです！

今回は現役ウェブデザイナーの筆者が、この本をまるッと１冊取り組んだ成果と、活用方法をアツく！ご紹介します。

INDEX目次開く ＋閉じる −

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

この本は、以下の７つのパートに分かれています。

• 伝わるバナーってどう作るの？
• 小さくてもわかりやすく！レイアウトのコツ
• パッと伝わる文字の見せ方
• 全く違う情報をわかりやすく伝えるグルーピング術
• 人の顔や視線を使って目を引くデザインに
• イマイチな写真をよく見せる補正と加工
• あしらいと演出で心惹かれるデザインに

パート1はデザインの基本、パート2〜7は応用テクニックをビフォアフの作例付きで解説されています。

「デザインの事前準備」から載っていて、デザイン初心者の方にも優しい１冊です🤍

各レッスンの構成は２ページずつ（たまに４ページ）、以下のように構成されています。

レッスンのポイントは文字だけではなく、見本のデザインも掲載されています◎

バナーお題は、ターゲット・要望・支給データ/テキストの内容が記載されています。

さらにレベルアップを目指したい場合は、１からバナー作りに挑戦することもできますよ◎

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

特徴１：伝わるバナーにするための具体的な手法がわかる

「思わずクリックしたくなる バナーデザインのきほん」は、雰囲気を学ぶ本ではありません。

「パッとみてバナーの内容を伝える」ために

• 箇条書きや縦長画像にオススメなレイアウト
• 野暮ったい印象から抜け出すコツ
• 抜け感のある明るい雰囲気にするには
• 人物の写真の上手な使い方

など、伝わるバナーにするためにはどんな方法が効果的か、具体的に教えてくれる本です。

特徴２：デザインする際のポイントがわかる

各レッスン毎に、このレッスンは〇〇な時におすすめと解説が載っています。

BADデザインとGOODデザインにも、なぜBADなのか、GOODなのか、

具体的な解説が載っているおかげで、感覚に頼らずデザインのポイントを理解できます◎

特徴３：総復習「バナー練習問題」が６問ついている

バナーのお題を自分で考えるのって、結構時間かかりませんか…？💦

ポートフォリオにサンプルのデザイン載せたいけど「依頼内容や入れる要素」思いつかない…って問題はここで解決できちゃいます！

完成したら「#バナーデザインのきほん」でSNSにアップOK◎

他の人のデザインも見れて勉強になります✨

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

では、ここから「思わずクリックしたくなる バナーデザインのきほん」の活用方法です。

デザイン作成スキル：まるっとレベルアップ

最初にお伝えすると…、「思わずクリックしたくなる バナーデザインのきほん」は、模写やトレースしましょう！の本ではありません。

素材もフォントもカラーコードも、デザインツールの操作方法も自分で探す必要があります💦

模写やトレースでバナーを学びたいっていう方は、「デザインのドリル」が向いています。

ですが、しっかり実務に活かせるスキルを身につけるには、「思わずクリックしたくなる バナーデザインのきほん」の「デザインを真似」することだと実感しています。

私は「思わずクリックしたくなる バナーデザインのきほん」に載っているデザインをすべて真似しました…！

１冊終える頃には、

• 素材の探し方
• 配色
• フォント
• デザインツールの操作
• レイアウト
• 写真の加工

自分でもびっくりするくらい、まるっとレベルアップしていますよ✨💪

バナーをサイズ展開する方法を学べる

バナーは用途によって異なるサイズが必要になります。

一般的なサイズは、「レクタングル」と呼ばれる300×250・336×280の長方形です。

横長サイズ・縦長サイズ（スカイクレイパー）・モバイル用の小さめサイズ…

バナーの内容が同じでもサイズが異なる・縦横比が変わるだけで、ぐっと難しく感じるんです。

「思わずクリックしたくなる バナーデザインのきほん」は、サイズ展開のコツも載っているので、

しっかり学んで、各レッスンのデザインをサイズ展開してみると、よりレベルアップできますよ✨

デザインを言語化する習慣をつける

デザインを言語化する習慣は、スキルアップにつながります。

「思わずクリックしたくなる バナーデザインのきほん」は、レッスン毎に「〇〇なデザインにしたい時にこの手法がオススメ」と言語化されています。

• 電車の中吊り広告
• ECサイト内のバナー
• SNSのフィード投稿

などを見たとき、

このデザインは
「ふわっと柔らかい雰囲気にするために文字を曲線に沿って配置してるんだ」
「〇〇だからこんな手法なんだな」
ってなんとなくでも思い浮かべる習慣をつけましょう♩

練習問題で成長を感じる

自分のスキルアップを体感するために、まず、本の最後に載っている「練習問題」に取り組むことを全力でおすすめします💪

上のデザインを見ると…

Beforeはどこをみていいかわからないし色もぼんやりしていて読みにくいですよね💦

それに比べてAfterは、目線が迷子にならずパッと伝えたいことがわかるかなと思います。

（いま見返すと「180日のあしらい変えたほうがいいかな…」などポロポロ出てきますが🥲）

約20日でこの差って成長を感じられたんです…！

モチベーションが上がってさらにレベルアップしたいって思えて良いことづくし◎

勉強を始める前に取り組むことがポイントです。

作業時間も悩むポイントも完成したデザインも、大きな変化を感じることができます。

SNSに公開してみる

せっかく「練習問題」のバナーを作ったのなら、やりっぱなしはもったいないです。

「思わずクリックしたくなる バナーデザインのきほん」の練習問題は、「#バナーデザインのきほん」をつけてSNSに掲載OKです（本に記載されています）。

わたしもインスタグラムで「#バナーデザインのきほん」のハッシュタグをつけて作成した画像を投稿していました。

フィードバックをもらえたり、興味を持ってもらえる可能性もあるので、完成したらぜひ公開してくださいね😊

納品前のチェックを習慣にする

「思わずクリックしたくなる バナーデザインのきほん」には、デザイン納品前のチェックすべき項目が載っています。

必要な文言や写真が入っているか。だけではなく、デザインについてのチェック項目が書いてあるので、客観的にデザインを振り返ることが可能です◎

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

バナーデザインの基本〜テクニックが身についた

バナーを作る際に重要な、以下のポイントを身につけることができました。

• 情報整理の仕方
• レイアウトのコツ
• 文字の見せ方
• デザインに合うあしらいの付け方
• 素材の探し方

いままでは、感覚的にパズルを組むイメージでレイアウトして、ものすごい時間かかっていましたが、目線の動きや効果的な見せ方を知って、時間短縮にもなりました…！

Illustratorの操作スピードがあがった

私はほとんどの作業をIllustratoを使っていて、写真の加工や切り抜きだけPhotoshopでした！

ページを進んでいくと、このデザインにはこの操作が使える！時間短縮できる操作方法はコレ！

操作方法を調べないでも、だんだんと身についていったんです◎

デザインの引き出しが増えた

デザインの引き出しが増えました…！

特に「文字の見せ方」のレパートリー。

いままでは、あしらいや素材でなんとなく表現していたことを、文字の見せ方で伝えるにシフトチェンジできたので、文字多めのバナーでも手が止まらずに作業できるようになりました🙏

まとめ

今回は、バナーデザインを作りたい方必見【思わずクリックしたくなる バナーデザインのきほん】をご紹介しました。

バナーデザインは、ウェブサイトやブログ・youtubeのサムネイルなど、デザインの基礎にもなります💡