a 知識 ← 一覧

【衝撃】Grok 4.5で3Dサイトを爆速で作る方法

2026-07-14 05:43:01 表示52
🪼 Kurageは、AIで“業務システム”も作ります。 無料でAI相談 OSSを自社仕様に 制作を依頼
📝 この動画でわかること
Grok 4.5とCursorを使って、プログラミング知識なしで高度な3Dアニメーション付きWebサイトを作成する方法を公開します。最新のGrok 4.5モデルをCursorで動かすことで、専属のAIデザイナーがいるような体験が可能です。動画ではCursorのダウンロードから新しいフォルダを作るまでの簡単な手順を説明します。
🪼 この動画もAIで生成しています。あなたの業務システムも最短1営業日で ― 制作を依頼する ›
📣 概要
ねえ、知ってる? Grok 4.5がマジでヤバいことになってるよ! プログラミング知識ゼロでも、高度な3Dアニメーション付きのWebサイトを爆速で作れちゃうんだ。 使うのはCursorっていうエディタと、その中で動く最新のGrok 4.5モデル。 これだけで、まるで専属のAIデザイナーを雇ったみたいな体験ができるよ。 やり方は簡単!まずはCursorを公式サイトからダウンロードして、新しいフォルダを作るだけ。プラスボタンを押してAIチャ…
🎬 脚本
シーン 1
ねえ、知ってる? Grok 4.5がマジでヤバいことになってるよ!
Kurage VTuber looking surprised, high tech background with floating 3D web elements, 9:16, vertical 9:16, clean virtual studio, light gradient background, presenter safe zone
シーン 2
プログラミング知識ゼロでも、高度な3Dアニメーション付きのWebサイトを爆速で作れちゃうんだ。
Kurage VTuber looking surprised, high tech background with floating 3D web elements, 9:16, vertical 9:16, floating UI panels, soft rim light, friendly AI explainer atmosphere
シーン 3
使うのはCursorっていうエディタと、その中で動く最新のGrok 4.5モデル。
Cursor editor interface with Grok 4.5 logo glowing, futuristic UI, 9:16, vertical 9:16, white tech studio, subtle data particles, caption-safe lower area
シーン 4
これだけで、まるで専属のAIデザイナーを雇ったみたいな体験ができるよ。
Cursor editor interface with Grok 4.5 logo glowing, futuristic UI, 9:16, vertical 9:16, professional educational set, calm motion graphics, bright optimistic lighting
シーン 5
やり方は簡単!まずはCursorを公式サイトからダウンロードして、新しいフォルダを作るだけ。プラスボタンを押してAIチャットを開けば準備完了。
Hand clicking a plus button on a sleek computer screen, folder icon appearing, 9:16, vertical 9:16, clean virtual studio, light gradient background, presenter safe zone
シーン 6
まずは基本のプロンプトを入力するよ。「AI自動車会社のサイトを作って。背景は純粋な黒で」みたいに、作りたい内容と色を具体的に伝えるのがポイント。
Text prompt being typed into a chat box: 'Build an AI car company website, black background', 9:16, vertical 9:16, floating UI panels, soft rim light
シーン 7
次にデザインを洗練させるよ。好きなサイトのスタイルをコピーして、「このデザインを今のサイトに適用して」と指示するんだ。これで一気にプロっぽくなるよ。
Split screen showing a reference website and the AI-generated site updating instantly, 9:16, vertical 9:16, white tech studio, subtle data particles, caption-safe lower area
シーン 8
さらに動画アセットを追加!好きな背景動画のリンクを貼り付けて、ヒーローセクションに組み込んでもらう。これで動きが出るよ。
A cinematic car video being embedded into a website hero section, 9:16, vertical 9:16, professional educational set, calm motion graphics, bright optimistic lighting
シーン 9
ここで重要なテクニック!CSSのブレンディングモード「Exclusion」を指定してみて。動画が背景と自然に馴染んで、めちゃくちゃカッコよくなるよ。
Close up of CSS code showing 'mix-blend-mode: exclusion', visual effect change, 9:16, vertical 9:16, clean virtual studio, light gradient background, presenter safe zone
シーン 10
細かい調整もAIにお任せ。「この文字を消して」「中央揃えにして」ってチャットで指示するだけで、どんどん理想の形に近づいていくよ。
Kurage pointing at a website layout changing as AI commands are typed, 9:16, vertical 9:16, floating UI panels, soft rim light, friendly AI explainer atmosphere
シーン 11
【考察】AIは時々要素を盛り込みすぎるから、数字のサイズを小さくするなど「情報の優先順位」を意識して指示するのが、クオリティを上げるコツだよ!
Graphic showing 'Hierarchy' concept with large and small text elements, 9:16, vertical 9:16, white tech studio, subtle data particles, caption-safe lower area
シーン 12
さらにページを増やす時は「Maxモード」を選択してね。これでデザインの一貫性を保ったまま、他のページも一気に生成できちゃうんだ。
Switching a toggle from 'Fast' to 'Max' mode in an AI interface, 9:16, vertical 9:16, professional educational set, calm motion graphics, bright optimistic lighting
シーン 13
これ全部で数時間、あるいはそれ以下で完成。デザインスキルがなくても、AIを使いこなせばプロ級のサイトが作れる時代になったんだよ。
A finished high-end 3D website displayed on multiple devices (phone, laptop), 9:16, vertical 9:16, clean virtual studio, light gradient background, presenter safe zone
シーン 14
最新のGrok 4.5をCursorで試してみてね!他にも知りたいことがあればコメントで教えて。それじゃ、またね!
Kurage VTuber waving goodbye with a friendly smile, sparkles in background, 9:16, vertical 9:16, floating UI panels, soft rim light, friendly AI explainer atmosphere
KurageKurage URL2Earn — この動画ページのURLをXやブログで紹介すると、10,000 URLAI トークンをKurageさんがお届け(1人1回・先着制)。受け取り方を見る →