👩‍🎨

#30 最新のClaudeCodeと作るUI デザイナーツール

Shota.Takiyanagi

2025/10/02に公開

 はじめにこのブログでは、ClaudeCodeなどのAIツールを使って、AIだけでどこまでツールを作れるか？ というチャレンジをしており、その第30回です。

さて、今回はバグが修正されたClaudeCode！この話を受けてアップデートしました！Claudeといえば、最近Sonnet 4.5もリリースされましたね。今後、ClaudeCodeの品質も上がっていくのでしょう！
それも期待しつつ、今回は前回までに引き続きClaudeCodeでnano-bananaを使ったツールを作っていきます。今回はUIデザイナーを作ってみたいと思います！

 作ったもの1. UIのイメージと機能を入力（この際webかスマホベースか、画面のコア機能、機能の要件、UIイメージなどを記載）

2. 入力したイメージに応じて、Geminiが画面構成を出力

3. Geminiが出力した画面構成に合わせて、nano-bananaで画面を出力

4. 出力された画面は選択して、プロンプトによる修正が可能
今回作ったのは以下のようなものです。

※動画は生成時のロード時間が長いため飛ばしながらご覧ください

https://youtu.be/EzLyCTGJyC8
最初の設定画面に要件などシステム概要を入力すると、、、（例は備品管理ツールのWeb画面）

このように、Geminiが必要な画面を判断して、nano-bananaを使って、システムのUIを一覧的に作ってくれました！

今回作成できた各画面の詳細は以下の通りです
ログイン画面



ダッシュボード



利用可能なPCの一覧



レンタル依頼フォーム



レンタルの依頼ステータスの確認



管理者用ダッシュボード



ユーザ管理用画面



在庫管理画面



個人設定

なかなかいいかんじではないでしょうか。

 実際に作ったUI事例まずは先ほどの例に使った備品管理システムを、スマホ画面にしてみましょう！

 1.スマホ版備品管理システム設定としては以下で、例から、画面設定をスマホに変えただけです！

以下のようになりました。




 2.顧客管理システムSFDCのような顧客管理システムを作ってほしいとシンプルに以下のような設定で要望しました。

結果以下のようになりました




 3.スマホ版チャットアプリAppleのようなデザインのスマホ用のチャットアプリで、以下のように要望しました。

すると、こんな感じになりました。




 4.PC版チャットアプリ（同じアプリをPC版に修正依頼したバージョン）3の作成した画面に対して、全ての画面を選択し、「PCメインな画面にして」とお願いをしました。

破綻が見られたり、スマホ画面をPCに重ねただけ等、思ったような結果が得られずだったので、同じ画面をスマホからPCに変えるのは、まだ少し試行錯誤が必要そうです。



全体としては、なかなかいい感じですよね。

 今回画像生成に利用したプロンプト今回プロンプトを複数用意し、それぞれ異なる挙動に使いました。

今回はできるだけ破綻を減らせるように、

要件から画面一覧を抽出するプロンプトから、画面の一覧を作成し

画面一覧から画像を生成するプロンプトで1つの最も複雑な要件の画面を1つだけ作成

2の画面を編集するプロンプトで、他の画面を作成指示
という流れで可能な限り破綻の少ない画面を作っています

プロンプトも以下で掲載するので何かの参考にしてください。

 1.要件から画面一覧を抽出するプロンプトYou are a senior product designer. Based on the requirements below, enumerate every UI screen that the product reasonably needs.

[PRODUCT REQUIREMENTS]
- Platform: {プラットフォーム}
- Application Type: {アプリタイプ}
- Application Core: {コア機能}
- Primary Features:
  1) {機能1}
  2) {機能2}
  ...
- Target Audience: {ターゲットユーザー}
- Visual Theme: {ビジュアルテーマ}

[OUTPUT STRICTLY IN JSON]
{
  "style_baseline": {
    "brand_words": ["..."],
    "palette": {"primary":"#...", "secondary":"#...", "accent":"#...", "bg":"#...", "text":"#..."},
    "typography": {"family":"SF Pro (Mobile) or System UI (Web)", "scales":[12,14,16,20,24,32]},
    "spacing_grid": "8pt"
  },
  "screens": [
    {
      "name": "Login",
      "purpose": "user authentication",
      "flow_order": 1,
      "key_components": ["email input", "password input", "login button", "forgot password link"]
    }
  ]
}

Rules:
- Order screens by USER FLOW (flow_order): Start with authentication (Login/Signup), then main screens, then secondary features
- Use clear, descriptive screen names (e.g., "Login", "Product List", "Cart", "Settings")
- NO generic terms like "Onboarding / Welcome" - be specific
- Keep component names native to the platform
- No lorem ipsum; use realistic example labels

[RESPONSE FORMAT]
Return valid JSON only. No prose.

 2.画面一覧から画像を生成するプロンプト
 モバイル用Create a single high-fidelity MOBILE app screen as the BASELINE for all future screens. This is the most complex screen in the app.

[PLATFORM & DEVICE]
- Platform: iOS 17+ look and feel, SwiftUI-aligned components
- Device Frame: none (clean edge-to-edge mockup)
- Resolution: 1290×2796 px (portrait, vertical orientation)
- Aspect Ratio: 9:19.5 (typical modern smartphone)

