この記事はGoodpatch Advent Calendar 2024 の11日目の記事です。

こんにちは!UIデザイナーのsugasoです。皆さんは、普段アプリのUIを見るのが好きですか?僕はと言えば、三度の飯よりもアプリのUIを見るのが好きで、定期的に「イカしたUIを見る会」(以下、イカ会)という課外活動も行っています。

前回の記事はこちら!

そんな僕が、2024年に触れた中で「こんなUIを書けるデザイナーになりたい!」「こんなかっこいいプロダクトを作りたい!」と心から嫉妬した、「イカしたアプリ」を厳選してご紹介します。

アプリやUIのインプットが苦手な方や、UIデザインの幅を広げたい方にとって、少しでも参考になればうれしいです!

UI/UXの改善点を一週間で提案<UI/UXフィードバック>

1.untitled

今年一番感動したのは、録音・音源管理アプリの「untitled」です。端末に入っている動画や音声をフォルダごとに整理できる、至ってシンプルなアプリですが細かくUIを見てみると、それぞれに隠されたこだわりを見つけることができました。

スワイプによるクイックな録音

「untitled」の特徴的な操作のひとつが、画面を下にスワイプするだけで録音を開始できる点です。多くのアプリでは、ボタンを押すことで機能を発動しますが、それは裏を返せば「ボタンを押さないと機能が使えない」という制約でもあります。

録音という行為においては、いかに素早く音声を逃さずに記録できるかが非常に重要です。このアプリでは、従来の「ボタンを探して押す」という動作そのものを見直し、録音のトリガーを画面全体(音声ファイル一覧画面)に設定しています。このアプローチにより、ユーザーは指をボタンに正確に合わせる必要がなく、直感的かつスピーディーに録音を始められます。

このUI設計に触れたとき、「ユーザー体験をここまで深く考え抜いたデザインがあるのか」と感動しました。

スワイプ操作時に、ボタンのアウトラインが徐々に伸びていく描写も非常に心地よい体験を提供しています。また、録音画面では、ナビゲーションエリアに表示される現在時刻が音量の数値に切り替わるといった工夫が見られます。

これらのデザインからは、画面内の情報量を増やさずに「今この瞬間に何を表示すべきか」を徹底的に考え抜いている姿勢がひしひしと伝わってきます。細部にまで配慮されたUI設計が、全体の完成度をさらに引き上げています。

徹底的に追求した触り心地

「untitled」では、音声データをフォルダやプロジェクト(フォルダのさらに下層概念)として階層的に管理できます。このとき、ドラッグ&ドロップで操作できるため非常に直感的です。さらに、プロジェクトをフォルダにまとめる際の動きもスムーズで、操作そのものが心地よく感じられます。

音声編集のUIも洗練されています。一度にすべての編集機能を表示するのではなく、使用頻度が高い操作をデフォルトに設定している点は基本に忠実です。しかし、長押しでループ再生を行う「Hold to loop」では、操作時にバイブレーションが鳴るといった特徴的なフィードバックも取り入れられており、遊び心を感じます。

また、「untitled」のデザインはモノクロを基調としていますが、その階調の使い分けが非常に巧みです。再生や録音といった主機能のボタンは濃い黒(Primary色)で表現される一方、検索やトラック移動といった補助的な操作は薄いグレーで統一されています。これにより、ユーザーに求める行動の優先度が明確に伝わり、アプリ内の操作が自然に誘導されます。

全体を通して「untitled」は目に優しく指に馴染み、さらに心まで心地よくさせてくれる設計が魅力です。細部にわたる徹底的な配慮が散りばめられているのが分かります。

データをデータとして捉えない、untitledの世界観

「untitled」をじっくり観察してみると、このアプリが音声データに対して独特な視点を持っていることに気付きます。単なる録音アプリではなく、ユーザーに提供する価値を2つの軸で考えているように思えます。一つは「録音や管理を一括でできる」という機能的価値。もう一つは「埋もれさせたくない大切な思い出のデータに、簡単にアクセスできる」という情緒的価値です。

例えば、昔録音した子供の笑い声や、学生の頃がむしゃらに演奏したギターの音。一見無機質な「untitled(無題)」なデータ。それに再び名前をつけて、大切な思い出として箱にしまう。そんな新しい体験価値を、このアプリは提供しようとしているのではないでしょうか。

この思いは、アプリ内の細かな演出にも表れています。音声を再生する際、CDがジャケットから少し顔をのぞかせるようなアニメーション。音声データをリンク化して共有する際には、アルバムジャケットがビニールで梱包されるような仕掛け。これらの演出は、音声データを単なるデジタル情報としてではなく、アルバムジャケットやCDといったエモーショナルなオブジェクトに置き換えています。この細やかなデザインからは、開発者の思いがひしひしと伝わってきます。

