ダメなデザインはなぜ生まれてしまうのか？
考えてみよう
さて問題です。どちらのデザインが良いでしょうか？
サービスのコンセプトとしては動物に関する情報が見れるWebページを想定しています。
案1
案2
答えはどっちが正解かとは言えません、デザインの良し悪しは背景にある戦略や目的によって左右されてしまいます。
それを踏まえて言うと、訪問したユーザーにインパクトを与えて、商品を購買させるようなことを意図しているティザーサイトの場合は案1が正解です。
ユーザーの訪問頻度を増やしていき毎日使ってもらうことで価値を高めてもらうような、ニュースサイトやツールなどは案2が正解です。
このような違いを私は独自に、案1はテーマパーク型のデザイン、案2はオフィス型のデザインと考えています。
デザインの区分
これは自分が勝手に名付けている名称ですが、テーマパーク型とオフィス型の2つに分けられると思います。
テーマパーク型
その場所にいるということを最大限盛り上げようとするデザインの考え方です。
テーマパークのように限られた時間で楽しませることを前提とし、毎日訪れるといったことは考えないパターンです。
以下のような方針でデザインします。
・イラストや音楽、仕掛けをたくさん取り入れて非日常感を出す
・複雑で凝った造形や装飾を入れる
・その瞬間の面白さを重視する
・コンテンツが先に生まれて、その後にデザインを設計する
オフィス型
その場所で達成するべき目的を円滑にするためのデザインの考え方です。
オフィスのようにほぼ毎日利用することを想定しています
以下のような方針でデザインします。
・オフィスで行うように、作業や目的を行いやすくする
・認知的負荷を下げるためにシンプルで使いやすい配置
・持続性による心地よさを重視、ユーザーの学習曲線を考慮する
・デザインを先に設計して、その後にコンテンツが生まれる
この2つを分けて考えることによるメリット
例えばディズニーランドには、開けたら音がなるドアだったり、しゃべるポストがあったりします。
しかしそれが自宅だったり、オフィスにあったらどうでしょうか？
最初は面白いかもしれませんが、だんだんと飽きてうざくなってきます。さらに普通の生活をおくる上で障害となってしまいます。
またテーマパークは提供するコンテンツがほぼ決まっており、そのコンテンツを最適に提供するためにデザインが設計されます。例えばスペイン風のテーマパークであればスペイン風の建物や植物を配置していきます。
逆にオフィスは提供するコンテンツは決まっているのではなく、コンテンツを生み出す場だと言えます。例えばコンテンツを生み出しやすくするために部屋を設計したり、議論のために必要なツールを設計します。
といったように、毎日の利用を想定してデザインを行うか、その瞬間の面白さを追求するかでデザインの方針は大きく変わります
それぞれの対比例
消しゴムの場合
・キャラクターの形をした消しゴムがテーマパーク型
・カドケシなどの消しやすさ使いやすさを追求した消しゴムがオフィス型
アプリ、Webの場合
・ティザーサイト、商品紹介ページがテーマパーク型。何を載せるかが決まっているので、それに合わせた最適なデザインにする。
・ニュース、SNSなど利用頻度が高いものがオフィス型。何が載るか決まっていないので、どのようなコンテンツでも最適となるようなデザインにする。
ダメなデザインとは
ニュースサイトなど毎日ユーザーが訪れるものに対して、テーマパーク型のデザインアプローチをしてしまった場合です。
ユーザーが使いづらい、目当てのものにたどり着けないという現象が発生した結果、ダメなデザインとなります。
毎日使うことを想定しているのに、案1のように、見た目がきれいだけども、そこに並んでいる文字や画像の意味を理解することに時間がかかると、早期に離脱してしまう可能性があります。
というように想定される利用ケースとデザインの方針のミスマッチが大半だと思いおます。
戦略や利用されるケースをあまり考えずに、自分なりのデザインをしてしまったり、そもそも調査不足だったり、デザイナーの知識不足だったりなどいろいろあります。
紙出身のデザイナーが陥る罠
紙媒体出身のデザイナーの方はテーマパーク型のデザインに頼りがちになってしまいます。雑誌やパンフレットなどの紙媒体は一方向的なインタラクションしかありません。
例えば雑誌がユーザーに与えられる動作としては見るだけなので、コンテンツをきれいに配置するということだけに徹すれば良いです。
そのため紙デザインでは以下のような工夫をします
・載せるコンテンツが決まっている、コンテンツの大きさ（本のサイズなど）が決まっている。
・フォントをコンテンツごとに変える
・飾り枠をつけて目立たせる
・背景をきれいにして、第一印象をよくする
・斜めにしたり、配置の順序を工夫してユーザーが飽きさせないようにする
・ページを読んでもらうためにコンテンツ階層を深くする。
というようなことがよく行われます。まさに案1のようなデザインです。なので、パット見の第一印象にこだわりがちです。
しかし、オフィス型のアプリやWebデザインではこのようなことはほぼ全てやってはいけないことになります。
アプリやWebはユーザーが操作を行える双方向的なインタラクションとなります。
雑誌などではユーザーは見るというアクションだけを行いましたが、アプリやWebでは、押したり、スライドさせたりをユーザーに行わせます。
なので、アプリやWebで意識するべきことは、ユーザーに何が表示されているのか、操作できるのか、を簡単に伝えるデザインにする、ということが重要になってきます。
そのためアプリやWebでは以下のような工夫をします。
・フォントやコンテンツの形を統一し、ユーザーの学習負荷を最低限にする。
・操作できるものできないものの区別をつけるために、不要な飾りを排除する
・ユーザーが望む動作をすばやく行うためにコンテンツ階層を浅くする。
・コンテンツに入る画像のサイズやテキストの文字数、行数に成約を入れてどのようなコンテンツが入っても見やすいように設計する。
といったことが必要となります。
ユーザーはアプリやWebサービスを使うために学習が必要となります。
例えばNoteの場合だと、記事カードやいいねボタンのデザインなどが統一されています。
もし統一されずに複数個あるとユーザーがサービスを使うために必要な学習量が指数関数的に増大していきます。
そうなってしまうと、意図した使い方をされなかったり、そもそも使うのをやめてしまう可能性があります。
こういった認知的負荷を下げるためにも工夫が必要です。
案1の場合はカードの大きさがバラバラなので、それぞれが別々のコンテンツであるかのようにユーザーを錯覚させてしまいます。そのため、記事を書いて公開してもユーザーが見てくれないということも考えられます。また背景画像によってコンテンツを掲載できる上限があるため制限されてしまいます。
案2の場合はカードの大きさがある程度統一されているため、一つのコンテンツをクリックすればそのカードがどのようなスキーマのUIなのか理解することができるので、記事を読んでもらいやすくなると思います。また背景画像などがないため、無限スクロール等によってコンテンツを可変的に載せることができます。
正しくデザインを学ぶ方法
使いやすさのデザインガイドラインは多くあります。例えばマテリアルデザインやアトミックデザインです。
最初のうちはこれらを遵守するもしくは参考にすることが一番の近道です。
そこから使いやすさを阻害しないように、一歩先のデザインを自分で生み出すことができれば一流だと思います。
例で言えば案2を意識しつつ、第一印象を可能な限り上げるなどです。
このようなことは実際に行われており、マテリアルデザインを意識したビヨンドマテリアルなどといった新しいデザインを生み出しているアプリがあります。
こういった嗅覚を研ぎ澄ますためにも、流行のアプリや受賞したアプリなどはインストールして使ってみると良いです。
まとめ
パット見の印象では案1がきれいで、案2は殺風景で地味だと感じます。
が、本当のデザインとは実際に使ってみなければ気づかないことが多いです。もしあなたがデザインをすることになったとき、またデザインを決定する立場になったときは、第一印象のみで判断せず、モックを構築して使いやすさを考慮するべきです。
残念ながら、どんなに賢い人でも、どんなに輝かしい経歴の人でも、知識がなければ間違ったデザインを選択してしまいます。どんなことにも言えますが、成長する学ぶことをやめてしまっては正しい選択はできないです。
この記事が気に入ったらサポートをしてみませんか？