Gemini 3 Proで高品質なWebサイトを作る方法

TL;DR

高品質なWebサイトを作るには、Gemini 3 Proに形容詞やデザイン用語を与えつつ、細部を決めすぎず表現の余地を残します。複数案から方向性を選び、表示崩れや動作を対話で微修正し、必要なら構造化したプロンプトとして再利用します。

Transcript

はい、どうもしです。え、今回はですね、 JI3.0Proが登場したということで 、ま、UIデザインにね、非常に強くなっ たというところで、高品質なウェブサイト の作り方ですね、皆さんに紹介していこう かなと思います。はい。ま、今見て いただいてるね、サイト私が作りまして、 GMI3.0Proで作りまして、ま、 結構クオリティ上がりましたよね。今まで のクロード4.5とか、え、それに比べ たら、ま、AI感はありませんよね。うん 。え、まさかやが作ったのかなっていうの は思わないと思うので、ま、こちらの作り 方を、え、ちょっと少し遊んで分かりまし たのでお伝えしていこうかなと思います。 はい。ま、これ以外にも例えばこういった サイトですね。はい。 はい。ま、よりプロフェッショルな感じの ウェブサ... Read More

Key Insights

• 高品質化の基本は、形容詞とデザイン用語で方向性を示しながら、Gemini 3 Proが構成や表現を考えられる余地を残すことである。
• 短すぎる依頼は一定水準のサイトを生成できても、従来のAI生成物に似た無難なデザインへ収束しやすいと話者は評価している。
• デザイン案の選定は、異なる方向性を3パターン提示させ、好みの案を選んで全面的に作り直させる手順が効率的である。
• 視覚効果の指定は、パララックス、フェイド、スクロールアニメーション、ノイズなどの具体的な用語を使うと伝わりやすい。
• プロンプト作成は、必要な形容詞や専門用語をAIに質問し、その回答をGemini 3 Proへの指示へ組み込む方法で補助できる。
• 3Dサイトの制作は、一度の生成で完成を目指すのではなく、オブジェクトの位置、見切れ、動作不足を対話で直す反復作業である。
• 再現性の向上は、成果の良かった指示を抽象化し、セクションや技術要件をJSON、XML、YAMLなどで構造化する方法が候補となる。
• 公開方法は、Google AI Studioのデプロイ機能からプロジェクトと請求アカウントを設定し、共有可能なURLを発行する流れである。
• 🎬 このチャンネルの他の動画:
  • Next.js 16でuse cacheを使う方法
  • AIコーディングで画像生成アプリを作る方法
  • AI時代にエンジニアが独立して稼ぐ方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Gemini 3 Proで高品質なWebサイトを作る方法は？

形容詞とデザイン用語で目指す印象を伝え、細部を決めすぎず生成の余地を残すのが基本です。複数のデザイン案を出させて一つを選び、表示崩れ、位置、アニメーション、リンク動作などを対話で微修正しながら完成度を高めます。

Q: AIらしい無難なWebデザインを避けるには？

「ホームページを作って」だけで終わらせず、「エレガント」「高級感」「プレイフル」「温かみのある」など、求める雰囲気を明示します。さらに、モデルの発想を狭めない程度の抽象性を残し、出力後に具体的な問題だけを修正します。

Q: Webサイトのデザイン案を効率よく比較する方法は？

異なる方向性のデザインを3パターン提示するよう依頼し、好みに近い案を選ぶ方法が紹介されています。選定後は、その案を基にホームページ全体を作り直させ、必要なセクションやアニメーションを追加すると進めやすくなります。

Q: プロンプトに入れるデザイン用語が分からない場合は？

必要な形容詞やデザイン用語そのものをAIに提案させます。モダン、ミニマル、ニューモフィズム、パララックス、フェイド、ノイズなどの候補と意味を確認し、目的に合う言葉だけを制作プロンプトへ組み込みます。

Q: 3Dオブジェクトを使ったWebサイトを作る方法は？

3Dオブジェクトの配置やスクロールとの連動など、実現したい動きをプロンプトに含めます。生成後に、箱から出てこない、画面からはみ出す、対象が見えにくいといった問題を一つずつ伝え、コードを繰り返し修正させます。

Q: 一度で期待したWebサイトが生成されない場合は？

問題箇所を具体的に示して再生成や部分修正を依頼します。話者は、オブジェクトが見えない、位置がおかしい、必要な動きがないといった状態を伝え、何度か指示を重ねて完成イメージへ近づける手順を実演しています。

Q: Webサイト生成のプロンプトを再利用する方法は？

良い結果が出た指示をAIに渡し、対象を変更しても使える汎用テンプレートへ抽象化させます。セクションごとの内容や技術要件をJSON、XML、YAMLなどで整理する案が示されていますが、形式の効果は動画内で厳密に比較されていません。

Q: Google AI Studioで作ったWebサイトを公開する方法は？

画面右上のデプロイ機能からプロジェクトを作成または選択し、必要な請求アカウントを紐付けてクラウドへ公開します。公開後に発行されるアプリのURLを共有すれば、他の人もサイトを閲覧できます。話者の実演ではPC上で動作を確認しています。

Summary & Key Takeaways

• 最初にGoogle AI StudioやCursorでGemini 3 Proを選び、作りたい事業やサイトの目的を伝えます。ただし「ホームページを作って」だけでは既視感のある構成になりやすいため、「エレガント」「高級感」「プレイフル」「圧倒的なクオリティ」など、望む印象を示す形容詞を加えます。細部を固定しすぎず、モデルが表現を考えられる余地を残すことが基本方針です。

• 方向性が決まらない場合は、好まれやすいデザインを分析させて3案ほど提示させ、選んだ案を基に作り直します。さらに、パララックス、スクロールアニメーション、フェイド、ノイズ、ビュー遷移などの用語を指定すると、狙う視覚効果を伝えやすくなります。用語が分からなければ、候補やプロンプト自体を別のAIに考えさせる方法も紹介されています。

• 3Dサイトでは、3Dオブジェクトとスクロールの連動などを指示し、はみ出しや見づらさ、位置のずれを反復的に修正します。良い結果を生んだ指示は、セクションや技術要件をJSON、XML、YAMLなどで整理したテンプレートへ抽象化すると再利用しやすくなります。Google AI Studioからクラウドへ公開できますが、話者の実演では請求アカウントの設定が必要でした。