一生懸命作ったのに伝わらない。デザイン添削で気づく「順番」のはなし

一生懸命作ったのに伝わらない。デザイン添削で気づく「順番」のはなし

時間をかけて作ったバナーやWebページなのに、見た人の反応が薄い。
そんな経験に心当たりがある方は多いのではないでしょうか。

名古屋校で添削を担当していると、この悩みを抱えて相談に来られる受講生と何度も向き合います。
お話を伺うと、「センスがないから」「配色が悪いからだと思います」という答えが返ってくることが少なくありません。

ところが実際に画面を見せていただくと、色よりも手前の部分でつまずいているケースがほとんどです。
それが、情報の優先順位、つまり「何を、どの順番で見せるか」という整理です。

この記事では、添削の現場でよく見かける優先順位のズレのパターンと、その改善方法についてご紹介します。「なぜ自分のデザインは伝わらないのだろう」と感じている方は、ぜひご自身の作品を見返しながら読んでみてください。

デザインは「順番」で伝わる

見る人は、デザインを隅から隅まで丁寧に読んでくれるわけではありません。
バナーなら数秒、Webページでも開いた瞬間に見える範囲であるファーストビューを見て、ごく短い時間で「自分に関係がある内容かどうか」を判断しています。

その一瞬の判断を左右するのが、「何が最初に目に入るか」という順番です。
整列や余白、配色を整えていても、最初に目に入る場所に一番伝えたい情報が置かれていなければ、見る人は迷ったままページを離れてしまいます。

デザインの4原則(整列・近接・反復・強調)を学んだことがある人も多いでしょう。
しかし、4原則を意識して制作しても「伝わらない」という相談は驚くほど多くあります。

その理由はシンプルです。
4原則は「情報をどう整理して見せるか」という技術であり、何を一番に見せるか」を決めることとは別の話だからです。

添削で修正するポイントの多くは、この「何を一番伝えたいのか」という判断の部分にあります。

デザインの4原則と「優先順位を決める判断」は別物であることを示す図解

添削でよく見る「情報の優先順位」がズレる3つのパターン

添削で修正するポイントの多くは、この「何を一番伝えたいのか」という判断の部分にあります。

パターン よくある状態 直し方の考え方
写真が主張しすぎる 印象的な写真に視線が止まり、タイトルまで届かない 写真は「入り口」と割り切り、主役はタイトル側に残す
説明文が長すぎる 文字量が増えてボタンが埋もれる 情報を削り、行動を促す部分の余白を確保する
全部を目立たせる 太字・色・囲みを多用し、結局どこも目立たない 強調は「ここぞ」という一箇所に絞る

なぜ本人は気づけないのか

不思議なことに、このようなズレは作った本人にはなかなか見えません。
理由は単純です。
制作者は、画面にあるすべての要素の意味を理解しているからです。
写真を選んだ理由も、説明文を書いた意図も、頭の中にすべて入っています。
そのため、画面を見た瞬間に不足している情報を無意識に補い、「ちゃんと伝わっている」と感じてしまうのです。

先日担当した受講生の課題でも、このようなケースがありました。

オンライン説明会の告知バナーを制作していただいたのですが、画面の中央に大きく配置されていたのは、雰囲気づくりのための装飾イラストでした。

一方で、最も伝えたいはずの「説明会開催中」という文字や開催日は、右下の隅に小さく配置されていました。
そこで「このバナーで一番伝えたいことは何ですか?」とお聞きすると、 「開催日と、説明会に参加してほしいことです。」 と迷わず答えられました。

しかし、その情報が画面の中で最も小さく扱われていることには、指摘するまで気づかれていませんでした。

イラストを少し控えめにし、開催日を大きく配置し直しただけで、バナー全体の印象は大きく変わりました。

初めて見る人には、制作者の頭の中にある情報は見えません。
書かれている内容だけを頼りに、一瞬で判断します。
この認識の違いが、「本人には見えない優先順位のズレ」を生み出しているのです。

優先順位を整理する考え方(改善前後)

