Webデザインが学べるコミュニティを作りました!

デザインを学ぶなら知っておきたい、「デザインの敗北」とは?

masaca(@masaca_dApps)です。

「デザインの敗北」という言葉をご存知でしょうか?
ビジュアル的な格好良さを重視するあまり、本来の目的や機能性を失ってしまっているデザインを指します。

デザインは問題解決の手段として用いるものですので、多くの人が利用するものは「機能性」や「わかりやすさ」も大切です。

見た目のインパクトや斬新さも大事なのですが、「デザインの敗北」が起こるとデザイナー的にはとても悔しい状態になります。

今回はそんな「デザインの敗北」の例について紹介したいと思います。

masaca

デザインの役割とはなんだろう?

デザインの敗北の例

セブンイレブンのコーヒーメーカー

デザインの敗北の例で一番有名なものは「セブンイレブンのコーヒーメーカー」でしょう。

シンプルで洗練されたデザインなのですが、誰にでも操作がわかりやすいといったものではなく実際にはテプラが上から貼られている状態です。

LとRがサイズを表していることや、HOTとICEの区別がしづらいですね。英語表記は見た目はオシャレですが伝わりづらいです。

コンビニのコカコーラ

私が今回、「デザインの敗北」という言葉を思い出したのはこのコカコーラの陳列を見たからです。
コカコーラゼロと普通のコカコーラの見分けが、ぱっと見では判断できません。

また、ラベルの色がそれぞれ違うためフレーバーの種類があるように感じてしまいますが実際には2種類です。

施設のサイン

哺乳瓶のサインのみのところを「哺乳瓶」、「授乳室」と捕捉されています。
本来のデザインでは何を指しているのかわからないという声があったのでしょう。

どっちの方向にトイレがあるのかわかりません・・・。

段差につまづく人が出たのでしょう。そういう危険よりもデザインを優先する理由はないですね。
しかしデザイン的には残念なことになってしまいました・・・。とても難しい問題です。

デザインの敗北を意識したデザイン

こういった「デザインの敗北」があることを見越して、きちんとわかりやすい表記もしてあるデザインです。

Webデザインにおけるデザインの敗北

Webデザインにおいても、デザインの敗北は存在します。
ユーザビリティを意識していないと、使いづらいWebサイトや離脱率の高いWebサイトになってしまいます。

表記がわかりづらい

このナビゲーションのように、「行った先のページのコンテンツに何があるのかわかりづらい」表記はWebサイトでよくあります。
英語表記は内容がユーザーに伝わっているのか、考える必要があります。

リンクがわかりづらい

この画像では、周囲のデザインによってはボタンなのか見出しなのかわかりづらいことがあります。

このように矢印アイコンをつけるだけでも、最低限リンクであるとわかるようになります。

ここまでいくと極端ですが、丸みのある形状や立体感を出すことでリンクであることが確実にわかるようになります。

リンクの場合、マウスオーバーした際に透明になったり、アンダーラインがついたり、何らかの反応(フィードバック)があることも重要です。

ファーストビューの情報量が極端に少ない

画面内に写真と少しのキャッチコピーのみ、といったデザインも場合によっては注意が必要です。
ブランドやキャンペーン特設サイト以外では、情報を知りたいだけのユーザーにとっては優しくありません。

洗練されたなビジュアルを見せることによるユーザーへの効果と、単純に必要な情報が欲しいユーザーとどちらが効果があがるのか、デザインにとりかかる前にしっかりと対象ユーザーについて分析しておく必要があります。

デザインの敗北をしないためにオススメの本

誰のためのデザイン?

「誰のためのデザイン?」はまさにデザインの敗北はどのようなときに起こるのか、それを解決するためにはどうすればいいのかといったことが知りたい人にはピッタリの本です。デザイナーの間では名著といって間違いない本です。

伝わるデザインの基本

もっとライトに伝わるデザインについて知りたいあなたはこちらの本がオススメです。初心者デザイナーが実践で使える内容です。

まとめ

「デザインの敗北」を見ると、「デザインは何のため?誰のためにあるんだろう?」ということを考えさせられます。
当たり前のことをもう一度考えてみるきっかけとして、日常に潜むさまざまなデザインに目を向けてみましょう。

masaca

時と場合に応じてどんなデザインが最適なのかよく考えたいね。
【バナーで学ぶ】効率的にWebデザインのアイデアを出す力を鍛える方法 【デザイン力を磨く】Webデザイナーとして成長するための大事な習慣 もう迷わない!目的別で探せるWebデザイン参考サイト総まとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA