書き出しと共有
作ったデザインは、Claude Design の中に置いたままでは活用できません。この章では、完成品をファイルとして取り出す「書き出し（Export）」と、他の人に見せる「共有（Share）」を学びます。特に共有には、うっかりすると外部に公開してしまう落とし穴があるので、安全な使い方をしっかり押さえましょう。
- 6つの書き出し形式の違いを理解し、目的に合わせて選べる
- 提案資料を PDF と PPTX の両方で書き出せる
- 共有の4段階（Private〜Link (Edit)）の意味を説明できる
- 「リンク共有＝実質外部公開」というリスクを理解し、安全に使い分けられる
書き出し（Export）の基本操作
書き出しの操作はとても簡単です。画面右上の Export（書き出し）ボタンを押して、出てきたメニューから形式を選ぶだけです。難しいのは操作ではなく「どの形式を選ぶか」の判断なので、この章ではそこを重点的に説明します。
PDF ／ PPTX ／ Standalone HTML ／ ZIP ／ Canva ／ Hand off to Claude Code
図：右上の Export（書き出し）ボタンから形式を選ぶ
6つの書き出し形式の使い分け
Export メニューには6つの形式が並んでいます。それぞれ「何のためのものか」「あとから編集できるか」が違います。まず一覧表で全体を掴んでください。
| 形式 | どんな時に選ぶか | 書き出した後の編集 |
|---|---|---|
| 閲覧・印刷・提出用。相手に「見てもらうだけ」でよい時 | できない（見た目が固定される） | |
| PPTX | プレゼン資料。相手が PowerPoint（パワーポイント）で手直しする可能性がある時 | できる（PowerPoint で開いて編集） |
| Standalone HTML | Web ページとして掲載・埋め込みしたい時。デザイン込みの1ファイルにまとまる | できる（ただし HTML＝Web ページの本体ファイルの知識が必要） |
| ZIP | HTML（Web ページの本体ファイル）・CSS（見た目を決める情報）・画像の生ファイル一式が欲しい時。制作会社などに素材ごと渡す時 | できる（中身は複数の生ファイル） |
| Canva | 色や配置の細かい仕上げを Canva（キャンバ、デザイン編集サービス）で行いたい時 | できる（Canva のエディタで調整） |
| Hand off to Claude Code | デザインを本物の Web サイトやアプリとして実装したい時 | Claude Code 側で開発を続ける |
選び方に迷ったら、次の3つの質問で考えると簡単です。
- 相手に見せるだけ？ → PDF が確実です。どの環境でも同じ見た目で開けます。
- 相手が手直しする？ → PPTX（プレゼン資料の場合）か Canva（チラシ・画像系の場合）。
- Web に載せる・アプリにする？ → Standalone HTML、ZIP、または Hand off to Claude Code。
Claude Design はピクセル単位（画面の点1つ1つのレベル）の完璧な仕上げは苦手です。そこで「大枠の90%は Claude Design で作り、最後の10%の微調整は Canva 側で直す」という分担が現実的です。文字の位置をほんの少しずらしたい、色をあと一歩だけ変えたい、といった仕上げは Canva に書き出してから行いましょう。
「Hand off to Claude Code（Claude Code への引き渡し）」は、デザインの仕様や設計意図をひとまとめにして、開発ツールの Claude Code に渡す特別な書き出しです。デザイン画を見ながら作り直す手間がなくなる、この教科書の目玉の1つです。詳しくは第9章（Claude Code との連携）で解説します。
共有（Share）の4段階
次は共有です。書き出しが「ファイルを取り出して渡す」方法なのに対し、共有は「Claude Design の画面そのものを相手に見せる」方法です。Share（共有）ボタンから公開範囲を設定します。範囲は4段階あり、下に行くほど「見られる人」が増えます。
| 設定 | 誰が見られるか | 向いている場面 |
|---|---|---|
| Private（非公開） ※最初からこの設定 | 自分と、招待した人だけ | 作業中・個人利用。迷ったらこれのまま |
| Public (Organization) （組織内公開） | 同じ組織（会社のチームなど）の全員。閲覧に加えてチャットも可 | 社内・チーム内での見せ合い |
| Link (View Only) （リンクで閲覧のみ） | リンクを知っている人なら誰でも閲覧できる | 組織の外の人に見せたい時（要注意・下の警告参照） |
| Link (Edit) （リンクで編集も可） | リンクを知っている人なら誰でも編集と共同チャットができる | 外部の相手と一緒に手を入れたい時（最も注意が必要） |
Link (View Only) と Link (Edit) は、リンク（URL）を知っていれば誰でも見られる設定です。招待した相手がそのリンクを別の人に転送すれば、その人も見られます。つまり「リンクを送った相手だけに見せている」つもりでも、実際にはインターネット上に公開したのとほぼ同じだと考えてください。個人情報（名前・住所・連絡先など）や、仕事の機密（未発表の企画・金額・顧客情報など）を含むデザインでは、リンク共有を絶対に使わないでください。そうした内容を渡す必要があるときは、PDF などに書き出して、メールなど相手を特定できる手段で送りましょう。
共有について知っておきたい2つのこと
- プロジェクトの共有と、チャット（会話履歴）の共有は別です。デザインを共有しても、左側のチャットに書いた会話まで自動的に見られるわけではありません。チャットは最初から非共有の設定になっています。
- 共有をやめて Private（非公開）に戻すと、以前の共有は消えます。「一度リンクを送ってしまったけれど取り消したい」という時は、Private に戻せば以前の共有コンテキスト（共有していた状態）は削除されます。ただし、相手がすでに画面を保存・撮影していた場合までは取り消せません。最初から慎重に選ぶのが一番の防御です。
共有設定に少しでも不安があるなら、プロジェクトは Private のままにして、PDF に書き出したファイルを相手に送るのが安全です。ファイルなら「誰に渡したか」を自分で把握できます。
例題：提案資料を2つの形式で書き出す
第5章（スライド・提案書を作る）で作った提案資料を、PDF と PPTX の両方で書き出し、開いて違いを確かめます。同じデザインでも、形式によって「できること」が変わるのを体感するのが狙いです。
- プロジェクトを開く
Claude Design（claude.ai/design）で、第5章で作った提案資料のプロジェクトを開きます。まだ作っていない場合は、下のプロンプトで簡単な資料を作ってから進めてください。 - PDF で書き出す
右上の Export（書き出し）を押し、PDF を選びます。あとは画面の案内に従って保存します。 - PPTX で書き出す
もう一度 Export（書き出し）を押し、今度は PPTX を選んで保存します。 - 両方を開いて比べる
保存された2つのファイルをそれぞれ開きます。PDF は閲覧ソフトで開き、PPTX は PowerPoint で開きます。
社内向けの簡単な提案資料を5枚のスライドで作ってください。 テーマは「会議時間を半分にする3つの工夫」です。 構成は次の通りです。 ①表紙（タイトルと日付） ②現状の課題 ③工夫その1〜3（1枚に3つまとめる） ④導入した場合の効果 ⑤まとめと次のアクション 落ち着いた藍色系の配色で、業務用らしく堅めにお願いします。
確認ポイント: PDF は見た目がきれいに固定されていて、文字を書き換えられないことを確認してください。一方 PPTX は、PowerPoint 上で文字をクリックすると編集できることを確認してください。「提出するなら PDF、相手が手直しするなら PPTX」という使い分けが実感できれば成功です。
練習問題
第6章（LP・Webページを作る）で作った LP（縦長の紹介ページ）を Standalone HTML 形式で書き出し、保存されたファイルをダブルクリックして Web ブラウザで開いてみてください。Claude Design の画面で見ていたものと同じデザインが、自分のパソコン上の1つのファイルだけで表示されることを確認しましょう。
ヒントを見る
操作は例題1と同じで、右上の Export（書き出し）から Standalone HTML を選ぶだけです。「Standalone（スタンドアロン）」は「単独で動く」という意味で、デザイン情報（CSS）が全部1ファイルに入っています。だからそのファイル1つを開くだけで、どのパソコンでも同じ見た目になります。
模範解答を見る
- プロジェクトを開く
第6章で作った LP のプロジェクトを開きます。 - 書き出す
右上の Export（書き出し）→ Standalone HTML を選び、ファイルを保存します。 - ブラウザで開く
保存された HTML ファイルをダブルクリックします。普段お使いのブラウザ（Chrome など）が起動し、LP が表示されます。
キャンバスで見ていたデザインと同じものが表示されれば正解です。この1ファイルを Web サーバー（ページをインターネットに公開するための置き場所）に置けば、そのまま公開ページとして使えます。
これまでの章で作ったプロジェクトを1つ開き、Share（共有）ボタンを押して現在の公開範囲を確認してください。特に指定した覚えがなければ Private（非公開）になっているはずです。それを自分の目で確かめるのがこの問題です。
ヒントを見る
Share（共有）ボタンは、書き出しに使った Export（書き出し）ボタンの近く（画面右上）にあります。押すと現在の設定が表示されます。何も変更せず、確認だけして閉じれば安全です。
模範解答を見る
- プロジェクトを開く
確認したいプロジェクトを開きます。 - Share を押す
画面右上の Share（共有）ボタンを押します。 - 設定を読む
表示された公開範囲が Private であることを確認します。Private は「自分と招待した人だけ」の最も安全な状態です。 - そのまま閉じる
今回は確認だけなので、何も変えずに閉じます。
もし Link (View Only) や Link (Edit) になっていて心当たりがない場合は、Private に戻しておきましょう。Private に戻せば以前の共有は削除されます。
次の項目に自信をもって「はい」と言えたら、この章は合格です。