はじめに

AI事業本部のKentです。近頃Claude Designを利用したモックアップの作成をしており、その一環でこちらの記事を書きました。

Claude Designは、チャットで指示するだけでデザインやプロトタイプ、スライドなどを生成できるAnthropicのデザインツールです。執筆時点ではPro / Max / Team / Enterpriseプラン向けにベータ提供されており、デザイナーでなくても、社内向けのビジュアル制作物を作ることができます。

本記事では「社内AIコンペティションの告知フライヤー」を題材に、Claude Designでのフライヤー作成から、Claude Coworkのライブアーティファクト機能を使った社内向けのデプロイ・共有までを一気通貫で紹介します。

ステップは大きく次の2つです。

1. Claude Designでフライヤーを作成・ブラッシュアップする
2. エクスポートしたファイルをClaude Coworkに渡し、ライブアーティファクトとしてデプロイする

Claude Designによるフライヤーの作成

今回は応募用のフライヤーを作成するということで、TemplateにはFlierを選択します。
また、プロンプトに加えて背景用の画像をGeminiの画像生成を利用して作成し、デザインのパーツとして渡しています。

プロンプト例

社内AIコンペティションの告知フライヤーを作ってください。

## 成果物
- A4縦、1枚。社内Slackとオフィス掲示の両方で使用

## 掲載情報
- イベント名: AI Challenge 2026
- 日程: エントリー締切 8/15、発表会 9/10(金) 15:00-18:00
- 場所: 本社中央ホール + オンライン配信
- 対象: 全社員(チーム参加可、1チーム最大4名)
- テーマ: 「業務を変えるAIプロトタイプ」
- プライズ: 最優秀賞 近江牛 1キロ、審査員特別賞 Classmethodノベルティグッズ
- 応募方法: #ai-competition チャンネルのフォーム、もしくはQRコード経由から
- 主催: AI推進部

## デザイン方針
- トーン: 非エンジニアが参加したくなる、遊び心がありつつプロフェッショナル
- 配色: コーポレートカラー #1A73E8 をメインに、ライトトーン基調
- 視線誘導: イベント名と締切が最初に目に入るように
- 避けること: ありがちな脳やロボットのアイコン、情報の詰め込みすぎ
- 背景: 添付してある画像を背景に薄く見えるように配置すること
- 改行: 単語の途中での改行は避けること、極力記号や句読点の位置で改行すること

## 優先順位
情報量よりも「締切」と「応募方法」への行動喚起を最優先

プロンプトのポイントは、「成果物（何をどの媒体向けに作るか）」 「掲載情報（載せる内容）」 「デザイン方針（トーンや避けたいこと）」 「優先順位」を分けて明示することです。特に「避けること」を書いておくと、AIデザインにありがちなテンプレート感を抑えられます。

画面およびComment・Tweaksによるデザインのブラッシュアップ

初回の生成結果はプロトタイプとして捉えることが必要です。Claude Designが効果的なのはここからの反復修正にあり、修正手段として主に「チャット」「Comment（インラインコメント）」「Tweaks」の3つが用意されています。それぞれ得意分野が異なるため、使い分けが仕上がりのスピードと品質を大きく左右します。
以下に実際の操作画面を示しますが、左側にチャット、右上部にCommentとTweaksがあります。こちらの画面ではすでにTweaksでダークテーマのパターンを作らせたものとなります。

チャット：全体に関わる大きな変更

画面左のチャット欄は、デザイン全体の構造やトーンに関わる変更に向いています。

• 「配色をもう少しダークでミニマルに」
• 「締切とQRコードを最上部に移動して」
• 「レイアウト案を2〜3パターン見せて」

といった、複数要素にまたがる指示や、代替案の比較検討はチャットで行うのが効率的です。デザインの意図の説明や、アクセシビリティ観点でのレビューを依頼できました。

Comment：要素を指定したピンポイント修正

Commentは、キャンバス上の修正したい要素を直接クリックしてコメントを残し、その箇所に絞った修正を依頼できる機能です。「どこの話をしているか」を文章で説明する必要がないため、チャットで場所を説明するよりも速く、意図のズレも起きにくいのが利点です。

今回のフライヤーでは、例えば次のような使い方をしました。

