AIを使った本格的なホームページの作り方
ホームページを作ろうとして、こんな経験はありませんか。
・業者に頼んだら数十万円の見積もり。何にそんなにかかるのか分からない
・自分で作ろうとしたら、テンプレ通りで“よくある感じ”にしかならない
・動画やアニメーションは「プロじゃないと無理」だと思っている
実は私も、昔は「かっこいいサイトはデザイン専門の制作会社じゃないと作れない」と思っていました。
でも今は、AIを組み合わせれば、動画もアニメーションも入った“本格的なHP”を自分の手で作れる時代になっています。
この記事では、名古屋・伏見に2026年9月オープン予定の
推し活スポーツバー「スポってJunction」のホームページを実際に作りながら、その手順をまるごと公開します。
この記事を読むと分かること
・Claude Code / Manus / Vidu AI / Gemini / Canva を、どの工程で何に使うか
・ヒーローセクションの“動く動画”を、撮影なしでAIで作る方法
・テンプレ感のない、本格的なデザインに仕上げる流れ
専門用語はできるだけ使わず、順番に説明します。それでは始めます。
ステップ１：Claude Codeでホームページの土台を作成
やり方は、以下の情報を全てClaude Codeに渡して、ホームページ作ってとお願いするだけ。
・想定しているホームページ構成を伝える
#ホームページ構成
ヒーローセクション
試合情報
推しのチーム
スポってJunctionの特徴
スポってJunctionのルール
スポってJunctionのメニュー（現在非公開・調整中）
営業時間などの情報
アクセス・地図
フッター
#店舗概要
店名 スポってJunction（仮）
業態 スポーツ観戦バー
所在地 名古屋市中区栄3丁目2-31 ノアビル
オープン予定 2026年9月20日（仮）
営業時間 平日（火〜金）18:00〜24:00 / 土日 12:00〜22:00
定休日 月曜日
電話番号 052-262-8200（仮）
#コンセプト・キャッチコピー
推し活スポーツバー - 応援チームを推し活できる、音あり・応援歓迎の観戦スペース
バレーボール中心 - SVリーグ全般、特にジェイテクトSTINGS愛知・ウルフドッグス名古屋・クインシーズ刈谷・デンソーエアリービーズ
野球 - 中日ドラゴンズ
国際大会 - オリンピック・WBC・日本代表戦等スポってJunction 住吉
スポってJunction – 推し活スポーツバー –
スポってJunction ARENA SUMIYOSHI
推し活オアシス(推しオア)
推しオアアリーナ
スポってジャンクション
ボールBAR
住吉ホームラン
スタメン
スポルト
大画面モニター60インチ～100インチ
モニター5台ほど
大音量
Jスポーツと法人契約
できたらVBTVとDAZNも
10月からSVリーグ
4月から野球
ファンのための推しのためのアリーナ住吉
ソファーとハイテーブル
小さいカウンター
1週間分の配信メニュー
ユニフォーム着てきたらOFF
ステッカー貼るコーナー
チーム名ドリンク
ノベルティ
勝ったらOFF
アクスタ寄贈コーナー
試合終了後1時間で閉店
応援ꉂꉂ📣可
メニューはスマホ
店員はユニフォーム
イケメン店員
定休日 月曜日
バレー好きのイケメンバイト
夏は野球好きの女の子
ハーフタイムは売り子が出る
紙タバコ禁止
電子タバコブース(リザーブ)
タラフレットシート
スポーツを愛せよ乙女！
ダストボックス 叫ぶブースを作る
Excelのバレボックスに書き込もう
シャンパンのタイムセール 勝利時
ドラゴンズ応援メドレー流したい
オリジナル旗 ご飯に刺す
オリジナルうちわ
フリー推しバッチを付ける(スタッフっぽい)
推しパスとチャージ交換￥1000
2回目からはチャージ￥700
推しパス(ネックストラップ)自由に書く
推しパスキープ有
無くした方は￥1000
できたらアプリを作りたい
店員も名前バッチ
誹謗中傷絶対許しません
相席になる場合があります
観戦ペア券抽選
ポイントでサービス
フードコート風のカウンター
スポカフェの登録
ポスタス フルタッチパネル券売機
モバイルオーダー
入場2000(1Drink付)
静かに見たい方はご遠慮願います
球場のリュックサーバー売られていないが12万くらい
ドラコレ交換
フードの皿は紙か陶器か
是非推しをつくって帰ってください
ベンチシート
ロビーベンチ
サイドテーブル
営業時間
火～金18:00～2:00
土日12:00～23:00
定休日 月曜日
ホットドッグ
ナゲット
ポテト
チーズ揚げ
カレーライス
パスタ
ハンバーガー
ピザ
ソーセージ盛合せ
チェロス
■ 100インチモニターの基本スペックと定義幅：約221.4cm.高さ：約124.5cm.対角線：約254cm.ステップ２：ステップ１で投げた情報で作成された成果物をManusに渡して再構成
Manusに出力したHTMLやCSSを渡して以下のように入力した
スタジアムのイメージやアリーナの臨場感を出したい
現状のホームページのデザインがダサいので修正したい
ヒーローセクションに動画は必須
背景はアリーナを想像させるイメージにしたい
全体的に動きが足りないので飽きられる
試合スケジュールはダミーを入れてどんな表示になるかみたい
色のイメージやロゴは、画像を参考にしてほしい
ステップ３：ヒーローセクションの動画を作る
「ヒーローセクションは動画にしたい」というのが私の意見でもあったので、ヒーローセクション用の動画を作成することにする。
ここで使ったサービスは、Vidu AIです。プロンプトは、manusに聞いてます。
そして、これをもとに、Geminiにもプロンプト案を聞いて 日本人を出したい とか、乾杯しているシーンにしたいとか いろいろ要望を追加。
そのプロンプトをVidu Q3に渡しました。
作成できる動画は、8秒〜10秒なので、これをCanvaで編集して繋げます。
ステップ４：Manusによって綺麗になったCSSをもう一度ClaudeCodeに移す
ヒーローセクションへの動画の配置
まず指示したのは、ステップ３で生成した動画をwebm形式への変換とヒーローセクションの背景に入れるという指示をします。
次に、各セクションごとに修正指示をしていく
これは、クライアントのフィードバックとか足りない情報の追加とかいろいろ。
ステップ５：アニメーションや効果を実装していく
stickyというアニメーションの実装をする
あなたは1ページ縦スクロールLPに「下のセクションが上にスライドして前のセクションに被さって積み重なる」演出（sticky stack）を実装します。
以下の要件と実装方針を厳守してください。
【要件】
- 各 <section id="..."> を縦に並べ、後続セクションが前のセクションに被さって見える。
- 同時にピン留めされる sticky は常に2〜3枚だけ（深い積み重なりによる描画の重さ・崩れを防ぐ）。
- 画面より縦に長いセクションは固定せず通常スクロールさせ、下まで全文読めるようにする。
- フォーム等「入力する」セクションは固定対象から外す。
- prefers-reduced-motion 時は演出オフ（全セクション relative）。
【必須の土台】
- html, body { overflow-anchor: none }（position 付け外しによるスクロールジャンプ防止）
- body { overflow-x: clip }（hidden は sticky を壊すので不可）
- section { position: relative; overflow: hidden }
- 各 sticky パネルに min-height: 100svh、不透明背景、z-index:1、後続ほど DOM 順で上。
【windowing ロジック】
- cur = offsetTop <= scrollY を満たす最大 index。
- i >= cur-1 は sticky、i <= cur-2 は relative（解除は背面=非表示で起きるので不可視）。
- 高さ > 画面高+40px のセクションは常に relative（固定しない）。
- offsetTop 計測は、固定中の sticky が固定位置を返すため、計測の瞬間だけ全 section を position:static にして読み、元に戻す（static-trick）。
- scroll は requestAnimationFrame でスロットル。resize / load / fonts.ready で再計測。
【ハマりどころ】
- 後方にある #id{padding:...} の一括指定が padding-bottom を上書きするので、余白指定は section#id のように詳細度を上げる。
- 検証ではプレビューの scrollTo が scroll を発火しないことがあるので dispatchEvent(new Event('scroll')) を使う。
実装後、深いスクロール位置で sticky が3〜4枚に収まっていること、縦長セクションが下まで読めること、スクロールを戻すと前方セクションが復帰することを確認してください。このアニメーションは、https://nob-sakuma.com/ でも取り入れられているアニメーションの一つ。ここまでの変化はいらないのだけど、遊び心や切り替えという要素を入れたくて実装しました。
スケジュールのアニメーション
今週のスケジュール に アニメーションを追加
バレーボール、野球、サッカーボール、バスケットの順番で表示
バレーボールが 左上から真ん中にバウンドして右にバウンドしていくアニメーション
野球ボールが右下から左上に拡大しながら ホームランのように飛んでいくアニメーション
サッカーボール 左下からコロコロと右下にそのまま転がっていくアニメーション
バスケットボールは、右中からバウンドして左に抜けていくアニメーション
ボールの大きさ：野球 50px → 200px に拡大していく感じ／バレーとバスケは 200px、サッカーは 300px／野球が薄い／サッカーが画面内に出ていない
バスケットボールは ドリブルのように細かくバウンドさせたい実はこれだけ。。。
ルール＆スタイルのアニメーション
https://antigravity.google/
のマウスについてくるアニメーション
https://aj-tech.jp/
のボールのようなアニメーション
を組み合わせてバレーボールがマウスポインタに向かって
飛び込んでくるようなアニメーションを作りたいこれも丸投げ。。。
ステップ６：あとはクライアントと微調整の繰り返しで完成
完成までのプロンプトは、細かいことなのでステップ５までの要素でこのサイトと似たような構成は完成させることはできます。
あとは、文字とか情報の正確性の問題と、お客さんへ伝えるメッセージをどうした伝わるかとか、お店へのこだわりで修正を重ねるところなので、作りたいサイトの思いや情報の多さで変わってくると思います。
💬 あなたのお店や会社のホームページ、AIで作り直すとしたら何を一番変えたいですか？
「古くて恥ずかしい」「スマホで見づらい」など、気になっている点をコメントで教えてください。
📚 この記事は、マガジン「【超実践的】AIの具体的な使い方」の1本です。
ホームページ・動画・AIの賢い使い方など、「AIで実際にやってみた」記事をまとめています。
専門知識ゼロでも“真似するだけ”でできる内容です。
▶ マガジンを見る：https://note.com/linexai/m/m214a2b0cea9e
🎯 「自分の仕事でも、AIにやらせてみたい」と思った方へ
記事のプロンプトやノウハウは“汎用版”です。 でも本当に効くのは、あなたの仕事に合わせて、何をどう使うかを決めるところ。 そこは、一緒に30分話すのが一番の近道です。
プログラム25言語×30年、AIを業務に組み込んできた経験をもとに、 専門用語は使わず、経営目線で「どうしたらラクになるか」をお話しします。
🎟️ まずはここから（一番気軽です） 💬 【30年25言語のプロ】社長のAIお悩み、何でも交通整理（3,000円 / 30分） → 「何から始めればいい？」「これってAIでできる？」を、その場で30分・交通整理します。 初めての方は、まずこの1枚からどうぞ。
👉 このチケットを見る・予約する https://www.timeticket.jp/items/193981/＜もっと本格的に進めたい方は、こちらもあります＞ 🚀 AI前提の事業づくり 伴走（7,500円） ／ 💼 AI副業の始め方 伴走（7,500円） 🤖 LINE×AI社員の導入（15,000円） ／ 🛠️ AI環境構築〜自動化 伴走（6,000円） （すべて同じチケット一覧からご覧いただけます）
フォローいただくと、AI活用の新しい記事をお届けします。─────────────────────────────
