円形テキスト立体化アプリの開発

開発動機

個人の趣味としてZBrushでのモデリングを続けており、制作過程をnoteに記事として公開しています。

タイヤの記事を書いた際、円に沿って文字を配置したかったのですが、実現にはIllustratorかFigmaなどが必要であり、補助作業のためだけに高価で重いツールを立ち上げることへの違和感と、バイブコーディングでiPadアプリを実際に作ってみたいという動機が重なり、本プロジェクトを開始しました。

問題定義

3Dモデリングでロゴやラベルのテクスチャを自作する際、円形テキストを作りたい場面があります。しかし実現手段は上記の通り、補助作業のためだけに専門ツールの導入・操作を強いられる状態でした。

「やりたいことは単純だが、実現手段が複雑」という構造は、外部ツールを持たない・使いたくないユーザー全般に共通する問題だと判断しました。

要件定義

上記課題に対し、以下の要件を定義しました。

・円形テキスト配置と出力に機能を限定

・最小操作で結果に到達

・対象デバイスはiPad のみ。横画面のみ対応。

要件段階で機能を制限することで、操作の複雑化と機能肥大化を防いでいます。

状態設計

本アプリは以下の状態で構成されています

・入力状態（テキスト／半径／フォント/内・外向き/文字間/ベースライン）

・プレビュー状態（円形配置結果の確認）

・出力状態（画像書き出し）

また、以下を環境状態として分離しています

・言語切替（システム／日本語／英語）

・表示モード（システム／ライト／ダーク）

機能状態と環境状態を分離することで、UIの複雑化を防ぎつつ柔軟性を確保しています。

UI設計

AIが生成した初期UI案は2カラム構成で、レイヤーとインスペクタが同一サイドバーに統合されるなど、操作対象と属性確認が同一視野に収まらない状態だったため、一般的なデザインツールの様に左・中央・右の3カラムに分離し、選択レイヤーとインスペクタを連動させました。

また対象デバイスをiPad、横置きに限定することで、設計・実装・テストのスコープを明確にし開発コストを抑制。操作系はスライダーとテンキー入力など、直感的でマニュアル抜きでも利用開始できるようにしました。

インスペクタは円ガイドとテキストをタブで切り替える構成とし、フリック操作にも対応することでiPadでのペン操作・片手操作を考慮しました。

実際の3Dモデルのスクリーンショットをキャンバスに読み込み、テキスト配置の位置確認をリアルタイムで行える構成としました。これにより、アプリ単体で制作の意思決定が完結します。

出力形式は3D用途の.objを主軸としつつ、.svgと.pngを補助対応することで、テクスチャ以外の用途にも転用できる構造としました。

ZBrushやProcreateのユーザーは海外ユーザーの比率も高く、使用言語を日英切り替えにし、ダークモード切り替えも実装しました。

最終的に3Dアプリに読み込んだものです。本アプリの書き出しから、3Dアプリに読み込むまでスムーズに作業が完結しました。

AI活用

実装にはAIエージェント（Codex）を活用していますが、要件定義・状態設計・制約整理・UI構成の判断は人間側で設計し、「設計の代替」ではなく「実装手段」として扱っています。

開発を通じて、円形テキスト配置という中核機能の実装後、レイヤー管理・保存・履歴・画像読み込みといった基盤機能の実装に想定以上の工数がかかることも実感し、ユーザーが「使えるアプリ」と感じるためには、差別化機能よりも基盤機能の完成度が体験を左右するという理解が深まりました。

リリース状況