Studioを使わずWebサイトを公開する｜運用コスト極限カット × 表現力最大化

ClaudeからFigmaへデザインを移し、それをさらに「実際に動くWebサイト」として公開したい場合、現在の STUDIO を活用しつつ、より効率的、あるいは別の選択肢をとる方法がいくつかあります。

Figmaのデザインをどう活かしたいかによって、最適なルートが変わります。

Webデザインの制作〜公開〜運用までの工程の コスト極限カット × 表現力最大化 を模索してみました。

※注釈：デジタルツイン学習（R2R2R）の検証プロセス 本プロジェクトは、AIの判断を物理的動作へ変換する設計を検証するものです。現実空間をデジタルツイン化し、仮想空間での大量試行（Real-to-Render）から得た最適解を、実世界のモーター駆動（to-Real）へ還元する「R2R2Rパイプライン」の実装過程を記録・考察します。

いくつかの選択肢

【STUDIO継続】Figma to STUDIO プラグインを使う

現状STUDIOを使う方法では、これが最もスムーズです。

• 方法: STUDIO公式の「Figma to STUDIO」プラグインを使用します。

• メリット: Figmaのレイヤー構造をそのままSTUDIOのボックスレイアウトに変換してコピペできます。

• 注意点: Figma側で「Auto Layout（オートレイアウト）」が正しく設定されていないと、STUDIO側でレイアウトが崩れ、結局手直しが発生します。

【自由度・品質重視】Framer（フレーマー）へ移行

現在、Figmaからの移行精度が世界で最も高いと言われているのが Framer です。

• 方法: Figmaで「Framerコピー」プラグインを使い、Framerに貼り付けます。

• メリット:

• 移行精度が異常に高い（Figmaの見た目がほぼそのままWebになります）。

• スクロールアニメーションやホバー効果が直感的に、かつリッチに作れます。

• デメリット: ツールが英語メインであることと、STUDIOとは操作感が少し異なります。

【AI爆速ルート】Vercel v0 や Lovable を使う

もし「デザインを多少調整してもいいから、一瞬で公開レベルのコードが欲しい」なら、Figmaを介さず（あるいはFigmaのスクショを元に）AIエンジニアリングツールを使う方法です。

• 方法: Claudeで作ったReactコードやFigmaのスクショを v0.dev や Lovable に投げます。

メリット

• 「本物のコード（React/Tailwind CSS）」で動くサイトが数秒で生成されます。

• そのまま「Publish」ボタン一つで世界中に公開できます。

• 次の一手: Claude Codeで作成した p2m_lp_v13.html のコードをそのまま v0 に貼り付けるのが最短です。

どれがどのようにいいのか？

• STUDIOでの場合: Figmaで「Auto Layout」をしっかり組み、STUDIOへコピペするのが一番早いです。

• 「もっとカッコいい動きをつけたい」場合: 一度 Framer を試してみてください。Figmaからのコピペ精度の高さに驚きます。

• 「運用コストを極限まで下げたい」場合: Claudeで作ったHTMLを Vercel や GitHub Pages にそのまま放り込むのが、月額費用もかからず（無料枠でいけます）です。

ただしVercelのさらなるメリットとしてClaude（もしくはClaude Code）で制作させたアニメーションがそのまま再現される表現力最大化のメリットが大きいです。

実際にStudioなどに実装する場合はこのアニメーション表現の再現力がなく、非常にシンプルなWebサイトになりがちです。

それとStudio実装時にレイアウトが崩れたり、セクションを実装しなおしたりの工程が多く思った以上に手間がかかっています。その辺りを払拭できるかがポイントになります。

Vercel（ヴェルセル）を使った公開手順

Vercel の方が「ファイルをドラッグ＆ドロップするだけ」で公開できるので、LPなどのケースには特におすすめです。

ファイルを準備する

• 公開したいHTMLファイルの名前を index.html に変更します。

• 画像やCSSが別ファイルなら、それらも一つのフォルダにまとめます。

Vercelにアクセス

• Vercel にアクセスし、アカウントを作ります（GitHubアカウント等で連携可能）。

デプロイ（公開）

