僕が今まで愛してやまなかったUI達について語る

この記事はGoodpatch UI Design Advent Calendar 2019の18日目の記事です。

こんにちは。UIデザイナーのnaoです。僕は今こうやって仕事としてUIデザインについて接していますが、同時にいちユーザーとして数々の素晴らしいUIデザインに触れてきました。初めて触れたiPhone3GSが発売された2009年から約10年間数々のiOSアプリケーションをインストールしては削除し、中でも特に機能性に長け優れた外観を持つアプリケーションは僕の愛でるUIとして使わない物でも保持してきました。

この10年間、僕のポケットには無限の可能性を秘めたアプリケーション達が入っていてそれらは、晴れの日でも雨の日でも、楽しい時も悲しい時も僕を支えてくれました。はい、こんなエモい文章ではないのでご安心ください。

このAdvent Calendarの記事ではそんな愛してやまなかったiOSアプリケーションのUI達をほぼ全部リストアップして紹介していきたいと思います。1つ1つに説明が凄く長くなるのは避けたいので、サクッと紹介できるものはそうします。あくまで純粋なUIオタクとしての目線なのでUIデザイナーの目線ではありません。その点についてはご留意ください。

2021/9/8 追記：
デザイナーのUI愛が爆発する当記事と合わせて、「エンジニアが選ぶ推しデザインシステム10選」もぜひご覧ください！デザイン原則を構築する必要がある方、ガイドラインをまとめる必要がある方におすすめです。

本命

この欄では、数あるUIでも特に愛してやまなかったアプリケーション達を紹介していきたいと思います。この中で分かるぅ！！！的な感情が芽生えた方はぜひご連絡ください、ビールでも飲みましょう。

Tweetbot

はい、本命中の本命です。

2011年にTapbotsからリリースされたTwitterクライアントのTweetbotは僕にとてつもない衝撃を与えましたし、今でもTweetbotを愛用しています。

何が優れているかを一言で表すと「世界観」です。いかにもガジェットオタクが好きそうな世界観が外観やら細かいマイクロインタラクションに反映されていました。また個人的にはいち早くUIに細かいサウンドを取り入れたアプリケーションだと思っており、例えばPull To Refreshやツイートを右スワイプで返信する際の「カチャ」という音はアプリケーションの世界観の醸成の一翼を担っていました。

Tapbotsの公式ページには「A Twitter Client with Personality（個性を持ったTwitterクライアント）」と書いてありこのアプリケーションの独自性を物語っています。

余談ですが、Tweetbotがリリースされた当初は高校生でしたが、このアプリケーションのUIが好きすぎてリリース元のTapbotsに雇ってくださいとメールしようか迷ったほどです。

敢えて昔の動画を貼ります。「カチッ」という音が聞こえませんか？このような音が随所にちりばめられているのです。かっこいいよね。

Path

はい、本命中の本命です。

このSNSアプリケーションがリリースされた当初は2010年で高校生でしたが好きすぎてまだスマートフォンも持っていない周囲にインストールするように勧めた程です。

いやーこれ何が凄いって飛び出すんですよ、メニューが。（動画）見てくださいこの飛び出し具合。

テンション上がりません？まだガラケー最高や！とか言ってる時代にですよ？外国ではもうこんな飛び出してたんですよ？まさにUI界の黒船や〜。まぁこのインタラクションは好評ではなかったのかあまり長くは続きませんでしたが僕は今でも大好きです。

このアプリケーションは当時Facebookのメンバーだった人物が中心になり、FacebookのアンチテーゼのクローズドSNSとしてリリースされたようです。そういったコンセプトもUI同様未来的でそこも好きな理由の一つでした。

Tweetie 2.0

またTwitterクライアントです。

一時期Twitterクライアントフリークだったくらい異常にインストールしてた時期がありました。NatsuLionとかOsfooraとか。あ、twitbirdとか…。

そんな中Tweetie 2.0は革命的で、今ではスマートフォンを持っている誰もが使うPull to Refreshを世界で初めて採用したアプリケーションでした。

Tweetie 2.0は元AppleソフトウェアデベロッパーLoren Brichterによってリリースされ、2010年にはTwitter社に買収されるくらいの優れたアプリケーションでした。勿論Twitterの公式クライアントには依然としてPull to Refreshは残っていますし、バンドルIDはTweetieのままです。

これがPull To Refreshの始まりです。

