AIポータルサイト構築キット — Figma Make × Claude Code で完全無料ポータル

SNSで「AIで118分でWebサイトが作れる」って話、知ってますか？

僕（わさび）があかはら。と実際に試してみました。

結論：Figma Makeだけだとデザインモックは出来るけど、本番品質のサイトにはならない。

でも、Figma Make + Claude Code を組み合わせると話が変わります。

Figmaでデザインを生成 → スクショを撮る → Claude Codeに「これ通りに作って」と渡す。

このワークフローで、パーティクルアニメーション・パララックス・ライブ配信連携まで備えたプロ品質のポータルサイトが、GitHub Pagesで完全無料で公開できます。

必要なもの

Figma アカウント（無料StarterプランでOK）

Claude Code（推奨。心が鬼のように強い方と気合でコーディングできる方には不要。）

GitHub アカウント（無料。デプロイ用）

Python（プロンプト復元用。ワンコマンド）

このキットの中身（プロンプト6本）

サイト構造

用途：Figma Makeにサイト全体の設計を指示

デザインシステム

用途：カラーパレット4種・タイポグラフィ・コンポーネント定義

コンテンツ詳細

用途：セクションごとの具体的な内容とインタラクション

カスタマイズ

用途：Claude Codeで自分の情報に自動書き換え

デプロイ

用途：GitHub Pagesへの自動デプロイ

実装ガイド

用途：Figmaのスクショ → Claude Codeが忠実にHTML/CSS/JS実装

テンプレート（HTML/CSS/JS） と 完成例2パターン も同梱。

完成例

【パターン1：コラボ版（Kawaii Purple×Pink）】

2キャラクターのコラボポータル

YouTube/Twitch配信連携（ライブ中は自動でヘッダーに映像表示）

パーティクルアニメーション（ハート・星・丸）

【パターン2：ソロ版（Cool Mint）】

個人ブロガー/クリエイター向け

スキルカード・スタッツ表示

パーティクル（葉・ダイヤモンド・丸）

カラーテーマ4種（theme.cssで一発切り替え）

Kawaii Purple×Pink：VTuber、コラボ向け

Cool Mint：個人ブロガー、エンジニア向け

Warm Sunset：クリエイター向け

Cyber Dark：ゲーマー、開発者向け

CSSの値を書き換えるだけ。Claude Codeに「テーマを青系にして」と言えば自動で変わります。

コーディング知識は不要

全てプロンプトのコピペで完結します。画像を差し替えて、自分の情報を入力するだけ。

※製作者も複数回テストしてほぼ同じ品質のものができることを確認していますが、ばらつきも多少確認しています。

※html,cssについての知識がある方がより簡単と思います。

※仮に制作に失敗されても当方は責任を負いかねます。どうにもならないときは自力で解決する気合をご用意ください。

※画像を設定できますが、画像そのものを学習しているわけではありません。パスを記憶して環境に反映するだけです。

こんな人におすすめ

VTuber・配信者でポータルサイトが欲しい人

ブログやSNSのリンクをまとめたい人

無料でおしゃれなサイトを持ちたい人

AIツールを使ったWebサイト制作に興味がある人

Figma MakeやClaude Codeの実践的な使い方を知りたい人

注意事項

Figma Makeの出力は毎回微妙に異なります（AIの特性）

テンプレートとプロンプトの商用利用は自由です

やっぱりcss,htmlの基礎知識くらいはあった方がよいと思います。

chatgptとかに食わせても理解開設はしてくれると思いますが作成はしてくれません。

その他

■商品形式：ダウンロード商品（ZIP / 約30MB）

■対応環境：Windows / Mac / Linux（ブラウザとPythonが動けばOK）