
こんにちは!かなうラボ利用者のカナタです。
今回は、オンライン学習サービス「Schoo(スクー)」で以下の講義を視聴したので、概要と感想をご紹介します。
【講義名】人を動かすバナーデザインの原理原則
【講師】カトウ ヒカルさん(Webデザイナー)
カトウさんは、累計発行部数5万部を突破した『思わずクリックしたくなるバナーデザインのきほん』の著者でもあります。
私はバナーを作成する際に知識不足ゆえに時間がかかっていたので、基本を学ぼうとこちらを視聴してみました。
非常にわかりやすく実践的な内容で、私含めWebデザイン初心者の方におすすめの講義です。
2025年3月9日現在、こちらの講義は無料公開されているので、Webデザインにご興味のある方はご覧になってみてはいかがでしょうか🌸

🗒️<講義の概要>
☆テーマ:思わずクリックしたくなるバナーを作るためにはどうしたらよいのか
・デザインに入る前の「情報整理」が必要
バナーデザインの目的はクリックされること。クリックした先でユーザーに行動を起こしてもらうことが大事。
目的達成のために、バナーに載せる文言のなかで優先順位を決めていく。
目的を決めてからデザインに着手すると、この優先順位をきちんと判断しながらデザインを構築できるようになる。
・パッと見た瞬間に内容が伝わるバナーデザインの8つのコツ
①メリハリ
②フォント
③レイアウト
④トリミング
⑤リズム
⑥配色
⑦視線誘導
⑧装飾・あしらい
🍀<講義の印象に残ったポイントと感想>
💡デザインに入る前の「情報整理」が必要のパートに関して
先生が作成したバナーのデザイン意図を聴いて、達成したい目的から文言の優先順位が決まり、優先度が高いものを目立たせるために自然とデザインが決まることを実感。
何となくデザインするのではなく、情報を整理して意図をもってデザインしていこうと思いました。

また、先生の解説で印象に残ったのが「バナーデザインというのは、ユーザーがYouTubeを観ていたりするときに急に現れるので、しっかり見ようとしてくれる人はいないんですよね」ということ。
ユーザーは望んでバナーに遭遇したわけではないので、たまたま目に入ったときに如何に瞬時に内容が伝わって関心をひけるかが大事なんだなと。
パソコンに向かって作業をしているとその意識が希薄になってしまうので、ユーザー目線を忘れずにデザインしなければと再認識しました。
💡伝わるバナーデザインの8つのコツ「②フォント」に関して
多くの人が、ひとつのデザインの中で何種類ものフォントを使ってしまい、デザインに統一感がなくなるのをやりがちだそうです。
一方で、講師の先生はフォント選びのコツについて下記のとおり解説していました。
・イメージとテーマに沿ったフォントを選ぶ
・フォントの種類をたくさん使う必要はない
・同じフォントでも太さ、サイズ、色を変えるだけで印象を変えられるので、1〜2種類でも綺麗にバナーを作れる
・ウェイト(フォントの太さ)の種類が多いフォントを選ぶとよい
ご参考までに、同じフォントの中でウェイトを変えた具体例を作ってみました。

☝️画像のフォントは筑紫明朝(N仕様)という名前で、ウェイトが8種類もあります。
同じフォントでも、ウェイトを変えるだけで本当に雰囲気が変わりますよね。
キャッチコピー向きな雰囲気のものから、単なる説明文向きのものまであり、使い分けができそうです。
講義のおかげで、いたずらにフォントの種類を増やさなくても、メリハリがつけられるようになってきました。
また、フォント以外の7つのコツも、知っておくとデザインする際の迷いを減らせるものばかりでした。
私のようなデザイン初心者は、センス云々の前に「知っているか・知らないか」の影響が大きいので、早いうちに基本を学ばねばと思います◎

📚<デザインに関する書籍を購入>
講義が勉強になったので、カトウさんの『思わずクリックしたくなるバナーデザインのきほん』を購入しました。
こちらの書籍は、Before・Afterの事例形式でバナーデザインが紹介されているので、どう修正すべきかをわかりやすく学べます。
また、数多くのバナーが載っており、作例集としても役立ちます。
文庫とは違って少しお値段が張りますが、かなうラボの工賃のおかげで購入をためらわずに済みました。
工賃があれば、様々なことに手を伸ばしやすくなるので、現状を変えたい方は、かなうラボの利用を検討してみてくださいね🎵
*****************************************
かなうラボのことが気になった方は、
ぜひ一度見学予約、相談、お問い合わせください!
かなうラボは新時代の就労継続支援B型事業所です。
お問い合わせはこちら