はじめに
みなさんこんにちは。株式会社インプルの岩崎です。
今回はClaude Designのお話です。Opus4.7の性能アップで、ついにデザイン領域にもじわじわとAIが侵食してきています！
Claude Designとは
Anthropic Labsが2026年4月17日に公開した新製品で、デザイン・プロトタイプ・スライド・ワンページャーなどのビジュアル制作をClaudeと一緒に行えるツールです。
デザインの知識がないファウンダー、プロダクトマネージャー、マーケターがアイデアをビジュアルとして共有するために開発されました。
先日公表された、Claude Opus4.7 リリースによる、モデルの性能アップで実現したもので、Claude DesignはOpus 4.7という新しいAIモデルを搭載しており、AnthropicのAIモデルの中で最も高度なビジョン（画像認識）能力を持っています。より高解像度で画像を認識でき、プロフェッショナルなタスクにおいて「より洗練されたクリエイティブな出力」ができるとされています。
類似のAIデザインツール
AIメインのデザインツールとして、最近はいくつものツールが出ています。
デザインといえばFigmaでしたが、AIがメインで作ってくれるツールでは、そのほかにも選択肢が出てきます。
Stitch（Google）
まず最初に、Stitchです。
Googleが出しているデザインAIツールで、チャットに作りたいデザインを記入すると、そのデザインを作ってくれます。基本的には、PCやモバイルアプリのデザイン用で、今回紹介するようなClaude Designのような、グラフィックを作ってくれるものではありません。
使用レポなど記事にまとめていますので、よければご覧ください。
Pencil
続いて、Pencilです。
こちらは、まだ使ったことがないのですが、UIはFigmaに非常に似ており、MCP連携することでClaude codeやCursorのようなAIエディター（CLI）からも操作することができます。そのため、エンジニアの人にすごい刺さっていたイメージがあります。
いつか使ってみたらレポートを作成してみようと思います。
使ってみよう！
それでは早速使ってみましょう。
Claude Designは、Claude Pro、Max、Team、およびEnterpriseプランの人が利用できます。下記のサイトからアクセスしてみてください。
最初の画面
アクセスすると、イントロ広告が流れてskipすると下記の画面になるかと思います。
（デフォルトが英語でわかりにくいので、日本語に変更しました笑）
左側のサイドバーエリア
左側のサイドバーには、「プロトタイプ・スライドデッキ・テンプレートから・他の」の4つから、新しいプロジェクトを作ることができます。
プロトタイプでは、リッカブルな製品モックアップを作るモードです。「ワイヤーフレーム（粗い構造確認用）」か「高忠実度（ブランドアセットを使ったポリッシュされたもの）」を選べます。
スライドデッキでは、投資家向けデッキ、役員報告、全社向けプレゼンなどを作るモードです。 「スピーカーノートを使う」というトグルがあり、オンにするとスライド上に詰め込まずに詳細をスピーカーノートに移してくれます。
テンプレートからでは、スライドデッキ・インタラクティブプロトタイプ・PowerPointなど特定のフォーマット向けに用意されたテンプレートを起点にプロジェクトを始めるモードです。ゼロから作るより時間を短縮することができます。
他のでは、ランディングページ・ワンページャー・マーケティング資材など、上の3つに当てはまらない自由なビジュアル制作に使います。
上記の下にある「デザインシステムの設定」ボタンでは、チームのブランドカラー・フォント・コンポーネントを登録する画面へ進みます。一度設定すると以降のプロジェクトに自動適用されます。
右側のメインエリア
右側のメインエリアでは、「デザイン・例・デザインシステム」から、動作させるものを選択できます。ここはそれぞれ下記のような感じです。
デザイン → 自分のプロジェクト一覧
例 → Anthropicが用意したサンプルデザイン
デザインシステム → 登録済みのブランド設定を確認・編集
チュートリアルを学んでみる
画面の紹介はしてきましたが、何から始めればいいかよくわからないので、チュートリアルから開始してみましょう！
チュートリアルのボタンを押すと、今回のClaude Designを使う用途について色々と問われます。ぽちぽちと押して回答してみましょう。
すると、おそらく用途に応じた使い方のカードが何枚か表示され、それで使い方を学ぶことができます。（キャプチャを撮り忘れ、気づいたら終了していました笑）チュートリアルといっても、何か操作して使えるわけではなかったです。
プロジェクトを作って指示を出してみる
ということで、実際にプロジェクトを作って学んでみようと思います！
はじめてのプロジェクト というプロジェクトを作成して、いろいろ操作してみましょう。いきなり高忠実度にすると、ワイヤーが定まらないうちにデザインに入ってしまう、よくない状態になりそうなので、まずはワイヤー作成から始めます。
作成するボタンを押すと、下記のような画面が表示されます。
左側のチャットエリアでは、AIに対しての指示を出す場所になります。チャットは全体的な指示、コメントはキャンバス上の特定要素への指摘に使い分けます。
文脈追加ボタン（4つ）は、下記のように使い分けます。ここに情報をしっかりと入れ込むことで、より理想に近いデザインを作成することができますので、参考になりそうな情報は全て入れ込んでしまいましょう。
デザインシステム→ ブランド設定を読み込むスクリーンショットを追加→ 参考画像を渡すコードベースを添付する→ GitHubなどのリポジトリを連携Figmaファイルをドラッグ＆ドロップ→ 既存のFigmaデータを取り込む
そして左下がチャット画面で、ここから指示を出していくことになります。試しに「タスク管理アプリのホーム画面を作ってください」と、指示を出してみましょう。
すると、claudeからの質問がいくつも飛んできます。これがclaudeっぽいなぁ。。。。と思わせるシーンです。質問しまくって、ユーザーの思っていること、考えていることを洗いざらい聞いてきます。こうすることで、ユーザーのより思った通りのデザインに近づくわけですね。ぽちぽちします。
すると、下記のような画面が表示されました。（一旦エラーなどあったものの。。。）
ワイヤーではありますが、なかなかレベルが高いです。画面に対しても説明書があり、どのように動作するのかが細かく書かれています。いいですね！
ちなみに今回は3つのワイヤーを作成してくれました。左から順にA,B,Cです！
- A · Horizon — 横スクロール時間軸。今日を中心に過去/未来が水平に流れる実験的レイアウト
- B · Dual Column — 今日 / 近日の静かな二分割。Things系の美意識
- C · Radial Day — 24h円環で一日の”形”を可視化、外周に締切タスクが衛星のように
制作物に対して指示を出す
さて、出来上がったものに対してブラッシュアップしていくためには、どのような手段があるでしょうか？
右上には、用途に応じて様々な調整方法が用意されています。これらを使いこなして、AIでデザインをよりよくブラッシュアップしてきましょう。
Tweaks（調整）
スペース・カラー・サイズなどをスライダーで直感的に微調整できるモードです。デザイン全体に一括適用することも可能です。調整内容を送信すると、左タブのチャット欄で調整に関するやり取りが開始されます。（ちなみに、エンターを押すと送信されてしまうので、変換する際には要注意です。）
Comment（コメント）
キャンバス上の特定の要素をクリックしてピンポイントにコメントを残したり、Claudeに送信して作業を依頼したりできます。たとえば、「このボタンだけ変えたい」という細かい修正指示や、共同で作業する人への機能ごとのコメントに向いています。ちなみに、コメントは左タブの「Comments」と連動しています。
Edit（編集）
テキストや要素を直接クリックして編集するモードです。Claudeに修正させず、自分自身で「このラベルの文字だけ直したい」といった軽微な修正に使います。クリックすると、右側にサイドバーが出現し、フォントに関する情報や色、サイズに関する様々な構成情報が出てきますので、これを操作して理想のデザインへ近づけていきましょう。
Draw（描画）
手書きでキャンバス上にメモや矢印を描けます。「ここをこう変えて」という意図を視覚的に伝えたいときに便利です。
エクスポートの方法
ブラッシュアップが完了したら、いよいよエクスポートして共有です！
これにもいくつか方法があり、みなさんの環境に合った方法でやってみてください！
まず、ただ全画面で確認したい場合は、右上のPresentを押して、好きなモードで確認しましょう。
In this tabだと今開いているタブで全画面に、Fullscreenだと上のバーもしてほんとに全画面に、New tabだと新しいタブで全画面（In this tabと同じ状態）にすることができます。
このデータを丸ごとシェアしたい場合は、右上のshareからシェアできます。
Access（共有設定）
ドロップダウンで共有相手の権限を設定します。以下のような選択肢があります。
- Teammates can view：閲覧のみ。コメント・編集は不可
- Teammates can comment：閲覧＋コメント可。デフォルトの設定
- Teammates can edit：閲覧・コメント・編集すべて可
- Private：自分だけが見られる。リンクを知っていても開けない
Copy linkで現在の権限設定でURLをコピーできるので、それを共有したい相手へ伝えましょう。
権限に悩んだ際には、以下のような指標を参考にしてみるといいかもしれません。Figmaの共有権限とほぼ同じ考え方なので、直感的に使えそうですね！
- view → クライアントや関係者に「見せるだけ」のとき
- comment → レビューしてフィードバックをもらいたいとき（デフォルトはこれ）
- edit → チームメンバーと一緒に作り込むとき
- Private → まだ誰にも見せたくない作業中のとき
プロジェクト操作系
Duplicate project
プロジェクトをまるごと複製します。「別パターンを試したいけど元を残しておきたい」ときに便利です。
Duplicate as template
このプロジェクトをテンプレートとして保存します。同じ構成で別のプロジェクトを量産したいときに使います。
エクスポート
Download project as .zip
プロジェクトのファイル一式をzipでダウンロードします。ローカルにバックアップしたいときに。
Export as PDF
そのままPDFに書き出します。レビューや印刷用途向けです。
Export as PPTX…
PowerPoint形式で書き出します。既存のPPTXワークフローがあるチームへの共有に便利です。
Send to Canva…
Canvaに直接送って、さらにデザインを編集できます。Canvaに慣れているデザイナーへの引き渡しに向いています。
Export as standalone HTML
単体で動くHTMLファイルとして書き出します。サーバー不要でブラウザで開けるので、クライアントへのプロトタイプ共有に便利です。
Handoff to Claude Code…
これが最大の目玉機能です！ デザインをClaude Codeに渡して、実際のコードとして実装してもらえます。「デザイン → 実装」の橋渡しをワンクリックで行えます。
Claude Designを触ってみた感想
以上で一通りのサイクルが学べたのではないでしょうか？
作りはFigmaに若干似ており、アートボード上で自由にデザインが作れるので、便利なツールだなと感じました。ブラッシュアップの場面では、完全にAIに全ての操作を任せるのではなく、人間が一部編集に参加できるのはとても良かったです。
ですが、配置に関する操作は出来なさそう？（gapなどは設定できそうだった）ので、そこはうまく指示を出してあげる必要がありますので、言語化できるデザイナーがますます大事になるわけです。
しかし、AIはもともとデザインのような、配置が言語化されていない抽象的なものは扱い辛かったのでした。なぜここまでデザインを扱えるようになっているのでしょうか？その正体は、上部のタブに注目するとdesign-canvas.jsxというファイル名がありますね。
つまりキャンバス上に見えている「Figmaっぽいデザイン」の正体は、ReactコンポーネントのJSXファイルです。先ほど思うがままに見れていたアートボードの正体は、全てコードで書かれたファイルだった、というわけですね。
これは、先ほどのClaude Codeとの連携に関わりがあり、Figmaはデザインツールなのでエンジニアがゼロからコードを書き直す必要がありましたが、Claude Designはデザインファイル自体がすでにコードなので、引き渡しの摩擦がほぼゼロというわけです。すごいですね。。。
おわりに
いかがだったでしょうか？
あとはトークン量の消費が気になるところです。ここまでコードで再現するのをみると、Claude Codeを使っていた身からすれば、すごく心配ですね。。。すぐに制限きてしまいそうです。
しかし、今後AIネイティブな世界になっていくには、この制限も緩和されるのでしょうか。はたまた計算のサーバーが足りなくて高級品になっていくのか。。。今後数年間はその辺りも気になるとことです。
Claude Designを使って、デザイン作ってアプリか何か、一つ作ってみたいと思います！
ご覧いただきありがとうございました。