UIデザイナーに聞いた！Appをいつもの100倍面白くみる観点

普段からAppを大量にインストールして見てるけど…

UIデザインを生業としている方やこれからUIデザイナーになりたいと思っている学生の方々の中には、普段からインプットのためにAppを大量にインストールして触っている方も多くいると思います。

ですが、Appを含めたソフトウェアのUIは、良くも悪くも我々の生活のすぐ近くに、かつ大量に存在しているため、もしかしたら意識的にインターフェイスを批評するという行為はそれほど充実してできていないのではないでしょうか。

インターフェイスが融けた生活の中で、インプットのために多くのAppに触れていても、ただ闇雲に触っているだけではインターフェイスの良さを理解することはできません。ですから、必要なのはより多くの批評する観点を自身の中に持つことであり、それと照らし合わせてインターフェイスに触れる習慣を身に着けることだと思います。

観点を増やせばもっと面白くUIを観察できる！

基本的にその批評する観点というものは書籍を読んだり、業務の経験などから増えていくものだと思います。

しかしこの記事内では、素直にGoodpatchのUIデザイナーに「何をみて“良いAppだな〜”って思いますか？」と聞いてみました。複数人のUIデザイナーからそれぞれAppに触れている時に見ている観点を教えてもらうことでよりたくさんの軸でAppに触れることができます。そしてなにより明日から試すことができます！

今回は筆者がGoodpatchのUIデザイナー5名にお話を伺ってきました。

UIデザイナー : kuniorockさんの場合

1.「次のiOSっぽいかも」を想像する

普段どのようにAppを見ているかでいうと、多いのが次のiOSっぽいか？ の想像や考察をしながら見るということです。Apple純正のAppのアップデートなどを確認しながら、あまり使われていない表現や新しいUIが出てきた箇所にAppleが次にいきたい方向性のヒントを見出します。ベンダーの作るプラットフォームのルール、振る舞いや見せ方の“次”を探るのは必ずやる観点の１つです。

そしてアップデートでの確認以外にもiOSの歴史の変遷などを気にして、「歴史的な文脈からいけば次はこうなるかもしれない。こんな変化が今年はあるかもしれない。」というように想像しながらUIに触れていることが多いですね。

2.試せるアクションは一通り試す。そこに暗黙的なアクションが用意されているか

Appに触れる時の具体的なアクションをあげるならば、単一の導線に対して試せるアクションは一通り試すことですね。例えばタブバーにおいているアイコンは必ずロングプレスしてしまいますし、Undoする際にはいまだにシェイクしてしまいます。

しかし、このようなことをする理由はちゃんとあって、ある導線に対してそこに暗黙的なアクションが用意されているかということはとても重要なことだと感じているからです。ただ純粋に機能を遂行できるようにするだけなら、そのような工夫はまずApp上に現れません。暗黙的なアクションがしっかりと用意されているということは誰かがユーザーの操作の幅を想像し、ちゃんとそれに対して道を用意してあげているということ。ユーザーを想像している組織や人がAppの奥にいると思うとグッときます。

3.静止画ではなく繋ぎを意識する

UIを見るときには割と当たり前の考えかもしれませんが、必ず点ではなく線で見るようにしています。線を意識しているか？点を意識しているか？を判断しながら見ていると、そのAppを作っている組織のあり方というのがなんとなく見えてきたりします。

例えば線ではなく、「点の印象が強いUIのAppではデザインチームの意思が強く働いているのだろう」とか「開発に画面を渡している構図になっているのだろう」などの組織のあり方が想像できます。ソフトウェアではデザインも開発も基本的には１つに融けているとより良いと思っています。だからこそUIを静止画ではなく繋ぎを意識して触り、考察することを大事にしています。

触り心地も美しく、繋ぎも綺麗、そしてアクションに対して素直であり暗黙的なショートカットもある。そんなAppが好きですし、感動します。

ソフトウェアデザイナー : usagimaruさんの場合