一見、モノクロのデザインで無機質かつ機械的な印象を受ける「untitled」ですが、触れば触るほど温かみが感じられるのが特徴です。こうした噛めば噛むほど味わい深い発見ができる「untitled」を皆さんも是非触ってみてください!

https://untitled.stream/

2. Unwind

次に紹介するのは、深呼吸サポートアプリ「Unwind」。このアプリは、深呼吸の深さやペースに合わせたメニューを選ぶことで、日常生活にリラックスの時間を提供することを目的としています。しかし、ただリラックスを促すだけではありません。「Unwind」のUIと世界観の融合ぶりには、思わず嫉妬してしまうほどの完成度があります。

世界に没入するために散りばめられた工夫

まず驚いたのが、深呼吸に合わせて視点が上下する演出です。例えば「5秒吸って、5秒吐く」というペースに合わせ、息を吸うと視点が上に、吐くと下に動きます。このシンプルな動きが、まるで自分が風景の中で深呼吸をしているような没入感を生み出し、他のアプリにはない体験を提供してくれます。

さらに、息を吐くタイミングでハプティクス(振動フィードバック)が加わるのも素晴らしい工夫です。就寝時や目を閉じて使用する場合でも、振動に合わせて深呼吸が可能で、画面を見る必要がないという丁寧な設計になっています。同様にハプティクスを活用するアプリ「Calmaria」の例からも、ヘルスケア系アプリでは触覚フィードバックがリラックス体験に効果的であることが分かります。

加えて、深呼吸時は再生ボタンや他のUIを一切表示しません。「Unwind」がいかに没入感を大事にしているかを一つ一つの挙動からひしひしと感じます。

UIを融かす自然な表現

さらに目を引くのが、設定画面のUI演出です。カード型の情報がなんと風景の背後に隠れており、スクロールすることで山の後ろから現れます。情報(UI)よりも世界観の演出が手前に出ているアプリなんて見たことがなかったので、初めて見たときには驚かされました。

一見すると視認性が悪いようにも思えますが、そもそもユーザーは情報を一度に全て確認する必要はありませんし、スクロールすれば情報にアクセスできるメンタルモデルをユーザは持っているので、このシンプルな設計が、むしろアプリの世界観に深く溶け込んでいます。こうした表現は、UIとビジュアルが喧嘩することなく調和した体験を生み出しており、「Unwind」の独創性が光る部分です。

細かいUIを見てもUnwindの徹底ぶりが見えます。夜の時間帯で開いた時のカードUIでは背景と類似色を採用しつつ、輪郭線に控えめな白を入れることで、強すぎない主張だけどぼやけない絶妙な印象を醸し出しています。リラックスを求めるユーザーにとって、パキッとした鮮やかな色は疲れを感じさせる可能性がありますが、このアプリは穏やかで目に優しい色調を選び、心地よさを丁寧に提供しています。

さらに、ホーム画面では、メインの深呼吸メニューを半透明にする一方で、オプション的な要素は控えめに配置。こうした情報の優先順位付けは、ユーザー体験を丁寧に設計している証拠です。

https://unwind.to/

3. Joi Daily Planner

3つ目に紹介するのは、プロダクトデザイナーAlexey Sekachov氏が手がけたタスク・習慣管理アプリ「Joi Daily Planner」です。

スワイプでサマリー確認

このアプリの特筆すべきポイントは、日々のタスクを常に表示しながら、上方向へのスワイプ操作でその日の達成サマリーを表示するというUI構造です。

習慣管理アプリにおいて、どれだけ「良いデフォルト」が設計されているかは使いやすさに直結します。「Joi Daily Planner」の主体験は、その日のタスクや予定を把握し、行動に移すこと。そして、それを続けることで習慣化を目指します。アプリを開いた瞬間、当日のタスクが一覧表示される設計は、まずその「把握」部分を完璧にクリアしています。

タブ切り替えでサマリーを確認するスタイルが多い中、スワイプ操作による奥行きのあるデザインは、情報へのアクセスをスムーズにし、UIの洗練さを引き立てています。特にサマリーの情報量が少ないからこそ、この方法が最適解となっています。この柔軟なアプローチは非常に参考になります。

メモの体裁を拡張した世界観

 

「Joi Daily Planner」のUIには、親しみやすいメンタルモデルが随所に活かされています。例えば、罫線のあるメモ帳をイメージしたデザインがベースとなっており、これが使いやすさと直感的な操作感につながっています。また、横スワイプで日付を移動できる操作や、物理的なメモ帳の動きを再現したようなレイヤー構造など、ソフトウェアならではの体験が違和感なく統合されています。

