https://dribbble.com/shots/1679085-Mobile-UI-Blueprint-freebie

私の職場ではUIについてのマニアックな談義が行われることがあります。アプリやwebだとかのデザイン会社なので周囲にはUIやUXのプロフェッショナルが集まっていて、『UI談義』の文化が根付いています。

UIを解剖するためのUI談義

UI談義のテーマは突如設定されます。普段利用しているアプリのちょっとしたインタラクションが気になったらそこでUI談義が始まります。iOSのアップデートでApple純正アプリのUIが変わったタイミングや、Twitter, Instagramなど有名アプリのアップデートでUIが変わったタイミングが多いです。

『なんかTwitterがモーメントとかいう機能を実装したらしい』

『俺のTwitterにはニュースしか無いんだけど』

『ここの動きめっちゃよくできてる』

『3D Touchちゃんと実装してるなー』

大抵はこのような具合です。Twitterはなぜモーメントを実装したのか、普段縦の動きだけだったところに横の動きで違う視点を云々……、なぜモーダルビューのクローズボタンを左から右に変更したのか、、などさまざまです。

UI談義を通して、普段ユーザーとして利用していると自然すぎて気づかないデザインが見えてきます。

MessageアプリのUIが変わったと話題になったときの様子
…結果遊び出す始末

UI談義の始め方

観察と洞察

iPhone 7の発色が6sよりも綺麗だと、新旧3台を並べて比較している様子

デザインガイドラインを理解しておく

よく、『HIGに従うことは必須ではない、自分のデザインで独自性を出すべきだ』と言った声が聞かれますが、設計の通りに動かせないデザインはそもそも実装できません。プラットフォームに適合したデザインでUIを設計するにはどうすれば良いのか、UIを解剖することで学ぶことができます。デザインの本質がわかれば、ときにはプラットフォームの設計に矛盾せずにガイドラインをあえて無視して独自のデザインを構築することもできるはずです。

テーマを決める

一番良いのは、共通言語になりやすい、普段使っているアプリやwebサービスを題材することです。やはりAppleやGoogleのプロダクト、TwitterやPinterest, そしてこのMediumなど、みんなが使っている有名なwebサービスをまずは選ぶことです。

そこから発展して家電や自動販売機に手を広げてみるのも良いかもしれません。

観察しよう

ちなみにここでいう『ヤバイ』は肯定的な意味で捉えてください。

事の発端は、メールアプリのモーダルがiOS標準の形になっていない、なぜだ。というちょっとした疑問からでした。

メールの新規メッセージ画面を開いた状態

普通のユーザーはこれに何の疑問も持たずに自然に使いこなすだろうと思います。ちょいと洞察力がある人であっても、奥行き感でカッコつけてるんだろうくらいにしか思わないでしょう。しかしUI談義ではここに『なぜ』を突きつけます。

まだこの画像だけではよくわからないので、他の動きも観察してみましょう。

新規メッセージ画面を下にスワイプしていくと次々にスタックされる

新規メッセージ画面がスクリーン下部にスタックされる機能があることを発見しました。メールアプリを使っていなければそもそもこの動きを見つけることすらもできなかったでしょう。普段からいろいろなアプリに触れておくべきだと思いました。この画像のような、ビューコントローラーの外側にスタックされる部品はUIKitでは提供されていません(これが標準のものではないことは、UIKitに精通しているデベロッパーか、あるいはデザインガイドラインを読めばわかる)。Appleのメールアプリ開発チームはわざわざ自社のUIKitのルールを自ら逸脱してこのような独自UIを設計しました。なぜでしょうか。「見た目がカッコいいから」だけではそんなことはしないでしょう。観察からUIを解剖して、この標準のものではないデザインの真理を探り出します。

さらに観察を続けると、スタック部分をタップすることでSafariのタブ一覧と同じような見た目に変化することがわかりました。もちろんSafariのタブ一覧含めこれはUIKit標準のものではありませんが、この部分にSafariと同じUIを採用したことには明確な理由がありそうですね。

新規メッセージ一覧はSafariのタブ一覧と同じUI

メールアプリのメッセージ画面はタブとして扱われる…このことがわかったら、次にタブとは何かという考察をします。詳細は省きますが、タブとはすなわちウインドウの別表現であって、タブ化した物体はウインドウで表現されるドキュメントである、ということがわかってきます。そもそもタブと言って良いのかという議論もありますが、このSafariのタブ一覧はどうみてもスタックされたウインドウの一覧です。

当時のUI談義では『ひょっとしてMacのメールアプリと同じなんじゃね』という発想から一気に真理に近づきました。要は、デスクトップアプリのマルチウインドウをモバイル化しようとしたらこのメールアプリの形にせざるを得なかった、ということなのでしょう。

Mac版Mail.app

観察のコツ

  • アプリの目的を探る(アプリの目的は大抵ひとつである)
  • 目的(ゴール)までに至る過程で、ユーザーは何をすべきかを探る
  • ランドスケープ表示にしてみる
  • スプリットビューにしてみる
  • タブレット版を見てみる
  • デスクトップ版アプリがあればそちらから掘り下げてみる(特にApple純正アプリ)
  • タッチしてみる、ダブルタップしてみる、ドラッグしてみる、フォースタッチしてみる
  • 長押ししてみる(長押しは大抵ショートカット機能である)
  • 言語環境を英語もしくはアメリカ合衆国にしてみる
  • カレンダーを和暦にしてみる
  • アップデート前後の違いを比べる
  • 気になったらすかさずスクリーンショットを保存する
  • できれば動画やgifアニメで記録する

悪いUIのリデザインをしてみる

むすび

今回はメールアプリを一例にUI談義をご紹介しました。また何か成果がありましたらMediumで随時言語化していこうと思います。

Interface Design / Interaction Design / macOS / iOS 🇯🇵 / https://note.com/usagimaruma

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store