1.インターフェイスの心地よい手触り感

私がAppに触れる際に特に注視する観点は、インターフェイスの表現のされ方と、振る舞い方です。例えばUIの動きを見る際には、そのアニメーションのイージングの具合がきちんとOSの標準的な動き方になっているかどうかや、指に吸い付きなめらかに動くかどうか。すなわち自己帰属感が生じるFluid Interfaceになっているかどうかを見ます。うまく言葉にしづらい感覚ですが、手触り感みたいなものはインターフェイスの心地よさに直結するので、きちんと表現しているAppは美しいと感じます。

というのも、このような考え方を持ったきっかけはおそらく私の原体験にあります。私がUIというものに惹かれたのはMac OS Xの初期バージョンに初めて触れたときです。当時はPCのOSといえば、GUIはドットが荒く、アイコンは32×32pxの大きさ、色もグレー寄りの単調なものがほとんどでした。対してMac OS Xは、Aqua User Interfaceと呼ばれていましたが、まずアイコンの大きさが128×128pxととにかく大きいし、写実的で美しい。ウインドウなどのエッジはなめらかにカーブしている。その描画は一部半透明で裏が透けている。GUIのオブジェクトにはドロップシャドウがかかり、浮いているようにも見える。フォントにもアンチエイリアスが効いていて美しい。極め付けは、Dockにカーソルを持ってくるとウネウネ滑らかに動いて、とにかく美しく楽しい。ジニーエフェクトも衝撃的でした。

私はAquaを目の当たりにしたときに、そこで初めて『自分でこのUIを作ってみたい』と思いました。そして独学でCocoaプログラミングを学び、Mac OS Xアプリケーションの制作をし始めました。当初から目当ては『美しいネイティブのGUI』だったのです。

2.プラットフォームで見る意識を変えていく

私はiOS appだけではなくmacOS appにもよく触れています。そしてプラットフォームをみるときには必ず観点の意識を変えて見ています。大きな観点の違いで言えば「思想」 というものにどう乗っかるAppなのか？を明確に分けます。

iOSでは基本的にアプリケーション・セントリックな考え方をします。スティーブ・ジョブズがiPhoneを発表した際に述べたように、iPhoneとはそもそも『画期的な“インターネットコミュニケーション”端末』なのです。言い換えると、iPhoneとはインターネットとのインターフェイスを片手の中に収める発想でデザインされているというわけです。ですから、iPhoneで“App”と呼ばれるもののほとんどは通信機能を備えていて、何かしらのWebサービスのためのUIとして機能しているように思えます。この世界ではドキュメントと呼ばれるようなファイルの存在はほとんど抽象化されていて、あまりユーザーはファイルを意識しないような作りになっています。
対してmacOSでは違った発想をします。macOSはインターネットが生まれる前からあるデスクトップOSです。その設計思想の根幹はドキュメント・セントリックな考え方に基づいています。要するに、Macでは何かの書類を作り、その書類を複数のアプリケーションで共有しながら並行して作業をします。iPhoneのように一つのAppを立ち上げてインターネットに接続する使い方ももちろんしますが、それはMacの使い方のうちの本の一部分でしかありません。macOSのアプリケーションはドキュメントをApp内に閉じ込める形はあまり取らず、App間のコラボレーションを重視します。

このようなmacOSの設計思想が強く現れるインタラクションがあります。コピー&ペーストやドラッグ&ドロップです。macOSのネイティブアプリケーションは（正しく実装されていれば）App間のデータのやり取りでコピー&ペーストやドラッグ&ドロップが適切に機能します。例えばIllustratorで作ったシェイプをコピーして、それをKeynoteにペーストすると、きちんとパスデータのままデータを持ってくることができます。
そのほかにもmacOSには『サービスメニュー』と呼ばれるApp間連携の仕組みが用意されていますが、これらが適切に機能することが基本になっているんです。ドキュメント・セントリック、またはデータ・セントリックとも言えるような気がします。
アプリケーションはこのようなOSの設計思想を受け継いで、一種の秩序というものを成り立たせています。ですから、OSのインターフェイスの設計思想を無視したアプリケーションが存在していると、途端に秩序は崩壊してしまいます。

