今日は、最近 Beta 版がリリースされた Claude Design を解説します。
ちゃんと設定しておけば、ちょっとプロンプトを送るだけで提案資料も説明スライドも名刺も作れます。ただ、最初だけとっつきづらいんで、解説を聞いてそのままデザインシステムの構築に入ってほしいです。
動画で使用したツール
- Claude Design(利用には Pro プラン以上が必要) https://claude.ai/design
- getdesign.md https://getdesign.md
配布物
デザインシステム作成プロンプト
自分がどこから始めるかで、使うプロンプトが変わります。3つのうち1つを選んでください。
1. すでに資料がある人向け
# このデザインシステムの目的
私はこれを主に【 例: 提案資料 】を作るために使います。
# 見せる相手
【 例: 取引先のクライアント 】に見せるものです。
相手に合った読みやすさ・伝わりやすさを優先してください。
# 使用言語
作るものは主に【 例: 日本語 】です。
フォントは、あとから編集しやすいようにGoogleフォントの中から選んでください。
日本語が読みやすい字間・行間で構成してください。
# 参考デザイン(私の既存資料)
私が過去に作った資料やスライドの画像を添付しました。
この見た目(配色・フォントの感じ・余白の取り方)に近づけて、「らしさ」を引き継いだデザインシステムにしてください。
2. 好きなデザインがある人向け
# このデザインシステムの目的
私はこれを主に【 例: 提案資料 】を作るために使います。
# 見せる相手
【 例: 取引先のクライアント 】に見せるものです。
相手に合った読みやすさ・伝わりやすさを優先してください。
# 使用言語
作るものは主に【 例: 日本語 】です。
フォントは、あとから編集しやすいようにGoogleフォントの中から選んでください。
日本語が読みやすい字間・行間で構成してください。
# 参考デザイン(テイストの参考)
私が「こういう見た目が好き」と思って集めた画像を添付しました。
これをそのまま丸ごと再現するのではなく、添付から好きな雰囲気(配色・フォントの感じ・余白の取り方)を読み取って、上に書いた目的・相手・言語に合わせて、テイストを取り入れてください。
3. getdesign.md で作る人向け
# このデザインシステムの目的
私はこれを主に【 例: 提案資料 】を作るために使います。
# 見せる相手
【 例: 取引先のクライアント 】に見せるものです。
相手に合った読みやすさ・伝わりやすさを優先してください。
# 使用言語
作るものは主に【 例: 日本語 】です。
フォントは、あとから編集しやすいようにGoogleフォントの中から選んでください。
日本語が読みやすい字間・行間で構成してください。
# 参考デザイン(テイストの参考)
下のDESIGN.mdは、私が「こういう見た目が好き」という"参考"です。
これをそのまま丸ごと再現するのではなく、
上に書いた目的・相手・言語に合わせて、テイストを取り入れてください。
＜ここにDESIGN.mdを貼り付け＞
名刺作成プロンプト
1. 名刺テンプレ作成プロンプト
名刺のテンプレートを具体的に開発します。
下記に則って、3案提案してください。
## 仕様・体裁
* サイズは添付のPowerPoint(meishi_tate.pptx)のスライド寸法ちょうど(55x91mm)に合わせる。
* 表面・裏面の2面を用意。
* 添付「データ作成ガイド.png」の印刷会社の注意を遵守：文字・デザインは仕上がりから3mm内側に収める。
* フチなし要素は端まで塗る。
* 確認用に3mmのセーフティガイドを表示/非表示で切り替えできるようにする(既定は非表示)。
## 出力(最初からこの形で)
* 最終成果物は入稿用PDF。
* 編集画面の右上のPDF書き出しボタン一発で出せるようにする。
* PDFは表・裏それぞれ91×55mm原寸・フチなし・トンボ／ガイドなし・1ページずつ。
* フォントはデザインのまま(埋め込み・ベクター)で再現すること。
* 画面プレビュー用レイアウトとは別に、印刷用レイアウトをmm実寸で組み込む。
* 背景色も必ず印刷される作りにする(背景グラフィックの設定に依存しない)。
* メールアドレスは自動難読化で化けないように確実に表示すること。
## 好みのデザインテイスト
* 添付画像を参考にすること
* ロゴを入れるなら裏面に入れる(表面に入れない)
## 掲載情報(ダミーデータ)
氏名：林 浩一郎(Koichiro Hayashi)
肩書：営業
会社名：株式会社XXXX
住所：〒123-4567 東京都港区南青山三丁目五番十二号青山テラス 四〇二号室
電話：090-1234-5678
メール：hayashi@XXXX.example
ウェブ：XXXX.example
2. 名刺の一括作成プロンプト
5名分の名刺をまとめて作りたいです。
# 掲出すべき情報
添付csvを参照すること
# 仕様・体裁
* サイズは添付のPowerPoint(meishi_tate.pptx)のスライド寸法ちょうど(55x91mm)に合わせる。
* 表面・裏面の2面を用意。
* 添付「データ作成ガイド.png」の印刷会社の注意を遵守：文字・デザインは仕上がりから3mm内側に収める。
* フチなし要素は端まで塗る。
* 確認用に3mmのセーフティガイドを表示/非表示で切り替えできるようにする(既定は非表示)。
# 出力(最初からこの形で)
* 最終成果物は入稿用PDF。
* PDFは「1名につき1ファイル」で出力する(1ファイル内に表・裏の2ページ)。
* 5名分のPDFを1つのZIPにまとめ、右上ボタン一発で一括ダウンロードできるようにする。
- ファイル名は「連番_氏名.pdf」(例：01_山崎悠真.pdf)、ZIP名は内容が分かる名前にする。
- ブラウザの印刷ダイアログは使わず、ボタンクリックだけで生成・ダウンロードまで完結させる(書き出し中は進捗を表示)。
- 生成は画面プレビューと同一のレイアウトを実寸でキャプチャし、表示崩れが出ない方式にする。
* 編集画面の右上のPDF書き出しボタン一発で出せるようにする。
* PDFは表・裏それぞれ91×55mm原寸・フチなし・トンボ／ガイドなし・1ページずつ。
* フォントはデザインのまま(埋め込み・ベクター)で再現すること。
* 画面プレビュー用レイアウトとは別に、印刷用レイアウトをmm実寸で組み込む。
* 背景色も必ず印刷される作りにする(背景グラフィックの設定に依存しない)。
* メールアドレスは自動難読化で化けないように確実に表示すること。