まだAIで作った「安っぽい」サイトを公開してる？それ、もったいないですよ！ AIでWebサイトを作ると、どうしても「量産感」が出てしまう。これを「AI slop」って呼ぶんです。 でもこの手法なら、デザイン会社に数千ドル払わなくても、プロ級の高級感を個人で出せます。 まずはインスピレーション収集。PinterestやSeesaw.websiteで、好みの動きやスタイルを探しましょう。 気に入ったサイトの特定の要素をスクリーンショット。コ…
シーン 1
まだAIで作った「安っぽい」サイトを公開してる？それ、もったいないですよ！
Kurage VTuber looking shocked at a low-quality website UI, vertical 9:16, clean virtual studio, light gradient background, presenter safe zone, 5600K key light
シーン 2
AIでWebサイトを作ると、どうしても「量産感」が出てしまう。これを「AI slop」って呼ぶんです。
Generic messy AI generated website layout with 'AI SLOP' text overlay, vertical 9:16, floating UI panels, soft rim light, friendly AI explainer atmosphere, floating UI panels
シーン 3
でもこの手法なら、デザイン会社に数千ドル払わなくても、プロ級の高級感を個人で出せます。
Luxury cinematic website design with smooth animations, high-end aesthetic, vertical 9:16, white tech studio, subtle data particles, caption-safe lower area, white tech studio
シーン 4
まずはインスピレーション収集。PinterestやSeesaw.websiteで、好みの動きやスタイルを探しましょう。
Scrolling through Pinterest and Seesaw.website for web design inspiration, vertical 9:16, professional educational set, calm motion graphics, bright optimistic lighting
シーン 5
気に入ったサイトの特定の要素をスクリーンショット。コピーじゃなくて「リファレンス」として使うのがコツです。
Taking a screenshot of a specific abstract circle element from a website, vertical 9:16, clean virtual studio, light gradient background, presenter safe zone, 5600K key light
シーン 6
次に画像生成AIに、そのリファレンス画像をアップロードします。これが「指示」の核になります。
Uploading reference images into ChatGPT or Higgsfield interface, vertical 9:16, floating UI panels, soft rim light, friendly AI explainer atmosphere, floating UI panels
シーン 7
ここで「紫を避ける」「ブランド名を反映」など、具体的なカスタマイズを指示して独自の素材を作ります。
Typing specific instructions like 'avoid purple' and 'brand name' into an AI prompt, vertical 9:16, white tech studio, subtle data particles, caption-safe lower area
シーン 8
そしてWeb構築には motionsize.ai を使用します。これが今回の肝です。
Logo of motionsize.ai with futuristic web building elements, vertical 9:16, professional educational set, calm motion graphics, bright optimistic lighting
シーン 9
「Ultra Mode」をオンにして、5〜6セクションの構成を一気に生成させます。これで一発で高品質な土台が完成。
Clicking 'Ultra Mode' button and generating a multi-section website layout, vertical 9:16, clean virtual studio, light gradient background, presenter safe zone, 5600K key light
シーン 10
これでデスクトップだけでなく、モバイルでも最適化されたプロ級のサイトが出来上がります！
Split screen showing perfect mobile and desktop responsive web design, vertical 9:16, floating UI panels, soft rim light, friendly AI explainer atmosphere, floating UI panels
シーン 11
AI slopを脱する最大のコツは「リファレンスを正しく使うこと」。これを意識するだけで差がつきます。
Kurage VTuber giving a thumbs up with 'Reference is Key' text, vertical 9:16, white tech studio, subtle data particles, caption-safe lower area, white tech studio
シーン 12
具体的なプロンプトはmotionsizeのサイトでチェックしてみてね！
Call to action screen pointing to motionsize.ai website, vertical 9:16, professional educational set, calm motion graphics, bright optimistic lighting