• ログイン後のダッシュボードにある 「Add New...」 ＞ 「Project」 ではなく、画面下の方にある 「Deploy a new Project」 の枠へ、フォルダごとドラッグ＆ドロップします。

完了

• 数秒で公開用のURL（ https://project-name.vercel.app ）が発行されます。

この方法のメリット（運用コスト面）

• 月額0円: 個人利用の範囲なら、アクセスが相当多くない限りずっと無料です。

• 独自ドメイン設定可能: 「p2m-robot.com」のようなドメインを買えば、Vercel側で簡単に紐付けられます（ドメイン代だけで運用可能）。

• 修正がラク: Claudeに「ここを直して」と言って出てきたコードを index.html に上書きして、またVercelにドロップするだけです。

ひとつだけ注意点

この方法（ピュアなHTML公開）に切り替えると、「STUDIOのお問い合わせフォーム機能」が使えなくなります。

対策

• Googleフォーム を埋め込む（無料）

• Tally や Formspree などの外部フォームサービスを使う（無料枠あり）

これらを使えば、運用コスト0円を維持したまま、お問い合わせも受け取れるようになります。

サイトに使っている画像データなどについて

そのサイトで使われている画像がどこにあるかは、主に以下の3つのパターンが考えられます。

同じフォルダ内にある（相対パス）

HTMLファイルと同じ場所、あるいはその近くのフォルダ（imagesフォルダなど）に画像が保存されているパターンです。

• 確認方法: p2m-lp-v13_8.html が置いてある /Users/shimazueiichi/ フォルダの中に、.png や .jpg、.svg などのファイル、あるいはそれらが入ったフォルダがないか探してみてください。

外部サーバー上の画像を表示している（絶対パス）

画像自体はインターネット上のどこかにあり、HTMLがそれを読み込んでいるパターンです。

• 確認方法: HTMLファイルをテキストエディタ（メモ帳やVS Codeなど）で開き、<img src="http... "> のように、URLが http から始まっている箇所がないか確認してください。もしそうなら、画像はネット上にあります。

HTMLの中に直接埋め込まれている（Base64 / SVG）

画像データがコードの一部として書き込まれているパターンです。

• 確認方法: コードの中に data:image/png;base64,... という非常に長い文字列がある場合や、<svg ...> というタグで図形が描かれている場合は、画像ファイルとして独立しておらず、HTMLファイルそのものの中にデータが含まれています。

実際のWebサイトコードをチェック

HTMLコードを詳しく解析しました。ウェブサイトには「外部の画像ファイル（.jpgや.pngなど）」は一つも使われていませんでした。

そのため、どこかから画像フォルダを持ってくる必要はなく、このHTMLファイル単体でデザインが完結しています。

なぜ画像がないのにリッチに見えるのか、その仕組みは以下の通りです。

ロゴやアイコンは「SVGコード」で書かれている

ブラウザが画像ファイルを読み込む代わりに、HTMLの中に直接「図形の描き方（パス情報）」が書き込まれています。

• ロゴ: <svg class="logo-mark" ...> というタグの中に複雑な数字の羅列（pathデータ）があり、それが「ADAPT DESIGN」のロゴマークを描画しています。

• アイコン: lucide というライブラリや、各セクションの <svg> タグによって、ブラウザ上でリアルタイムに図形として描かれています。

メインの動くグラフィックは「Canvas」で作られている

ヒーローセクション（一番上の背景）で動いている「R2R2R」の軌道アニメーションは、画像ではなく、一番下の <script> タグ内にある JavaScript が、ブラウザの Canvas という機能を使ってリアルタイムに描画しています。

背景のグリッドや装飾は「CSS」で描かれている

背景の細かい方眼紙のような模様（グリッド）は、以下のコードによってCSSだけで表現されています。

CSS

background-image: 
  linear-gradient(var(--border) 1px,transparent 1px),
  linear-gradient(90deg,var(--border) 1px,transparent 1px);

Vercelなどで公開する場合の注意点

このHTMLをVercelやGitHub Pagesにアップロードして公開したい場合、以下の点だけ準備すればOKです。

• このHTMLを index.html という名前で保存する。

• 他に画像ファイルやCSSファイルを用意する必要はありません。（すべてこの1ファイルに埋め込まれているため）

