脱AIデザイン:最新AIでデザイン力を上げる裏技

概要

「よくあるAIっぽいデザイン」から脱却するための思考法として、コンセプトと具体的なデザインシステムの間に「モチーフ」という中間層を言語化して置く手法を紹介する回。ChatGPTでの参考画像生成とClaude(チャット版)でのデザインシステム構築・実装までの実際のプロンプト履歴を辿りながら解説している。

主なポイント

• 紫グラデーションや角丸などの「AIっぽいデザイン」は色や形自体が悪いのではなく、判断基準となる情報が不足しているためAIがありがちなパターンで埋めてしまうことが原因
• コンセプト(抽象的な一言)と細かいデザインシステム(具体的すぎる指定)の間に「モチーフ」という中間の言語化レイヤーを設けることで、統一感と自由度を両立できる
• モチーフの例として「クレイ(粘土)」を定義し、質感・影・動きまで一貫させた独自性のあるWebデザインを作成
• Claudeは画像生成ができないため、ChatGPTで参考画像を10パターンほど生成し、気に入ったものをさらにブラッシュアップする2段階のプロセスで方向性を固める
• 言葉だけでデザインの方向性を伝えるより、画像を渡す方がAIとの認識のズレが少なく、Claude Opus/Fableなど画像理解力が高いモデルほど効果が大きい
• 「最小十分情報でデザインシステムを作って」という指示で、冗長になりがちなデザインシステムを必要最低限の情報に圧縮できる
• アニメーションは「モチーフに沿ったアニメーションを加えて」と指示することで、粘土なら跳ねずにゆっくり戻る動きなど文脈に合った自然な演出になる
• アイコンはインラインSVGで生成させることで、既存素材に頼らない独自表現が可能になっている
• 使用ツールはClaude Chat(Opus、月20ドルプラン)とChatGPT(画像生成のみ)で、Claude Codeは未使用、誰でも再現可能な手順としている
• デザイン完成後は最終アウトプットと元のデザインシステムとの差分を確認し、デザインシステム自体を更新すると精度が上がる

実践に使えること

• Webデザインを依頼する前に、ChatGPTなどの画像生成で複数パターンの参考イメージを作り、Claudeに画像として渡す
• コンセプトをいきなり細部の指定に落とし込まず、「モチーフ」を一言で定義してAIに言語化させてからデザインシステムを作らせる
• プロンプトに「最小十分情報で」という一言を加えて、冗長な出力を防ぎ本質的な指示だけを反映させる
• アニメーションを依頼する際は「モチーフに沿った動きで」と明示し、汎用的でチープな動きを避ける
• 完成したデザインを見て元のデザインシステムとのギャップを言語化し、システム側を微修正して精度を上げる