センスに頼らないユーザーインタフェース（UI）デザイン

デザインにはセンスが必要だと思われている方は多いと思います。実際、デザイナーはたくさんのサンプルをみて、手を動かしマネを繰り返すことで、経験と直感でデザインをしていることがほとんどでしょう。

また、アプリやWEBの企画の段階で、どう設計をしたら良いかわからない、もっとセンスがあればいいのにと思っている人も多いと思います。

そこで、私が出会ったのが、OOUI（オブジェクト指向ユーザーインターフェース）というデザイン手法です。ソシオメディアというデザイン会社の上野さんが発信をしています。これから、OOUIについて解説していきますが、基本的には以下のブログ記事を読めばわかります。しかし、慣れない単語も多く出てきて初級者向けではないので、ここでは噛み砕いて説明します。

今回は、OOUIという概念の解説にとどまらず、誰でもアプリやWEBのワイヤーフレームの設計をできる方法を解説します。この画期的なところは、センスに頼ることなく、セオリーに従って誰でもデザインできるようになることにあります。

使いづらいサービスを一つでも減らすべく、OOUIが社会に普及していくと嬉しいです。

※UIとはユーザーインタフェースのことで、アプリやソフトウェアの利用者がコンピューターが情報をやりとりするするために接する、画面のことです。

目次

・センスに頼らないユーザーインタフェース（UI）デザイン
・良いデザインと悪いデザイン
・オブジェクトベースとタスクベース
・オブジェクトベースの方がメンタルモデルに近い
・オブジェクトベースのメリット
・タスクベースが許される例外
・なぜ、タスクベースのアプリが溢れてしまうのか？

良いデザインと悪いデザイン

私たちは経験的にアプリの、良いデザインと悪いデザインというのがわかります。ここでいう良い・悪いというのは、美的感覚に基づく、色や形などの表層的なデザインの話ではなく、アプリ全体の体験としてスムーズに直感的に操作ができ、ユーザーの目的を達成できるかです。

さて、ではどのようなデザインが悪いデザインなのでしょうか？どのようなデザインだと、ユーザーは目的をスムーズに達成できないのでしょうか？

それは、ユーザーの予想をネガティブに裏切る体験です。ポジティブな裏切り、例えば予想していたよりもずっと早く操作を終えられたと感じる場合は良いデザインです。ネガティブとは、ユーザーが期待していた動作、例えば探しているボタンがなかなか見つからなかったり、次すると思っていた操作と違うことをさせられたりです。

ユーザーはあらかじめ、物をこう動かせばこうなる、例えば「手に持ったコップを持ち上げて、手を離せばコップは落ちる」「左を向いた矢印ボタンを押せば左に進む」などといったイメージを持っています。これを、メンタルモデルといいます。

手にコップを持っているはずなのにコップがすり抜けて落ちてしまったり、持ち上げたくても持ち上がらなかったら、それは、ユーザーのメンタルモデルに逆らった体験であり、ユーザーにフラストレーションを与えます。

以下の動画は、宇宙飛行士がスペースステーションで重力がない状態に慣れてしまい、地球に戻ってきて重力に悩まされるというものです。これは、無重力状態で、物がどう動くかというメンタルモデルを身に付けてしまったために、地球上での物の動きに対して、フラストレーションを抱えています。興味深い動画です。

使いやすいデザインは、ユーザーのすでに持っているメンタルモデルに従っています。では、どのようなUIデザインがユーザーのメンタルモデルに逆らっていて、どのようなデザインがメンタルモデルに従っているのでしょうか？

・良いデザインとは、ユーザーの目的をスムーズに達成できること。
・ユーザーがスムーズにUIを操作するには、ユーザーがすでに持っているイメージ、メンタルモデルに従うこと。

オブジェクトベースとタスクベース

UIのデザインにはオブジェクトベースとタスクベースの二つがあります。

画面上にユーザーが操作をする対象物（オブジェクト）を表示し、ユーザーがオブジェクトを選択した上で、そのオブジェクトに対して行うアクションを選択できるのが、オブジェクトベースのUIです。オブジェクトベースでは、操作を「名詞」→「動詞」の順で行います。

