Bolt.newのtoken節約方法

近年、テキストベースの指示でUIを自動生成できるツールが注目されている。最近業務で実際に Bolt.new に触れる機会があった。
bolt.new

なお、Bolt.newを選んだ理由はv0よりも使えるフレームワークに自由度があったため。

本記事では、$100の個人向けプランを実際に利用した経験をもとに、Bolt.newを効率的かつ経済的に活用するためのポイントを紹介する。

Bolt.newとは何か

Bolt.newは、自然言語による指示からReactコンポーネントベースのUIを自動生成するツールである。ユーザーは「シンプルなログイン画面を作成してほしい」といったプロンプトを入力するだけで、見栄えの良いデザインが即座に生成される。

ノーコードの手軽さとAIの柔軟性を組み合わせたこのサービスは、UIモックアップの初期制作を高速化したいデザイナーやエンジニアにとって非常に有用である。

また、生成されたコードは比較的Next.jsやReact等のベストプラクティスに沿って作成されるため、あとから人の手で修正もやりやすい。ただ、難点としてcomponent分割はあんまり積極的にやってくれない気がする。なので、細かくcomponentに分割したい場合は「componentに分割して」などの指示を明確に入れたほうがよさそう。

$100プランを試してわかったこと

筆者は$100の有料プランにて本サービスを試用したが、画面数が増えるにつれて、1回のプロンプトによるトークン消費量が急激に増加することに気づいた。

これはおそらく、プロンプトを受け取るたびに、Bolt.newがプロジェクト全体（すなわち全ての画面のソースコード）を再解釈・処理しているためと考えられる。あくまで推測であり未検証ではあるが、実際の挙動として以下のような差が見られた。

• 1〜2画面の構成では、1回の指示によるトークン消費はおおむね 1k tokens 程度に収まる。
• 一方で、10画面程度に増えたプロジェクトに対して同様の指示を行った場合、1回で50k〜100k tokens もの消費が発生することを確認している。

このように、画面数が増えるほどトークン消費の傾向が指数的に増していく可能性があるため、大規模な構成での利用には注意が必要である。

サンプルプロジェクト

具体的には上記画像程度のプロジェクトを作成して、４回ほど（エラーの解消を含む）修正依頼を出すとfree枠である150k/dayの上限に達してしまう。

Visual Studio Code + Copilotとの比較

UI生成に関しては、GitHub CopilotとVisual Studio Codeを組み合わせても、ある程度の自動化は可能である。

たとえば、既存のReactコードに対して「ボタンのラベルを変更」「レイアウトの余白を調整」といった微修正を行う程度であれば、Copilotでも十分に対応できる。

ただし、デザインの質や完成までのスピードという点では、Bolt.newの方が優れていると感じた。Copilotは「コード補完」の延長であり、Bolt.newは「UI全体を構築・提案する」ことに特化している。

そのため、0 -> 1フェーズはBolt.newで作成し、画面数が増えたりより細かい修正を行いたい場合はVSCode+Copilotで作業といった使い分けが良かった。

トークンを節約するための工夫①：デザイン修正はローカルで対応する

Bolt.newで画面全体を生成した後、細かい修正（テキスト変更やレイアウト微調整など）を行いたい場合には、一度コードをエクスポートし、VSCode + Copilotを活用する方がトークンの節約につながる。

「ボタンの文字だけ変えたい」「アイコンの位置を少し右に寄せたい」といった要望は、Bolt.newに再度プロンプトを送るよりも、自分で直接修正した方が早く、かつ効率的である。

トークンを節約するための工夫②：機能単位でプロジェクトを分ける

Bolt.newは1つのプロジェクトに複数の画面を含めることができるが、1プロジェクト内に多くの画面を詰め込みすぎると、プロンプト1回あたりの処理対象が増え、トークン消費が大きくなる。

これを回避するために機能単位などでBolt.newのプロジェクトを分割することで、編集や修正の際のトークン消費量を抑えることが可能になる。

ある程度UIが固まったら、エクスポートしてローカルで結合、もしくはおおもとのProject側に必要なソースファイルだけコピーしてBolt.newに結合を指示すると大体いい感じに取り込んでくれる。

ただ、注意点としてソースコードのファイルの命名規則やフォルダ構成の規則などを設定の「Project Prompt」で指示しておかないと、Projectごとにファイル構成が異なってしまい結合するときに結構大変な目に合いそうだと感じた。

実際には１つの画面だけこのような作業を行ったので比較的取り込むのが簡単（コピペでおわった）だったが、ファイル名の命名規則が全然違っていたので構成を把握するのに手間取った。

まとめ：設計フェーズにおける強力なツールだが、使い方には工夫を

Bolt.newは、特に設計初期フェーズにおいて非常に強力なツールである。デザインの質と生成スピードに優れ、UI構築の工数を大幅に削減できる。

一方で、トークン制という制約があるため、無計画に利用するとコストがかさむリスクもある。

• 微修正はローカルで対応する
• プロジェクトを機能単位で分割する

といった工夫を取り入れることで、より効率的に、そして長期的にBolt.newを活用していくことができるだろう。

あと、チーム開発のためにteamプランがあるが、v0とは異なりteamプランで付与されるToken数は個人ごととなっている。team間でtokenの総数が共有できるとteamプランの使い勝手もいいのになぁと感じた。この辺は多分そのうち対応するんじゃないかと勝手に期待している。