Claude Codeの/designで直感的に使いやすいアプリデザインを作る

AIにアプリの画面を作らせると、無駄な装飾やグラデーションが多い、いかにもAIらしい見た目になりがちです。

ぼくはアプリの見た目を作るとき、いつもClaude Codeの/designコマンドを使っています。

この記事では、/designで作ったデザインをもとにアプリを組み立て、長期的に運用しやすい形で実装する方法を解説します。

今回は、AIコードレビューを自動化した前回の記事の続きで、Webコンテンツ分析アプリを作りながら進めます。

動画で見たい方はこちら。

/designコマンドは、使いやすいアプリのデザインをAIが作るコマンド

/designコマンドは、アプリやWebサイトの画面のデザインを作るときに使うコマンドです。

Claude Codeに標準で入っているデザインスキルを使って作業するので、何も指定せずに作らせるより、デザインの原則に沿った使いやすいデザインになります。

デザインは、作った画面を一覧表示・編集できるアートボードという機能で作られるため、修正の指示や微調整もしやすいです。もちろん、作ったデザインをもとに、アプリ本体を実装させることもできます。

/designコマンドで、アプリのデザインを指示

/designの使い方は簡単で、何のどんなデザインを作るかを指示するだけです。今回の指示は以下です。

/design このアプリのデザインを作成する。@docs/plan.md のPR9までは実装済み。今回作成したデザインをもとに、以降のフロントエンド実装を作成する。PCのみで、モバイル対応不要。ダークモード対応不要

※plan.mdは、要件定義書を作った記事で作成した、アプリの実装計画書

アプリの全体像は計画書に書いてあるので、指示では、どこまで作業が終わっているか、何のためのデザインか、今の時点で決まっているデザインの制約を伝えています。

AIは何も指示しないと、スマホ表示やダークモードにも対応してしまいます。今回のアプリはPCだけで表示し、ダークモードもいらないので、そのように指示しました。

20分ほど作業して、Claude Codeがアプリのデザインをアートボードに作ってくれました。

アートボードで、全画面を一覧で見て直接編集できる

アートボードでは、このように全画面のデザインを一覧で見られます。

アートボードの中の要素を選ぶと、文字や色、形、配置を編集できます。

右上の▷ボタンを押して画面を選ぶと、実際の画面の形で見ることもできます。

デザインを作っただけなのでアプリの機能は動きませんが、タブなどのリンクを押して画面を切り替えることはできます。

/designで、装飾を省いた実用的なデザインになる

Claude Code標準のデザインスキルを使っているので、AIのデザインにありがちな無駄な装飾やグラデーションはありません。実用性を重視した、シンプルで使いやすいデザインです。

どんな配色、フォント、余白、部品を使うかも、アートボードに一緒にまとめてくれています。

このアートボード上でデザインを直接直したり、気に入らないところをClaude Codeに直してもらったりして、最終的なデザインを確定させます。

確定したデザインを、Claude Codeがアプリで忠実に再現する

ぼくは最初のデザインに特に不満はなかったので、アートボードのHTMLを、このプロジェクトのデザインフォルダdocs/design/に保存してもらいました。

あとは計画書どおりに作業を進めれば、Claude Codeがアートボードと同じ見た目でアプリを実装します。次のように、計画書のPRを1つずつ指示して開発を進めます。

@docs/plan.md のPR10に対応して

アートボードをもとに実際に作った画面がこちらです。アートボードの見た目を忠実に再現しています。

CSSのベタ書きは、画面が増えるほど統一と管理が難しい

見た目は問題ありませんが、AIが書いたコードを見ると、いまいちなところがあります。CSSをベタ書き、つまりゼロから直接書いていることです。

CSSは、画面の色や形、余白といったデザインを決めるコードです。このように、メモ欄の文字サイズや色など、画面のすべての要素の見た目をコードで表しています。

ただ、CSSをゼロから書くと、メンテナンスが大変です。画面や機能が増えるほどCSSを書き足していくので、デザイン全体の統一や管理が難しくなります。

コンポーネントライブラリなら、部品を組み合わせて統一感を出せる

そこでよく使うのが、コンポーネントライブラリです。ボタンやカードなど、Webサイトでよく使う部品のデザインを、あらかじめ作ってまとめた部品集です。