例えば、以下のスクリーンショットはiOSの読書アプリ「Books」のトップページです。この画面を観察してみると、一番上には、今読んでいる「本」が見開きで表示されており、その下には読みかけの「本」が一覧で表示されています。画面上に表示されているのは基本的に「名詞」であり、「オブジェクト」であることがわかると思います。本を選んでから、続きを読んだり、シェアしたり、といったアクションを選択して操作できます。

では、タスクベースとはどのようなUIでしょうか？「名詞」→「動詞」の順で操作をするのがオブジェクトベースだとしたら、タスクベースとは「動詞」→「名詞」の順で操作します。まずやることを選んで、それからどの対象物にその操作を適用するか選択するのです。

以下は、ATMの画面です。ここでは、メニューに動詞が並んでいます。「お引き出し」「残高紹介」「お預け入れ」「お振込」「通帳記入」「お振替」という具合です。これがタスクベースのUIです。

さて、オブジェクトベースとタスクベース、どちらの方が良いデザインなのでしょうか？

・UIデザインにはオブジェクトベースとタスクベースがある。
・オブジェクトベースでは、まずオブジェクト（名詞）を表示し、選択したオブジェクトにアクション（動詞）を選んで実行する。
・タスクベースでは、先に何をするかアクション（動詞）を選び、次にどのオブジェクト（名詞）にそのアクションを適用するか選ぶ。

オブジェクトベースの方がメンタルモデルに近い

正解を言えば、オブジェクトベースの方が良いデザインで、タスクベースの方が使いづらいものになります。

思い出して欲しいのは、良いデザインとはユーザーのメンタルモデルに従っていることです。

現実の世界で考えてみるとわかります。ハンマーは手にとってから、それを振り下ろします。手を振り下ろしてから、ハンマーを持ち上げることはありえません。

ハンマーという物の使い方を知らない子供は、どのようにしてその使い方を覚えるでしょうか？とりあえず、手にハンマーを持ってみてから、それを振り下ろしてみて正しい使い方だったか考えてみるはずです。

同じことがUIの世界でも言えます。そのアプリをどう使っていいかわからないユーザーが、いきなり何をするか選択することはできません。まず、目の前に何があるかを確認し、それに何ができるか考えていくことで自然と使い方を覚えられるのです。

以下は、タスクベースで作られた、あるピザの注文アプリのUIです。アプリを開くと「メニューを見る」「商品を注文する」「お店を探す」というように、まず何をするかを選択するようになっているのがわかるでしょう。

まず「メニューを見る」と「商品の注文をする」には、どんな違いがあるのか疑問に思います。作業の全体像が把握できないので、モヤモヤとします。そして、ログインやら注文の手続きが続いて、いつまでもどんな商品があるのか確認できません。もし、最後まで進めたのに欲しい商品がなかったらとてもイライラするでしょう。

これを、オブジェクトベースに作りかえてみたのが、以下になります。

まず、商品オブジェクトを最初の画面に並べて閲覧できるようにしました。気になる商品があれば、詳細を見て確認できます。商品が欲しいと思ったらカートオブジェクトに追加していき、カートが満たされたら、注文のアクションを行います。商品をまず選び、それから注文するオブジェクトベースの方が、ユーザーは自然と最後まで手続きを進められるでしょう。

・オブジェクトベースの方がメンタルモデルに近いので、自然と使い方を覚えられ、使いやすい。

オブジェクトベースのメリット

オブジェクトベースは、メンタルモデルに近いことで使いやすいという以外にも、多くのメリットがあります。

1. 画面数が少なくてシンプルになる
2. メンテナンスも使い方を覚えるのもラク
3. エンジニアの実装モデルと近い

メリット1. 画面数が少なくてシンプルになる

タスクベースのアプリでは、タスクに対してオブジェクトが紐づいているため、タスクの数に応じて画面数は指数関数的に増えます。

もし、これがオブジェクトベースならどうなるでしょうか？

画面にはまずユーザー情報を表示しておきます。そして、そのユーザーに対して行うアクションを並べます。アクションが増えても画面の数はほとんど増えません。

メリット2.メンテナンスも、使い方を覚えるのもラク

