Lê Xuân Lộcのポートレート

Lê Xuân Lộc

Product designer & builder、ハノイ

暮らしをよくするアプリを、デザインして作っています。

これまでにiOSアプリを5つ、最初から最後までひとりで作りました。どれにも、課金フローをひととおり入れてあります。UIデザインかプロダクトデザインの仕事を探しています。

アプリを作る前

小学4年生のころ、ノートにゲームを描いていました。クラスメイトは、お金を払ってそれで遊んでいました。大学に入る前の2017年に、ウェブサイトを作りはじめました。大学では授業の合間の休みが10分しかなく、並んで食べ物を買うには足りませんでした。そこで、カフェテリアの注文アプリを作りました。学生は、列に並んで待たなくてよくなりました。その後は、経済学を学びながらRでウェブアプリを作りました。インターフェースが人をどんな気持ちにさせるのかが、昔から本能的に気になります。

ハノイ近郊のリトリート施設Nalaを共同で創業し、2022年から、スタッフや提携ブランドと一緒に、運営とブランドを担当しています。ネットでは、TikTokで「Tớ là Lộc」として活動するようになりました。フォロワーは約10万人で、数百万回再生された動画もあります。TikTok、Facebook、YouTubeで発信するクリエイターブランドNàng Mơのコンテンツアドバイザーも、2年間務めました。2024年には、メディアの仕事はいい収入になっていました。その一方で、本当に好きなことからは遠ざかっていました。

だから、その仕事からは一歩引いて、家にいることにしました。周りからは、将来を棒に振っていると思われていました。私のほうは、新しい将来を作っていました。あったらいいのにと思っていたアプリです。それが、この5つです。

baseline App Storeで見る

考えるのはアプリに任せる。

baselineのホーム画面:ボードの帯、1年分の活動記録、週に1〜7回のセッション数を選ぶよう促す表示、その下にTODAYと2つの種目、そして大きなオレンジ色のSTART WORKOUTボタン。
baselineのセット記録画面:とても大きな文字の45 kg × 8、SET 01 /03、重量と回数のジェスチャーを説明する1行、そして画面幅いっぱいのオレンジ色のLOG SETボタン。
baselineのセット記録画面。
baselineのホーム画面の上部:「ONE SESSION TO JOIN」と書かれたBOARDの帯、グリッドで表した1年分の活動記録、そして「SET YOUR BASELINE. Choose 1 to 7 sessions each week. Train on any day.」と書かれたカード。
  1. ジムで

    トレーニングでしたいのは体の運動で、頭の運動ではありません。

    ジムに着いたらアプリを開いて、今日の種目を確認します。考えるのはアプリの仕事です。

  2. 最初の試み:ドラッグ2つ

    ドラッグにすることは、早いうちに決めました。数字キーだとタップが要りますし、矢印ボタンは画面の場所を食います。

    最初のバージョンには、ドラッグが2つありました。1つは重量用、もう1つは回数用です。2週間近く、毎日使いました。まあまあでした。

  3. グラフ

    使っているうちに、何かが足りないと感じました。今日の重量を前回と比べるグラフです。それを作りました。

    グラフができてみると、ドラッグは2つより1つのほうが理にかなっていました。上下で重量、左右で回数です。

  4. 今度はあなたの番

    数字に指を置いて、動かしてみてください。上に動かすと重くなります。右に動かすと1回増えます。ブロックがあなたのセットで、前回と比べられるように描かれます。

  5. 自分との約束

    最初は、自分のためだけのアプリでした。ほかの誰かが使うかどうかは、気にしていませんでした。でもあるとき、続かないのはそのせいかもしれないと気づきました。続けることこそ、このアプリの目的です。

    そこで、少しプレッシャーがかかるように、ソーシャルな要素を足しました。ただし、ほどほどに。ボードは、1つのことだけを採点するように設計しました。自分との約束をどれだけ守れているか、です。どれだけ重いものを挙げるかも、どれだけ頻繁にやるかも、点数には入りません。週4回と宣言して4回やれば、7回と宣言して7回やった人と肩を並べます。

    baselineのエッセイを読む App Storeでbaselineを見る

