Claude Codeの/designコマンドでアプリデザインを作る
デザイン原則に則った使いやすいデザインを作ってくれます。文字や色、形、配置を編集したりできます。
ルールに従うことを強制できます。AIが実際に対応したコードを見てみると、イマイチなところがあります。
こんにちは、超実践AI論のたいちです。今回は、Claude Codeのデザインコマンドで直感的に使えるアプリデザインを作る、というテーマでお話しします。
前回までの動画で、Webコンテンツ分析アプリのAIコードレビューの仕組み化まで終わりました。
この動画を含む、Claude Codeを使ったアプリ開発の全工程は動画コースにしているので、全体を知りたい方は概要欄のリンクから見てみてください。
そして、アプリのデータ取得の部分など、バックエンドと呼ばれる裏側の仕組みも一通り作りました。
バックエンドを作る部分は、要件定義書を作成する動画で作った、この計画書をAIに参照させて、PR3番を実装して、みたいな感じでひたすらAIに作らせるだけなので、この動画コースでは省略します。
そして、バックエンドが一通りできたので、今回はフロントエンド、つまりアプリの見た目を作っていきます。
アプリの見た目を作るときは、僕はいつもClaude Codeのスラッシュデザインコマンドを使います。
デザインコマンドは、その名の通り、アプリやスライド、ウェブサイトなどのデザインを作るときに使うコマンドです。
デザインコマンドを使うと、Claude Codeはデフォルトで入っているデザインスキルを使って作業するので、
素の状態でデザインをさせるより、デザイン原則にのっとった使いやすいデザインを作ってくれます。
アートボードという、Claude Code上で作ったデザインを一覧表示・編集できる機能を使って作ってくれるので、修正指示や微調整もしやすいです。
そしてもちろん、デザインコマンドで作ったデザインを基に、アプリ本体の実装をさせることもできます。
早速、デザインコマンドを使って、コンテンツ分析アプリのデザインを作ってもらいましょう。
今回の指示はこちらです。
スラッシュデザイン、このアプリのデザインを作成する、plan.mdのprqまでは実装済み、
今回作成したデザインを基に、以降のフロントエンド実装を作成する、PCのみでモバイル対応不要、ダークモード対応不要。
このように使い方は簡単で、デザインのコマンドと一緒に、何のどんなデザインを作るかを指示するだけです。
アートボードでデザインを確認・調整する
今回の場合、計画書にアプリの全体像は書いてあるので、どこまで作業が終わっているのか、何のためのデザインなのか、
そして今時点で決まっているデザインの制約を伝えています。
AIはアプリを作るとき、何も指示しないと、スマホ表示やダークモードにも対応してしまいます。
僕が今回作るアプリは、PCのみで表示して、ダークモードもいらないので、そのように指示しています。
そして20分ぐらい作業して、作ってくれたアプリデザインのアートボードがこちらです。
アートボードでは、このように全画面を一覧で見ることができます。
そしてアートボードの中の様子をこのように選択して、文字や色、形、配置を編集したりできます。
他にも、このプレイボタンから実際の画面の形で見ることもできます。
あくまでデザインを作っただけなので、アプリの機能は再現されていませんが、リンクを使った画面遷移ぐらいはできます。
先ほど説明したように、クロードコードデフォルトのデザインスキルを使っているので、
AIのデザインによくありがちな無駄な装飾やグラデーションなどの表現はなく、こんな感じで実用性を重視したシンプルで使いやすいデザインにしてくれています。
このデザインボード上でデザインを直接修正したり、気に入らないところをクロードコードに直してもらったりして、最終的にアプリのデザインを確定させます。
こんな感じで、どんな配色、フォント、余白、部品を使うかもデザインボード上に一緒に作ってくれています。
僕は最初に作ってくれたデザインで特に不満はなかったので、先ほどのアートボードのHTMLをこのプロジェクトのデザインフォルダの中に置いてもらいました。
あとは計画書に基づいて続きの作業を進めていけば、実際のアプリでもクロードコードが先ほどのデザインと同じ見た目で実装してくれるはずです。
このように計画書のPR10に対応してといった感じで開発を進めてもらいます。
そしてクロードデザインのアートボードを元に実際に作った画面がこちらです。
アートボードを元に実際の見た目も忠実に再現してくれています。
見た目はOKなのですが、AIが実際に対応したコードを見てみるといまいちなところがあります。
CSSのベタ書きとDigiUIの活用
それはCSSをベタ書きしていることです。
CSSとは画面の色や形、余白といったデザインを決めるプログラムのコードです。
このようにメモ欄の文字サイズはどのくらいなのか、色は何にするのかといった感じで、画面のすべての要素の見た目をコードで表現しています。
ですがCSSをゼロから書いてしまうとメンテナンスが大変になります。
画面や機能が増えるほどCSSのコードも増えていき、どんどんCSSを書き足していくので、デザイン全体の統一や管理が難しくなっていきます。
そこでよく使うのがコンポーネントライブラリです。
コンポーネントライブラリとは、ウェブサイトでよく使うボタンやカードなどの部品のデザインをあらかじめ作ってまとめておいてくれる部品集です。
僕がよく使うコンポーネントライブラリはDigiUIです。
DigiUIではこのようにスイッチボタンやサイズ、色などをウェブサイトやアプリでよく使う形で部品としてまとめてくれています。
DigiUIを使うことで、画面のデザインをするときにゼロから書く項目のCSSを組み立てるのではなく、よく使われている部品を組み合わせて統一感のあるデザインを作ることができます。
早速このアプリでもDigiUIを使うべきかクロードコードに聞いてみました。
すると最初の答えはDigiUIは使わない方がいいというものでした。
その理由はデザインコマンドで作ったデザインで既に寸法まで決まっているので、DigiUIを使ったとしてもほとんどゼロからCSSを書くことになるからだそうです。
ですがこの問題はデザインコマンドで作ったデザインを忠実に再現しようとするから起こるので、
僕は続けてデザイン自体をDigiUIに最適化するならどういう結論になるかも聞いてみました。
するとクロードコードはデザインをDigiUIに寄せるなら入れて良いと思うという回答を返してくれました。
DigiUIでもこのグラフの部分は共通化はできないですが、その他の文字やボタン、カードといった部品はDigiUIのパーツを使うことができます。
CSSをゼロから書くのとDigiUIのような統一されたデザインの部品集を使ってデザインを組み立てるのでは将来的なメンテナンスのしやすさが大きく変わるので、
僕はDigiUIで見た目をすべて作り直してもらいました。
見た目をほとんど変えずにベタ書きしていたCSSをDigiUIの部品に書き換えてくれました。
Linterでデザインルールを強制する
そしてCSSのDigiUI置き換えも終わり、僕はもう一つ気になることがあったので続けてAIに質問しました。
それはLinterで縛れるCSSはLinterで縛っているかどうかです。
Linterはコードのミスや不具合を機械的に検査してエラーにしてくれるツールです。
Linterの設定方法や詳細は概要欄の動画コースの中で解説しているので興味がある方は見てみてください。
デザインもCSSというコードなのでLinterである程度ルールを決めて制御することができます。
Linterでデザインのルールを決めておけば、AIが既存のルール外のデザインを新たに追加しようとしたときにエラーになってルールに従うことを強制できます。
なので僕はアプリを作るときに最初の画面ができた段階で必ずデザインに関するルールをLinterで設定しています。
今回のアプリでも同様にLinterによるデザイン制御を入れました。
AIに確認すると今のLinterで止められるのは一部だけだったので、色や余白、文字の大きさのルールを追加してもらいました。
例えばルールにない色をこのように直接コードに書くとLinterがエラーにしてくれます。
これで色や余白、文字の大きさといったデザインのルールがLinterで強制されるので、
AIに新しい機能を作らせたり、画面をいじらせたりしても既存の見た目に沿った統一感のデザインになることが保証されます。
これでアプリの見た目をきれいにする設定は完了です。
ここで一つお知らせです。業務のAI活用の個別サポートや研修、システム開発などのお仕事は、概要欄の公式LINEからお問い合わせください。相談は無料です。
動画の内容やその他のご質問にも公式LINEで回答しています。
デザイン整備のまとめ
今回の内容をまとめます。
アプリの見た目を作るときはクロードコードのデザインコマンドを使うと、直感的で使いやすいアプリのデザインをクロードコードが作ってくれます。
デザインはクロードコードのアートボードという機能で作成されるので、自分で見た目をいじったりクロードに指示してUIの微調整ができます。
そして納得のいく見た目ができたら、そのデザインの画面をクロードコードに実際のアプリで忠実に再現させることもできます。
アプリのデザインを作るときは、DigiUIのようなウェブサイトやアプリでよく使われるデザインの部品集であるコンポーネントライブラリを使うと、より整った見た目でメンテナンスもしやすいデザインに仕上げられ
ます。
そしてデザインもプログラムのコードなので、リンターでデザインのルールを規定しておくと、AIがルール違反のコードを書いたときにエラーにしてデザインの統一性を守ることができます。
あなたもぜひ今回紹介したデザインコマンド、コンポーネントライブラリ、リンターによるデザイン整備を組み合わせて、直感的で使いやすくメンテナンスもしやすいアプリのデザインを作ってみてください。
次回は引き続きコンテンツ分析アプリの仕上げとリリース前のセキュリティ周りの対応を進めていきます。
概要欄にも今回の内容を解説した記事を貼っておきます。
それでは今日はこの辺で。