Loren Brichterは製品版をリリースするまえに2つのバージョンを試しました。1つ目は画面上の見えないしきい値がスクロールされると更新が発生するようなものでしたがそれに対する視覚的なフィードバックは存在せず、Brichterは視覚的なフィードバック無しでは更新が発生したことが分かりにくいと思い次のバージョンを試しました。

最終バージョンではしきい値がスクロールされると更新が発生したということを示すアラートが出るようになりました。理由としては、そのインタラクションはユーザーが見たことない物だったため、明示的にインタラクションが発生したということを示すためだったと言われています。

最終的に他のデザイナー達によって改善され今の形になります。結果的にユーザーから好反応で、また元Intagramのデザイナーで今はAbstractのPrincipal DesignerのTim Van Dammeからも好意的なメールを受け取ったこともBrichterへのインタビューで明かされています。

この話胸熱すぎません？

Flipboard

RSS Readerに似たアプリケーションのFlipboardもまた、当時のUIデザイン界において非常に新しいUIを持っていたアプリケーションでした。

2010年に初めてリリースされたiPadと同じ年にFlipboardはリリースされ、その年のApple’s iPad App of the Yearも授与しました。その時のiOSのリスト表示は今と同じようなUITableViewのCellのような表現が主流でしたが、今見ると当時の外観はどこか野暮ったく個人的にはあまり綺麗な物ではありませんでした。ですがFlipboardはMetroUIのようなタイル表現を採用しユーザーにページをめくる体験を視覚的に提供してくれました。

難しいことは置いといて好きです。

Steinway Metronome

世の中がより複雑になり、過度に多機能なアプリケーションが増えれば増えるほど僕の中でのSingle Purpose Applicationへの愛は高まります。このメトロノームのアプリケーションは非常に優れた外観を持った物でした。

参考: Beautiful Pixels

テカテカのボタン、大胆なレイアウト、そして木目のあるNavigation Bar（しかもこの木目は設定で違う木目を持った木の種類に変更することが出来るという機能）はぁ、この惚れ惚れするくらいの美しいスキューモーフィズムの表現には時折ため息を覚えます。もうあまりこういうアプリケーションを見れない世の中になったと思うと少し悲しいです。

Clear

TodoアプリケーションのClearがリリースされたのは2012年でした。

リリースの時期に投稿されたデモ動画ではこのアプリケーションの美しさにはとても魅せられたのを覚えています。このアプリケーションにナビゲーションは無くピンチインでナビゲーション、ピンチアウトでタスクを新規作成、スワイプでタスクをアーカイブや削除するというジェスチャーで全てを操作するような当時では比較的珍しいUIでした。

また2013年にiOS7がリリースされてUIがフラットデザインになる1年以上前からスキューモーフィズムとは異なるようなスタイルを採用したことが話題を集めたことも記憶に残っています。

見てくださいよこの最強に美麗なグラデーション、綺麗ですよね。

Moves

昨今のヘルスケアへの興味関心が高まる動き、デバイスの性能の向上やHealthKitなどの登場により、AppStoreでは色々なヘルスケアアプリがリリースされるようになりました。それに伴い人体の情報を可視化するのに美しいインフォグラフィックスを搭載するアプリケーションも増えています。そんなヘルスケアアプリケーションが流行する前にMovesはリリースされました。

これはユーザーの動きを位置情報を用いトラッキングするアプリケーションですがそのレイアウトが特徴的でした。最上部に以前のGame Centerを彷彿とさせるような歩数等の表示、また縦スクロールで一日の動きが縦に軌跡となって見れるような表現方法は当時使っていて凄く新鮮でした。また他の日のデータを俯瞰して見る画面は画面全体が一つのバーとして表示され、その日の歩数が丸の大きさで分かるといったGUIの視覚的な表現も優れていました。

このアプリケーションは多くのユーザーに支持されて2014年にFacebookに買収されました。なんか良いアプリケーションはすぐ買収される法則ありますよね。

Mailbox

最近はよくProductHuntとかで事前登録を募ってるアプリケーションありますよね。メールアドレス入力してね〜とかそんな感じで。2013年2月にリリースされたメールアプリケーションのMailboxもそうでした。

でも事前登録した人数が桁違いでした。なんと38万人。