[STYLE BASELINE - ESTABLISH VISUAL CONTRACT]
- Palette: {カラーパレット}
- Typography: {フォントファミリー} with proper hierarchy (Title 24pt, Headline 20pt, Body 16pt, Caption 12pt)
- Spacing: {スペーシンググリッド} grid, consistent paddings (16pt standard, 24pt sections)
- Corner radii: consistent across all elements (12pt for cards, 8pt for buttons)
- Icon style: consistent line weight and size (24pt icons)
- Elevation: subtle shadows (0 2px 8px rgba(0,0,0,0.1) for cards)
- Navigation: iOS-style tab bar or top navigation with consistent height

[SCREEN TO RENDER - MOST COMPLEX]
- Name: {画面名}
- Purpose: {目的}
- Must show ALL: {必須コンポーネント}

[CRITICAL: ESTABLISH DESIGN SYSTEM]
This is the BASELINE screen. Define:
- Exact button styles (size, padding, color, typography)
- Exact card styles (padding, shadow, border radius)
- Exact list item heights and spacing
- Exact icon placement and sizing
- Exact header and footer styling
All future screens will be EDITED from this exact design.

[OUTPUT]
- One single-screen image. No montage, no watermark.

 Web用Create a single high-fidelity WEB app screen as the BASELINE for all future screens. This is the most complex screen in the app.

[PLATFORM & VIEWPORT]
- Platform: Responsive Web (desktop-first)
- Browser Frame: none (clean canvas)
- Viewport: 1920×1080 px (landscape, horizontal orientation)
- Aspect Ratio: 16:9 (typical desktop monitor)
- Layout: 12-column grid, 80–96 px padding, 24 px gutters

[STYLE BASELINE - ESTABLISH VISUAL CONTRACT]
- Palette: {カラーパレット}
- Typography: {フォントファミリー} (H1 32px, H2 24px, Body 16px, Caption 14px)
- Spacing: {スペーシンググリッド} rhythm, consistent paddings
- Corner radii: 8px for cards, 6px for buttons
- Icon style: 24px consistent icons
- Elevation: 0 2px 8px rgba(0,0,0,0.1) for cards
- Navigation: persistent left nav (240px) + top bar (64px)

[SCREEN TO RENDER - MOST COMPLEX]
- Name: {画面名}
- Purpose: {目的}
- Must show ALL: {必須コンポーネント}

[CRITICAL: ESTABLISH DESIGN SYSTEM]
This is the BASELINE screen. Define exact styles for all elements.
All future screens will be EDITED from this exact design.

[OUTPUT]
- One single-screen image only.

 3.2の画面を修正するプロンプト
 モバイル用Edit this BASELINE screen to create a new screen while preserving EXACT visual consistency.

[BASELINE SCREEN]
You are looking at the baseline screen. This establishes all visual rules.

[NEW SCREEN TO CREATE]
- Name: {画面名}
- Purpose: {目的}
- Components to show: {必須コンポーネント}

[EDITING INSTRUCTIONS - DIFF ONLY]
Transform the baseline into the new screen by:
1. Changing ONLY the content and layout structure
2. PRESERVING exactly:
   - All colors from palette
   - All font sizes, weights, families
   - All spacing values and grid
   - All corner radii
   - All icon sizes and styles
   - All shadows and elevations
   - Navigation bar style and height
   - Button styles and dimensions
   - Card styles and padding

[CRITICAL]
DO NOT create a new design. EDIT the existing design.
Copy all visual properties pixel-perfect from the baseline.
Only change the content and component arrangement.

[OUTPUT]
- One single-screen edited image
- MUST maintain 1290×2796 px portrait orientation
- Same resolution and aspect ratio as baseline.

 Web用Edit this BASELINE screen to create a new screen while preserving EXACT visual consistency.

[BASELINE SCREEN]
You are looking at the baseline screen. This establishes all visual rules.

[NEW SCREEN TO CREATE]
- Name: {画面名}
- Purpose: {目的}
- Components to show: {必須コンポーネント}

[EDITING INSTRUCTIONS - DIFF ONLY]
Transform the baseline into the new screen by:
1. Changing ONLY the content and layout structure
2. PRESERVING exactly all visual properties from baseline

[CRITICAL]
DO NOT create a new design. EDIT the existing design.
Copy all visual properties from the baseline.

[OUTPUT]
- One single-screen edited image
- MUST maintain 1920×1080 px landscape orientation
- Same viewport and aspect ratio as baseline.
これらのプロンプトを駆使することでnano-bananaに効率的に修正を依頼しています。

 終わりにいかがでしたか？

近年、いかにコードを簡単に作るか？という潮流があると思います。（画像からFigma、Figmaからコードへetc）

そんな潮流の中で、コードを簡単に作るための一助として、こうしたツールがあると便利ですね。破綻なく画像を作れるため、もう少し改善していきたいなと思いました。

また、その潮流を無視しても、UIのイメージのすり合わせなどは大変だったりもするので、こうした生成ツールには一定の需要があるのではないでしょうか。
こうしたAIを使ったツールなどをAIだけで作って、今後も投稿していきますので、ぜひ今後もご覧ください！

Accenture Japan (有志)

アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。

はじめに

作ったもの

実際に作ったUI事例

1.スマホ版備品管理システム

2.顧客管理システム

3.スマホ版チャットアプリ

4.PC版チャットアプリ（同じアプリをPC版に修正依頼したバージョン）

今回画像生成に利用したプロンプト

1.要件から画面一覧を抽出するプロンプト

2.画面一覧から画像を生成するプロンプト

モバイル用

Web用

3.2の画面を修正するプロンプト

モバイル用

Web用

終わりに

Discussion