Lockeat App Storeで見る

まずは写真を1枚。

14歳から26歳まで、体重は増えたり減ったりの繰り返しでした。努力して体を変えたことも、一度ではありません。それでも結局はすべて元に戻り、そのたびに、自分を恥じる気持ちが少しずつ増えていきました。

その12年を振り返って、自分のどこかが壊れていたわけではないと気づきました。長期的な問題を、長続きしないほど激しい努力の繰り返しで解こうとしていたのです。私が憧れていた健康な人たちは、毎朝大きな戦いに勝っていたわけではありません。きちんと食べることが、暮らしの中のごく普通のことになっていたのです。

そこで、毎日のカロリーを記録するアプリLockeatを、1つの原則に沿って作りました。アプリに使う時間はできるだけ短く、効果はできるだけ大きく。食事は、写真を撮って記録します。推定値は1〜2秒で返ってきます。目標にしたのは、タップ1回でした。リリースしたアプリでは3回かかります。カメラを開く、写真を撮る、保存する。

欲しかったのは、縛られている感じのしない規律です。Lockeatは、毎日の目標を達成しろとうるさく言いません。口にした細かいものを、いちいち気にさせることもありません。

撮影フローは、まずClaude Designでプロトタイプにしました。アプリを開くとカレンダーが出ます。それぞれの日にあるのは合計の数字だけで、下にカメラボタンが1つあります。この画面には、カロリーリングも、プログレスバーもありません。記録が先で、評価はあとです。

数値はすべて推定で、医学的な助言ではありません。

App StoreでLockeatを見る

牛肉のフォーの写真に重ねて表示されたLockeatの確認画面:660カロリー、タンパク質38、脂質28、炭水化物62。Saveボタンの上には、料理名がふつうの言葉で書かれています。
Lockeatの1日の画面:いちばん上に1日の合計2,399があり、下の食事と線でつながっています。見えているのは08:00の763と12:00の1,365の2つで、3本目の線は切り取られた範囲の外へ続いています。

Elsewhere App Storeで見る

スマホの中に、ひっそりと。

Elsewhereは、目立たない外見の裏で、個人的な写真や動画を端末の中に保管します。

ホーム画面のアイコンは、12種類から選べます。iOSでは、アプリのアイコンは変えられますが、名前は変えられません。だから名前はElsewhereのままです。

App StoreでElsewhereを見る

「Home Screen icon」というタイトルのElsewhereの設定画面:選べる12個のアイコンと、アイコンは端末全体で変わるが名前はElsewhereのままだと伝える注記。
Elsewhereのライブラリ:架空のカップルと思い出の品のサンプル写真が、3列のグリッドに並んでいます。

lifelong App Storeで見る

ひとりの人。

lifelongは、2人だけのためのプライベートな空間です。連絡先リストも、フィードもありません。

アシスタントのTơは、スマホの中で動きます。2人のチャットを読むのは、頼まれたときだけです。それも、2人ともがオンにしたあとに限ります。どちらの側からでも、またオフにできます。

lifelongのウェルカム画面:One person. For life. A private space for exactly two people.
lifelongの同意シート。タイトルは「Tơ & AI — private to the two of you」。2つの注記に、アシスタントはスマホの中で動くこと、2人のチャットを読むには2人の同意が必要なことが書かれています。その下には1人につき1行あり、「Me」にはスイッチが、「You」には「hasn’t agreed」の表示があります。

これは、あやうく捨てるところだったアプリでもあります。恋人と別れたあと、このアプリに希望が持てなくなり、ほとんど作り直しに近い大きな変更を計画しました。

一度のつらい経験で、このアプリが描く健やかで幸せな関係の姿を変えるべきではない。そう判断して、元のままにしました。いまは目指す姿の30%ほどで、改良を続けています。

