デザイン・UI
-
AIサイトビルダー7月アップデート:Framerの外部エージェント接続、Figma MakeのGPT-5.6、v0とBolt.newのモデル刷新
Framer 3.0の外部AIエージェント接続、Figma MakeへのGPT-5.6追加、v0のDesign Systems 2.0、Bolt.newのClaude Sonnet 5統合、LovableのSolution Partner Programなど、直近のAIサイトビルダー各社の新機能をまとめました。
-
動画生成×スクロールスクラブでリッチな3Dサイトを作る2026年の定番テクニック
AI動画生成をそのままスクロール演出に変換する「スクロールスクラブ」技法と、Lenis＋GSAP ScrollTrigger＋Three.jsという2026年の定番スタック、そしてパフォーマンス面の注意点をまとめました。
-
配色・タイポグラフィ・モーションの原則をおさらい:AIツールで作る、崩れないアクセシブルなWebデザイン
配色のコントラスト理論とAIパレット生成ツール、可変フォント、fluid typography、prefers-reduced-motionまで、2026年のツール・CSS事情を交えてWebデザインの基礎原則をおさらいする。
-
Bento Gridの次に来るもの：2026年夏、賞レースが選ぶWebデザインの実例集
Awwwards・CSS Design Awards・FWAの最新受賞傾向から、Bento Gridとブルータリズムのせめぎ合い、タイポグラフィの主役化、スクロールストーリーテリング、2026年のカラートレンドを実例つきで整理する。
-
AIに“良い趣味”を持たせる技：frontend-designスキル・DESIGN.md・taste-skill・Superdesignで作るClaude Codeデザイン術
Claude Codeで作るUIが「AIっぽく」なる問題への対策として、公式frontend-designスキルやDESIGN.md、taste-skill、Superdesignなど2026年の最新テクニックをまとめて紹介する。
-
Figma Motion・シェーダー・Weaveツール徹底解説：Config 2026で広がったAIデザイン素材の使い方
Figma Config 2026で追加されたFigma Motion、プロンプト生成シェーダー、Generative plugins、Figma Weave toolsを実務目線で整理。キャンバス上でAIに動きと質感を作らせる新しい仕組みを解説する。
-
AIサイトビルダー最前線：Figma Config 2026・v0のFigma連携刷新・LovableとBolt.newの新機能
Figma Config 2026のCode Layers/Motion、v0の高速化したFigmaインポート、Lovableのプランモード、Bolt.newの最新モデル対応など、2026年7月のAIサイトビルダー動向をまとめた。
-
AIでApple風スクロール演出＆リッチな3Dサイトを作る——GSAP画像シーケンスとSpline Omma Canvasの今
スクロールに連動して映像がコマ送りされるApple風演出の作り方、100体のAIエージェントが並列でサイトを組み立てるSpline「Omma Canvas」、Claude CodeとAI動画生成を組み合わせたリッチな3Dランディングページの作り方を紹介します。
-
Awwwardsとは──「Webデザインのオスカー」の仕組みと、AI時代の使い方
世界的Webデザインアワード「Awwwards」を解説。賞のランク・審査基準（Design40%ほか）・審査の仕組み、そしてAIでサイトを作る時代のベンチマークとしての使い方まで。
-
Framer 3.0のAIエージェント、Webflow×ChatGPT連携ほか──今週のWebデザイン×AI注目トピック
Framer 3.0のAIエージェント機能、WebflowのChatGPTアプリ化、Adobe Firefly BoardsのGemini 3対応、AwwwardsでAIネイティブなプロダクトが受賞するなど、この一週間のWebデザイン×AIの動きをまとめました。