このようなプラットフォームの秩序をきちんと守っているか、成り立たせているか、そういったデザインが行われているかはとても重要な観点だと思います。
例えばCotEditorやSketchはとてもmacOSらしいアプリケーションだと感じられます。

3.設計と制作その両方でみることも重要

私はプライベートで開発もしていますが、そもそもエンジニアリングとデザインの境目を意識したことはほぼありません。もちろん業務内での役割はありますが、インターフェイスを観察してみるときにはどちらの目線でもみます。コードを書きながらUIを考える、UIを考えながらコードを書く。SketchとXcodeを同時に触っている感覚でしょうか。でもその様に両軸でみることによって見えてくるものはたくさんあるのです。なので、別にコードをかける様にはならなくても良いと思うので、両方の見方でインターフェイスと向き合っていくと良いのだと思います。

UIデザイナー : Hanhsiang Tsaiさんの場合

1.ネイティブのような振る舞いをしているかどうかが最初の合格ライン

iOSならHuman Interface Guidelines、AndroidならMaterial Design Guidelinesなど、それぞれに規定されているガイドラインに沿った振る舞いがなされているかは最初に意識する観点です。簡単なアニメーションではなくそれぞれのインタラクション、画面の遷移や選択した時の挙動などの感触が正しい振る舞いをしているかどうかを観察し、そこをクリアできていないインターフェイスは残念だなと思います。

しかしそのような観点で観察するには、純正の振る舞いを知っていることが前提だと思うので、純正のAppは普段からじっくりよく見ています。

2.Appの中でも希少性の高いビューは保管する

エラーダイアログや、オンボーディングのUIなどはある一定のタイミングか、最初に一度しか見られないものです。そういうものは毎回確かめて見ることができないので希少性の高いビューだと思っています。それらに遭遇した時は普段からスクショを撮って保存しておきましょう。

3.正常な状態以外のデザインが特に大事

最近はコロナウイルスの影響で、緊急のお知らせなどもしばしば見ることがあります。緊急の際にアラートが表示される場所を考慮してUI設計されているかを確かめることができるので、このような状況におけるUIもデザインのインプットとしてはチャンスです。注意深く見るべきなのは正常な状態以外のデザイン。ここにしっかり対応できているデザインは作る側があらゆる可能性を考えて設計しているように感じられます。

UIデザイナー : Saya Nakanoさんの場合

1.相対的に評価する

私は基本的に所謂「かっこいい」Appというものは特に重点に置いて探すことはありません。確かにiPhone内にはいくつかありますが、それよりも実際に生活の中で使うAppを意識してみることが多いです。

いいUIかどうかを判断するときにまずすることは、AppStoreに出ている興味のあるカテゴリーを全部落としてから見るということ。なぜ複数のAppを大量に落としてから見るのかというと、UIを相対的に見て、評価するためです。この相対的に見るという部分がとても重要だと思っています。なぜならば、世界にある大量のAppの中の1つとして生きていかなければいけないからです。なので、単一のAppとして完成されていることよりも、相対的にみて完成度はどうかを見極める必要があり、相対的にみる観察眼は非常に重要です。

2.多機能で制約の多いAppほどクライアントワークでの参考になる

私が普段デザイナーとして携わっているクライアントワークでは、多機能で制約の多いサービスを扱う場合が大半です。なので、普段意識して見るAppも同じような状況のものをよく見るようにしています。それは、多機能で制約が多く「このような要件ならばこのようなUIにするしかない…」みたいなことが伝わってくるAppのことです。

厳しい要件の場合に「どのように展開させていくべきか」の参考にするためにそのようなAppを普段から触るようにはしていますが、そのようなAppはいつもより表層の丁寧さに関して厳し目に見るようにしています。