例えば、会社の業務フローを考えてみると、タスクのやり方はどんどん変化していきます。タスクベースの場合、その都度画面を作成する必要があります。作業をする人は仕事のやり方を変えることを強制され、フラストレーションがたまります。

一方で、会社が扱うオブジェクトはほとんど変わりません。ドロップボックスのような書類の管理ツールを考えてみても、ドキュメントの共有の方法や、他の人との編集のやり方などのタスクは、どんどん変わるかもしれませんが、「ドキュメント」や「フォルダ」といった基本オブジェクトはほとんど変わりません。

オブジェクトベースにすることによって、タスクが変わっても画面への変更はわずかで済みます。

メリット3. エンジニアの実装モデルと近い

プログラムを組んでアプリを実装する際、オブジェクトベースの方がシステムの構成に近く開発とデザインの足並みが揃いやすくなります。

プログラムを勉強したことがある人なら、オブジェクト指向という言葉を聞いたことがあるかもしれません。オブジェクト指向では、物をコンピュター上で表現し、物を組み合わせることでソフトウェアを実現します。

ここでは詳しくは説明しませんが、オブジェクト指向のプログラミングと、オブジェクトベースUIデザインは相性が良いのです。

タスクベースが許される例外

実は、タスクベースでも良い場合もあります。例えば、ATMの画面や、炊飯器の操作などです。

これらに共通するのは、その操作画面に向き合うときに、ユーザーの頭の中に何に対して操作をするか明確に思い浮かべられるということです。

ATMなら機械にカードを挿入する時点で、自分の口座を操作しているのだと理解できます。炊飯器なら、入れたお米に対して操作を行うとわかっています。操作の対象が限定的である場合にのみ、タスクベースのUIが可能なのです。

また、アプリの中でも、必ず行う定型的な処理をタスクベースにする場合があります。例えば、インスタグラムの新規投稿タスクです。インスタグラムでは、必ず投稿の作業を行うので、ここだけタスクベースになっています。ただし、この中でも動詞的な表現はほとんど使われていません。写真オブジェクトが表示され、「選択中」などの状態を示されているだけで、「写真を選んでください」と言った表現は見つかりません。

なぜ、タスクベースのアプリが溢れてしまうのか？

なぜ、タスクベースのアプリが世の中に溢れてしまうのでしょうか？

アプリを企画する際に、通常はまずユーザーのやりたいことを考えていきます。「ピザを注文して家に届けて欲しい」「ピザの注文をしてお店に取りにいきたい」「ピザのメニューをみたい」「以前注文した履歴をみたい」という具合です。ユーザーにヒアリングをすれば、さらに個別に具体的な要望が出てくるでしょう。

それから、それぞれの要求を忠実に再現しようとし、そのまま画面に落とし込んでしまいます。ユーザーのやりたいことを動作を追って丁寧に再現してしまうことで、逆に使いづらいアプリが生まれてしまうのです。

では、どうするとオブジェクトベースのUIをデザインできるのでしょうか？その方法は、次回実践編で解説していきます。

プロトタイプの作成をお手伝いします

複数のアプリを企画、設計、実装してきた経験を活かし、ゼロからのプロトタイプ作成をお手伝い致します。

通常、ランサーズなどでデザインを外注する場合には、どのような画面設計にするか、どの素材を使うかなど、細かく指定をする必要があります。また、修正は2回までしか対応しないなどルールがあります。しかし、企画の段階では、そこまで細かく仕様を指定できなかったり、ヒアリングの声を取り入れて次々と変更をしたいのに、スピーディに進まず困っているのではないでしょうか？

私は、自身の起業経験や複数のアプリ企画経験を活かして、柔軟に素早く、使いやすく、スタイリッシュなプロトタイプを作り上げることができます。

使いやすいアプリを作るには、顧客の理解が欠かせません。必要に応じて、カスタマージャーニーマップの作成や、インサイト発見などまでフォローさせていただきます。

ただし、ただ安く見た目が綺麗なデザインをして欲しいという場合には、お受けできない場合がございます。見た目だけでなく、ユーザーの視点にたった使いやすいデザインをさせていただきます。

ご興味のある方は、contact@pointoken.jpまでご連絡ください。