Forma：編集できるデザインキャンバスをつくる
AIがコンポーネントを生成した後の体験を探る、ローカルのデザインツール試作。構造を表示し、3Dで確認し、そのまま編集を続けます。
Formaをつくったのは、AIからデザインを受け取った後に何ができるべきかを探るためです。同じ作業環境の中で、コンポーネントを分解し、理解し、変更できるようにしたいと考えました。
Formaはローカルで動作するプロトタイプです。キャンバス、レイヤーの確認、外観の調整、ピクセルからグラデーションへの編集は実際に動作します。このデモでは、ライブのAI生成には接続していません。
コンセプトを見る
あらかじめ用意した「Deep focus」コンポーネントと、読み込みから表示までのアニメーションで始まります。レイヤーを3Dで開いて回転させ、塗りと角丸を変更します。続いて画像をサンプリングし、色と輝度を調整し、グラデーションの分岐点を動かして種類を切り替えます。
対話を通じてつくる
Codex desktopで制作を進め、実装、ブラウザでの操作、見た目の確認を短いサイクルで繰り返しました。キャンバスを使えるようになるにつれ、要望は具体的になりました。落ち着いたチャコール色の操作領域、折りたためるサイドバー、わかりやすいナビゲーション、引き締まったタイポグラフィ、揃った配置です。
編集体験ではFigmaとPaperを参考にしました。レイヤーツリー、キャンバス、インスペクターの馴染みのある関係を保ちながら、コンポーネントの構造を見せる方法を探りたいと考えました。
表示アニメーションは、土台となる形状から完成したコンテンツへ移る手段になりました。3D表示ではその考えを広げ、全体を把握するコンパクトな積層表示と、個々のレイヤーを調べる展開した「サンドイッチ」表示を用意しました。改善の一つは奥行きの順序を逆にし、不透明なルート背景がコンテンツを隠さず、その後ろに位置するようにしたことです。
用意したコンポーネントが編集可能なキャンバスのコンテンツになります。ここでの生成はシミュレーションです。
レイヤーを分離するとコンポーネントの構造が見えます。ドラッグすると表示が回転します。
ピクセルのサンプリングは、もう一つの編集フローに発展しました。抽出したパレットで終わらず、色や輝度を調整し、分岐点の位置を変え、グラデーションの種類を試せるようにしたかったのです。
画像のサンプリング結果から、色、輝度、分岐点の位置を調整できるグラデーションをつくります。
ツールと検証
アプリはReact 19とTypeScriptを使い、Vite、Tailwind CSS、shadcn/Radixのコントロール、Lucideアイコンで構成しています。アニメーションにはMotion、レイヤー確認にはCSS 3D transformsを使用しています。ローカルの画像サンプリングがグラデーションエディターにデータを渡し、Zodが構造化データを検証します。
開発にはCodex desktopを使い、クリック、ドラッグ、スクリーンショット、見た目の確認にはブラウザ自動化を、スクリプトとテストにはBunを使いました。記録された開発モデルはgpt-6-astraです。アプリには別途OpenAIプロバイダーのアダプターがありますが、録画時には接続していません。
動画はブラウザのスクリーンショットを毎秒約9〜10枚撮影し、BunとFFmpegで1080pのH.264ファイルにまとめ、60fpsで出力しました。ネイティブの60fps画面収録ではありません。シーン間の待ち時間はカットしています。
9月8日の記事確認時には、レイヤーの形状、グラデーション編集、ドキュメントのトランザクション、プロバイダーのエラー処理を含む、元プロジェクトの全76テストが通りました。このコンセプト動画は一部の操作を示すもので、本番運用への準備完了を示すものではありません。ライブプロバイダーの動作、ライブのコード同期、MCPブリッジは実演していません。
トークンと費用
記録された元タスクのスナップショットは、 2026年9月8日07:32 UTC 時点で合計 80,448,253トークン です。そのタスクの累計値であり、最終値でも、全エージェントを含むことが確認されたビルド全体の合計でもありません。その後も作業は続き、このポートフォリオ記事の作成は集計範囲に含まれていません。
| 記録された使用量 | トークン数 |
|---|---|
| キャッシュを含む入力 | 80,197,013 |
| 入力のうちキャッシュ分 | 78,707,968 |
| キャッシュされていない入力 | 1,489,045 |
| 推論を含む出力 | 251,240 |
| 入力と出力の合計 | 80,448,253 |
入力の約98.1%はキャッシュ済みでした。このカウンターにはコンテキストの繰り返し処理やキャッシュ読み込みが含まれるため、それだけの量の固有の文章を書いたわけではありません。キャッシュ済み入力は入力に、推論は出力にすでに含まれており、重複して加算していません。子エージェントが含まれるかは未確認なので、プロジェクト全体のトークン合計は不明です。
このトークン数を料金に換算すると
**GPT-6 Astraの標準API料金では$106.16です。 ** 記録されたスナップショットをトークン料金だけでAPI相当に換算した推定額であり、実際のCodex請求額ではありません。2026年9月8日に確認したGPT-6 Astraの公式料金は、100万トークンあたり、非キャッシュ入力が$10、キャッシュ入力が$1、出力が$50です。
| 区分 | 100万トークンあたりのUSD | 推定額（USD） |
|---|---|---|
| キャッシュ入力 | $1 | $78.71 |
| 非キャッシュ入力 | $10 | $14.89 |
| 出力 | $50 | $12.56 |
| 合計 | — | ** $106.16 ** |
キャッシュは費用構造を変えます。全トークンの97.84%を占める一方、この推定費用では約74.14%です。非キャッシュ料金を適用する前に、総入力からキャッシュ入力を差し引いています。このスナップショットのキャッシュ書き込みトークンはゼロです。
この計算は標準処理を前提とし、入力が272,000トークンを超えるリクエストがないと仮定しています。公開されたAPIルールでは、それより長いリクエストの入力・キャッシュ料金は2倍、出力料金は1.5倍になり、Fast modeでは適用料金が2倍になります。Fast modeだけを適用すると、同じスナップショットは ** $212.32 ** になります。累計値から各リクエストの条件はわからないため、どちらも実際の請求額を再現するものではありません。ツール料金とスナップショット外の使用量は含めていません。
** 実際のビルド費用：不明／個別に計測していません。** 検証済みのプロジェクト単位の請求額はありません。このコンセプトではライブ生成APIを呼び出していませんが、それは開発が無料だったという意味ではありません。Codexのサブスクリプション使用量をAPIの請求書として扱うことはできません。
学んだこと
最も役立った改善は、実際に結果を編集しようとする中で生まれました。表示アニメーションは構造を説明し、3Dの積層表示はそれを実感できる形にします。ただし、どちらも動作する操作部につながる必要があります。Formaはその移行を探るローカルの場になりました。ライブプロバイダーへの接続と検証は、別の次のステップとして残っています。