AIはさまざまな分野で人間の能力に近づいてきましたが、デザインはその中でも長らくAIが苦手としてきた領域のひとつです。ただ、多くの人が「AIでデザインする」ということの意味を、少し誤解しているように思います。
この記事では、Leon Lin氏（@LexnLin）が公開した「How To Actually Design With AI」という投稿をもとに、AIを使ったデザインの実践的な進め方を、日本語で丁寧に整理してみました。
記事の最後にClaudeで質の高いデザインを作るための、デザインシステムキットを配布しています。
記事の最下部で受け取れます
まず押さえておきたい前提
「AIでデザインする」とは、すべてをAIに丸投げすることではありません。アイデア、方向性、感覚、そして創造性は、あくまで自分自身から生まれるものです。AIはそれを「形にする（実行する）」ための存在だと考えると、話がすっきりします。
大まかな流れは、次の3ステップです。
- 自分でアイデアを育てる
- インスピレーションを集める
- 自分の考えをプロンプトに翻訳し、AIに作らせる
使うツールはCursorでもCodexでもClaudeでも、どんな環境（ハーネス）でも構いません。本質は「自分の思考を、指示（インストラクション）に変換すること」にあります。
AIは実行こそ非常に得意ですが、真の創造性はまだ持っていません。余白の取り方、タイポグラフィ、配色理論、階層といった「デザインのルール」は理解しています。しかし、何が「本当に良い」「独創的だ」「意味がある」と感じられるのか——つまり センス（taste） は理解できません。
ここが、いちばん大きなギャップです。現時点でAIに本物のセンスを与えることはできませんが、その限界を前提に、うまく回避していくことはできます。
手法1：デザインスキルを使う
もっとも手早いアプローチです。時間がないときや、小さなものを作るときは、あらかじめ用意された「デザインスキル」に頼るのが有効です。
たとえば次のようなものがあります。
- Impeccable（impeccable.style）
- Emil Kowalski氏のUIスキル（GitHub: emilkowalski/skills）
- Skills.sh
- TasteSkill（tasteskill.dev）
進め方はとてもシンプルです。
- デザインスキルを追加する
- AIに文脈（コンテキスト）を渡す
- 数回プロンプトを投げて、サイト・アプリ・ポスターを作らせる
- 明らかな問題を直す
- 公開する
結果はたいてい「そこそこ良い」ものになります。他のAI生成デザインと似た印象になることはありますが、質の高いスキルを使えば、いちばんひどい失敗や「AIっぽさ」は避けられます。多くの人が実際に使っているのが、この方法です。
手法2：AIと一緒に、自分でデザインする
「本当に際立つもの」を作りたいなら、もう一歩踏み込む必要があります。ユーザーがあなたのプロダクトに触れたときに、「ちゃんと考え抜かれている」と感じてもらう——そのためには、より意図的なプロセスが求められます。
モバイルアプリ、デスクトップアプリ、ウェブサイト、ランディングページ、ダッシュボード、ポスター。何を作るにしても、まずは明確な方向性が必要です。自分が何を作りたいのか分かっていなければ、AIが代わりに見つけてくれることはありません。
まず「意味」から始める
何よりも先に、土台を定義しましょう。次の問いに答えてみてください。
- これは誰のためのものか？
- どんな問題を解決するのか？
- どんな感じ（feeling）であってほしいか？
- 何を体現するものなのか？
UIは、プロダクトの「意味」を映し出すものです。これらは書き出しておきましょう。ここでもAIは使えますが、デザインのためではなく、自分に質問を投げかけてもらうため に使うのがコツです。
たとえば、こんな質問をAIにしてもらいます。
- このプロダクトは何についてのもの？
- 想定するユーザーは？
- どんな感情を伝えたい？
- ブランドはどんな雰囲気であるべき？
- 合う色やフォントは？
- ミニマル／遊び心／プレミアム／技術的／実験的——どの方向性か？
インスピレーションを集める
方向性が定まったら、参考（リファレンス）を集め始めます。有力な情報源のひとつがMobbinです。さまざまなカテゴリの実際のプロダクト画面が揃っています。
ここで大切なのは、ただ眺めて「良さそう」と思って終わらないことです。なぜ良いのか を自分に問いかけましょう。
- レイアウトなのか？
- 余白なのか？
- タイポグラフィなのか？
- 構造なのか？
- インタラクションなのか？
良いと感じたものは保存し、次のようなフォルダに整理していきます。
- ナビゲーション
- ヒーロー
- 料金表
- カード
- モバイル画面
- ダッシュボード
- アニメーション
- タイポグラフィ
こうして時間をかけて自分だけの参考ライブラリを育てていく——これこそが「センス」を養う方法でもあります。
そのほか、次のような情報源も役立ちます。Pinterest、Cosmos、Awwwards、Webflow Templates、Craftwork、Rebrand Gallery、Component Gallery、Savee、Lummi。
なお、デザインを丸ごとコピーするのは避けましょう。複数のアイデアを組み合わせて、自分のプロダクトに合うものへと昇華させることが大切です。
構造をマッピングする
次に、実際に作るべきものを定義します。ウェブサイトなら、ナビゲーション、ヒーロー、機能紹介、料金、お客様の声、CTA、フッターといった具合です。
アプリなら、オンボーディング、ホーム、検索、プロフィール、設定、コアとなるフロー、そして空の状態（エンプティステート）などがあります。
各セクションには、明確なコンテンツが必要です。たとえばヒーローセクションなら、見出し、説明文、CTA、ビジュアルが要ります。コピーはAIに手伝ってもらえますが、「明快さ」はあくまで自分から生まれます。
コンポーネント単位で作る
いよいよ制作です。参考にした個々のアイデアを取り出し、自分のプロダクトに合わせて作り替えていきます。
「ウェブサイトを丸ごと作って」と言うのではなく、「このスタイルをベースに、私のブランドに合わせたヒーローセクションを作って」と伝えるのがポイントです。
ナビゲーション → ヒーロー → カード → ボタン → タイポグラフィ → 細部、という順で、一歩ずつ進めます。AIは小さなタスクのほうがずっと得意ですし、こうすることで自分が主導権を保てます。
カスタムアセットを生成する
必要に応じて画像生成も活用しましょう。今では画像生成ツールも十分に強力になっています。色、スタイル、構図、用途といった文脈を明確に伝えるのがコツです。
ありがちなストック画像は避けましょう。カスタムのビジュアルを使うことで、全体に統一感が生まれます。
全体のワークフロー
まとめると、次のような流れになります。
- アイデアを定義する
- 目的とユーザーを明確にする
- ブランドの方向性を決める
- 参考を集める
- それらを整理する
- 構造をマッピングする
- コンポーネントを作る
- アセットを生成する
- インタラクションを加える
- 全体を磨き上げる
一発のプロンプトで作るより、はるかに良い結果が得られます。
手法3：インスピレーションボードを使う
もう少し手早い「中間のやり方」もあります。すべてを一つひとつ組み立てるのではなく、厳選した参考のセットをAIに渡す方法です。
Mobbin、Awwwards、Webflow、Craftwork、Rebrand Gallery、Component Gallery、Savee、Cosmos、Pinterestなどからスクリーンショットを集め、こうお願いします。
これらの参考のスタイルと方向性を組み合わせて、私のプロダクト向けのデザインを作ってください。ただし、そのままコピーはしないでください。
もちろん、先に十分な文脈を伝え、AIに質問させてから生成するのが前提です。すべてを手作業で作るより速く、それでいて、ありきたりなプロンプト一発よりずっと良い結果になります。
3つのアプローチの整理
- 手法1：デザインスキル — 速く、そこそこの結果
- 手法2：コンポーネント単位 — 遅いが、最高品質
- 手法3：インスピレーションボード — バランス型
そのほか役立つツール
- SVG生成：Quiverなどを使うとSVGを作れます。要素が分かれているぶん、アニメーションもつけやすくなります。
- 動画：Google Flowのようなツール。ヒーロー、背景、プロダクトデモなどを強化できます。
- 画像ライブラリ：Lummiのようなプラットフォーム。ただしブランドに合う画像を選びましょう。
- レイヤリング：背景除去とレイヤー分けで、奥行き・動き・インタラクションを加えられます。細部の積み重ねが、大きな差を生みます。
最後に
AIは、あなたの思考を置き換えるものではありません。
- 何を作るか
- なぜそれが大切なのか
- 誰のためのものか
- どんな感じであるべきか
これらを決めるのは、いつも自分自身です。AIは、それをより速く実行してくれるだけ。最良の結果は、より良いプロンプトからではなく、より良いセンスから生まれます。
この記事は、Leon Lin氏（@LexnLin）のX投稿「How To Actually Design With AI」をもとに、日本語で再構成したものです。
「Claude Design デザインシステムキット」を、LINE で無料配布しています。
▼LINE登録で「Claude Design デザインシステムキット」を受け取る
https://t.co/90omRA4UQ7
オプチャ（LINE のオープンチャット）に参加いただき、その後ノートに記載の公式LINEから
デザインシステム
と送っていただけると、特典を受け取ることができます。
※オープンチャット内ではキーワードの送信はお控えください
まずはテンプレをそのまま Claude Design に入れて、1枚だけ資料を作ってみるのがおすすめです。それだけで、デザインシステムを使う感覚がつかめると思います。
▼LINE登録で「Claude Design デザインシステムキット」を受け取る
