【新連載・イカしたUIを見る】vol.1 こんなの見たことない！と感動したUI

こんにちは！UIデザイナーのsugasoとharuです。UIデザインの面白さ（沼とも言う）にハマってしまった私たちは、定期的に「イカしたUIを見る会」（以下、イカ会）という課外活動を行っています。

イカ会では、最近触ったアプリや発見した魅力的なUIを共有し、普通なら見逃してしまうであろうデザインのこだわりや、ハートを揺さぶられるポイントについて語り合ったりしています。

知れば知るほど面白くなっていくUIの世界を皆さんにもチラ見せしたい……ということで、イカ会の様子を連載することにしました。第1弾となる今回は、「こんなの見たことない！」と私たちが感動したアプリをご紹介します。

関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介

Clear Lists

最初にご紹介するのは、ご存知の方も多いタスク管理アプリ「Clear Lists」。

Clear Listsの特徴はナビゲーションバーやタブバーを排除して、タッチ・スライド・ピンチアウトといった直感的操作のみでアプリ内の階層を行き来できることです。

リストを直接触って操作する心地よさ

タスクの追加は主に3パターン。下へスライド、上部か下部をタッチ、あとはタスクとタスクの間をピンチアウトすることで追加できます。ピンチアウトに関しては並び替える動作がなくなってとてもGoodです。（ちなみに追加すればどんどんグラデーションが増えていきます）

直感的な操作で扱えるからこそ、タスクの追加以外の操作にもこだわりを感じるUIが潜んでいます。

iOSのリマインダーなどのListでも横スライドで削除ができますが、大抵半分以上スライドしないと削除になりません。Clear Listsではほんの少し右にスライドするだけでパッと消えるので、指の操作稼働範囲を少なく済ませられます。（誤って削除したとしても、左スライドで復活するのでありがたいです）

また、タスクを並び替えると、色が変化するので、上にあるものほど優先度が高いものとして置いておけるのも直感的で良いですね。タスクリストは1.2…とナンバリングされることがよくありますが、そういった情報も削ぎ落としているのが美しいです。

逆に左へぐーっと持っていくと時計のアイコンが表示され、タスクのリマインドを設定することができます。設定後の時刻表示もとてもミニマムで、アラートが出るタイミングがさりげなく、かつ明瞭に分かる配慮がされています。無くても困らないけど、あると便利な機能をうまく忍ばせているのが個人的にとても好きです。

 

Clear Listsは挙動も特徴的で、ピンチインすることで前の階層に戻ります。その際のアニメーションは、ちゃんと押したところからズームアップされているのも芸が細かいです。（ちなみに階層を深ぼる際もそこを起点にズームされます。）

また、スクリーンショット、もしくはナビゲーションのタイトルをスライドすると、タスクの部分だけ切り出して共有することができます。しかもこれはどんなに長くても出すことができます。

奮い立たせる遊び心

このアプリでユーザーに最も体験して欲しいことは、「タスクを達成する」ことです。Clear Listsでは記入しているタスクを全て達成した状態で上にスライドすると、タスクを一掃するアニメーションが入ります。貯まったタスクから解消されたようなスッキリ感を味わえる遊び心ですね。

最後にユニークポイントとして僕が好きな部分を紹介します。「Clear Lists」ではEmpty State（空状態）時に、著名な方の名言が表示されます。基本的にEmpty Stateでは「空の状態を示す」＋「この画面でできることを記載し誘導する」のが主流です。「タスクをメモする」が基本操作になるClear Listsでは、「そんな分かりきったことを記載するくらいならタスクをバンバン書きたくなるようなやる気の出る名言を出そうぜ！」というアプローチをユーザーにしているのかもしれません。こういったところも、機械的ではない人情溢れる遊び心だなと思いますね。

他にも「Clear Lists」は他にも多くの魅力がありますが、まだ未読の方はこちらの記事も見てみてください。当時から革新的なアプリだったことがわかります。

一夜にして世界中を席巻したiPhoneアプリ「Clear」の裏側

Clear Lists をApp Store で見る

🦑 イカ会での1シーン

Arc Search

次のアプリは、iOS向けブラウザ「Arc Search」です。The Browser Companyが提供するこのアプリは、今までのブラウザアプリにはなかった「記事の要約機能」を搭載したりと、より快適に情報をキャッチするための試みがいくつもされています。何より触り心地が良く、今ではデフォルトのアプリに設定して日々使用しています。