iOSでおなじみのスワイプ操作でアクションボタンが表示される挙動を踏襲しつつ、タスクを引っ張って離すときの「バウンス」アニメーションや慣性表現が加わっているのも魅力的です。これにより、単なる便利さを超えた、触っていて楽しいという体験が生まれています。こうした細かなこだわりが「かっこいいプロダクト」としての印象を強くしているのでしょう。

https://joi.software/

4. Zerocam

良いプロダクトの定義は人それぞれですが、僕は「なんでもできる万能感」よりも、何かに特化した「シンプルな尖り」にこそ魅力を感じます。その理想を体現しているのが、写真アプリ「Zerocam」です。

全てを削ぎ落とした体験

このアプリでできることは、写真を撮ることだけ。他にできるのは、カメラの倍率を等倍か2倍に切り替える程度です。比率の変更やフィルター機能すらありません。それだけ聞くと「不便そう」と思うかもしれませんが、実際に使ってみると、そんな印象は一切なく、むしろ「こういうのでいいんだよ」と思わず笑みがこぼれる潔さを感じました。

便利さと不便さは表裏一体です。多機能化が進むと、時にプロダクトの本質がぼやけてしまうことがあります。多くのプロダクトは「これができます!」という付加価値を強調しますが、「他よりシンプルです!」と謳う例は少ないものです。しかし、本当の美しさは機能美だけにとどまらないはずだと僕は思います。

こんなサン・テグジュペリの名言があります。

デザイナーが自分の作品を完璧だと思うのは、付け加えるものが何もなくなったときではない。取り去るものが何もなくなったときだ。

まさにZerocamは、取り去ることの美しさを体現しています。そこにあるべきものが完璧なバランスで収まっており、「無いこと」が「不足」に感じられない。この潔い設計が、僕たちに便利さの本質を問いかけてくるように思い、ベストアプリに入れました。

シンプルだからこそ際立つユニークさ

Zerocamの美学は、アプリのアイコンにも表現されています。一般的なカメラアプリのアイコンはシャッターやレンズをモチーフにしますが、Zerocamは「シャッターボタン」だけを描くという大胆なデザインです。

アイコンデザイナーのマイケル・フルラップは「アイコンデザインはデザインの核心を描くもの」と説いてましたが、Zerocamも「撮る」という体験の最後に残るものを描いているという意味で核心を描いているように感じました。

Goodpatchでは過去にマイケル・フルラップにインタビューをしています。詳しく知りたい方は、ぜひこちらも一読してみてください。

ちなみに、シャッターボタンに添えられた「Piu Piu」という文字はイタリア語で「もっともっと……」を意味します。良い画角やライティングを求めてシャッターを押す、写真を撮る原初的な衝動を表現しているのでしょうか。こうした細かなディテールに込められたメッセージを想像するのも、プロダクト観察の楽しみです。

https://zerocam.app/

世の中のデザインに嫉妬するということ

いかがでしたか?どのアプリも、ユーザーがどんな体験を求めているのかを徹底的に考え抜き、今までにない斬新なアプローチでその答えを形にしていました。こうしたプロダクトに触れると、デザインの奥深さや可能性に改めて感動させられます。

こうしたアプリを観察する時間で大切なのは、「いかに悔しがれるデザインに出会えるか」です。ユーザーとして「使いやすい!」と感動するアンテナ、そして作り手として「負けたくない!」と闘争心をかき立てられるアンテナ。この2つの視点を持つことで、アプリやUIをより深く理解し、新たな学びを得ることができるのではないでしょうか。

皆さんが普段触れているアプリの中にも、思わず嫉妬してしまうような素晴らしいUIがきっと隠れているはずです。ぜひ、そんな「イカしたUI」を探し出してみてください。それでは、次回もお楽しみに!

成果に直結するUI/UXの改善点を1週間で提案

UI/UX分析の様子

プロダクトのUI/UXを「ビジュアルデザイン」「コンテンツ機能」「情報設計」の側面から分析・レポート。アプリやWebサイトの、CVR改善、離脱防止、ユーザー数アップなど、成果に直結する改善点を最短1週間でご提案します。

このような方におすすめです

  • ・ 短期間でUI/UXを改善したい
  • ・ CVR改善、離脱防止、ユーザー数アップなどKPIを達成するための改善点を見つけたい
  • ・ ユーザー視点に立った改善がしたいが、なにから手を付けていいかわからない
  • ・ 数値分析やABテストをやりつくしたので、インパクトのある改善点が見つけられない
UIデザイナー募集。中途メンバー積極採用中!募集要項はこちら