AI駆動開発によって、コードを書く体験は大きく変わってきました。
では、エンジニアが苦手意識を持ちやすい「UI作り」はどう変わるのでしょうか。
今回はClaude Designを使い、デザイン案の作成からClaude Codeでの実装までを試してみました。
画面のたたき台を作るだけでなく、既存アプリに自然に組み込めるのかまで見ていきます。
1. はじめに
先日、社内向けに「Claude Designで加速する個人開発」というテーマで勉強会を開催しました。この記事は、その内容をもとに再構成したものです。
個人開発をしていると、「ロジックは書けるけれど、画面の見た目がいまひとつ決まらない」と感じることがあります。私自身、普段の個人開発ではGeminiなどのGoogle系AIツールを中心に使っており、実装面ではかなり助けられています。
一方で、最近はClaude周辺の開発体験も大きく変わってきています。そこで今回は、小規模開発でどこまで使えるのか、そしてチーム開発にも応用できるのかを確かめるために、新機能「Claude Design」を試してみました。
実際に触ってみると、デザイン案を作るところから実装に落とし込むところまで、かなり自然につなげられることが分かりました。エンジニアだけで画面の初期案を作りたい場面や、チームでUIの方向性をすり合わせたい場面で、実用的な選択肢になりそうです。
この記事では、勉強会で行った「30分ほどのAI駆動開発ライブ」の内容を交えながら、Claude Designを使うとどこまで開発を進められるのかを紹介します。
2. エンジニア目線で感じたClaude Designの3つの変化
Claude Designを触ってみてまず感じたのは、単に見た目の画像を作るツールではないということです。
エンジニアにとって使いやすいのは、出力されたものをそのままプロトタイプとして確認でき、実装にもつなげやすい点にあります。
① 「画像」ではなく「構造」を生成する
従来の画像生成AIでは、画面イメージを1枚の画像として出力するのが一般的でした。
一方、Claude Designが返すのはHTML/CSS/Reactで構成されたプロトタイプです。
出力された画面はその場でクリックして動作を確認できます。
単なる完成イメージではなく、実装のたたき台として扱えるため、エンジニアにとってはかなり使いやすいと感じました。
② デザインシステムを既存資産から読み取れる
個人的に特に面白かったのが、既存のリポジトリやデザイン資産をもとに、配色・フォント・コンポーネントの傾向を読み取ってくれる点です。
ゼロからデザインルールを作るのではなく、すでにあるコードや画面の雰囲気に寄せてくれるため、「AIが作ったそれっぽいデザイン」になりにくいのが良いところです。
既存サービスに新しい画面を追加する場合でも、全体のトーンから大きく外れにくく、初期案を作るスピードはかなり上がりそうです。
③ 「一発生成」ではなく、対話しながら詰められる
Claude Designは、最初のプロンプトだけで完成形を狙う使い方よりも、出てきた画面を見ながら少しずつ調整していく使い方に向いていると感じました。
Tweaksを使えば、余白や色、レイアウトをスライダー操作で切り替えられます。
また、キャンバス上の要素を直接指定して、「このボタンをもう少し目立たせたい」「このエリアの余白を広げたい」といった修正も依頼できます。
Tweaksとは？
プロンプトを書き直すことなく、スライダーやボタンなどの直感的なUI操作だけでデザインを即座に修正できる機能です
コードを書く前に、画面の方向性を見ながら調整できるので、デザインに苦手意識があるエンジニアでも進めやすいです。
「まず作ってみて、見ながら直す」という流れを、AIと一緒にかなり自然に進められる印象でした。
3. 実践デモ①：既存資産を引き継いだAI駆動開発ライブ
勉強会では、架空のラーメン記録アプリ「Ramen Diary」を題材に、既存のデザインを崩さずに新機能を追加するデモを行いました。
今回作成したのは、ラーメンの投稿作成ページです。
すでにある画面の雰囲気を保ちながら、新しいページをどこまで自然に追加できるのかを確認しました。
使用した技術構成
デモアプリでは、以下の構成を採用しました。
- Framework: Next.js 16（App Router）+ Tailwind CSS v4
- Infrastructure: Cloudflare Workers（OpenNext）
Cloudflareの無料枠を活用することで、小さく始めやすく、検証用途でも扱いやすい構成にしています。
今回はデモ用のアプリなので、バックエンドは作り込まず、モックデータで動作させる形にしました。
ただ、Cloudflareを使えばフロントエンド、API、データベースまでまとめて構成できます。小規模なプロトタイプから段階的に育てていく開発とは、かなり相性のよいスタックだと感じています。
デザイン実装
今回は、事前に用意したデモアプリ（Ramen Diary）のGitHubリポジトリをDesign Systemとして読み込ませました。Claude Designがソースコードを解析し、そこからデザインのルールを抽出した上でプロトタイプを生成する流れです。
Design System（デザインシステム）とは？
ブランドの配色、フォント、およびボタンやカードといった再利用可能なUIコンポーネントのルールを定義した「仕組み」のことです
これにより、一から指示しなくても、自社ブランドに適合した「AIっぽくない」高品質な成果物が得られます
デザインシステムを読み込ませたら、次はClaude Designに「何を作るか」を伝えます。 勉強会では、参加者を巻き込みながら、以下のフォーマットに沿って一緒にプロンプトを作成しました。
- 1.どんな画面か
- 2.何を入力するか
- 3.どう見せるか
完成したプロンプトは以下です。
画面: 投稿作成 (/posts/new)
1. どんな画面
訪問したラーメン店の感想を1件投稿する画面。出すとホームに反映される。
2. 何を入力する
・店名
・感想
・評価
・写真
3. どう見せる
・写真をメインで見せたい
・評価は星で5つが満点
・麺の太さをアイコンで表現する
このプロンプトを実行すると、数分ほどで投稿作成ページのデザイン案が生成されました。
生成された画面にはTweaksというフローティングパネルが表示されており、提案されたデザインをその場で切り替えたり、細かく調整したりできます。
今回はデフォルトの状態でも十分に使えそうだったことと、ライブデモの時間も限られていたため、大きな調整はせずにそのまま進めました。
Handoff：デザインから実装へつなぐ
Claude Designで作成したプロトタイプは、Handoff bundleとして書き出し、Claude Codeへ連携できます。
Handoff bundleには、見た目の情報だけでなく、デザインの意図や文脈も含まれています。
そのため、Claude Code側では単に画面を再現するだけでなく、既存のコンポーネントやデザインの雰囲気に合わせた実装を進めやすくなります。
連携方法はWeb版とCLI版の両方に対応していますが、今回のデモではローカル環境での動作確認のしやすさを重視し、CLIを使って実装しました。
Handoffされた情報をもとに、Claude Codeは既存コンポーネントとの整合性を見ながら、投稿作成ページのコードを生成しました。
結果として、Claude Designでのデザイン作成からClaude Codeでの実装、Cloudflareへのデプロイまでを30分以内で確認できました。
もちろん、そのまま本番投入できる品質かどうかは別途レビューが必要です。
ただ、初期実装のたたき台を作るスピードはかなり速く、個人で小さく試す場面から、チームで画面イメージをすり合わせる場面まで使えるワークフローだと感じました。
4. 実践デモ②：ゼロベースから画面を考える
このデモは、前章のAI駆動開発デモの待ち時間を使って行ったものです。
参加者からアイデアを募り、その場でプロンプトを組み立ててClaude Designに投げ、生成されたデザインを確認するところまでをゴールにしました。
題材にしたのは、来日した外国人向けの「日本酒アプリ」です。
既存のデザイン資産がない状態で、ゼロからどこまで画面の方向性を形にできるのかを試しました。
まずはプロンプトを組み立てる
今回は、参加者と相談しながら、以下のようなプロンプトを作成しました。
食べログ風の「日本酒」の Web アプリをデザインして。使うのは主に来日した外国人観光客。
一番大事な体験は「探している日本酒を見つける」こと。
日本酒ランキング画面を1枚作ってほしい。
画面には 評価・点数 / 写真サムネ / 地図 を入れて。
来日外国人向けなのでラベルは英語（日本語併記）想定。
トーンは和モダン（藍＋生成りの落ち着いた配色）で。
PC とモバイルの両方を出して。
内容としては、次の要素を入れています。
- 何を作るか：食べログ風の日本酒アプリ
- 誰が使うか：来日した外国人観光客
- 何を重視するか：探している日本酒を見つけやすいこと
- 画面に入れたい要素：評価・点数、写真サムネイル、地図
- どんな見た目にしたいか：和モダン、藍と生成りを基調にした落ち着いた配色
- 対応する画面サイズ：PC とモバイル
ゼロから画面を考える場合でも、このくらいの粒度で方向性を言葉にできると、かなり進めやすいと感じました。
対話しながら前提を固めていく
Claude Designにプロンプトを渡すと、いくつか前提を確認しながら進んでいきました。
今回は、フィルタや並び替えが動くインタラクティブなプロトタイプにし、画面はリストを主役にして右側に地図パネルを置く構成にしました。地図は、背景画像の上にピンと番号を重ねる表現です。
表示内容は、獺祭・久保田・十四代などの実在する有名銘柄を使い、英語を主にしつつ、日本語名とローマ字も併記する方針にしました。
フィルタには味わい、種類、産地、価格帯、現在地周辺で飲める・買えるかどうかを入れ、ランキングは10件表示にしています。
このように質問に答えていくだけで、最初はざっくりしていた日本酒アプリのイメージが、かなり具体的な画面案に整理されていきました。
最初から細かい仕様を書き切らなくても、対話しながら前提を詰められるのは便利だと感じました。
まずはデザインのたたき台を出すのに向いている
このデモでは、最終的に生成されたデザインを確認するところまでをゴールにしました。
短い時間でも、ターゲット、必要な情報、画面の雰囲気を整理して伝えれば、十分にたたき台として使える案が出てきます。
特に、既存資産がない状態で「まず何を作るか」を形にしたいときには、Claude Designの使いどころが分かりやすいと感じました。
5. 使ってみて分かったこと
Claude Designはかなり便利でしたが、使ってみる中でいくつか気づいた点もありました。
生成されたものは、たたき台として見る
生成された画面やコードは、そのまま完成品として扱うよりも、最初のたたき台として見るのがよさそうです。
見た目はかなり整っていますが、細かい実装方針やコンポーネントの切り方、アクセシビリティ、レスポンシブ対応などは、最終的に人間が確認する必要があります。
とはいえ、ゼロから作るよりもかなり速く形にできるので、レビュー前提で使う分にはとても心強いです。
何度も試すなら、少し準備しておくと安心
デザイン生成は試行錯誤しやすい反面、何度もやり直すと利用枠を消費しやすい印象がありました。
特にライブデモや勉強会で使う場合は、ある程度プロンプトや題材を用意しておくと進めやすいです。
今回も、画面のテーマや入力項目を事前にある程度決めていたことで、短い時間でもスムーズに試せました。
渡す情報は事前に確認する
既存のリポジトリやデザイン資産を読み込ませると、かなり実用的なアウトプットにつながります。
一方で、実際の業務プロジェクトで使う場合は、渡してよい情報かどうかの確認は必要です。
顧客情報や個人情報、非公開の仕様などが含まれていないかは、事前に見ておいた方が安心です。
便利なツールだからこそ、扱う情報には気をつけながら使いたいところです。
6. まとめ：デザインに苦手意識があるエンジニアほど試す価値がある
今回のデモを通して、Claude Designは単なるデザイン生成ツールではなく、アイデアを画面に落とし込み、実装へつなげるためのワークフローとして使えると感じました。
特に印象的だったのは、既存のデザイン資産をもとにプロトタイプを作り、そのままClaude Codeへ引き継げる点です。
デザインと実装の間にある距離が、これまでよりかなり短くなった感覚がありました。
もちろん、生成されたものをそのまま本番投入できるわけではありません。
それでも、最初のたたき台を作るスピードは大きく変わります。
新しい画面を作るとき、見た目の方向性がなかなか決まらず手が止まることがあります。
また、チームで開発する場合も、画面イメージの認識合わせに時間がかかることがあります。
Claude Designは、そうした「最初の一歩」をかなり軽くしてくれるツールだと思います。
「デザインが苦手だから作れない」と感じていたエンジニアにとって、アイデアを形にするハードルは確実に下がってきています。
まずは小さな画面から試してみるだけでも、開発の進め方が少し変わるはずです。
最後に、今回の勉強会で使用したデモアプリとGitHubリポジトリを載せておきます。 Claude DesignやClaude Codeを使った開発の流れを確認する際の参考になれば幸いです。
- デモアプリ: https://claude-design-sandbox.kl-to.workers.dev/
- GitHubリポジトリ: https://github.com/tohara811/claude-design-sandbox
KIYOラーニング株式会社について
当社のビジョンは『世界一「学びやすく、分かりやすく、続けやすい」学習手段を提供する』ことです。革新的な教育サービスを作り成長させていく事で、オンライン教育分野でナンバーワンの存在となり、世界に展開していくことを目指しています。
プロダクト
- スタディング：「学びやすく・わかりやすく・続けやすい」オンライン資格対策講座
- スタディングキャリア：資格取得者の仕事探しやキャリア形成を支援する転職サービス
- AirCourse：受け放題の動画研修がついたeラーニングシステム（LMS）
KIYOラーニング株式会社では一緒に働く仲間を募集しています