UI
デザイン

グッドデザイン賞の会場で見た、?なデザイン

概要

10/31に初めて、東京ミッドタウンで開催されたグッドデザイン賞の受賞展に行きました。そこで見た、「それはデザインとしてどうよ?」と思った点について書きます。

気になった点

グッドデザイン賞の会場では、ベスト100の展示物が見られますが、それ以外にも選出されたデザインが、写真付きでパネル展示されていました。気になったのは、その展示パネルの内容です。

IMAG1812.jpg

これをぱっと見た時に考えたのが、「これ、どっからどこまでがUNIT 13 (メディア・コンテンツ・パッケージ)なんだ?」という事です。それから少し考え込んで、思い浮かんだのは以下のパターンです。

  • UNIT13の印を中心した一定の範囲
  • UNIT13の印から右方向にUNIT14の印までの範囲の7件
  • UNIT13の印から下方向に進み、右方向に折り返してUNIT14の印までの範囲
  • UNIT13の印から下方向に進み、左方向に折り返して次の印までの範囲

なお、この写真を見せて他の人に聞いたところ、「上の文字が範囲を示しているのかな?」などと言われました。
正解は3番目の、「UNIT13の印から下方向に進み、右方向に折り返してUNIT14の印までの範囲」です。写真で示すと次の通りです。

IMAG1812_2.jpg

ちなみに、この写真のチョイスは私が最初に見たパネルであると同時に、やや悪意のあるチョイスです。他のパネルを見ると、少し手がかりが得やすくなります。特にUNIT01の辺りを見ると多少分かりやすいと思います。

IMAG1813.jpg

IMAG1829.jpg

デザイン上の問題

これだけ複数の解釈がされてしまった時点で、あまり優れたデザインとは言えないと私は思います。このデザインの何が悪かったのかと自分なりに考えてみました。

  • すべてがフラットに表示されて、区切りがない
  • UNITの印に対して、どの範囲がそのUNITに含まれるのか単独の手がかりがなく、他のUNIT印との相対位置から判断するしかない
  • デザインの基本は左上から右下なので、(上側の文字と同様に)右方向への流れを期待してしまう
  • 縦方向ならば、日本語の縦書きと同じ折り返しパターンの可能性を想定してしまう
  • 隣り合うUNITのジャンルが近く掲載内容も似たようなものなので、隣り合うUNITのどちらに含まれるかの判断が難しい
  • UNIT13とUNIT14の印が上下の中心にあるため、これが範囲の中心である可能性を推測してしまう
  • パネルは複数に分割され、中途半端な位置で切られている場所があるため、範囲が分かりにくくなっている

印の位置が上下中央に来るのはただの偶然の産物ですが、そういう偶然を許すデザインこそが問題と言えるかと思います。

どうすれば良いか?

自分は、Webおよびモバイルアプリで多少UIを作った程度の素人なのですが、素人なりに簡単に対策を考えてみました。

色分けする

各UNITに色を決めて、その色で背景を彩色します。恐らく、最も簡単で分かりやすい方策かと思います。

分割する

各UNITを縦方向に分割し、上側の文字がある辺りにUNITの名前を掲げます。見ている側は分かりやすくなり、それなりに見やすいかと思います。

アイコンや文字で閲覧方向を提示する

UNITロゴからどの方向に見るかを、何らかのサインで指し示します。あまりスマートではないですが、単独で閲覧方向を知る手がかりになります

最後に

グッドデザイン賞に行ったものの、会場で一番気になったのが、このあまり良いとは思えないデザインというのが、大変皮肉でした。この会場でこういう部分があるとかなり悪目立ちするので、少し気を遣った方が良いように感じました。

こうしたデザインになったのにも、何らかの背景があるのだろうとは思います(思いたいです)。例えば、なるべくフラットなデザインにして受賞者に差を作りたくなかったとか、政治的な理由とか、スペース的な問題とか、このグループ分けにあまり重要な意味がなく大雑把に分けられれば良かったとか、わざと分かりにくくして、気になったユーザをコンテンツへ視線誘導するための仕掛けとか…(そろそろ苦しい)。

ただどんな背景があるにせよ、これだけ複数の解釈ができてしまい、ぱっと見てすぐにグループ範囲を認識できなかったということは、ユーザにそれを判別させる負担を強いているという意味で、あまり良いデザインとはないと感じました。少なくとも自分は、こんなUIは使いたくないし、作りたくもないです。