極限まで操作を減らした検索体験

「Auto-Open Keyboard」という機能を使うと、アプリ起動時に既にSearch Inputにフォーカスが当たった状態にできます。Googleでは起動した後にSearch Inputを選択して検索。Safariでは直前まで開いていたページが表示され、Search Inputを選択して検索します。

他アプリと比較してみると、「Search Inputを選択する」という1アクションを省き、より効率的な体験を実現しています。実際に使っていて、直前まで開いていたページを見たいユースケースよりも、何かを新しく検索することの方が多いので、自分にとってこの設計はとても親切かつハッとするUIでした。

快適な閲覧

検索した単語に対して予測検索が表示されますが、これを上にスライドすると、ドラムロールのようにSearch Inputの中に入っていきます。これも実際に操作してみると、片手でキーパッドを押して予測検索をスライドするという体験が、指を必要以上に動かさない（離さない）のでとても使いやすかったです。Arc Search自体が、ほとんどの操作を画面下部で行うようにしているのも設計思想として一貫している気がしますね。

また、タブバーにあるメニューアイコンを長押しすると共有モーダルが立ち上がります。メニュー内でユーザーが最も行うであろう操作を抜き出して長押しとして機能させているのがクール。

他にも、ページ内をスクロールすると、タブバーが折り畳まれコンテンツ幅が確保されるようになっています。細かい挙動ですが、これがあるだけで没入感が変わります。

キャッチーで愛らしい表現

プライベートモードは目のアイコンで切り替えることができます。プライベートな内容に対して鍵ではなく目のアイコンを使うのが、「僕は見ないよ」とArc Search自体が自我を持ってユーザーに接してくれているように感じることのできるUIだなと感じました。

他にもタブバーの追加ボタンを長押しすると、スマイリーフェイスと呼ばれるArc内のキャラクターが出現し、音声検索ができます。この時も単に笑顔のアイコンが表示されているのではなく、瞬きとしたり顔が少し動いたりと、こちらの表情を伺うような愛くるしい挙動を見せます。

Arc Searchは、単なるウェブ・ブラウザではなく、寄り添う相棒のような愛着が沸く工夫が盛り込まれているのが、僕（sugaso）がArc Searchを使う一番の理由かもしれません。

Arc Search をApp Store で見る

🦑 イカ会での1シーン

Timepage

「Timepage」は、手帳メーカーとして有名なモレスキン社が開発するカレンダーアプリです。サブスクリプション型の有料アプリですが、他のカレンダーアプリでは代わりの効かない作り込まれた使い心地が好きで、私（haru）は長年愛用しています。

日付が並ぶ一覧ビュー

まずすぐに分かる特徴は、無限にスクロールできるシングルカラムの一覧ビューです。よくある紙のカレンダーのようなタイル型のレイアウトではなく、Timepageのメインビューはひたすら日付が縦に並ぶシンプルなリスト型になっています。

アプリを開くと「今日」を起点にこのビューが表示されるので、予定を入れる際はそのまま下にスクロールして該当の日付を見つけ、そこに予定を追加します。

このレイアウトがいいのは、ページが「月」や「週」によって区切られるのではなく、ひたすら縦に時間が流れていくところです。例えば、カレンダーが6月から7月に変わったところで、単に予定を見たい人にとってはあまり重要な情報ではありません。

Timepageのシンプルなレイアウトは「暦（こよみ）の都合」ではなく、人が体感している「1本の時間の流れ」をうまく表しており、人間のメンタルモデルに、より合うのではないかと思います。

時間単位ではなく、日ごとのスケジュール管理に最適

レイアウトについてもう1つ。他のアプリでよく見るのは、縦軸に時間をおき、予定の開始時刻と終了時刻をプロットするタイムライン形式のものです。Timepageにも日ごとのタイムラインビューは存在するのですが、かなり奥の階層にあり、優先度が低く置かれています。このことから、Timepageは「何時に予定がある」ではなく「この日に予定がある」という情報に注力したアプリであることが分かります。

実際私も、時間の把握が重要な仕事の予定はGoogleカレンダーで、時間よりも日付が重要なプライベートの予定はTimepageで管理しています。この2つの違いを見ると、デジタルツールとして発展したタイムライン型のGoogleカレンダーは、非常に動的なつくりになっているのに対し、もともと「手帳」という紙媒体から派生したTimepageは、その名残を感じる部分が多々あって面白いなと思いました。

慣れると心地よい隠しコマンド