当時二十歳だった僕も飛びついて事前登録しましたよ。あぁ〜早くリリース日来ないかな〜なんて思っていたのを思い出します。そこまで多くの人を惹きつけた理由は前述のClearから着想を得たスワイプでのメールの処理やその他多くの新しい機能の登場でした。Mailboxの登場以来メールアプリ市場は大きく変わったといっても過言ではありません。ですがなんとリリース1ヶ月後の2013年3月にはDropboxに買収され2016年にはサービスが終了してしまいました。この短命の儚さはなんともアプリケーション市場の動きの速さを物語っていますね、悲しいな〜。

好きだったよ、Mailbox。

大辞林

ここからは日本発のアプリケーションを紹介していきます。

2008年に物書堂がリリースした大辞林はその一つです。

もうね、この美しさは世界に誇っていいですよ。なんてったってこの黒の小粋な色使いと縦書きの明朝体というコンビネーションですよ、暴力です。これが侘び寂びですか？分かりませんが日本特有の奥ゆかしく麗しい文化をひしひしと感じますし、それがデジタルデバイス上で操れるという未来性は今思えば当時高校1年生だった僕をUIデザイナーへと導いてたのかもしれません。

なんか文章がよく分かりませんが僕の興奮具合もスクリーンを通して伝わるんじゃないでしょうか。

しかもこのアプリケーション使ってて楽しいんですよ。言葉の海を泳ぐような没入的な感覚に陥るんですよね。それはiPhoneというデバイス上の特性のおかげで成り立っているのですが、常に新しい言葉と触れ合えるようなUIになっていて使っていて飽きることはありません。僕はこのアプリケーションのおかげで日本語の美しさを知り日本語が好きになりましたね、言い過ぎましたが。

そんなとことん日本語にこだわった大辞林は2009年度のグッドデザイン賞を受賞しました。そりゃこんな綺麗なアプリケーション受賞するって…。

ちなみに物書堂のアプリケーションは僕の知る範囲では漏れなく美しいので是非使ってみてください。

Tiltshift Generator

正直僕はこのアプリケーションのおかげで今でも続く写真という趣味に出会った気がします。

普通の写真が綺麗に撮れるだけでも良かったのにそれをミニチュア風に加工出来るなんて当時の僕には衝撃でした。ミニチュア風写真を撮るためだけに高いところに登ったことさえありましたし…。上で挙げたアプリケーション達はデータを閲覧が主な用途でしたが、Tiltshift Generatorをはじめとする写真加工系のアプリケーションでiPhoneの可能性に気づきはじめたような気がします。

でも優れたのは機能だけじゃなくて外観も同様でした。標準のツールバーではなくカスタムされた物を搭載した世界観あふれる外観は当時の僕の少年心をくすぐりました。今はもうAppStore上には存在しませんがもし今でも存在していたら絶対にこれを使ってミニチュア風写真を撮り続けていることでしょう。

参考URL: http://touchlab.jp/2009/09/iphone-tiltshift-generator-447/

SpliTron

webtronが開発したSpliTronは機能性と美しさの両方を兼ね備えた割り勘管理アプリケーションです。

特筆すべきな所はリボンのテクスチャやレシートの形状や質感など細かいところが忠実に再現された素材感で、まさにスキューモーフィズムの結晶ともいえるようなものです。またAquaのようなスタイルや当時のiOSの通知センターを模したような背景もあいまって、もはやiOSの純正アプリケーションなんじゃないかと思うくらいの完成度です。

またね、このアプリケーションも音が鳴るんですよ。「カチャ」って。現実世界で道具を使うときって何かしらの音が出る場合って多いじゃないですか、音がでない道具にしても手と道具が擦れる音は聞こえると思いますし。そう考えると、ソフトウェアの世界でも音が出るとぐんと道具感が増しますし愛しやすくなるんですよね〜。

ZEEEN

僕はSNSを使用する際に閲覧するためのクライアントには異常にこだわります。それぞれ特性がありますしね。その中でも当時クライアントが乱立していたDribbbleではこのZEEENが僕の中での唯一の選択肢でした。

何が凄いってね、このアプリケーション色が変わるんですよ。投稿されたデザインの主な色が画面の背景色と文字色になるんですよね。単純にむちゃくちゃかっこいいんです。また表現としても凄く新しく多くのデザイナーに支持されてきました。それに加えてZEEENのようにユーザーが入力した内容によってアプリケーションが表示する方法を変えることは没入的な体験を与えられるのではないかと感じています。（特殊な例だと思いますが)

今はDribbbleのAPIの仕様変更によりもうAppStore上には存在はしていませんが、Product Huntに掲載されるという偉業も成し遂げており、僕の中では凄く記憶に残ったアプリケーションでした。大好きだった、ZEEEN。

