本記事では、Claude Designをどうやったらフル活用できるかを、1つの仮想プロジェクトを用いて試してみたので、その結果をシェアします！
まだClaude Designを使ったことがない方は、「ウワサのClaude Design、使ってみた」で基本的な使い方や機能・使用できるプランなどをご紹介しているので、ぜひご覧ください！
はじめに
Claude Designを実際に使用してみて、以下の7つのことができることがわかりました！
前半は主にデザイナーの方向けですが、後半は営業・エンジニアの方にもご活用いただける内容となっています！
- LP制作
- UI/UXプロトタイプ
- デザインシステムの作成
- 提案書・プレゼン資料作成
- アニメーション作成
- 操作ガイド・オンボーディング作成
- ブログの執筆
作成したプロジェクトでは「Skills and design systems」を押下すると、何を作りたいかによって、あらかじめ使用したいスキルを選ぶことができます。
今回スキルを指定した場合としなかった場合どちらも試してみましたが、プロンプトからの入力でも十分期待するものは作成される印象でした！
それでは、早速ご紹介します！
LP制作
はじめに、Claude Designの代表的な活用方法である「LP」を作成します！
今回は作りたいLPが具体的に決まっていない想定で、抽象的なプロンプトで試していきます！
旅行サイトのLPを作成したい
すると、具体的なイメージを確定するための質問を選択できるようになります。
提案してほしい案の数も指定することができます。
全て答えた内容がこちら
Questions answered: - service_type: 海外旅行・ツアーサイト - primary_goal: アプリダウンロード誘導 - target_audience: 20-30代カップル・ひとり旅 - visual_style: 写真メインの大胆なエディトリアル, 高級感・ダーク・シネマティック - destination_focus: ヨーロッパ - sections: ヒーロー（大きなビジュアル）, 検索フォーム, おすすめ特集・人気プラン, 目的地一覧, 口コミ・レビュー, 料金プラン, キャンペーン・割引 - variations: 2-3案を比較 - tweaks_interest: カラーパレット, フォント - language: 日本語 - boldness: Decide for me
自分で決めきれない答えに対しては、「Decide for me」を選択すると、勝手にClaude側で決めてくれます。
その結果、３案が完成しました！
Claude DesignにはTweaks機能というものがあり、カラーやフォントのパターンを表示することができ、選択を切り替えるだけでデザインを比較できます。
表示のON/OFFは切り替えが可能です！
このようにして、一瞬で3つのLPを作成することができました。
もちろんここからプロンプトでデザインを修正することもできますし、「Edit」モードにすると、GUIでフォントサイズやカラー、サイズなどの修正も行うことができます。
今回はライトカラーベースにしたかったので、修正を加えました。
UI/UXプロトタイプ
次に、「UI/UXプロトタイプ」作成に移ります。
今回は1で作成したLPのデザインをベースに、旅行予約アプリのプロトタイプを作成します。
この後ご紹介するデザインシステムも同時に作成したかったため、以下のようにプロンプトを入力。
次に、旅行予約アプリのプロトタイプを作成。Aのシネマティック・エディトリアルのデザインをベースにしたい。 デザインシステムも作成
すると、再度質問票が出てくるので選択していきます。
答えた内容がこちら
Questions answered: - platform: iOS (インストールされたアプリをiPhone上で) - main_flow: 検索 → 目的地詳細 → プラン選択 → 予約確認 → 完了 - screen_count: コアフロー4-5画面に集中 - interactivity: フルインタラクティブ（アニメーション・ジェスチャー付き） - screens_to_include: ホーム（Today / Discover）, 検索・検索結果, 目的地詳細, プラン詳細, 旅程（Trip / Itinerary）, 支払い・確認, 予約フロー（日程や人数選択）, コンシェルジュチャット, マイページ・保存した旅, 設定 - variations_count: 2-3パターンを比較（主要画面のもの） - ds_scope: Decide for me - ds_presentation: 1ページに全部並べる（スクロール型ドキュメント） - tone_check: 高級感は維持したまま、ライトテーマに - device_frame: iOSデバイスフレーム付き（ステータスバー・ボトムバーあり） - ds_relationship: プロトタイプを作り、そこからデザインシステムを抽出
作成されたプロトタイプがこちら。
主要画面のデザインを比較したいと答えたので、以下のようにパターンが出力されました。デザインのトーンもLPと合っていました。
もちろんインタラクティブにも確認することができました。
このようにして、LPのデザインをベースに、旅行アプリを作成することができました。
作成したプロトタイプはClaude Codeに簡単に移行できるので、スムーズに本実装に入れる点がClaude Designの大きなメリットです。
デザインシステムの作成
次に、開発や今後の機能拡張に備えて「デザインシステム」を作成します。
デザインシステムの作成は、通常初期画面で「Design System」を選択するとClaude側で使用するスキルを選択してくれます。
今回は、先にプロトタイプでイメージを確定させてから、デザインシステムを作成する流れにしました。
プロトタイプを作成したときに表示されたデザインシステムに関する質問は、このような内容でした。
今回は「1ページに全部並べる（スクロール型ドキュメント）」ようにしたため、以下のようなデザインシステムを作成することができました。
出力方法については、プロジェクトや好みで変えられます。
デザインシステムの中身も今回はお任せにしたため、「Color, Type, Spacing & Radii, Icons, Buttons, Cards」などですが、必要な要素を指定することももちろん可能です！
このデザインシステムを元に、機能追加や改修を行うことができるため、通常スケジュールに余裕が無いプロジェクトでは怠りがちな進行中のプロジェクトのデザインシステムも、
素早く整備することができる点が良いなと思いました！
提案書・プレゼン資料作成
次に、これら一連の提案内容をクライアントや社内向けにプレゼンするための「提案書」を作成します。
次は、LPとアプリを合わせて提案書を作成したい
いつものように質問に答えます。
以下が答えた内容です。
Questions answered: - audience: クライアントへの制作提案書（デザイン会社→企業様） - format: スライドデッキ（16:9 フルスクリーン） - length: コンパクト (8-10スライド / 短めのドキュメント) - sections: Decide for me, LPデザイン（3案比較 or 定稿）, ブランド・デザイン方針, コンセプト・価値提供, 背景・課題, タイトル / 表紙, ターゲットユーザー, アプリ・主要画面紹介, コンテンツ戦略（特集・ジャーナル等のセグメント）, 見積り・予算, スケジュール・チーム体制 - lp_in_proposal: 3案を並べてクライアントに選んでもらう - app_in_proposal: 両方の見せ方 - tone: ビジネスよりに整えたトーン（提案書らしさ重視） - include_video: 使わない
スライドもhtmlで作成されるため、LPと同様に、Editモードで「修正箇所を指定→修正」ができます。
完成した資料がこちら
スライドを作成する際にLPのデザイン要素や意図を0から抽出する必要がなくなるため、土台がある状態でアップデートしていけるのはありがたいです。
また、スライドに載せたいことはデザインを作成する過程でプロンプトや質問を通して言葉にしていることもある（例：〇〇をターゲットとしたデザインを作成したいため、画面遷移は多くても3回とし、知りたい情報にすぐに辿り着ける導線にしたい）ため、改めて整理する手間が省ける場合があるなと思いました！
アニメーション作成
続いては、「アニメーション動画」の作成です。
先ほど作った旅行アプリの紹介動画を作成します。
次に、このアプリの紹介アニメーション動画を作成したい
いつものように、質問が表示されます。
こちらが答えた内容です。
Questions answered: - duration: 15秒 — インスタストーリー型 - aspect: 16:9 ランドスケープ (1920×1080) — Web/プレゼン用 - structure: オープニング — ブランドロゴとコピーで世界観を提示, 写真シーケンス — ヨーロッパの風景, 予約完了シーン — 「旅がはじまります」 - motion_style: ダイナミック（カットやズームをテンポよく） - voice_lang: 日本語中心 - show_app: アプリの中身（画面）をしっかり見せる - variations_anim: 1本をしっかり - scrubber: あり（スクラブしてシーン検証したい）
そして完成したのがこちら！
0から作ろうと思うとかなりの時間がかかりますが、これも一瞬でできてしまいました。
操作ガイド・オンボーディング作成
今回はオペレーションマニュアルを作成します。
ターゲットユーザーやフォーマットを変えることで、異なる目的の資料が作成できるかと思います。
作成したアプリの操作ガイド資料を作成したい
質問に対する回答。
Questions answered: - format: スクロール型ドキュメント（1ページ長・Web閲覧型） - audience: VOYANT社内スタッフ向けのオペレーションマニュアル - tone: 親しみやすいチュートリアルトーン（イラスト・説明重視） - sections: Decide for me - depth: ステップバイステップ中心（番号付き手順重視）
生成結果です。
今回は作成していませんが、管理画面がある場合は管理画面の使用方法に関する情報もマージをしてひと流れにすることで、より実用的な資料になります。
ブログの執筆
最後に、今回作成した6つの異なるアウトプットをまとめた「ブログ記事」を作成してみます。
技術検証系のブログなどは、試行錯誤を載せていくと執筆にかかる時間が長くなりがちですが、その試行錯誤の過程もClaude Design上にあるので思い出す手間が省けます。
LP・プロトタイプ作成から、資料作成までの一連の流れについてブログ記事を作成したい
Questions answered: - voice: 一人称・デザイナー視点（「今回、VOYANTという仮想ブランドの仕事をしている間に」） - audience: デザイナー・同業者向け（プロセス・見せ方の学びを重視） - length: コンパクト (4-6セクション / 5分読んで終わる) - include: うまくいったポイント, プロセスの背景・意図, 試行錯誤・迷ったところ, 学び・振り返り, 使用したツール・手法, 各成果物へのリンクカード - tone: Medium・Note・社外報道と同じフラットな事例記事調
できたブログがこちらです！
今回は修正を重ねたり、要件の提示をほとんど行っていないため、ブログの内容としては浅いですが、
それぞれの工程で発生した修正や要望が入れば入るほど、それらを汲み取ってブログとしてまとめられるのは、かなり効率的だと感じました！
ただし、実際のプロジェクトではプライバシーの観点からなかなか全てをオープンにするのは厳しく、今回のように仮想のプロジェクトを作成する場合や、公開できる情報のみが集約されているプロジェクトの場合に限られるかなと思います。
まとめ
いかがでしたでしょうか？
このようにして、Claude Designを活用することで、最初の提案資料からエンドユーザー向けの資料まで、一気通貫で作成できてしまうことがわかりました。
現状の注意点として、Claude Design上で完結させようとすると、後半になるにつれて生成にかかる時間が長くなる印象もありました。
Claude Designのスタート画面でも、1つのプロジェクトに対して1つのアウトプットを促すような画面にも感じました。（プロトタイプ、スライド など）そのため、1つのプロジェクトで複数のアウトプットを行うのは、現時点ではバージョンを切り分けるなど少し工夫した方が良いかもしれません。
しかし、もちろん人間の手で手直しをする必要がありますが、これまでは一つのプロジェクトに対して、異なる役割の人が異なるアプローチで作成していた提案から開発、それに伴う資料作成等を、Claudeという共通のプラットフォームを介することで一気に効率化できるのではないかと可能性を感じました！
最後まで読んでいただきありがとうございました！
簡単30秒