Claude Designでサイトを設計・公開する方法

TL;DR

Claude Designでは、指示への回答からワイヤーフレームや操作可能なプロトタイプを生成し、画面上で文字、配置、背景、フォントを編集できる。完成物はPDF出力やClaude Codeへの実装指示、Vercelへの公開ができ、デザインシステムも両者間で同期できる。

Transcript

はい、こんにちは。ゲトです。この チャンネルは精成の最新情報や活用時代を 紹介してます。是非チャンネル登録お願い いたします。そして今回のテーマは先日 いつか紹介したことがあるクロードデザイ ンっていうクロードがデザインをコテコテ に作ってくれる、もしくはデザインの フォーマットとかデザインシステムを作っ てくれるっていう機能がですね、あるん ですけど、これがですね、めちゃくちゃ 進化したらしいです。え、進化してもう 完璧なデザインソフトになったらしいです 。はい。そこがですね、どんな変化が起き たのかを実際に試しながら、え、解説して いきたいと思いますので、皆さんもですね 、是非動画を見ながら色々と試してみて ください。え、ということで本題に入って いきましょう。はい、ということで今回は ... Read More

Key Insights

• ワイヤーフレームは、色や画像を加える前に必要な要素と情報構造だけを視覚化し、情報整理、デザイン、コーディングを同時進行させずに済む設計手段である。
• Claude Designの編集画面は、テキスト修正、要素の移動や削除、レイヤー選択に対応し、生成後の画面をノーコード制作ツールのように直接調整できる。
• 左側の編集パネルは、背景のグラデーションやフォントサイズなどを要素ごとに変更でき、生成結果を作り直さずに細部を調整できる機能である。
• プロトタイプ機能は、商品詳細、カート、支払い、購入完了、セットアップ説明などのページ遷移を再現し、実際のサイトに近い操作確認を可能にする。
• 変数の利用は、購入商品名や金額など、ページの大枠を保ちながら内容だけが変わる箇所をデータに応じて表示する設計を表現できる仕組みである。
• 共有機能は、PDFへの書き出し、Claude Codeへの実装依頼、外部サービスへの送信、Vercelへのデプロイを一つの制作フローへつなげる入口である。
• Claude Codeとの同期は、先にデザインログインで接続したうえでデザインシンクを実行し、ローカルのデザインシステムをClaude Designへ送る流れである。
• デザインシステムの同期は、色、フォント、ロゴ、アイコン、カードなどの規則に加え、後から作ったグラフやナビゲーションも共有し、制作物の統一感を保つ方法である。

Questions & Answers

Q: Claude Designでワイヤーフレームを作る方法は？

Web版またはデスクトップ版のClaudeでデザインを開き、作りたいサイトの内容、運用方針、料金、掲載予定のコンテンツなどを文章で入力する。種類はワイヤーフレームを選び、生成前に提示されるサイトのイメージに関する質問へ回答して送信すると、必要な要素を整理した白黒中心の設計案が作られる。

Q: なぜWebサイトはワイヤーフレームから作るのか？

Webサイト制作には、情報の整理、デザインの検討、コーディングという要素があり、すべてを同時に進めると構成が混乱しやすい。最初にワイヤーフレームを作れば、色や画像を考える前に掲載情報と配置だけを整理できるため、その後のデザインや実装を進めやすくなる。

Q: Claude Designで生成後のデザインを編集する方法は？

画面右上のエディットを押すと各要素を選択でき、文章の修正、ドラッグ操作による配置変更、不要な要素の削除が行える。左側にはレイヤーが表示されるため、目的の部品を個別に選択でき、背景のグラデーションを外したり、フォントサイズを変更したりする細かな調整も可能である。

Q: Claude Designのプロトタイプとは何ですか？

プロトタイプは、見た目だけでなくクリックやページ遷移を試せる、実際に動作するサイトに近い設計案である。実演ではスキルの詳細ページからカート、支払い方法、購入完了、ダウンロード、セットアップ方法、使用例へ進む流れが生成され、利用者の操作手順を画面上で確認できた。

Q: Claude Designで作った案を共有する方法は？

完成した案は左上のシェアからPDFとして書き出せるため、制作予定のWebサイトの構成や雰囲気を顧客に提示して確認を取れる。ワイヤーフレームではデスクトップ版だけでなくスマホ版も同時に生成されるため、異なる画面サイズの構成をまとめて確認し、共有する用途にも使える。

Q: Claude DesignからClaude Codeへ実装を渡す方法は？

シェアメニューの「to Claude Code」を選び、表示されたプロンプトやコードをClaude Code側へ渡すと、作成したデザインを基に実装を進められる。Web版では「open Claude Code web」からセッションを開始する方法も示されており、問い合わせフォームなどのデザインを実装工程へ直接つなげられる。

Q: Claude Designで作ったページを公開する方法は？

シェアメニューから公開先としてVercelへ送信すると、左側のチャット欄で処理が進み、デプロイ完了後にリンクが表示される。そのリンクを開けば、本番環境へ配置された問い合わせページを確認できる。動画内では外部のノーコードサービスやデザインソフトへ送信できる選択肢も紹介されている。

Q: Claude Codeとデザインシステムを同期する方法は？

まずClaude Codeのターミナルでデザインログインを実行し、Claude Designとの接続を済ませる。その後、デザインシンクを使うと、ローカルで作成したStorybook形式のデザインシステムをClaude Designへ送信できる。Claude Codeで追加したグラフやナビゲーションも同期対象に含められるが、初期設定は難しめと説明されている。

Summary & Key Takeaways

• Claude DesignはWeb版とデスクトップ版から利用でき、両者の機能差はほとんどない。作りたいサイトの情報を文章で渡し、種類としてワイヤーフレームを選び、提示される質問に答えると、画像や色を入れずに必要な要素と情報構造を整理した設計案が生成される。スマホ版も同時に用意され、完成後はPDFとして共有できる。

• 新しい編集機能では、生成された要素を選択し、テキストの修正、ドラッグ操作による移動、削除、レイヤー単位の選択が行える。左側のパネルから背景のグラデーションやフォントサイズなども細かく調整できる。プロトタイプではページ遷移や購入操作を再現でき、商品名や金額のように変化する文字列を変数として扱う構成も確認できる。

• 作成したデザインはClaude Codeへ送り、そのまま実装を進められるほか、Vercelへ送信して公開することもできる。Claude Codeでは事前にデザインログインを行い、デザインシンクを使うことで、ローカルのStorybook形式のデザインシステムをClaude Designへ同期できる。追加したグラフやナビゲーションも共有され、ブランド表現の統一に活用できる。