ぼくがよく使うのはdaisyUIです。スイッチボタンやサイズ、色などを、Webサイトやアプリでよく使う形の部品にまとめています。

daisyUIを使えば、各項目のCSSをゼロから組み立てずに、よく使われる部品を組み合わせて、統一感のあるデザインを作れます。

daisyUIは、Tailwind CSSというCSSの仕組みと組み合わせて使います。daisyUIは無料のオープンソースで、Tailwind CSSも無料です。

daisyUIは、デザインをdaisyUIに寄せる前提なら入れられる

さっそく、このアプリでもdaisyUIを使うべきか、Claude Codeに聞きました。最初の答えは「今は入れない方がいい」です。

/designで寸法まで決まっているので、daisyUIを使ってもほとんどゼロからCSSを書くことになるからです。

ただ、これは、/designで作ったデザインを忠実に再現しようとするから起こる問題です。そこで、デザイン自体をdaisyUIに最適化するならどうかも聞きました。

するとClaude Codeは、デザインをdaisyUIに寄せてよいなら入れてよい、と答えました。

daisyUIでも、グラフの部分は共通の部品にできません。ただ、文字やボタン、カードといった部品には、daisyUIのパーツを使えます。

CSSをゼロから書くのと、統一されたデザインの部品集で組み立てるのとでは、将来のメンテナンスのしやすさが大きく変わります。そこでぼくは、daisyUIで見た目をすべて作り直してもらいました。

Claude Codeは見た目をほとんど変えずに、ベタ書きしていたCSSをdaisyUIの部品に書き換えてくれました。

デザインもコードなので、Linterでルールを強制できる

Linterは、コードのミスや不具合を機械的に検査して、エラーにしてくれるツールです。設定方法はLinter・Formatterの設定を解説した記事をご覧ください。

デザインもCSSというコードなので、Linterである程度ルールを決めて制御できます。ルールを決めておけば、AIがルールにないデザインを新たに足そうとしたときにエラーになり、ルールに従わせられます。

なのでぼくは、アプリを作るとき、最初の画面ができた段階で、必ずデザインのルールをLinterで設定しています。

Linterで縛れていないデザインのルールを追加

今回のアプリでも、Linterによるデザインの制御を入れます。daisyUIへの書き換えが終わったところで、Claude Codeに次のように聞きました。

Linterで縛れるCSSはLinterで縛ってる？

答えは「一部だけ」でした。表の「素通りした例」が、今のLinterではエラーにならないルール違反です。

そこで、提案された縛り方を足してもらい、色や余白、文字の大きさもLinterで縛るようにしました。たとえば、ルールにない色をコードに直接書くと、Linterがエラーにします。

これで、色や余白、文字の大きさといったデザインのルールが、Linterで強制されます。AIに新しい機能を作らせたり、画面を直させたりしても、今の見た目に沿った統一感のあるデザインを保てます。

まとめの前に、お知らせを。

業務のAI活用の個別サポートや、研修・システム開発などのお仕事は、公式LINEからお問い合わせください。相談は無料です。

記事の内容やその他のご質問も、公式LINEで回答しています。

はたらクラフト公式LINELINElin.ee

無料メルマガで実務で使えるAI活用を毎日配信中。1分で登録できます。

超実践AI論Substacktaichiaiworker.substack.com

まとめ：/design、コンポーネントライブラリ、Linterで使いやすく、運用しやすいデザインにする

この記事の要点は次の5つです。

• アプリの見た目は、Claude Codeの/designで作ると、直感的で使いやすいデザインになる
• デザインはアートボードで作られ、自分で直接直すことも、Claude Codeに微調整させることもできる
• 納得のいくデザインができたら、Claude Codeがアプリで忠実に再現する
• daisyUIのようなコンポーネントライブラリを使うと、整った見た目でメンテナンスもしやすくなる
• Linterでデザインのルールを決めておくと、AIがルール違反のコードを書いたときにエラーになり、統一感を守れる

ぜひあなたも、/designとコンポーネントライブラリ、Linterによるデザインの制御を組み合わせて、直感的で使いやすく、メンテナンスもしやすいアプリのデザインを作ってみてください。

以下の記事では、引き続きコンテンツ分析アプリの仕上げと、リリース前のセキュリティ周りの対応について解説しています。

（後日公開予定）