【保存版】GPT-6 Astraで100万円級の高級感あるホームページを作る方法【完全解説】

概要

GPT-6 Astra(Codex上)を使い、スクロール連動の映画のような演出を持つ高級感のあるプライベートジェットのチャーターサイトを制作する手順を解説した動画。参考サイト・参考画像・音声付き画面収録を素材として渡し、段階承認方式で素材生成からサイト構築まで進める。修正も画面収録で指示する点が特徴。

主なポイント

• 参考サイトを先に探す: 「高級感のあるサイト」といった曖昧な指示ではAIが推測するしかなく、よくあるデザインに落ち着く。Awwwards等で構成や見せ方の参考サイトを見つけてから指示を出す。
• 参考は構成・演出のアイデアとして使う: そのままコピーせず、フォント・配色・画像・文章を自社ブランドに合わせて差し替える。取り入れる点と変える点を事前に整理する。
• 3種類の素材を渡す: Pinterestで集めた参考画像(機体・窓)2枚と、参考サイトを操作しながら声で説明した約10分の画面収録。スクロールの動きや「上に戻る時の挙動」まで伝えられる。
• 動画・音声を読ませる環境を整える: 映像のフレーム抽出と音声の文字起こしを行うWatchスキルを用意し、文字起こしにGroq APIを設定。動画を渡せば必ず音声まで読まれるわけではないため、事前設定が必要。
• 素材生成はMCP連携で: HiggsfieldをMCPで接続し、画像(GPT Image 2.5)・動画(Seedance 2.5)を生成。クレジット消費が変わるため、事前に見積もり(今回102クレジット)を提示させる。
• UIパーツは21st.devのコピープロンプトで追加: テスティモニアル用のスクロールアニメーション付きカードスタックを選び、コピーしたプロンプトを制作プロンプト末尾に貼り、配色・フォント・配置位置も併せて指定する。
• 3段階の承認フロー: ①分析と提案で一旦停止 → ②承諾後に素材生成 → ③素材確認後にサイト構築。動画を確認できなかった場合は「見たことにしない」よう明示して、AIの虚偽報告を防ぐ。
• 初回生成は約30分で形になる: 窓のブラインド演出、雲の中への突入、機体のスクロール連動、座席図への切替、世界時計、回転地球儀などを再現。一方で口コミカードの回転・上方向アニメーションが効かないなど、指示通りでない箇所も残った。
• 修正も画面収録で指示する: スクショより「ここをこうしたい」と声で説明した画面収録の方が再現度が高い。/watchにMOVのパスを渡して修正を依頼し、約12分で登場券の動き・地球儀の配置・背景文字・カード演出・戻り時の崩れが修正された。
• 指示の伝え方の整理: 動きは動画で見せる、色とフォントは言葉で指定、追加セクションはテンプレートで選ぶ、確認を挟みながら構築、気になる点は修正用画面収録で調整する。

実践に使えること

• Awwwardsなどで構成が近いサイトを探し、「残す動き」「変える色・フォント・画像」をメモしてから制作を依頼する。
• 参考サイトを操作しながら声で説明する画面収録(スクロール・戻る動きも含む)を撮り、AIに渡す。
• 21st.devで使いたいUIコンポーネントを選び、コピープロンプトを制作プロンプトに貼って配置・配色を追記する。
• プロンプトに「分析→提案で停止→素材確認→構築」の段階承認と、素材生成前のコスト見積もりを入れる。
• 仕上がりの違和感は、スクショではなく画面収録で修正点を説明して再依頼する。
• 動画を読ませる場合は、フレーム抽出と音声文字起こしの設定(Watchスキル+Groq等)を事前に済ませる。