優先順位を整理するときは、色や配置から考え始めるのではありません。
まずは「この画面で一番伝えたいことは何か」を、一つだけ決めることから始めます。
伝えたいことが2つ、3つある場合でも、その中で最も重要なものを決める作業こそが、デザインの土台になります。

💡 ここがポイント

一番を決めたら、その情報だけを大きさ・色・余白で目立たせます。

それ以外の情報はあえて控えめに扱います。

すべてを同じように目立たせようとすると、結果としてどれも目立たなくなり、優先順位は失われてしまいます。

例えば、「説明会日程」「給付金対象」「アクセス」の3つを掲載する告知バナーであれば、まずは「説明会に参加してほしい」というメッセージを主役にします。
その上で、日程は大きく配置し、給付金対象やアクセスは補足情報として小さめに添えます。
改善前は3つが同じ大きさで並んでいたものでも、主役と脇役を明確に分けるだけで、見る人の視線の迷いは大きく減ります。

添削で見えてくること

添削は、作品の欠点を指摘するための時間ではありません。
むしろ、本人には見えていない「一番伝えたいこと」を一緒に見つける作業に近いと感じています。

名古屋校でも、優先順位を見直して作品を作り直した受講生から
「言われてみれば当たり前なのに、自分では絶対に気づけませんでした。
という声をよくいただきます。
この「気づき」の瞬間こそ、独学では得にくい学びの一つだと感じています。

もし今、「なぜか自分のデザインは伝わらない」と感じているのであれば、配色やフォントを変える前に、

「この画面で一番見せたいものは何だろう?」

と、一度立ち止まって考えてみてください。
それだけで、改善の糸口が見えてくることは少なくありません。
デジタルハリウッドSTUDIO名古屋では、そうした一つひとつの作品を丁寧に添削しながら、一緒に改善していきます。
ご自身のデザインについて相談してみたいという方は、ぜひ説明会でお気軽にご相談ください。

 よく読まれている記事

ブログ
グラフィックデザイン講座
グラフィックデザイン講座とは?【デジハリ】
よくある相談
Webデザイナーとグラフィックデザイナーの違いって?
Webデザイナーとグラフィックデザイナーの違いって?
卒業生インタビュー
ケーキ屋さん店長から グラフィックデザインの道へ 新たな挑戦!
ケーキ屋の店長からクリエイターへ。仕事と学習の両立
卒業生インタビュー
伝える側から、つくる側へ。
伝える側から、つくる側へ。

まずは 無料説明会(相談会) にご参加ください!

STUDIO名古屋のスクール説明会へ参加してみよう!

コースの詳細につきましては、お気軽にSTUDIO名古屋までお問い合わせください。
無料の説明会を随時開催しております。ご予約の上、ぜひお越しくださいね♪

受付時間
火~金曜日 12:00 ~ 22:00
土・日・祝 10:00 ~ 20:00

定休日:月曜日

Reスキル講座‐デジハリ名古屋

LINEでサポート!デジハリ名古屋
お友達登録いただくと、チャットにてお問合せ・各種予約いただけます。
デジハリ名古屋公式Instagram
デジハリ名古屋公式Instagramアカウントはこちら

投稿者プロフィール


デジタルダイブ
株式会社デジタルダイブ サービス担当者

デジタルハリウッドSTUDIO名古屋を運営。1995年に愛知県で創業したホームページ制作会社です。
名古屋・東京・大阪を拠点に全国の企業・官公庁の Web サイトを多数手掛け、幅広い分野で制作実績を積み重ねてきました。
創業以来、専門性の高いクリエイティブで信頼を築いています。

【許認可】

一般社団法人 日本Web協会、日本セイバーメトリクス協会(理事)、愛知県「あいちロボット産業クラスター推進協議会」(無人飛行ロボット活用WG)、JETRO(日本貿易振興機構)、名古屋市 SDGs 推進プラットフォーム 他

【有資格】
愛知県 競争入札参加資格、名古屋市 競争入札参加資格、全国 競争入札参加資格、全省庁 競争入札参加資格 他