App Storeでlifelongを見る

Knowless App Storeで見る

画面ひとつ、ボタンひとつ。

Knowlessのリアルタイム翻訳画面:訳文の行と、その下の原文。
  1. 香港で迷子に

    小さいころ、香港で迷子になりました。言葉は話せませんでした。

    その後、中国や、言葉のわからないほかの国を旅したときは、モバイルデータ通信が使えませんでした。そのたびに、同じものが欲しいと思いました。通信がなくても使える翻訳ツールです。相手の言うことがわかり、話ができるように。

  2. 最初の試み:レーダー

    最初のバージョンは、ずっと聞き続けるレーダーでした。音だけで話し手の位置がわかる、と思い描いていました。

    無理でした。私のスマホの録音からは、空間オーディオが得られません。だから、声がどこから来ているのかを示すものが、録音の中に何もないのです。新しい機種ならできるかもしれない、という話は読みました。その機種は持っていません。そこでやめました。

  3. 2度目の試み:目

    そこで、耳の代わりに目を試しました。両方のカメラを同時に使って、話している顔を探すのです。

    スマホは熱くなり、バッテリーは減り、フリーズしました。これもやめました。

  4. 自分の耳

    理屈の上では、騒がしい場所向けにノイズ除去を入れるのは妥当に思えました。それから、ノイズの多い録音を自分の耳で聞いてみました。自分の言葉が聞き取れませんでした。

    これは、どれだけノイズを除去しても直りません。だから、この案は捨てました。私の言う「ヒューマン・イン・ザ・ループ」とは、こういうことです。自分の求めていることが理にかなっているかを、確かめ続けなければなりません。

  5. 残ったもの

    画面ひとつ、ボタンひとつ。押す、話す、訳す。

    最初のプロトタイプには、会話履歴もありました。Shipatonに間に合わせるためにそれも削りましたが、それでもあやうく締め切りを逃すところでした。おそらく、これまで作った中でいちばんシンプルなアプリです。

  6. エフェクトひとつに2日

    ごく小さな機能が、実はきわめて複雑でした。言葉の現れ方です。音声はまず推測になり、リアルタイムに感じられるよう、すぐに表示されます。次に、その推測が修正されます。長い文のあとには、文脈を踏まえてもう一度修正されます。

    その状態の一つひとつが、正しく見えなければなりません。合間の待ち時間も同じです。アプリとデザインのモックアップのあいだを、2日以上行ったり来たりしました。

    そこにあるべきでないものがあります。気づく人ばかりではありません。

    Knowlessのエッセイを読む App StoreでKnowlessを見る

レゴのように

いくつかのアプリを同時に作っているうちに、いろいろなものがつながりはじめました。あるアプリのために作った部品が、レゴのように、別のアプリにもはまるのです。baselineは、もともとlifelongのフィットネス機能でした。2026年8月に独立したアプリとして切り出し、その数日後には、baselineからLockeatが生まれました。

baselineのフィードは、さらに別のアプリから来ています。そのアプリを作り、動くようになって初めて、アイデアが現実離れしすぎていて成り立たないとわかりました。かかった時間を惜しいと思う日もあります。それでも、そのフィードはbaselineに移すと、うまくはまりました。

共通のルール

baseline、Lockeat、Knowlessは、自分で運用している小さなデザインシステム「Ground & Signal」をもとにしています。見た目はまるで似ていないのに、振る舞いは同じ。それがこのシステムの考え方です。ルールは次のとおりです。

  • 画面は2つ。その先はシートです。
  • アクセントカラーは1色。いま自分がいる項目と、取るべきただ1つのアクションに使います。
  • モーションは起きていることを伝えるもので、演出ではありません。
  • 小さな文字には、本当のことを書きます。
  • 取り消しで足りるところには、アラートも確認も出しません。
  • 報告はしますが、応援はしません。連続記録も、バッジも、褒め言葉もありません。

