デザイン・UI
-
グレインと巨大タイポで“人間らしさ”を出す──2026年夏の受賞サイトに見る「テクタイル・ブルータリズム」
AIで誰でも“それっぽい”サイトが作れる今、受賞サイトが選んでいるのはフィルムグレイン・生々しいタイポグラフィ・単色の太い罫線。2026年夏のトレンド「テクタイル・ブルータリズム」を実例と実装方法つきで紹介します。
-
Claude Designとtweakcn・DESIGN.md──Claudeで「AIっぽくない」UIを作る2026年のプロンプト術
Anthropic公式のデザインツール「Claude Design」の現在地と、Claude Codeで“AIっぽさ”を消すプロンプト術、tweakcn・DESIGN.mdカタログなど周辺ツールをまとめて紹介する。
-
スクロールで映像が動き出す──AIの「コマ送りシネマティック」演出とThree.js生成ツール入門
動画をコマ送りにしてスクロールに紐づける「シネマティックスクロール」と、プロンプト一発でThree.js/WebGLを書き出すAIサイトビルダー。2026年7月に広がる、AIでリッチなWebデザインを作る最新の手法をまとめました。
-
WebflowもFramerもRiveも「AIエージェント標準搭載」へ―今週のWebデザイン×AI注目まとめ
Webflow MCP 2.0、Framer Agentsの効率化、Rive EditorへのAgent/MCP搭載、WebGPUの本格普及など、この一週間のWebデザイン×AIの注目トピックを4件まとめました。
-
配色・コントラスト・タイポグラフィの基本原則をおさらい：AIツールで整えるWebデザインの土台
配色理論、WCAG 2.2から次世代APCAへ向かうコントラストの考え方、可変フォントとAIフォントペアリング、レイアウト・モーションの基本原則を、AIツールの使い方とあわせて整理する。
-
受賞サイトに見る2026年夏のUI/UXトレンド：ベントーグリッド・エレベーテッド・ブルータリズム・AIネイティブ体験
Awwwards/CSS Design Awardsの受賞サイト「The Triadic Ballet AI」などの実例と、ベントーグリッドやエレベーテッド・ブルータリズムなど2026年後半のWebデザイントレンド6つを整理した。
-
Spline「Omma」とFigma Shaders、Rive――プロンプト一発で「動く・光る」Webを作るAI素材ツール4選
3D生成AIエージェント「Omma」、Figma Config 2026のシェーダー機能、インタラクティブアニメーションの Rive、750種のシェーダーが揃う shaders.com まで、この夏Webデザイナーが押さえておきたいビジュアル系AIツールをまとめました。
-
2026年夏のUI/UXギャラリー：キネティックタイポグラフィ、リキッドグラス、”物言わぬAI”インターフェース
Awwwards・CSS Design Awardsなど直近の受賞作から見える2026年夏のUI/UXトレンドを、キネティックタイポグラフィ、リキッドグラス、AIネイティブUXパターンの3軸で整理する。
-
Figma MCP徹底解説：デザインとコードを行き来する2026年のワークフロー、shadcn/21st.devで“AIっぽさ”を消す
FigmaのMCPサーバーでデザインとコードを行き来させ、shadcn MCPや21st.devのコンポーネントレジストリを組み合わせて「いかにもAI製」を避ける、2026年最新のWebデザイン×AIワークフローを解説します。
-
Higgsfield・MotionSites・Recraft・Krea 2――Webデザインの手を止めないAI素材ツール4選
バナー編集のHiggsfield、アニメーションヒーロー用プロンプト集のMotionSites、ブランド一貫のベクター生成Recraft、探索的な画像生成Krea 2。Webデザインの制作速度を上げる最新AIツール4本をまとめて紹介する。