このアプリで私が特にお気に入りなのは、見えないところに隠されたアクション（隠しコマンド）と、それを実行したときの手に吸い付くような触り心地です。例えば、日ごとの詳細ページでは「+」のアイコンボタンを押すと予定を追加できるのですが、画面を下向きにスワイプしても同様に予定の作成画面が開きます。

「なんだ、できることは同じじゃん」と思われるかもしれませんが、予定の作成はアプリを使うたびに繰り返す操作なので、いちいちボタンを探さなくてよかったり、親指をそのままの位置で操作できるといったほんの小さいことも、毎日積み重なるとアプリ体験がよりよいものに感じられます。

また、引っ張ったあとに「ぽよん」と画面が出てくる触り心地が最高です。Timepageにはこのように細かい操作感までこだわりを感じられるところが多いので、気になる方はぜひ実際に触ってみて欲しいです。

他にも、シンプルで便利なウィジェットや、いい意味でUIっぽくない絶妙な配色など好きなところがたくさんあって「こんなUI、他では見れないな」と思っています。

Timepage（iOS）をApp Storeで見る

🦑 イカ会での1シーン

Carrot Weather

最後に紹介するのは「Carrot Weather」。遊び心とユーモアがたっぷり詰まった天気予報アプリです。こちらも有料ですが、他の天気アプリにはない可愛らしさと、それでいてしっかり使いやすいところがお気に入りで使い続けています。

可愛いのに、欲しい情報をちゃんとくれるTOP画面

Carrot WeatherのTOP画面はとてもシンプルで、ファーストビューの上半分には現在地の天気と気温が、下半分には2時間ごとの予報が表示されます。さらに下にスクロールしていくと、今後1週間の予報が表示されます。

私はこの画面を初めて見たとき、「なんて可愛いんだ」と一瞬で心を掴まれました。それまで見てきた天気アプリは、数字とアイコンが所狭しと並んでいるものばかりで、実用的であっても魅力を感じるものはなかったからです。

それに対して、Carrot Weatherは文字文字しさがなく、情報が絵として直感的に伝わってきます。また、1画面に情報を詰め込まず、セクションごとに「今の天気を知りたい」「今日これからの天気の変化を知りたい」「1週間の天気を知りたい」といったそれぞれのニーズにしっかりと応える情報がまとまっています。

情報の段階的開示

このようにTOP画面には、天気を把握するために無駄のない情報だけが表示されていて、ごちゃつきを感じません。一方、より詳細な情報は1つ奥の階層で見ることができます。

最初からすべての情報を出すのではなく、「重要なものから段階的に開示していく」というUIの超基本的なお作法が鮮やかに体現されています。

直感的に天気がわかるタイムライン

このアプリには他にも深掘り甲斐のある素晴らしいUIが詰まっているのですが、実は私が最も愛用しているのは、Carrot Weatherのウィジェットです。

1時間ごとのタイムラインになっていて、アイコンで天気が、アイコンの上下位置と数字で気温の変化が、下部の%表示の数字で降水確率が分かります。

出かける前には今日1日の天気がどうなるかだけ分かればいいので、ウィジェットでぱっと把握できるところがとても便利です。

Carrot Weather（iOS）をApp Storeで見る

Carrot Weather（Android）をGoogle Play Storeで見る

🦑 イカ会での1シーン

私たちの考えるイカしたUIとは

今回、この活動を読者の皆さんに紹介するにあたり、私たちにとって「イカしたUI」とは何かを改めて考えてみました。

デザイナーとして「これは新しい」だったり「見たことなくて面白い」と思うUIは、まず触ってみることが多いです。一方で、私たちが思う「イカしたUI」は、必ずしも斬新なものというわけではありません。

私たちがより魅力を感じるのは、普通は気づかないレベルだけど、よく見ると作り手の工夫が凝らされているものたちです。デザイナーやエンジニアが、ユーザーのためにこれは絶対にやりたかったんだろうなとか、必ずしも必要でない部分にまでこだわっているななど、勝手に深読みをして、ほくほくしながらUIを見るのを楽しんでいます。

そういう片鱗を感じるものに触れると、「自分たちもこういうの作りたいな〜」とつい嫉妬を覚えてしまいます。

……というわけで、今回は「見たことないけど工夫が凝らされていて、おもちゃで終わっていない」そんなUIを厳選してみました。これからもわれわれが発見したイカしたUIをお届けしていきます。次回もお楽しみに！