【保存版】GPT-6 Astraで100万円級のHPの作り方を大公開【完全解説】
要約
[00:00] オープニングと完成サイトの紹介:100万円級のラグジュアリーHPをAIで作る
窓のブラインドが上がる演出や滑らかなスクロールアニメーションなど、GPT-6 Astraを用いてわずか30分で構築したプライベートジェットのデモサイトを紹介します。
[02:37] 準備編:参考サイトの選定、Pinterestでの画像収集、および画面収録による指示の設計
優れたWebデザインを探すプラットフォーム(Awwwards)の活用法や、AIに動きを正確に伝えるための音声付き画面収録(ウォッチスキル用)の準備手順を解説します。
[10:04] 実装編:長文プロンプトの構成と、GPT-6 Astra × Codexによる自動構築
デザインの意図、色味(黒とシャンパン ゴールド)、お客様の声パーツ(21st)の指定を含んだ詳細なプロンプトをAstraに入力し、段階的にサイトを形にしていく工程を追います。
[19:07] 修正編:「画面収録(動画)」を用いた直感的な修正指示と完成
生成されたプレビューの違和感を、スクショではなく「修正用の画面収録動画」をパス指定してAIに伝えることで、アニメーションやレイアウト崩れを的確に修正させる実演を行います。
Aiwakからの視点
「最新のAIモデルやビジョン・動画認識機能を駆使し、参考サイトの構成や音声付きの画面収録(自分の言葉での解説)をAIに正確に読み込ませることで、100万円級のラグジュアリーなWebサイトをわずか30分で構築・修正していく」というアプローチは、クリエイティブやデザインの制作プロセスにおける劇的なパラダイムシフトです。人間が細かいコードを書く苦労から解放される一方で、AIに対して「どんな世界観を作りたいのか」「どの部分にどういうこだわりがあるのか」というビジョンや美しいディテール(あるべき姿)を自らの言葉と感性で描き出すことの価値は、これまで以上に高まっています。テクノロジーを最高の相棒として使いこなし、自らの頭の中にあるアイデアを圧倒的なスピードで美しく形にしていくこと。その主体的なものづくりの歓びと探求心こそが、新しい時代のクリエイティブをどこまでも豊かに彩ってくれます。