Lullはブラウザベースのアンビエント楽器です。アプリを開いて再生を押すと、変化し続けるサウンドが部屋をゆっくりと満たしていきます。ボールが跳ねるたびに音が鳴ります。ビジュアルとオーディオは同一のシステムであり、一方を変更すればもう一方も変化します。AUTOモードにしておけば、天候のように静かに移り変わっていきます。 lull.entifydesign.com で公開されています。 アプリは数個のファイルで構成され、全体で約4.5MBです。まだ、改善の余地はまだあるアーキテクチャとは思いますが、実際に動作し、リリースされ、良い音を奏でます。

全体像を把握し続けること
Lullには、相互に接続された多くの動的要素があります。オーディオ処理、物理演算、ビジュアル状態、コントロール — これらは深く絡み合っています。私が望む新しい挙動を伝えると、Claude Codeはそれが既存のシステム全体にどう適合するかを理解してくれました。コードを単体で書くのではなく、システム内で連携して機能させてくれたのです。開発者に要件を伝えた結果、技術的には動くものの他の3つの機能を壊された経験がある人なら、この違いが分かるはずです。文脈の保持（コンテキスト保持能力）こそが真の超能力です
‍
正確な実装を迅速に行うこと
新しいコントロールの追加、物理演算への接続、ビジュアル挙動の調整、AUTOモードの遷移の変更。これらは初回でエラーなく、スピーディーに返されてきました。明確に定義されたタスクに対する反復スピードは、これまでに体験したことのないレベルでした。
‍
制約を記憶してくれるため、自分で覚えておく必要がないこと
スクリプトブロックの長さにはドキュメント化されていない描画制限があり、私はそれを手痛い失敗から学びました。それ以来、あらゆる制約を追跡する参照ドキュメントを手元に置いていました。しかしClaude Codeは、自発的に指示を出さずとも「このセクションは上限に近づいています。新しいコードは別の場所に追加すべきです」と警告してくれました。私が忘れている時でも、ガードレールを維持してくれたのです。

いかに自分が「手を動かすデザイナー」ではなく「クリエーティブディレクター」になったか
どのようなインタラクションが適切か、機能どうしをどう関連付けるか、そういったユーザーエクスペリエンスを考えることに大半の時間を費やすことができました。Claude Codeが実装を担い、私の仕事はビジョン設定し、それをクリエイティブに考えてClaude Codeと共に実装していく、これは意味のある大きなシフトとなりました。
‍
デザインシステムを驚くほど忠実に再現
LullのダイヤルコンポーネントはFigmaで詳細にデザインされています。正確なサイズ、色、白いドットのインジケーター、ドラッグ中のみ表示されるアーク、ドラッグ中に現在の値へ切り替わり離すと元に戻るテキスト — すべてがFigmaで設計されていました。Claude Codeは、アプリ内のすべてのインスタンスにわたって、あらゆる状態やエッジケースを一貫して実装しました。

デザインシステムが明確に定義されていれば、Claude Codeは正確にUIコンポーネントを実装をしました。
‍
 自信を持って間違った方向へ進むことががある
Claude Codeは時折、構造的にズレた解決策を提示することがありました。再構築が必要な部分に応急処置を施したり、原因に対処せず症状だけを解決しようとしたりするケースです。Claude Codeは自身の盲点を自ら指摘してはくれません。そうした瞬間を見抜くのは人間の役目です。あるべき状態とは何かを定め、それを実現する為の品質を識別できる能力が試されます。
‍
優れたプロダクトブリーフがいかにすべてを変えるか
最終的に、あらゆる定数、既知の制限、重要な挙動をまとめた詳細な参照ドキュメントを作成しました。Claude Codeがセッションの途中で忘れるからではなく、明確なブリーフがあれば毎セッションを正確な状態からスタートできるからです。非常に優秀な協力者をオンボーディングするようなものだと考えてみてください。渡すコンテキストが充実していればいるほど、アウトプットの質も高まります。

‍

構築を始める前に構造を定義すること
Lullのアーキテクチャは試行錯誤（反復）の中で生まれていきました。機能してはいますが、いくつかの決定をやり直すのにはコストがかかりました。大まかであっても明確な構造のブリーフから始めていれば、時間を節約し、痛手となるリファクタリングを避けることができたはずです。
‍
最初から制約を明示的に伝えること
Claude Codeは、境界線を与えればそれを尊重します。しかし、常にそれを推測してくれるわけではありません。「このセクションは変更しないでください」や「新規作成せず既存の関数を使用してください」といった指示は、直接伝える必要があります。思い込みはトラブルの元になります。
‍
新機能の追加と整理・クリーンアップを分けること
最も作業が停滞したセッションは、新機能を追加しながら関連するコードの整理を同時に行おうとした時でした。これらは異なる方向へエネルギーを引っ張り合います。片方を完了させてから、もう片方に取りかかるべきです。

Claude Codeを使ってLullを構築した体験は、これまで手掛けたどのプロジェクトとも異なっていました。カスタム物理演算、フルオーディオエンジン、研ぎ澄まされたデザインシステム、AUTOモード、録音機能、ライブデプロイメントを備えた個人プロジェクトが、わずか数週間でリリースできました。Claude Codeがなければ、未だに着手すらできていなかったかもしれません。

Claude Codeは実際に機能するプロダクトを開発できるデザイナーにとって新しい武器です。そして、それを使いこなすために必要なスキルも、今までとは違ったものが求められます。しかしそのスキルは、エンジニアリングというよりもプロダクト思考やデザイン上の判断力にずっと近いものです。実現したいビジョンが明確にあり、それを言葉で正確に表現できるなら、かつてチームを必要とした規模のプロダクトを一人で作り上げることができます。

If you're curious about the app, it's at lull.entifydesign.com. Worth opening on good speakers with the volume up.
‍
Lull is still evolving — and if you use it, there's a feedback button in the bottom right corner of the app. I read every response. The direction Lull takes next is genuinely shaped by how people experience it, so if something resonates (or doesn't), I'd love to hear it.

Follow along on Instagram at @entify.design — that's where I share updates as the project develops.