デザインは、AI が人間の能力に追いつくのに苦労してきた分野の 1 つです。しかし、ほとんどの人は、AI を使ったデザインが実際に何を意味するのかをまだ誤解しています。AI を使ったデザインとは、AI にすべてを任せることではありません。アイデア、方向性、感性、そして創造性は、依然としてあなたから生まれるべきです。
AI は、あなたの実行を支援するために存在します。
プロセスを簡単に説明すると、次のようになります。
- アイデアを練る。
- インスピレーションを集める。
- 考えをプロンプトに変換し、AI を使って構築する。
Cursor、Codex、Claude などのツールや、あらゆるハーネスを使用できます。基本的に、あなたの考えを指示に変換しているのです。AI は非常に優れた実行能力を持っていますが、真の創造性は依然として欠けています。AI は、スペーシング、タイポグラフィ、色彩理論、階層といったデザインのルールを理解しています。
しかし、AI は「センス」を理解しません。何が独創的で、意味があり、本当に良いのかを理解できないのです。
そこがギャップです。
AI に真のセンスを与えることはまだできませんが、その制限を回避することは可能です。
方法 1: デザインスキルを活用する
これが最も迅速なアプローチです。時間がない場合や、小規模な作業に取り組んでいる場合、あらかじめ構築されたデザインスキルに頼ることができます。
いくつか例を挙げます。
TasteSkill Version 2 も近日公開予定で、専用の GPT 5.6 が先に登場します :)
プロセスは簡単です。
- デザインスキルを追加する。
- AI にコンテキストを与える。
- 数回プロンプトを実行して、サイト、アプリ、ポスターを作成する。
- 明らかな問題を修正する。
- 公開する。
結果は、通常、まあまあのレベルになります。それでも他の AI 生成デザインと似た印象になる可能性がありますが、優れたスキルは、最悪のミスや粗雑な部分を避けるのに役立ちます。これが、ほとんどの人が使用する方法です。
方法 2: AI を使って自分でデザインする
本当に際立ったものを作りたいなら、もっと深く掘り下げる必要があります。ユーザーがあなたのプロダクトにアクセスしたとき、そこに本物の思考が込められていると感じてもらいたいはずです。そのためには、より意図的なプロセスが必要です。
あなたが作ろうとしているのは、次のようなものかもしれません。
- モバイルアプリ
- デスクトップアプリ
- ウェブサイト
- ランディングページ
- ダッシュボード
- ポスター
それが何であれ、まず明確な方向性が必要です。何を構築しているのかわからなければ、AI が代わりに考えてくれることはありません。
意味から始める
何よりも先に、基礎を定義しましょう。
自問してみてください。
- これは誰のためのものか？
- それはどんな問題を解決するのか？
- どんなフィーリング（感触）を与えるべきか？
- それは何を表現すべきか？
UI はプロダクトの意味を反映するべきです。これを書き留めてください。ここでも AI を使うことはできますが、デザインに使うのではありません。代わりに、AI に質問をさせましょう。
例えば、次のような質問です。
- プロダクトは何についてのものか？
- ターゲットオーディエンスは誰か？
- どんな感情を伝えるべきか？
- ブランディングはどのような印象を与えるべきか？
- どの色やフォントが適切か？
- ミニマル、遊び心、プレミアム、テクニカル、実験的のうち、どのようなテイストにすべきか？
インスピレーションを集める
方向性が決まったら、参考資料を集め始めましょう。強力な情報源として Mobbin があります。
Mobbin には、さまざまなカテゴリにわたる実際のプロダクトのスクリーンショットが掲載されています。デザインを見て「これ、いいね」と思うだけでなく、その理由を自問してください。
- レイアウトのせいか？
- スペーシングのせいか？
- タイポグラフィのせいか？
- 構造のせいか？
- インタラクションのせいか？
役立つものはすべて保存しましょう。
ナビゲーション、ヒーロー、料金、カード、モバイル画面、ダッシュボード、アニメーション、タイポグラフィなどのフォルダに整理します。
時間をかけて、自分だけのリファレンスライブラリを構築しましょう。それが「センス」を磨く方法でもあります。
（Mobbin のリンクはアフィリエイトリンクです。このリンクから初回 3 ヶ月間 10% オフになります。また、私にも追加費用なしで手数料が入る場合があります。）
その他の有用な情報源：
さらに：
デザイン全体を丸コピーしないでください。複数のアイデアを組み合わせて、自分のプロダクトに合ったものにしましょう。
構造をマッピングする
次に、実際に構築する必要があるものを定義します。
ウェブサイトの場合：
- ナビゲーション
- ヒーロー
- 特徴
- 料金
- お客様の声
- CTA（行動を促すボタン）
- フッター
アプリの場合：
- オンボーディング
- ホーム
- 検索
- プロフィール
- 設定
- コアフロー
- 空の状態
各セクションには明確なコンテンツが必要です。
例えば、ヒーローセクションには以下が必要です。
- 見出し
- 説明文
- CTA
- ビジュアル
AI はコピー作成を支援できますが、明確さは依然としてあなたからもたらされます。
コンポーネントごとに構築する
ここから実際の構築を始めます。リファレンスから個々のアイデアを取り出し、それを適応させます。
「ウェブサイトを丸ごと作って」と言う代わりに、
「このスタイルをベースに、私のブランディングに合わせたヒーローセクションを作成して」と言いましょう。
一歩ずつ作業を進めます。
- ナビゲーション
- ヒーロー
- カード
- ボタン
- タイポグラフィ
- 細部
AI は、より小さなタスクの方がはるかに優れたパフォーマンスを発揮します。また、あなたがコントロールし続けることもできます。
カスタムアセットを生成する
必要に応じて画像生成を活用してください。GPT Images 2.0 や Seedream 5.0 といったツールは、現在十分な性能を持っています。
明確なコンテキストを提供しましょう。
- 色
- スタイル
- 構成
- 使用目的
ありきたりなストックイメージは避けましょう。カスタムビジュアルは、すべての要素をよりまとまりのあるものにします。
ワークフロー
完全なプロセスは次のとおりです。
- アイデアを定義する
- 目的とターゲットオーディエンスを明確にする
- ブランディングの方向性を設定する
- 参考資料を集める
- それらを整理する
- 構造をマッピングする
- コンポーネントを構築する
- アセットを生成する
- インタラクションを追加する
- すべてを洗練させる
この方法は、1 回のプロンプトで得られる結果よりもはるかに優れています。
方法 3: インスピレーションボードを使う
もう少し速い中間的な方法もあります。すべてを 1 つずつ構築する代わりに、厳選したリファレンスセットを AI に与えることができます。
以下のサイトからスクリーンショットを集めましょう。
そして AI に指示します。
「これらのリファレンスのスタイルと方向性を組み合わせて、私のプロダクト用のデザインにしてください。直接コピーしないでください。」
それでもまず完全なコンテキストを与え、AI に質問させてから生成させましょう。
この方法は、すべてを手動で構築するより高速でありながら、汎用的なプロンプトよりもはるかに優れた結果をもたらします。
3 つのアプローチ
- デザインスキル
速い、まずまずの結果。
- コンポーネントごと
遅い、最高品質。
- インスピレーションボード
バランスの取れたアプローチ。
追加ツール
SVG 生成
Quiver を使って SVG を作成しましょう。
SVG は要素が分離しているため、より優れたアニメーションが可能です。
動画
Google Flow のようなツールを使いましょう。
動画は以下の要素を強化できます。
- ヒーローセクション
- 背景
- プロダクトデモ
画像ライブラリ
必要に応じて Lummi のようなプラットフォームを活用しましょう。
画像がブランドに合っていることを確認してください。
レイヤリング
背景除去とレイヤリングを使って、以下の要素を追加しましょう。
- 奥行き
- 動き
- インタラクション
小さなディテールが大きな違いを生みます。
最後に
AI があなたの思考を代替するべきではありません。
あなたが依然として決めるのです。
- 何を構築するか
- なぜそれが重要なのか
- 誰のためのものか
- どのようなフィーリングを与えるべきか
AI はあなたの実行を速めるだけです。最高の結果は、より良いプロンプトから生まれるのではなく、より優れたセンスから生まれます。
近いうちに、デザイン、開発、構築に関する情報や、AI を使ってオンラインで初めてのお金を稼ぐ方法についても、さらに共有していきます :)
質問があれば、ぜひコメントを残してください！ この記事がお役に立てば幸いです。 :)