• 締切の日付部分を選択して「ここをもっと大きく、目立つ色に」
• QRコード周辺を選択して「余白を広げて、応募方法の文言を隣に配置」
• タイトルを選択して「単語の途中で改行されているので調整して」

コメントを書く際は「これは違う」ではなく「余白を8px程度詰めて」のように具体的に書くほど、意図通りの修正が返ってきます。

Tweaks：プロンプトを書かずにスライダーで調整

Tweaksは、生成済みのデザインに対してスライダーやトグルなどのコントロールで、色・余白・角丸・テーマといったプロパティをリアルタイムに調整できる機能です。プロンプトを書き直して再生成を待つ必要がないため、「もう少しだけ濃く」「もう少しだけ詰めて」といった微調整の試行錯誤に最適です。

さらに面白いのが、コントロール自体をClaudeに追加してもらえる点です。例えば「ダークテーマの切り替えスイッチを追加して」「フォントをゴシック体と明朝体で切り替えられるようにして」と頼むと、Tweaksパネルに専用のコントロールが生えてきます。今回のようなフライヤーであれば、掲示用（紙）とSlack投稿用（画面）でトーンを切り替えて見比べる、といったバリエーション比較が手元の操作だけで完結します。

使い分けの目安

まとめると、構造やセクション追加などの大きな変更はチャット、特定の要素へのピンポイント修正はComment、色味や余白などの微調整・バリエーション比較はTweaks、と覚えておくと迷いません。加えて、キャンバス上で要素を直接ドラッグ・リサイズする直接編集も可能なので、位置合わせ程度なら自分の手で直してしまうのが最速です。

Claude Coworkによるフライヤーのデプロイ

現在(2026/07/21)、Claude DesignはClaude Codeとの連携はできるようになったものの、Claude Coworkとの直接連携はまだできません。
しかし今回は非エンジニア向けということで、Claude Coworkを基盤にした社内向けのフライヤーのデプロイ・共有を行います。CoworkのライブアーティファクトはセッションをまたいでHTMLページとして保持されるため、「作って終わり」ではなく後からいつでも開ける社内ページとして使えます。

まず、Designで作成したデザインのプロジェクトをダウンロードします。
ウィンドウ上部のShare > Project HTML > Project archiveを選択した状態でExportをクリックするとダウンロードできます。

その後、ダウンロードしたZIPファイルをClaude Coworkに渡し、以下のようなプロンプトを渡すとライブアーティファクトを用いたデプロイを始めてくれます。

添付されているzipファイルはClaude Designを用いて作成したフライヤーのファイルが含まれています。
こちらのzipファイルを元にしてArtifactsを作成してください。
作成後、適切に元のデザインと内容が一致しているか確認をし、不足があれば適宜修正するサイクルを繰り返してください。

ポイントは「作成後に元デザインとの一致を確認し、不足があれば修正するサイクルを回す」ことまで指示している点です。ZIPからの変換ではフォントや背景画像の参照が崩れることがあるため、この一文を挟んでおくとClaude側での自律的な調節を安定して行なってくれます。現状、オンライン上のフォントが読み込めない問題があるため、ここでClaudeがArtifact上で利用可能なフォントを割り当ててくれます。

作業が完了するとライブアーティファクトとして表示されるはずです。もしClaude側がArtifactの作成に移行しなかった場合は、アーティファクトとしてデプロイしていただけますかといった形でお願いすれば移行してくれます。そして共有は右上の赤枠内部の矢印から行うことが可能です。

まとめ

Claude Designでの生成〜Comment・Tweaksによるブラッシュアップ〜Claude Coworkでのデプロイという流れで、コードを書かずにフライヤーの制作から社内公開まで完結できました。作成の際は以下の3点を意識すると良いデザインを作ってデプロイできることを学びました。

• 初回生成はプロトタイプとして扱う。チャット / Comment / Tweaksを使い分けて品質を高める
• DesignからCoworkの直接連携は未対応だが、ZIPエクスポート経由でライブアーティファクト化できる
• デプロイ時は「元デザインとの一致確認と修正サイクル」まで指示しておくと再現度が上がる

DesignとCoworkの直接連携が来ればこの手順はさらに短くなるはずですが、現時点でも非エンジニアがデザイン制作物を社内展開する手段として十分実用的だと感じました。