1. はじめに

今やエンジニアのためだけのツールではなくなってきた、Claudeを使用するとどれだけUI作成が効率化できるのか。

効率化されていることはわかっていても、どれくらい効率化されているか疑問に思ったため、今回は実際にタイマーを用意してタイムアタックを実施しました！

本ブログではその結果と、どのようにしてClaude Codeで効率化させられたかを共有します！

2. 前提情報

今回は以下の条件のもと、検証を行いました。

【共通ルール】

今回作成するユーザー管理画面：一覧画面・追加・編集・削除が可能

機能要件は定義済みで、既に他の画面が作成されているため、それらの画面との一貫性が求められる。

【人間（UIデザイナー）】

  • Figmaを使用
  • オートレイアウトなどの調整はある程度行うところまでがゴール
  • AIの使用は禁止（ダミーデータの生成も含めて）

【Claude Code】

  • Sonnet 4.6を使用
  • マスター画面のデザインルールをまとめた「ガイドライン（.md）」をインプット済み。（以下で詳細を説明）
  • 既存のソースコードやディレクトリ構造をスキャンできる状態で実行
  • プロンプトで機能要件を入力　→ プロンプトで微調整

 3. 結果発表

プレイヤー かかった時間
人間 1時間32分
Claude Code 5分06秒

結果は見ての通り、Claude Codeの圧倒的な勝利でした。

私が手作業で作成したデザインの時間のおおよそ　5.5%で完了していました！

「どのコンポーネントを使い、既存の余白はどうなっていたか」などを確認している間に、Claude Codeは一瞬でコンテキストを理解し、コードを書き終えていました。
もちろん、今回はシンプルな構成だったためAIが有利な面もありましたが、AIの強みが顕著に出た結果と言えます。

次回は、もう少し画面の要素が曖昧なデザインで比較してみても面白いかもしれません。

さらに、Claude Codeなのでもちろんコードを生成してくれています。
この後エンジニアがコーディングを完了するところまでを検証してみると、結果の差はさらに広がるでしょう。

4. Claude Code で UIデザイン制作のtips

前述した通り、Claude CodeでUIを作成するときに、マスター画面専用のガイドラインを作成しました。

1. 「ついで」に更新する、手間をかけないガイドライン作り

ガイドラインといっても、最初から気合を入れて作り込む必要はありません。私が実践していたのは、開発を進める中で「このUIは他の画面でも統一したい！」と思った瞬間に、プロンプトで

「今のルールを、マスター画面のガイドラインに追記」

こう入力するだけです。わざわざドキュメントを開いて編集する手間はなく、気づいたときにAIに追加してもらう。この「ついで」の感覚で進めることで、自然と実用的なガイドラインを作成することができました。

2. システム全体との関連

実際には、マスター画面用とは別に「システム全体のガイドライン（フォントやカラー定義など）」を別ファイルで用意し、常に参照させるようにしています。

システム全体＋マスター画面の詳細ルールを組み合わせることで、意外と生成AIを用いたUI作成の時に手間になる微修正が減り、ブレの少ないデザインに仕上げることができます。

3. 実践したデザイン作成のフロー

今回Claudeを活用した作成での具体的な制作フローは以下の通り、驚くほどシンプルです。

  1. ガイドラインの提示： 作成済みのガイドラインに沿ってデザインするよう指示。
  2. 要件の投入： 要件定義の内容をそのままプロンプトにコピペ。
  3. 微調整： 出来上がったものに対して、プロンプトで細部を調整。

実際に記載したガイドライン（一部抜粋）

件数表示

{displayedItems.length} 件中 {Math.min((currentPage - 1) * ITEMS_PER_PAGE + 1, ...)} 件表示 setShowInactive(!!checked)} />

・件数表示は全マスター画面で必須 ・形式: {n} 件中 {min}〜{max} 件表示（text-xs text-muted-foreground）
・「無効データを含めて表示」チェックボックスは件数表示の横（左寄せ）に配置
・ラベルは font-normal（shadcn Label のデフォルト font-medium を上書き）

テーブル

・ヘッダー背景: bg-[#494949]、テキスト: text-[#fafafa] text-[14px]
・ヘッダーのホバー背景色変更なし
・データ行高: h-[44px]、ホバー: hover:bg-neutral-100 dark:hover:bg-neutral-800
・無効行は opacity-50 でグレーアウト（全マスター画面で統一）
・td のテキストカラー・サイズは全列統一（text-[14px]）
・テーブルに渡すデータはフィルター・ページネーション済みの pagedItems

追加・編集モーダル

・有効: bg-blue-600 text-white / 無効: bg-gray-400 text-white
・編集アイコンは Pencil で統一（Edit アイコンは使わない）
・無効ステータスの行は、編集・削除ボタンともに disabled（特に指示がない限り）
・削除ボタンのホバー: bg-destructive/10、disabled時: text-gray-300

5. まとめ

デザイン制作の場において、生成AIによって実際にどれくらい効率化されるのかを数値化したかったので、今回の検証はとても面白かったです。

もちろん、制作する画面の内容やデザイナーのスキルによって結果は大きく左右されると思いますが、今回のようなシンプルな画面の場合、人間がスピードで勝つのはかなり難しいと感じました。

ただ、人間がガイドラインを作成して「仕組み化」することや、今回は紹介していない「Claude Code to Figma」を使用してデザインと開発のサイクルをより効率化すること。
また、デザインシステムに基づく他画面との整合性のチェックや細かな調整などは、人間がやることでより良いデザインになるのではないかと思いました。