• インターネット接続環境で開く。

• https://fonts.googleapis.com（フォント）

• https://cdn.tailwindcss.com（レイアウト用の枠組み）

• これらの外部パーツをネット経由で読み込んでいるため、ネットに繋がっていればどこでも同じ見た目になります。

このコードをテキストエディタに貼り付けて index.html とし、それをVercelにドラッグ＆ドロップするだけで、画面で見ているものが世界中に公開されます。

Vercel公開までの最短3ステップ

• 「Continue」をクリック 名前（eiichi_shimazu）を確認してボタンを押してください。

• アカウント連携（GitHub推奨） 次に「GitHub」「GitLab」「Bitbucket」などの連携画面が出ます。もしGitHubアカウントをお持ちであれば、GitHubで連携するのが今後の修正（コードを書き換えたら自動でサイトも更新される）が一番ラクになるのでおすすめです。

• 「ドラッグ＆ドロップで公開するページ」 ログインが完了するとダッシュボードが開きます。

• 「Add New」 ボタンを押して 「Project」 を選択。

• 画面下にある 「Upload from Folder」 のエリアに、例の index.html が入ったフォルダを丸ごとドラッグ＆ドロップしてください。

仕様変更でアップロードページが変わっています。

Vercelの「プロジェクト・ダッシュボード（一覧画面）」に戻って作業します。

現在の画面の中央右寄りに、雲の中に「↑」があるアイコンが表示されています。

🚀 公開までの最終手順

1. 「Deploy your first project」の枠を見つける 画面右側の大きな黒いエリアにある、雲のアイコンのすぐ下を見てください。

2. フォルダをドラッグ＆ドロップする

• PC上で index.html が入っている 「フォルダごと」 掴みます。

• そのまま、その 雲のアイコンがある黒いエリア全体 に向かって放り込んでください（エリア全体がアップロードの反応を受け付けます）。

• 名前を決めて公開 ドロップすると設定画

ros2-unity-digital-twin というプロジェクトを作成

「ros2-unity-digital-twin」というプロジェクトが作成されましたね。ただ、画面中央のプレビューを見ると 「404: NOT_FOUND」 と表示されています。これは「箱（プロジェクト）は作ったけれど、まだ中身（HTMLファイル）がアップロードされていない」状態です。

今のこの画面から、**index.html を流し込む「最後の手順」**をガイドします。

中身（HTML）をアップロードする最後の手順

GitHub連携が済んでいるので、今度はこのプロジェクト専用のアップロード場所を使います。

• 「Deployments」タブをクリック 画面左側のサイドバーにある 「Deployments」をクリックしてください。

• 右上の「Create Deployment」ボタンを押す。

• フォルダをドロップ！ 例の index.html が入った 「フォルダ」 を、その画面に現れる点線エリアに放り込んでください。

正解はGitHub側からアップロードする

現在の「404」の原因は、GitHubと連携した際、Vercelが「GitHub側が空っぽだから、表示するものが何もないよ」と判断しているからです。

ここから最短で解決する「Vercel流」のやり方は、GitHubにファイルを置く ことです。これができれば、今後ファイルを書き換えるたびにVercelが自動でサイトを更新してくれるようになります。

今のページから公開するための3ステップ

ブラウザで別のタブを開き、GitHubにアクセスしてください。

• GitHubで対象のリポジトリを開く GitHub上の PixelstoMotors/ros2-unity-digital-twin というページを開きます。

• ファイルをアップロードする

• 画面中央にある 「Add file」 ＞ 「Upload files」 をクリックします。

• 手元の index.html をグレーの枠内にドラッグ＆ドロップします。

• 画面下の緑色のボタン 「Commit changes」 を押して保存します。

Vercelに戻る

• 保存した瞬間、Vercelが「あ、GitHubにファイルが追加された」と自動で検知して、再公開（ビルド）を始めます。

• 数十秒待って今のVercelのページを更新すれば、404が消えてLPが表示されます。

なぜ今のVercel画面で直接ドロップできないのか？

今のプロジェクトは 「GitHub同期モード」 になっているからです。このモードでは「マスター（本尊）はGitHubにある」というルールになるため、Vercelの画面から直接ファイルをいじることが制限されています。

