AIで「見た目」まで作れるようになった時代の課題
AIコーディングの進化により、業務アプリや管理画面の試作はかなり速くなりました。最近はさらに、画面レイアウト、配色、コンポーネント、スライド、LPの初稿までAIで作れる範囲が広がっています。
AnthropicのClaude Designは、自然言語でプロトタイプやスライド、デザイン案を作り、コードベースやデザインシステムを読み込んで既存の色・タイポグラフィ・コンポーネントに寄せる方向を示しています。ui.shのように、AIコーディングエージェントにUI設計の知識を渡すためのツールも出てきています。
ここで起きるのは、「誰でもデザインできるようになる」という単純な話ではありません。
むしろ、エンジニア、デザイナー、ビジネス職の境界が曖昧になるほど、どこまでAIに任せるか、誰が品質を判断するか、どの状態なら本番に出してよいか を先に決める必要があります。
AIデザインは、完成品ではなく「会話のたたき台」
AIデザインツールの一番の価値は、完成品を一発で作ることではなく、検討速度を上げることです。
例えば、次のような用途にはかなり向いています。
- 新機能の画面構成を複数案で比較する
- 管理画面や社内ツールのワイヤーフレームを作る
- 既存サイトのトーンに近いLP案を試作する
- デザイナーに相談する前に、要件を視覚化する
- エンジニア実装前に、ユーザー導線の抜けを見つける
一方で、AIの初稿をそのまま本番に出すのは危険です。AIは「それっぽい」見た目を作れますが、事業の文脈、顧客層、アクセシビリティ、ブランドの違和感、長期運用のしやすさまでは、最終的に人間が判断する必要があります。
特に中小企業では、専任デザイナーがいないまま、経営者・エンジニア・外部パートナーで画面を作ることがあります。その場合、AIデザインは便利な補助輪になりますが、補助輪を本体と勘違いしないことが大切です。
エンジニアがUIに踏み込む前に決める5つのこと
AIを使えば、エンジニアでも画面デザインに踏み込みやすくなります。ただし、踏み込む前に最低限のルールを決めておかないと、デザイナーやビジネス側との摩擦が生まれます。
1. AIで作る範囲
まず、AIで作る範囲を明確にします。
- ワイヤーフレームまで
- 社内確認用プロトタイプまで
- デザイン案の比較まで
- 本番HTML/CSSの初稿まで
- 既存デザインシステムに沿ったコンポーネント実装まで
この範囲が曖昧だと、「試作のつもりだったもの」がいつの間にか本番候補になります。AIで速く作れるほど、入口で線を引くことが重要です。
2. 最終判断者
次に、最終判断者を決めます。
デザイナーがいるなら、視覚品質・ブランド整合・アクセシビリティはデザイナーが最終確認する。デザイナーがいないなら、経営者またはプロダクト責任者が「何を見てOKにするか」をチェックリスト化する。
AIが作ったからOKではなく、誰が責任を持つのかを明確にします。
3. デザイン語彙
非デザイナーがAIに指示するとき、一番つまずくのは「なんとなく違う」を言語化できないことです。
「もっとよくして」ではなく、次のように言えるとAIの出力は安定します。
- 余白を広げて、要素間の密度を下げる
- コントラストを上げて、主要CTAを目立たせる
- カード中心ではなく、一覧性の高いテーブルに寄せる
- 装飾を減らし、業務ツールらしい静かな印象にする
- アクセントカラーを1箇所に絞る
デザイン語彙は、デザイナーだけのものではありません。AI時代には、職種を越えて使う共通言語になります。
4. アクセシビリティ
見た目が良くても、読みにくい、押しにくい、キーボードで操作できない、色だけで状態を伝えている、というUIは業務では使いにくくなります。
W3CのWCAG 2.2では、知覚可能・操作可能・理解可能・堅牢という考え方でアクセシビリティ要件が整理されています。小規模な社内ツールでも、少なくとも以下は確認したいところです。
- 文字サイズと行間が読みやすい
- 主要ボタンのコントラストが足りている
- 色だけでエラーや状態を伝えていない
- フォームラベルが明確
- モバイル幅でも要素が重ならない
- キーボード操作やフォーカス状態が破綻していない
AIに「アクセシビリティを考慮して」と頼むだけでなく、人間側のチェック項目として持っておくべきです。
5. 既存システムとの接続
AIが新しいUIを作ると、既存の画面とトーンがズレることがあります。
ボタンの角丸、余白、影、入力欄、エラーメッセージ、テーブルの見せ方が少しずつ違うと、ユーザーは無意識に違和感を持ちます。AIに依頼するときは、既存のデザインシステム、CSS変数、コンポーネント一覧、画面スクリーンショットを先に渡し、「新規性」より「一貫性」を優先する場面を作る必要があります。
Claude Designの公式情報でも、コードベースやデザインファイルを読み込むことで、実際のコンポーネントやスタイルに沿ったプロトタイプを作る方向が示されています。これは、AIデザインを本番運用に近づけるうえで重要な考え方です。
職能間の摩擦を減らすための考え方
AIでデザインや実装の初稿が作れるようになると、専門職の人ほど違和感を持つことがあります。
それは自然な反応です。エンジニアがAIでコードを書かれたときに「品質は大丈夫か」と思うように、デザイナーもAIで作られた画面に対して「設計意図はあるのか」「ブランドを理解しているのか」と感じます。
大切なのは、AIを使う側が専門職を軽視しないことです。
「AIでできるからデザイナーはいらない」ではなく、「AIで初稿を早く作るので、判断が必要なところに専門職の時間を使う」と考える。これだけでチームの空気は大きく変わります。
ビジネス職がAIで画面案を作る場合も同じです。エンジニアに渡す前に、業務要件・使う人・入力項目・例外ケース・承認フローを整理しておく。AIで作った画面を「これで実装して」ではなく、「こういう業務課題を解きたいので、技術的に現実的か見てほしい」と渡す。
AI時代の協働では、成果物そのものよりも、意図・制約・判断理由を共有すること が重要になります。
Optiensの見方
Optiensでは、AI導入支援において「ツールの使い方」だけでなく、業務に定着する運用設計を重視しています。
AIデザインも同じです。画面を作ることだけなら、以前より簡単になりました。しかし、実際の業務で使える画面にするには、誰が使うのか、何を判断するのか、どの情報を見せるのか、どの操作を間違えると困るのかを整理する必要があります。
中小企業にとって現実的なのは、次の流れです。
- まず業務フローと利用者を整理する
- AIでワイヤーフレームを複数案作る
- デザイン語彙とチェックリストでレビューする
- 必要に応じてデザイナー・エンジニアに専門判断を依頼する
- 本番化する前にアクセシビリティと運用ルールを確認する
AIは、専門職を不要にする道具ではありません。専門職と非専門職の間にある「見えない前提」を早く形にする道具です。
その前提を丁寧に扱える会社ほど、AIデザインを安全に使えるようになります。