参考URL: https://www.producthunt.com/posts/zeeen-2

今回はあんまり紹介出来なかったアプリケーション

本当はね、もっと紹介したかった僕が愛でてきたアプリケーションがあるんですよね。でも僕の回想録的な物でみなさんのお時間を頂戴するのも忍びないんですよね…（本当は記事を書く時間と体力が無かった…)なので以下僕が愛してやまなかったアプリケーション次点編をさっと紹介していきます。

• Momento
  今はアプリケーションアイコンが変わってしまいましたが昔の赤い背景に白のリボンがあったアイコンが好きでした。また色々なSNSを横断して全てをこのアプリケーションにまとめるという思想が好きでした、これ見ればOKみたいな。
• MoneyBook
  家計簿アプリなんですがおかんがつける家計簿的な外観ではなく凄くスタイリッシュなんですよね。またUIが直感的で凄く好きでした。カテゴリのアイコンも豊富で見ているだけで楽しかったです。
• Awesome Note
  ノートとかカレンダーとかToDoを一緒にんんっ！！とまとめたアプリケーションです。Single-Purpose Applicationってロマンあると思う一方で、でもAwesome NoteみたいなMulti-Purpose Applicationって好きなんですよね。十徳ナイフ的と言えば分かっていただけますでしょうか。
• Everyday
  たまにYouTubeとかで自分の顔を毎日写真にとって時間が経った後にそれを動画にして見返すみたいな動画ありますよね。Everydayはその動画を作るためのアプリです。今思えばオンボーディングもイケてるんですよね。自分の顔写真をすぐ撮らせた後に自分の顔のパーツの基準点を合わせるんですよね。それが逆だったら面倒だっただろうなぁというUIデザイナーみたいなことを考えてしまいました。高校生の時にこれを始めたのですが僕は極度の面倒くさがりなので1ヶ月程でやめてしまいました。またこれを機に始めてみようと思います。
• Fast Memo
  僕はこのアプリケーションからスピードは大正義という教訓を学びました。オンボーディングとかないんですよ。起動した瞬間にメモ画面。フォルダ等でまとめられたりしません、すぐ文章を書く画面。この潔さ、スピード。そしてTwitterやEvernoteに直ぐに共有出来るという便利機能。僕の中では最高峰のメモアプリです、シンプルイズベスト。
