はじめに
Claude Codeに全自動でWebサービスを作らせる連載の番外編です(第1弾: https://qiita.com/suzuyoshi/items/c1d965a0d5bdc0c691c6 / 第2弾・セキュリティ編: https://qiita.com/suzuyoshi/items/49710258b7cf11e17ae7 )。今回はコードの話ではなく、デザインの話をします。
結論を先に言うと、
AIは何もしなくても「綺麗な画面」を作ってくれる。でも「統一されたプロダクト」は作ってくれない。その差を埋めるのがデザインシステムで、私はTailwind CSS + Tailwind Plusのローカル配置で埋めた。
前提: 今のAIは、デザインを指示しなくても綺麗に作る
まずこれは認めるところから始めたいのですが、2026年現在、AIにUIを作らせて「ダサくて使い物にならない」ということは、ほぼありません。
「ログイン画面を作って」とだけ言えば、余白の取れたセンタリングレイアウト、ちゃんとしたフォーカスリング、エラー表示、レスポンシブ対応まで込みで出てきます。数年前にテンプレートを買ったり、デザイナーに頼んだりしていたレベルのものが、指示ゼロで出てくる。ここはもう前提として置いていいと思います。
じゃあデザインの問題は解決したのかというと、してないと思ってます。
問題は「1画面の綺麗さ」ではなく「100画面の統一感」
私のサービス(フリーランスマッチング)は、ページ数でいうと数十画面あります。一覧、詳細、フォーム、モーダル、ドロワー、管理画面。これをAIに何も指示せず作らせていくと、何が起きるか。
1画面ずつは綺麗なのに、全体としてはバラバラのプロダクトができます。
- 画面Aのボタンは
rounded-lgで影つき、画面Bはrounded-mdでフラット - フォームの入力欄が、ある画面では
border方式、別の画面ではring方式、また別の画面ではoutline方式 - 同じ「削除確認」なのに、モーダルのレイアウトが画面ごとに微妙に違う
- 空状態(データ0件)の表示が、画面ごとに全部違う発明をされる
AIは毎回「その画面にとって最適な綺麗さ」を出力します。でも前回の自分が何を作ったかは、指示しなければ覚えていません。人間のチーム開発で「デザインシステムがないと画面がバラける」のと完全に同じ現象が、AIだと人間の10倍の速度で起きます。なにせ生産量が10倍なので。
そして統一感のなさは、ユーザーには「なんとなく安っぽい」「個人が作った感じがする」という印象として伝わります。1画面の美しさではなく、画面をまたいだ一貫性こそが「ちゃんとしたサービス」の顔つきを作る。ここがAI時代のデザイン問題の本体だと思っています。
そもそも「デザインシステム」とは
ここまで当たり前のように使ってきた言葉なので、一度だけ整理しておきます。
デザインシステムとは、プロダクトの見た目と操作感を統一するための「ルールと部品のセット」です。中身はだいたい3層に分かれます。
- ルール: 色・余白・角丸・文字サイズなどの決めごと(「ボタンの主要色はこの青」「余白は4pxの倍数」)
- 部品: ルールに沿って作られた再利用コンポーネント(ボタン、フォーム、モーダル、テーブル)
- 運用: 新しい画面を作るとき、部品を使う・勝手に発明しないという約束
有名どころだと、GoogleのMaterial Design、AppleのHuman Interface Guidelines、日本だとデジタル庁のデザインシステムなどがこれです。大きな会社が何十人のデザイナー・エンジニアで開発しても画面がバラけないのは、このセットが「誰が作っても同じ見た目になる仕組み」として機能しているからです。
つまりデザインシステムは本来、人間のチームのための共通言語でした。AI時代に起きた変化は、この共通言語を読む相手が人間からAIに変わったことです。そしてAIは人間と違って、ルールを渡せば文句も言わず忘れもせず、毎回そのとおりに作ります。デザインシステムの費用対効果は、実はAI相手のほうが高い。次の章はその実践です。
解決策: デザインシステムを「AIが参照できる形」で置く
人間のチームなら、FigmaのコンポーネントライブラリやStorybookでこれを解決します。AI相手の場合、もっと直接的な方法があります。
リポジトリの中に、正解のコンポーネント集を置いてしまう。
私はTailwind CSS + Tailwind Plus(Tailwind公式の有料コンポーネント集。旧Tailwind UI)を使っています。運用はこうです。
1. Tailwind Plusのコンポーネントをローカルに配置する
Tailwind Plusは、ヒーロー、料金表、テーブル、モーダル、フォームレイアウトといった数百のコンポーネントが、Tailwindのクラス付きHTML/Reactでもらえる買い切りサービスです。これを購入して、AIが読める場所に置いておく。AIに「ログイン画面を作って」ではなく「Tailwind PlusのSimple centeredをベースにログイン画面を作って」と言える状態にする。
これだけで、出力が「AIが今日考えた綺麗さ」から「プロがデザインした一貫したパーツの組み合わせ」に変わります。
2. 出典をコードコメントに残させる
うちのコードには、こういうコメントが大量にあります。
// ユーザー一覧ページ本体 (Tailwind Plus: Application UI/Lists/Tables/Simple ベース)。
// 職歴の追加・編集フォーム (Tailwind Plus: Application UI/Overlays/Drawers/Create project form example ベース)。
// 権限変更確認ダイアログ (Tailwind Plus: Application UI/Overlays/Modal Dialogs/Simple alert ベース)。
どのテンプレートをベースにしたかを、AIにコメントで残させるルールです。効果は2つあって、1つは人間(私)がレビューで「どの正解に寄せたか」を確認できること。もう1つが重要で、次の画面を作るAIが、既存コードのコメントから「このプロダクトの流儀」を学習できることです。テーブルを作るときは過去のテーブルの出典を見て同じテンプレに寄せる。デザインシステムがコードの中で自己増殖していきます。
3. 「踏襲すべき既存実装」をファイル名で毎回指名する
新しい画面をAIに任せるとき、指示に必ずこれを入れます。
踏襲すべき既存実装:
src/features/admin/components/AdminUserListPageContent.tsx(一覧・検索・ページネーションの流儀)
「いい感じに統一して」は効きません。具体的なファイルを1つ指名すると、ボタンの色からエラー表示の書式まで揃います。人間の新人に「この画面を参考にして」と言うのと同じで、当たり前のことなんですが、AI相手だとこの当たり前を毎回明文化する必要があります。
で、Tailwind Plusは必須なのか(無課金の現実)
正直に書きます。必須ではありません。
Tailwind CSS単体+アイコンだけでも、AIはそこそこ以上のものを作ります。Tailwindのユーティリティクラス自体が実質デザインシステムのようなもので、AIはTailwindの「よくある書き方」を大量に学習しているので、フレームワークなしの生CSSに比べたら、無課金でも統一感はかなり出ます。
課金して変わるのは、体感でいうと「そこそこ綺麗」が「買ったテンプレみたいに見える」になる差です。特に効くのは、自分でデザインを考えたくない複雑なUI——料金表、比較テーブル、設定画面のサイドバーレイアウト、ドロワーフォームあたり。ここはプロが組んだ構造をそのまま流用できるのが強い。
なので推奨はこうです。
- まず無課金で始める。Tailwind CSSを入れて、上の「出典コメント」「踏襲指名」の運用だけ真似る(この2つは無料です)
- 画面数が増えて統一感が崩れ始めたら、課金を検討する。買い切りなので、テンプレ1回分の外注費より安い
実例: claude design(ベータ)でLPを刷新してみた
最近あった実例をひとつ。事業用のLP(ランディングページ)を作り直すとき、ベータ版のclaude design(ClaudeのデザインモードでUIを丸ごと生成してくれるやつ)を使ってみました。
結果は、はっきり明暗が分かれました。
構成と文言は、驚くほど良くなった。元のLPは自分で構成を考えたものでしたが、claude designが出してきた案は、共感セクション(「その業務、まだExcelとメールで回していませんか」)→タダより高いものはないと思う人への種明かし→他の選択肢との比較表→聞きにくいことを先に潰すFAQ、という流れで、営業資料として一段上の完成度でした。自分では書けなかった切り口が普通に出てくる。
一方でデザインは、古臭くて微妙でした。悪く言えば数年前のテンプレートサイトのような見た目で、しかも自社サービスの他のページとも顔つきが合わない。そのまま使う気にはなれませんでした。
で、やったことは分業です。claude designの生成物をclaude codeに渡して、「構成と文言だけ取り入れて。デザインは元々のTailwind(+Tailwind Plus)の流儀で作って」と指示した。つまり、内容の設計図としてだけ使い、見た目の実装は自分のデザインシステム側でやり直す。結果、構成はclaude designの提案力、見た目は既存プロダクトとの一貫性、という良いとこ取りになりました。
AI時代のデザインは「AIに全部任せる」でも「人間が全部決める」でもなく、内容の発想はAIに広げさせて、見た目はデザインシステムで縛る、この組み合わせが今のところ一番強いと思います。ツールごとに得意分野が違うので、「どのAIの、どの出力を、どこまで採用するか」を人間が仕分けるのが、いまの現実的な役割分担です。
一応claude designで自分だけのデザインシステムを作成できるのですが現状のbeta版ではあまり現実的とは言えないレベルでした。よって個人開発の時点ではtailwind cssのようなライブラリを使用し、サービスが拡大してきたら独自のデザインシステムを作るでいいと思います。
まとめ
- AIは1画面なら指示ゼロで綺麗に作る。問題は画面をまたいだ統一感で、これは放置すると人間のチーム開発より速く崩壊する
- 解決はデザインシステムを「AIが参照できる形」で持つこと。私はTailwind CSS + Tailwind Plusのローカル配置
- 運用の肝は3つ: 正解をリポジトリに置く/出典をコメントで残させる/踏襲すべきファイルを毎回指名する
- Tailwind Plusは必須ではない。無課金でもTailwind+運用ルールでそこそこ行ける。課金は「画面数が増えてから」で十分
- デザイン系AIツール(claude design等)は構成・文言の提案力を借りる道具として使い、見た目の実装は自分のデザインシステムでやり直すと良いとこ取りできる
宣伝です。この連載で作っているフリーランスマッチングサービス「Scrum for Freelance」を運営しています。マージンは新しい相手との初回マッチングのみ・同じ相手との継続契約や再契約は0円です。この記事に書いたデザインシステム運用の成果物を、アカウント登録なしのデモで実際に触れます。
追伸。今回もこの記事はClaude Codeが書いています。「AIはデザインの統一感が出せない」という記事を、統一された文体で書かされているのは、なにか皮肉な気がします。(内容はちゃんと自分で考えているのでチェックせずに記事を量産しているわけではないのでご安心を)