GitHubに index.html を放り込む。これが、今の状態からVercelで正しく公開するための最もスマートな解決策です。

なんでこの方法を見つけられなかったの？

なぜ最初からこの方法（GitHub経由）をバシッと提案できなかったのか、理由は2つあります。

ドラッグ＆ドロップが一番簡単だと思い込んでしまった

当初の「運用コストを極限まで下げたい」というご要望に対して、私が「Vercelはフォルダをドロップするだけで公開できる」という初心者向けの最短ルートに固執してしまいました。 しかし、実際にはお客様がすでにGitHub連携を完璧に済ませた状態でプロジェクトを立ち上げていたため、Vercel側が「手動ドロップ禁止モード（GitHub同期モード）」になっていたことに気づくのが遅れました。

Vercelの親切の押し売り

Vercelは一度GitHubと繋がると、「勝手にファイルをドロップして中身をバラバラにしないでね！GitHub側で一括管理してね！」というプロ向けのガードが非常に強くなります。その「ガード」を解除させようと悪戦苦闘してしまいましたが、実は「ガードレールに沿ってGitHubに放り込む」のが、今の環境では一番素直な解決策でした。

ということでした。生成AIはよくこのすごく簡単なことを見つけられずに思考のループに陥る時が多々あります。そのときはこちら側が新しい方法を模索してと伝えてループを断ち切る必要があります。

サイトを修正したいとき

今の環境は「GitHubが更新されると、Vercelが自動で書き換える」という仕組みになっています。

• GitHubでファイルを上書きする: 公開時と同じように、GitHubのリポジトリ（ros2-unity-digital-twin）にアクセスし、修正した index.html を再度アップロード（Commit）してください。

• 自動で反映される: アップロードした瞬間、Vercelが検知して新しい内容にサイトを更新してくれます。Vercel側でボタンを押す必要すらありません。

サイトを非公開（削除）にしたいとき

もし一時的に見られなくしたい、あるいはプロジェクトごと消したい場合は、Vercelの管理画面から操作します。

特定の公開（デプロイ）を消す場合

•  左メニューの 「Deployments」 を開き、消したいバージョンの横にある 「...」 ボタンから 「Delete」 を選べば、そのURLは無効になります。

プロジェクト全体を削除する場合

• 画面上の 「Settings」 タブをクリックします。

• 左メニューを一番下までスクロールして 「Advanced」 をクリックします。

• 一番下にある 「Delete Project」 という赤いエリアから削除を実行できます。

削除せずに「一時停止」したいなら

「削除して作り直す」のは少し手間なので、もし「データは残したまま、人に見られないようにしたい」だけなら、以下のどちらかがおすすめです。

• GitHubのファイルを書き換える: GitHub上の index.html の中身を、全削除して「ただいまメンテナンス中です」とだけ書いて保存します。数秒でサイトがその文字だけになり、元の内容は隠れます。再開時はまた元のコードをコピペしてGitHubに貼るだけです。

• ドメイン（URL）を外す: Vercelの Settings ＞ Domains から、登録されているURLを削除します。プロジェクト自体は残りますが、URLが無くなるので誰もアクセスできなくなります。再開時はまた同じドメインを追加するだけです。

サイトを修正するとき

サイトの修正についてですが、Claudeに依頼するのが最も確実で速い方法です。 ただし、いくつか効率的な手順があるので整理します。

サイトを修正する際の手順

• Claudeに修正を依頼する: 現在お持ちのコード（index.htmlの内容）と、最新の全体像（スクリーンショット）をClaudeに渡し、「ここをこう直して」と伝えてください。

• 新しいコードを受け取る: Claudeが修正後のコードを出力してくれます。

• GitHub上で上書き保存する: Vercel側ではなく、GitHubのページ（PixelstoMotors/ros2-unity-digital-twin）へ行き、index.htmlを新しい内容に書き換えて "Commit changes" を押します。

• 自動反映を確認: 保存した瞬間にVercelが検知し、数秒〜数十秒でURL（digital-twin-r2r2r.vercel.app）の中身が自動で切り替わります。