なぜならば、たとえ、UIとして厳しい要件のサービスであっても、視認性のある色使いやシャドウのかけ方などはビジネス構造とは何の関わりもないからです。どんなに要件が厳しくても、細かな表層での配慮はできると思っていますし、そのような細かい場所をしっかりできていないAppは良くないUIだと思います。しかし同じような制約を持ちつつも細かい点で整理されているAppは、デザイナーの気概を感じますし、私はいいUIであると思います。

3.“普通”と“思いやり”が感じられること

前節の通り、私は特筆してかっこいいとか目立つとか綺麗とかはあまり重要視していません。普通でいいんです。普通の機能でいいし見た目で良いのです。しかしその普通とは、基本を知っているということです。

普通をしっかりとデザインできているか？という観点は自分がデザインする時も常に意識します。100点でなくても普通であり、そして少しの思いやりが感じられるものを私は良いと感じています。foodieというAppで、写真にかけるフィルターを選ぶ時に適切なフィルターがわかりやすくなっているUIなどは思いやりがあっていいなと思います。そのように普通で少し優しいUIが私は良いと思っています。

UIデザイナー : Gacknさんの場合

1.期待を裏切らないのは、当たり前から生まれる

僕がいつもAppを触るときに見る観点は、そのインタラクションが自分の期待を裏切らないものであるかどうかです。思っていたのと違う挙動が起きるのは期待が空回りするようでストレスになります。ですからあまりにも独自の挙動をするAppは良いUIではないと感じます。

そして期待を裏切らないAppというのは常々当たり前な挙動をします。当たり前の基準はたくさんありますが、やはり使い慣れている純正Appのような動きは我々が直感的に感じる“当たり前”に一番近いのではないのでしょうか。私自身もAppをデザインするときは私たちが慣れ親しんだ当たり前の形であるかは意識してデザインしています。

2.かゆいところに手が届く気遣い

当たり前の挙動をすることが平均点だとしたら、追加点としてはかゆいところに手が届くか？を意識しています。

例えば、Thingsの「エリア」の詳細画面で「エリア」のタイトルをいじる時などは編集モードに入らずモードレスにその場で変更できます。このような振る舞いは直接データを触って操作している感覚があるから好きです。間接的なモーダルなどを経由せず、直接的にデータを触れることができるUIは痒いところに手が届く、気遣いの効いたUIだと思います。気遣いという点だとiPhoneとかだと「（）」をうつと自動的にカーソルがかっこの中に移動してくれてたりもします。これは細かな配慮ですし、ユーザーが取りうる選択の中で一番可能性が高いものを自動で選択してあげていて気遣いができる優しいUIだと感じます。

3.機能がどうこうじゃない、触ってたい

当たり前だとか、かゆいところに手が届くだとか、いろいろ語りましたがはっきり言って機能どうのこうのより触っていたいAppなのかどうなのか。みたいなのは結構意識したりしてしまいます。

ビューに触れた時のマイクロインタラクションとか、もしくは自分の指に同期的に追従してくれるUIのような自己帰属感が高い、そういう自分の手足のように変化して付いてきてくれる触り心地の良いAppはとても好きです。開発もしている自分からすると、そのように細かい部分まで実装するのは大変だろうなともわかりますし、そこまで気を使っているという意図が伝わる。だからこそずっと触っていたいのだろうな。といろいろな側面から感動してしまいます。

観点を増やして、上質なインプットを

今回は、GoodpatchのUIデザイナー5人に面白いAppの見方を聞いてみました！普段何気なく触っているAppのUIも様々な観点で見ることができれば、よりインプットとして上質になりますし、何よりどんな意図で作られているのか、何が正しく何が正しくないのかの基準を十分の中に豊富に持つことができます。

是非、今回ご紹介した観点を使ってもっと深くUIを観察してみてください！