「広告バナーをもっと上手くデザインできるようになりたい！」
そんな思いを持っている方におすすめなのが、デザインを言語化することです。
ただ見た目を変えるのではなく、根本の部分を追求してデザインに手を加えると、完成度がグッと上がります。
この記事では、デザインを言語化するときのポイントを解説します。
現役Webデザイナーがデザインを言語化しながら作品をブラッシュアップする様子もご紹介しますので、もっとデザインスキルを上げたい！という方はぜひご覧ください。
デザインを言語化するときのポイント3つ
「デザインの言語化」とは、それぞれの要素がどのような状態になっているかを言葉にして細かく紐解いていく作業を指します。
デザインの細かい部分を洗い出して言語化することで、デザインの理解度が深まり、ブラッシュアップにも役立ちます。
デザインを言語化するときは「葉を見て」「木を見て」「森を見て」の3段階で見ていきましょう。
ここでは、1文字だけ傾いているデザインのバナーを例にして解説します。
ポイント1：葉を見て
「葉を見て」は、デザインがどのような状態になっているか具体的な事実に目を向ける作業です。
1文字だけ傾いているデザインのバナーを例にすると、「1文字だけ傾いている」という事実に目を向けます。
次に「木を見て」の作業に移ります。
ポイント2：木を見て
「木を見て」は、なぜそのようなデザイン・色にしたのか理由付けをする作業です。
1文字だけ傾いているデザインのバナーを例にすると、なぜ1文字だけ傾いているのかの理由を考えます。
ここでは、「1文字だけ傾いている状態は違和感があり、自然と目線が向くから採用した」と考えたとしましょう。
最後に「森を見て」の作業に移ります。
ポイント3：森を見て
「森を見て」は、分析して法則化していく作業です。
1文字だけ傾いているデザインのバナーを例にすると、文字を傾けることによるメリットを分析して、ほかのデザインでも使えるように法則化します。
ここでは、あえて文字を傾けると違和感から目線が自然と向くため、バナーで効果的にユーザーの視線を操作できると考えたとしましょう。
よって、「文字を傾けることは視線を誘導する効果がある」と法則化でき、ほかのデザインでも使える考え方へと言語化されるのです。
広告バナーのデザインをブラッシュアップしていこう！
今回ブラッシュアップする広告バナーのデザインは、ウィークリーデザインに応募された作品です。
ウィークリーデザインとは？
オンラインスクール「デイトラ」が毎週行っている企画。X上でデザインの課題が出され、期間内に作成したデザインをXに投稿することで参加できる。いろいろなデザインに挑戦するなかで、デザインスキルを高めたり、自信や気付きにつなげたりすることが目的。デイトラ受講生以外も参加可能。
お題や概要、ターゲットなどは以下の通りです。
| お題 | 新生活応援バナー |
|---|---|
| 概要 | デイトラ電気で行うキャンペーンのバナー作成 |
| 最低限載せたい内容 | ・タイトル：新生活応援キャンペーン開催中！ ・抽選で合計200名様にギフトカード1万円分等が当たる ・期間中に税込5,000円以上のデイトラ電気の製品を購入 ・3/20~4/30まで |
| ターゲット | 20代~40代の男女 |
| 配信先・掲載先 | 検索エンジンのディスプレイ広告 |
| サイズ | 300*250 |
ブラッシュアップ前のバナーを確認！
ブラッシュアップする前のバナーがこちらです。
ブラッシュアップ後のバナーを確認！
ブラッシュアップ後のバナーがこちらです。
元のバナーの良いところを活かして、さらにブラッシュアップしました。
どこをどのように意識して手を加えたのか、順に解説していきます。
ポイント1：色のコントラストをつけて視認性を高める
背景のグラデーションはきれいですが、文字の色を白にしたことで色のコントラストが弱くなり、読みづらさが落ちてしまっているのがもったいないポイント。
「ギフトカード1万円分等が当たる」のはユーザーの便益につながるテキストなので、目立つようにデザインしたい部分です。
そこで、暗い色の背景を作り、その上に白文字を載せました。
さらに「1万円」の「1」をリッチなグラデーションにして、下のデザインから浮くくらい目立たせることで訴求を強めています。
ポイント2：あしらいをスッキリさせて強弱をつける
文字の周りに要素が多いと、目立たせたい文字が埋もれてしまう場合があります。
そのため、要素に強弱をつけて目立たせたい箇所を注目させることが大切です。
日付が書かれているリボンの端を短くしてシンプルに。メガホンは応援のイメージがある要素なので、「応援」の文字に重ねてスッキリまとめました。
また、「新生活応援キャンペーン開催中！」の文字は斜めからまっすぐにし、「応援」の文字だけ斜めにしています。
「新生活」の文字は背景の多角形に沿うようにラウンドさせて、全体のバランスを調整。
全体的にあしらいをスッキリさせることで、メインで伝えたい「新生活応援キャンペーン開催中！」がパッと目に入るようになりました。
ポイント3：応募条件を見やすく目立たせる
「応募条件」の部分は元々白文字で書かれていて読みづらかったため、文字を暗めの色に変更し、枠で囲みました。
枠で囲うとグループが意識されるので、見やすさが向上します。
ポイント4：縁に枠線を付けてバナーを目立たせる
元のデザインは内側に白色の枠を入れており、中のコンテンツが詰まった印象を与えてしまっていました。
そこで、枠線を外側に変更。広告で出したときに浮いて見えるよう、目を引くデザインにしました。
今回のブラッシュアップを言語化してみよう！
「葉を見て・木を見て・森を見て」に当てはめながら、今回行った広告バナーのブラッシュアップを言語化してみましょう。
- 白文字が見づらい → 配色のコントラストをつけると文字の視認性が上がる
- あしらいが多い → あしらいをシンプルにすると目立たせたいコンテンツに目が行く
- テキストのみで書く → 枠で囲むと情報が整理されて見やすくなる
- 内側に枠線をつける → 配信先を想定して外側に枠線をつけるとより目立つ
ただブラッシュアップするだけではなく言語化まで行うことで、ほかのデザインをするときにも活かせます。
デザインを言語化して、汎用性のあるデザインスキルを身につけましょう！
まとめ：フォントの引き出しがデザインの引き出しにつながる
デザインをブラッシュアップするときは、まず一つ一つ言語化して何がどうなっているか状況を把握しましょう。
そのうえでどのような手段を使うかを考えると、情報が整理されるだけでなく、デザインの意図もはっきりします。
デザインの完成度もグッと上がるので、ぜひ自分のデザインを言葉にする習慣をつけてみてください！
未経験からWebデザイナーを目指すならデイトラがおすすめ！
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
ももさん（@momo_web24）
デザイン会社社長。WebアプリのUIUX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。