• Bump
  インタラクション好きとしてBumpが発明してくれたインタラクションはiOSの歴史の1ページに確実に刻み込まれます。まだ日本がガラケー！とか赤外線！！とか言ってる時代にですよ、Bumpは送信したい写真や連絡先を選んでスマートフォン同士をコツンとぶつけるだけでOKという発想ですよ、これはUI界の黒ふ(ry
• Yo
  Yo!

次は僕もこれ好きだった！という人にどうしても伝えたいので名前だけでも紹介します。以下のリストの中で好きなアプリケーションがありましたら是非話しましょう。

• カード類
• Deliveries
• Sunrise
• Spark(メールアプリ)
• Inbox
• Thermo
  お前まじかと思うほどのスキューモーフィズム
• Reeder
• Twodots
  きゃわわ

 

番外編: 僕が単純に美しいと思う最近のアプリケーション達

社内のSlackには僕だけがただ単純にひたすら美しいと思うiOSアプリケーションを貼っていくというチャンネルがあります。特に僕だけが投稿するというルールは設けてないのですが何故か貼る人がいません。今日はそんなチャンネルの中から選りすぐりの美しいアプリケーションを紹介していきます。恐らくこちらのほうが皆さん興味ありますよね

Hourly

見てくださいよ、このHelveticaの暴力を。

Hourlyはタスクにかかる時間をトラッキングしてくるアプリケーションです。そのようなアプリケーションは他にも沢山あるんですが、Hourlyは単純にタスクを実行させたり停止させる所に注力しているのが特徴です。

少し使いにくいなと思うところはありますがタスクにかかった時間を1時間単位にしているのでカウントが小数点で行われたりするところや、ロシア人チームで構成されてるからか、どこかロシア構成主義を彷彿とさせるようなダイナミックなレイアウトは非常に愛しやすいポイントです。

Pocket Casts

最近見たiOSアプリケーションの中でここまで完成度が高いのは初めてでした。

またPodcastのクラウド同期等の便利な機能や再生に関する統計などの細かい機能も搭載されているPocket Castsは昔からあるアプリケーションですが、少し前にフルリニューアルされたんですかね。ともかくアイコンやナビゲーション設計、マイクロインタラクション、全てのディティールが作り込まれています。

また統計画面で出てくる海外ドラマのビッグバンセオリーを想起させる細かい文言やエンプティーステートの可愛いイラストも愛しやすいポイントです。

Must

一昔の僕の中での流行はどこまでHIGを遵守しているかとかiOS純正っぽさがあるかでした。その時に見つけたのがこの映画のキュレーションやレビューを投稿するアプリケーションのMustです。

このiOS純正っぽさ凄くないですか？AppStoreっぽいレイアウトやラージヘッダーの使い具合。またHaptic Feedbackも所々で適切に使用されているのもiOSデバイス上でのMustの存在感を高めてくれています。

ですが、絵文字が積極的に採用されているのって海外のトレンドなんですかね？少し一昔感がありますがなんかおもちゃ感が強すぎて少し否定的です。またこのMustは背景と文字のコントラスト比が少し弱いので見にくいです。ビジュアルは好きだけどユーザービリティは微妙なアプリケーションです。ですが愛しているのでリストには入れさせていただきました。

Neverthink

最近のエンターテイメント系のアプリケーションで圧倒的没入体験を提供するのはこのNeverthinkです。これはねTHE没入アプリです、時間溶けます。

YouTubeにある膨大な量の動画の中から運営しているチームがジャンルごとにキュレーションして掲載しているのですが圧倒的に観る体験に集中させてくれます。画面上部の動画再生部分は固定されていてほとんどのボタンを教えても遷移することはありません。また再生部分の下はTVのリモコンのようなレイアウトになっていてTVと同じ感覚でザッピングすることが出来ます。そしてジャンルが変わるごとにTVのあの砂嵐が出てきます。本当にここ、愛くるしいです。

本来観る体験という点で考えるとここは要らないはずなのですがこういった細かい仕様が愛しやすいアプリケーションへと昇華させてくれますよね。

あ〜愛しやすい、Neverthink。タイトルも良くないですか？考えるな！

Vantage

カレンダーアプリケーションって意味もなく比べますよね。学生時代からカレンダーなんて使うことも全く無いのに意味もなく使い漁ってました。そのなかで出会ったアプリケーションがこのVantage。

このアプリケーションを一言で表すと「必要意義を感じないZ軸」UIデザイナーになった今色々考えるんですよ。ペルソナとかユースケースとか実装保守コストとか。そのような細々とした事を一切無視しているかのような潔さ。愛しか感じません。

懐古厨になってしまいますが以前はこういうアプリケーション沢山あったような気がします。デバイスの可能性を実験を通して切り開いていくようなアプリケーション。それがこの令和の時代にそんなアプリケーションに出会えるとは。しかもね、予定一つ一つに色やステッカー、フォントを変更&設定出来るんですよ、まじかと。それ要る！？！？みたいな機能を平気で追加してきます、カレンダーアプリなのに。

俺たちは独自路線を行くぜという声が聞こえてきそうなくらいの独自性です。本当に愛しやすい。

Allegory

上のVantageが珍し物好きな人へ向けたアプリケーションだとしたら、このノートアプリケーションのAllegoryは僕のようなオタク向け。まずノートなのにダッシュボードがあります。ダッシュボードに何が書かれていると思います？まぁいってね。「今○つのノートがあります」ぐらいだと思うじゃないですか。このアプリケーションは違います。

• 文字数
• スペースを除いた文字数
• 単語数
• 行数
• 段落数
• 読むのにかかる時間
• メモが概ねポジティブ、ネガティブ、ニュートラルのどれか

 

最後の「メモが概ねポジティブかネガティブかどうか」これなに！？！？！いやまじでなにこれ！？？！要る？？この機能要る？？？

いやこれがまた要るんですよ。日記とかを書いてるとね、あー今日はネガティブだな。とか振り返られる訳じゃないですか。そうやって明日はポジティブになろう！とかも思えるわけですしね。

人間に寄り添うノートアプリケーション、それがAllegory。

ですがこんなところで終わらないのがこのアプリケーション。マークダウンのサポートや画像やPDFの貼り付け。ドローイングツールもついてますしメモのプレビューや翻訳もできます。リマインダーやアラート、プロ版ではスキャン機能。もはや何でもありです。しかもHIG準拠やSFSymbolの採用。

もう愛さない訳にはいかないよ、こんなアプリケーション。。。。

物好きな方は是非使ってみてください。