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

開発動機

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

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

問題定義

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

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

要件定義

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

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

・最小操作で結果に到達

・日／英語対応およびダークモード対応

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

状態設計

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

・入力状態（テキスト／半径／フォント）

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

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

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

・言語切替（日本語／英語）

・表示モード（ライト／ダーク）

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

制約・例外設計

円形テキスト生成においては以下の制約が存在します。

・文字数と半径の関係による崩れ

・フォントごとの字幅差

・最小可読サイズ

これらを事後修正ではなく、入力およびプレビュー段階で制御する設計としました。多言語対応に伴う文字幅差異についても、同一ロジックで破綻しないよう考慮しています。

UI設計

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

対象デバイスをiPad横置きに限定することで、設計・実装・テストのスコープを明確にし開発コストを抑制しました。操作系はスライダーとテンキー入力に絞り、思考の中断を防ぐ構成としました。

インスペクタは円ガイドとテキストをタブで切り替える構成とし、フリック操作にも対応することでiPadでのペン操作・片手操作を考慮しました。フォント選択には最近使用したフォントの履歴表示を実装するなど、デザイナーとしての実務経験から得た「使う側が無意識に求めている操作」を随所に反映しています。

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

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

ZBrushやProcreateのユーザーは長時間・暗い環境での作業が多く、海外ユーザーの比率も高いです。この文化的背景を踏まえ、ダークモードを標準対応し、日英切り替えを実装しました。

最終的に3Dアプリに読み込んだもの

AI活用

実装にはAI（ChatGPT / Codex）を活用していますが、要件定義・状態設計・制約整理・UI構成の判断は人間側で設計し、AIの提案を批判的に評価しながら実装を進めています。

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

AIを「設計の代替」ではなく「実装手段」として扱っています。

リリース状況