見た目はそれっぽいけど、何か物足りない…
このバナー、ちゃんと伝わってるのかな？
Webデザインを学び始めたばかりの人にとって、デザインの正解が見えにくいのはよくある悩みです。
特にバナー制作では、見た目の美しさだけでなく、「伝わる工夫」が求められます。
この記事では、Webデザイン初心者が制作した実際のバナーに対して、プロがどこをどのようにブラッシュアップしたのかを紹介しています。
「なぜこのデザインでは伝わらないのか？」「どこを直せばグッと良くなるのか？」をビフォーアフターを交えながら、改善のポイントを丁寧に解説しているので、ぜひ参考にしてください。
今回ブラッシュアップするデザイン課題の内容
今回ご紹介するのは、オンラインスクール「デイトラ」の人気企画「ウィークリーデザイン」に投稿されたバナーデザインのブラッシュアップ事例です。
お題の内容は次のとおりです。
| お題 | コワーキングスペースバナー |
| 概要 | ・東フリ不動産のコワーキングスペースのキャンペーン紹介 |
| 載せたい内容 | ・新規入会キャンペーン ・今入会するとコワーキングスペースが6ヶ月半額！ ・先着50名様まで |
| ターゲット | 20～40代 |
| 配信先 | インスタ広告 |
| サイズ | スクエア |
| 備考 | 細かい仕様は変更OK |
ウィークリーデザインとは？
毎週X上で出されるデザイン課題に沿ってバナーを作成し、Xで投稿するデイトラWebデザインコースの人気企画。デイトラを受講していなくても参加できる。
プロが添削！バナーデザインの改善事例とポイントの解説
ここからは、実際に投稿された2つのバナーをもとに、どのように改善されたのかを順に見ていきましょう。
事例1：インパクトのあるバナーを見やすく・分かりやすく改善
こちらのバナーは、全体としてまとまりがあり、完成度の高い印象を受ける作品でした。
特に、視認性や構成力に優れており、初心者ながらも多くの工夫が見られます。
・「6ヶ月半額」「先着50名様」といった訴求要素を数字で大きく見せており、視認性も高い
・ネイビーとオレンジの2色でコントラストがしっかり取れている
・図形や吹き出し、矢印などを使い、視線誘導の工夫がされている
そのうえで、ももさんがブラッシュアップしたのは次の3点です。
ポイント1：背景と色味で奥行きを出す
添削では、背景にほんのりとしたグラデーションを加えることで、フラットだった印象に奥行きが生まれるよう工夫が施されました。
ネイビーをベースに、グラデーションを重ねることで、より高級感が感じられる仕上がりに。
また、メインカラーであるオレンジも少しくすみ感があったため、明度を上げて明るめのオレンジに調整し、グラデーションをほんの少しだけ加えて、画面全体が自然に引き締まるよう仕上げています。
さらに、白い円の線を背景に加えることで、奥行き感と立体感が増し、視線の誘導にも効果的なアクセントとなっています。
ポイント2：文字の強調で訴求力アップ
文字の太さを全体的に強調することで、見出しや訴求ポイントがより一目で伝わるようになりました。
また、「6ヶ月半額」などのテキストには、Figmaの「Skew」を使用してわずかに傾斜を加えることで、静的だったレイアウトに動きをプラスしています。
さらに、既に入っていたドロップシャドウについても、あえて濃く調整し直すことで、背景と重なっても読みやすさが確保されるよう工夫されています。
こうした細かな視認性改善の積み重ねによって、重要な情報が瞬時に伝わるバナーに仕上がりました。
ポイント3：無彩色でデザインを引き締める
カラフルな要素が多くなってくると、全体がごちゃついた印象になりがちです。
そんなときには、白・黒・グレーなどの無彩色を活用しましょう。
今回のブラッシュアップでも、文字や背景に黒を部分的に使用することで、情報にメリハリがつき、デザイン全体がグッと引き締まりました。
無彩色はどんな色にもなじみやすく、デザインを整えるための引き算のテクニックとして非常に有効です。
色に迷ったら、無彩色を使うのが安心ですね。
事例2：高級感を引き立てつつ、情報整理で印象を格上げ
こちらのバナーは、ラグジュアリーな雰囲気を意識して丁寧に設計されており、ビジュアルの印象も良い仕上がりでした。
全体に落ち着いた色味と統一感があり、狙いたい世界観はしっかり伝わってきます。
・「先着50名様」「50%OFF」など、キャンペーンの強みを明確に表示
・タイトルやメイン画像の選び方にセンスがあり、統一感がある
・斜め文字や吹き出しなど、視線誘導の工夫がされている
そのうえで、ももさんがブラッシュアップしたのは次の4点です。
ポイント1：情報の関連性を視覚的にまとめる
元のバナーでは、コワーキングスペースの名称が最も目立つ位置にありましたが、ユーザーにとって一番伝えるべき「お得なキャンペーン情報」がやや埋もれてしまっていました。
そこで添削では、「50%OFF」と「先着50名様」というキャンペーンの主軸となる情報を近くにまとめて配置。
このように関連する情報を同じエリアに整理することで、視覚的な意味のつながりが一目で伝わるようになります。
また、企業名や施設名といった補足情報は主張を抑えた位置に移動し、ユーザーにとって重要な情報の優先順位が明確になるよう調整されています。
ポイント2：タイトルと情報の優先順位を調整
文字サイズが全体的に控えめだったため、ファーストビューでのインパクトがやや弱い印象がありました。
そこで、タイトルをより大きく・太く表示することで、広告としての目を引く力を強化。
単純にサイズを大きくするだけでなく、ジャンプ率（文字のサイズ差や太さの強弱）を意識して情報に緩急をつけることで、視線の流れを自然に誘導できる構成になっています。
また、「新規入会キャンペーン」の文字にもわずかに傾斜を加えて動きを出すなど、さりげない視覚効果もポイントです。
ポイント3：Figmaの機能を使ってプロらしい装飾を実現
「先着50名様」と書かれたラベルは、Figmaの標準機能だけで簡単に作成可能です。
四角形にアンカーポイントを追加し、角の位置を少しずらすことで斜めの形状をつくり、上から下へグラデーションをかけて立体感を演出しています。
さらに、ラベル内のラインがバナーからはみ出さないよう、マスク機能できれいにトリミングすることで、装飾が雑に見えず、情報を伝えながらもビジュアルの完成度が向上します。
使用した線には微細なシャドウも加えられており、シンプルな図形でも立体感を持たせる工夫が施されていました。
ポイント4：背景画像と解像度に配慮してクオリティを底上げ
添削前のバナーでは、使用されていた背景画像の解像度がやや低く、文字や装飾のクオリティに対して画質が追いついていない点が気になりました。
こうした場合には、FigmaのAI機能「解像度を上げる」を活用するのがおすすめです。
画像の鮮明さを簡単に補正できるため、全体の完成度がぐっと上がります。
また、画像そのものの使い方にも工夫が必要です。
たとえば、明度や透明度を調整して背景をやや落ち着かせることで、上に載せた文字とのコントラストが生まれ、可読性がアップします。
「高級感を保ちつつ、きちんと読める」といったバランスを取るためには、画像選び・加工・画質補正のひと手間が欠かせません。
要素が小さいと、何を伝えたいのかがボヤけてしまうので、しっかり大きく見せることも意識してみてくださいね。
まとめ：小さな工夫が「伝わるデザイン」をつくる
デザイン初心者が作ったバナーであっても、ちょっとした工夫や見せ方の改善で大きく印象を変えられます。
特に大切なのは次の2点です。
- コントラスト（色の差）を調整して、視認性を高めること
- サイズ感を意識して、伝えたい情報をしっかり見せること
「なんだかパッとしない」「読みにくい」と感じたら、まずはこの2つを見直してみましょう。
背景にグラデーションを足す、文字を少し大きくする、無彩色を使って情報を整理する──そんな小さな調整が、見る人に伝わるデザインにつながります。
次のバナー制作から、ぜひ今回のポイントを実践してみてください。
なお、当メディアでは他にもバナー添削の事例を紹介していますので、ぜひ参考にしてみてください。
未経験からWebデザイナーを目指すならデイトラがおすすめ！
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
ももさん（@momo_web24）
デザイン会社社長。WebアプリのUI/UX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。