AIを使ってウェブサイトを制作する際、特有の「AIっぽさ」が出てしまう課題を解決するための具体的なアプローチを解説した動画です。紫のグラデーションや絵文字の多用といった典型的なパターンを避け、プロレベルのクオリティに引き上げるための約30種類の検証結果を紹介。デザインシステムの活用から最新の技術スタック、動的な演出まで、AIを使いこなしつつ洗練されたデザインを作る秘訣を公開しています。

背景

AIにウェブサイト制作を依頼すると、指示が不十分な場合、特定の色彩設計やレイアウト（紫色のグラデーション、絵文字アイコン、3カラムのカードなど）が頻出する傾向があります。これはAIの学習データのデフォルト設定に起因するもので、一目で「AIが作った」と分かってしまう要因となります。この「AI感」はブランディングにおいて信頼性を損なう可能性があるため、いかにしてAIの利便性を活かしつつ、独自の質感や高度なUI表現を組み込むかが重要な課題となっています。

この動画の要点

1. 「デザインシステムの移植」が有効な手段として挙げられています。IBM Carbonやデジタル庁が公開しているデザインシステム、あるいは自社のブランドガイドラインをClaudeのDesign機能などに読み込ませることで、AI特有の配色やレイアウトを排除し、一貫性のある洗練されたUIを構築することが可能になります。

2. 「スキル」と呼ばれる外部の知見をAIに与える手法が紹介されています。GitHub等で公開されている「Hallmarkスキル」や「taste-skill」といったデザインの判断基準をAIにインプットすることで、深夜の工場のような質感や、ミニマルで洗練されたインタラクションなど、特定の高度なデザインスタイルを再現できるようになります。

3. 「動き」や「実在感」の追加がAI感を消す鍵となります。Three.jsによる3D表現やWebGLシェーダー、実写の写真やループ動画を背景に採用することで、静的なAI生成物にはないリッチな体験を提供できます。また、Figmaで先にデザインを固めてからAIにコーディングさせるなど、制作の順番を変えることもプロ級の仕上がりに直結します。

なぜ重要か

AIによる自動生成は強力ですが、そのままでは「平均的な出力」に留まってしまうという限界があります。本動画が示すのは、AIを単なる「作成者」としてではなく、特定の「制約（デザインシステム）」や「高度なライブラリ（Three.js等）」を扱う「高度なアシスタント」として再定義する視点です。特に、デジタル庁のデザインシステムをFigma経由で活用する手法や、物理演算エンジンを組み込むといった「技術の流儀」をAIに守らせるアプローチは、AI生成物のクオリティを決定づけるのは、依然として人間のディレクション能力であることを示唆しています。

こんな人におすすめ

AIでウェブサイトを効率的に作りたいが、デザインの安っぽさに悩んでいるディレクターやエンジニア。AIツールの出力をプロレベルに引き上げる具体的なプロンプトやスキルの活用法を学びたい人に最適です。