仕事の進め方

実装の前に、まずプロトタイプを作ります。そして、速く進めます。Lockeatが独立したアプリになったのは、2026年8月26日です。8月28日には、撮影フロー(推定値のカード、分量のホイール、3つのスワイプ操作)が、Claude Design上でクリックできるプロトタイプになっていました。AIを使ったレビューで、iOSでできることと照らし合わせながら、1画面ずつ確認も済んでいました。翌日には、そこから実装仕様書ができていました。プロトタイプのモーションの感触を残すことまで書いた仕様書です。

この段階で、2つの判断をしました。推定は計測ではありません。それでもアプリには、シンプルな数字を1つ出すことにしました。その根拠は、リアルタイムで流れるように表示します。もう1つ、あるモックアップに違和感がありました。原因は、サンプルの料理写真に混じっていたAI生成の写真だとわかりました。それ以来、Lockeatの写真にはルールがあります。本物の食事だけを使い、AI生成の写真も、スタジオ撮影のストック写真も使いません。

実装にはAIツール(Claude Code、Bitrig)を使います。モデルは手に入るなかでいちばん良いものを使い、自分はつきっきりで関わります。AIは、実現できないアイデアをたくさん出してきます。とはいえ、ときには大いに感心させられます。疲れきっているときは、まずモデルに計画をレビューさせ、そのあと自分で読んで、筋の通らないところがないか確かめます。決めるのは私です。

5つまとめて、36秒で

私のスマホでは、この5つは1つのフォルダに入っています。フォルダ名は「Quality life」です。

質のいい暮らしのための、5つのアプリ。

私について

何を作るときも、デザインをいちばん大事な部分のひとつとして扱うよう心がけています。どのアプリも、最初のプロトタイプからApp Storeでの公開まで、自分でやります。

それをチームの中で生かしたいと考えています。ハノイを拠点にしていて、ハノイ、ホーチミン市、またはリモートでのUIデザインやプロダクトデザインの仕事を希望しています。設備の整った自宅オフィスから、ベトナム時間(GMT+7)で働いています。

連絡先

24m2space@gmail.com

メールを送る LinkedIn CV App Store

このサイトの見方

画像の下にキャプションはないので、ここで説明します。スマホの画面は、実際のインターフェースのキャプチャと、それを合成したもので、中身はサンプルです。Elsewhereのライブラリにある写真は生成した架空のもので、Lockeatの1日の画面のうち1枚はトリミングしてあります。クリップは、自分で作ったデモ動画とプレビュー動画から切り出しました。Knowlessで話されている文は、あらかじめ用意したものです。Knowlessの章にある3枚の線画(レーダー、2つのカメラ、ノイズの多い波形)は、このページのために描いたスケッチで、キャプチャではありません。試せる2つの画面は、このページのために作った小さな再現版で、アプリそのものではありません。lifelongのキャプチャ2枚では、iOSが重ねて表示するもの(AssistiveTouchのボタンと収録中のインジケーター)をレタッチで消しました。36秒の映像では、章番号を隠してあります。アプリ自体のインターフェースは、キャプチャしたままです。音が出るのは36秒の映像だけで、それも再生したときだけです。これはデモ映像で、各アプリの現行リリースの内容を記録したものではありません。

写真クレジット

Lockeatの画面と動画に使ったWikimedia Commonsの料理写真を、ここに挙げます。サイズ変更とトリミングをしています。各写真には、それぞれのライセンスがそのまま適用されます。一覧は使った写真すべてを含むので、このページに出てこない写真もあります。

ライセンス全文:CC BY-SA 3.0、CC BY-SA 4.0、CC0 1.0。見出しの欧文書体はFraunces(SIL Open Font License)です。和文はお使いの端末のフォントで表示されます。Apple、iPhone、App StoreはApple Inc.の商標です。このサイトはAppleと提携しておらず、Appleの承認を受けたものでもありません。