オンラインスクール「デイトラ」では、Webデザイナーのスキルアップを目的とした「ウィークリーデザイン」という企画を行っています。
ウィークリーデザインとは？
毎週X上で出されるデザイン課題に沿ってバナーを作成し、Xで投稿するデイトラWebデザインコースの人気企画。デイトラを受講していなくても参加できる。
この記事では、過去のウィークリーデザインをもとに、デザインをブラッシュアップする方法を解説します。
Webデザインのスキルアップを目指している方や、プロによる添削が気になる方はぜひご覧ください。
今回ブラッシュアップするデザイン課題の内容
はじめに、今回ご紹介するウィークリーデザインのお題や概要などを確認しましょう。
| お題 | ネットオーダーバナーデザイン |
| 概要 | 牛丼チェーン店「東古屋」のネットオーダーを訴求するバナー |
| 載せたい内容 | ・ネットオーダー限定で200円オフ ・期間限定「8/7〜8/31」 ・さらに公式LINE追加で選べるトッピング無料！ |
| ターゲット | 都内在住20〜30代 男性 |
| 配信先・掲載先 | ディスプレイ広告 |
| サイズ | 300×250 |
ブラッシュアップ前と後の作品をチェック！
課題の内容をもとにウィークリーデザイン参加者が作成したデザインがこちらです。
・牛丼の写真が大きいため、商品の魅力が伝わる
・「選べる」の吹き出しを緑色にすることで「LINE追加」が色で伝わるようにしている
・背景の左側を暗くすることで視認性が上がっている
そして、ももさんがブラッシュアップしてできた作品がこちらです。
両者を比べて見ると、文言や使われている素材に大きな変化はないものの、印象がガラッと変わっていることがわかりますね。
現役デザイナーによるブラッシュアップのポイント7つ
ここからは、現役デザイナーのももさんがどの部分に注目してデザインをし直したのか、ブラッシュアップのポイントを解説します。
- 訴求イメージに合ったカラーリングにする
- イメージに合ったフォントを使う
- 視線誘導を意識して配置を調整する
- LINEの訴求を緑色で目立たせる
- 湯気を追加しておいしさを表現する
- 全体のバランスを見てサイズを調整する
- 安さを連想させる装飾を使う
1：訴求イメージに合ったカラーリングにする
バナーの色選びは、訴求内容のイメージに合わせることが大切です。
たとえば、「お得感」や「安さ」を強調する場合、赤色や黄色といったビビッドな色が適しています。
ビビッドな色は価格の安さやセールを連想させ、視覚的にも目立つため効果的です。
一方、「高級感」や「キャッシュバック」を伝えたい場合には、ゴールドを使用するとよいでしょう。
今回の場合は元々「200円OFF」の安さを訴求したい場面でゴールドを使用していましたが、赤色や黄色に変更した方が訴求内容に合い、ユーザーにより伝わりやすくなります。
2：イメージに合ったフォントを使う
フォントもデザイン全体の雰囲気を左右します。
ゴシック体は視認性が高く、シンプルでメッセージをダイレクトに伝えたいときに効果的です。
一方で、商品の「おいしさ」や「和風の印象」を伝えたい場合は、明朝体や筆文字を使用することで、よりイメージに沿った表現ができます。
印象的なフォントを部分的に使い、ユーザーに読ませたい文字はゴシックにするなど、2種類のフォントを使い分けるとバランスが良くなります。
今回であれば「牛丼 バナー」で検索して、いろいろなデザインから着想を得ると良いですよ！
3：視線誘導を意識して配置を調整する
要素の配置は、ユーザーの視線を自然に誘導するために重要です。
大事な要素は視線が最初に集まる左上に配置したいため、ブラッシュアップ後のバナーには「ネットオーダー限定200円OFF」という最も伝えたい内容を配置しています。
そのぶん、空いている右上のスペースを有効に活用し、ロゴを配置しました。
どこにどの要素を入れたら良いかを考える際は、視線誘導を意識してみてください。
4：LINEの訴求を緑色で目立たせる
元々のデザインでは「選べる」の吹き出しにLINEのイメージカラーである緑色を採用していました。
ブラッシュアップ後はさらにLINE要素を伝えるために、文字色を変更しています。
また、本来のLINEのイメージカラーよりも少し明るい色を使い、より目立つように工夫しました。
5：湯気を追加しておいしさを表現する
食品系のバナーにおいて、湯気のエフェクトを追加するのは「おいしさ」を視覚的に伝えるための有効な手段です。
湯気が加わることで温かみが伝わり、商品の鮮度やおいしさがよりリアルに感じられます。
6：全体のバランスを見てサイズを調整する
バナー内の文字や画像、各要素のサイズ感も重要です。
情報が詰まりすぎると見づらくなるため、要素間に適度な余白を設け、全体のバランスを保ちます。
特に文字サイズや間隔は、視認性とバランスを考慮して調整することで、見た目もスッキリし、メッセージが伝わりやすくなります。
7：安さを連想させる装飾を使う
価格の安さやお得感を伝える際は、ギザギザの縁取りを始めとした目を引く装飾が効果的です。
形状や装飾にひと工夫加えることで、より安さを強調できます。
まとめ：デザインを言語化すると説得力のある作品ができる！
今回のバナーは「牛丼のおいしさ」「安くなること」を訴求するために、配色やエフェクト、素材を意識してブラッシュアップしています。
このようにデザインの意図を持って作ることで、説得力のあるものが出来上がります。
ぜひデザインをする際には言語化を意識して、使う色や素材の配置などを調整してみてください！
未経験からWebデザイナーを目指すならデイトラがおすすめ！
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
ももさん（@momo_web24）
デザイン会社社長。WebアプリのUI/UX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。