私の職場ではUIについてのマニアックな談義が行われることがあります。アプリやwebだとかのデザイン会社なので周囲にはUIやUXのプロフェッショナルが集まっていて、『UI談義』の文化が根付いています。
UIを解剖するためのUI談義
UI談義とは、UIオタクで集まってUIのことをひたすら考察し合うだけの集まりです。ここには職種問わず誰でも参加が可能で、UIデザイナーはもちろん、iOSデベロッパー、Androidデベロッパー、PM、マネージャーなどなど、あらゆるタイプの人が集まります。
UI談義のテーマは突如設定されます。普段利用しているアプリのちょっとしたインタラクションが気になったらそこでUI談義が始まります。iOSのアップデートでApple純正アプリのUIが変わったタイミングや、Twitter, Instagramなど有名アプリのアップデートでUIが変わったタイミングが多いです。
『なんかTwitterがモーメントとかいう機能を実装したらしい』
『俺のTwitterにはニュースしか無いんだけど』
『ここの動きめっちゃよくできてる』
『3D Touchちゃんと実装してるなー』
大抵はこのような具合です。Twitterはなぜモーメントを実装したのか、普段縦の動きだけだったところに横の動きで違う視点を云々……、なぜモーダルビューのクローズボタンを左から右に変更したのか、、などさまざまです。
UI談義を通して、普段ユーザーとして利用していると自然すぎて気づかないデザインが見えてきます。
UI談義の始め方
まず、UIオタクを集めます。共通言語が欲しいのでできれば同じプロダクを利用しているユーザーが多くいた方が良いです。集まり方は、実際に席を近づけるでも良いし、Slackにチャンネルを作っても良いです。私の職場のSlackには #ui-dangi チャンネルがあって、そこでUI談義がよく行われています。ただ、うるさくなるのでできれば少人数の方が良かったりもします。
観察と洞察
デザインには必ず意味があります。その意味を言語化することがUI談義の目的です。デザインを言語化できればその真理が見えます。たとえ1pxの余白であってもそれには明確な意味があるはずです。目に見えるものだけでなく、あらゆる要素に意味を見出す、それらを見つけられる洞察力が求められます。
デザインガイドラインを理解しておく
AppleやGoogleなどのプラットフォーマーが定義するデザインガイドラインは、そのプラットフォームのUIの基本的な設計を言語化したものです。ガイドラインとはすなわち設計書です。数値など細かいルールは読み飛ばすとしても、最低限には把握しておくべきでしょう。
よく、『HIGに従うことは必須ではない、自分のデザインで独自性を出すべきだ』と言った声が聞かれますが、設計の通りに動かせないデザインはそもそも実装できません。プラットフォームに適合したデザインでUIを設計するにはどうすれば良いのか、UIを解剖することで学ぶことができます。デザインの本質がわかれば、ときにはプラットフォームの設計に矛盾せずにガイドラインをあえて無視して独自のデザインを構築することもできるはずです。
テーマを決める
テーマは重要です。UIといっても幅が広く、MacユーザーばかりのところにWindowsのUIについての話題をぶっこんでも談義には発展しづらいでしょう。モバイルアプリとwebでも性質は異なりますから、「モバイルwebサイトにける最適なナビゲーションとは」といった記事を投げたところで、アプリデベロッパーは喰いつきにくいかもしれません。
一番良いのは、共通言語になりやすい、普段使っているアプリやwebサービスを題材することです。やはりAppleやGoogleのプロダクト、TwitterやPinterest, そしてこのMediumなど、みんなが使っている有名なwebサービスをまずは選ぶことです。
そこから発展して家電や自動販売機に手を広げてみるのも良いかもしれません。
観察しよう
UI談義は何も答えが出ずに自然散会してしまうこともありますが、時には真理に近づくこともあります。ここで、我らが ui-dangi チャンネル一番の成功例（？）とも言える、メールアプリの事例を挙げてみます。これについては私が以前Mediumで記事にしてアウトプットしました。元々はUI談義の有志によって導き出されたメールアプリの解剖結果です。
ちなみにここでいう『ヤバイ』は肯定的な意味で捉えてください。
事の発端は、メールアプリのモーダルがiOS標準の形になっていない、なぜだ。というちょっとした疑問からでした。
普通のユーザーはこれに何の疑問も持たずに自然に使いこなすだろうと思います。ちょいと洞察力がある人であっても、奥行き感でカッコつけてるんだろうくらいにしか思わないでしょう。しかしUI談義ではここに『なぜ』を突きつけます。
まだこの画像だけではよくわからないので、他の動きも観察してみましょう。
新規メッセージ画面がスクリーン下部にスタックされる機能があることを発見しました。メールアプリを使っていなければそもそもこの動きを見つけることすらもできなかったでしょう。普段からいろいろなアプリに触れておくべきだと思いました。この画像のような、ビューコントローラーの外側にスタックされる部品はUIKitでは提供されていません（これが標準のものではないことは、UIKitに精通しているデベロッパーか、あるいはデザインガイドラインを読めばわかる）。Appleのメールアプリ開発チームはわざわざ自社のUIKitのルールを自ら逸脱してこのような独自UIを設計しました。なぜでしょうか。「見た目がカッコいいから」だけではそんなことはしないでしょう。観察からUIを解剖して、この標準のものではないデザインの真理を探り出します。
さらに観察を続けると、スタック部分をタップすることでSafariのタブ一覧と同じような見た目に変化することがわかりました。もちろんSafariのタブ一覧含めこれはUIKit標準のものではありませんが、この部分にSafariと同じUIを採用したことには明確な理由がありそうですね。
メールアプリのメッセージ画面はタブとして扱われる…このことがわかったら、次にタブとは何かという考察をします。詳細は省きますが、タブとはすなわちウインドウの別表現であって、タブ化した物体はウインドウで表現されるドキュメントである、ということがわかってきます。そもそもタブと言って良いのかという議論もありますが、このSafariのタブ一覧はどうみてもスタックされたウインドウの一覧です。
当時のUI談義では『ひょっとしてMacのメールアプリと同じなんじゃね』という発想から一気に真理に近づきました。要は、デスクトップアプリのマルチウインドウをモバイル化しようとしたらこのメールアプリの形にせざるを得なかった、ということなのでしょう。
観察のコツ
観察には多角的な視点が必要です。
- アプリの目的を探る（アプリの目的は大抵ひとつである）
- 目的（ゴール）までに至る過程で、ユーザーは何をすべきかを探る
- ランドスケープ表示にしてみる
- スプリットビューにしてみる
- タブレット版を見てみる
- デスクトップ版アプリがあればそちらから掘り下げてみる（特にApple純正アプリ）
- タッチしてみる、ダブルタップしてみる、ドラッグしてみる、フォースタッチしてみる
- 長押ししてみる（長押しは大抵ショートカット機能である）
- 言語環境を英語もしくはアメリカ合衆国にしてみる
- カレンダーを和暦にしてみる
- アップデート前後の違いを比べる
- 気になったらすかさずスクリーンショットを保存する
- できれば動画やgifアニメで記録する
悪いUIのリデザインをしてみる
UIがダメなアプリをリデザインしてみましょう。ファストフード系アプリ、メディア系アプリ、交通系アプリはそういったネタの宝庫です。『なんでそのUIにしたの？』『何をさせたいの？』と言いたくなるような絶妙なものだらけなので、もしリデザインするならどうすれば良いのかを考えてみると面白いかもしれません。
むすび
UI談義とはデザインを解剖して真理を探るための手段です。よくできたUIはとても自然で、ユーザーの意識の中に融け込んでいます。それでいて気持ちの良い主張をします。このデザインの真理を探るためにも普段から様々な優れたアプリに触れることが重要で、そのためにも有志で集まってUIについて談義しましょう。私のおすすめはAppleの純正アプリを観察することです。純正のiOSアプリには大抵Mac版もありますから、それらを比較することで、デスクトップとハンドヘルドとの間で彼らがどうヒューマンインターフェースをデザインしているのかがよく分かることでしょう。
今回はメールアプリを一例にUI談義をご紹介しました。また何か成果がありましたらMediumで随時言語化していこうと思います。
