学びブログ

Learning Blog

AIがきれいな画面を作れるようになるほど、制作の差は「何を作らせるか」と「どこまで確かめるか」に表れます。Claude Designを使っても、目的が曖昧なら、見栄えは整っていても申し込みにつながる導線や必要な情報が欠けた案になりかねません。

2026年9月16日、Anthropicは会話の中でデザイン・スライド・文書を作る新しい体験を発表しました。この記事では10月5日時点の公式ガイドをもとに、Claude Designの変化と、Web制作で使うための工程を整理します。中心になるのは、架空のオンライン講座の募集ページを作る設計例です。出典：Claude公式リリースノート

本文のプロンプト・図解・確認表は本記事のオリジナルです。Claudeの実画面や実測ベンチマークではなく、読者が試せる設計・レビューの例として掲載しています。

Claude Designで何が変わったのか

公式ガイドでは、Claude Designを会話からインタラクティブなプロトタイプや一枚ものの資料を作り、キャンバスで修正できる機能として説明しています。会話中にデザインを依頼するほか、利用可能な画面では「Output → Design」から始められます。構成の変更を会話で伝えたり、部分ごとのコメントや直接編集で調整したりできる点が特徴です。出典：Claude Designの開始ガイド

また、チャットとCoworkを一つの会話にまとめる体験は段階的に提供されています。同じプランでも表示が異なることがあるため、メニューが見当たらない場合は、自分のアカウントの提供状況を確認してください。現在の詳細ガイドではDesignは有料プラン向けのベータ機能として案内されています。出典：会話体験の統合について／出典：Artifactsの利用条件

制作上の意味は、アイデアを文章で説明したあと、見える形にして議論しやすくなることです。たとえば「申し込み前に料金を確認したい」という要件を、料金欄・ボタン・確認画面の関係として見せられます。ただし、画面が生成されたことと、申込処理やWordPressへの組み込みが完成したことは別々に確認する必要があります。

最初に決めるのは、色よりも成功条件

「おしゃれな講座サイトを作って」だけでは、どの情報を優先すべきか判断する手がかりが足りません。本記事の例では、HTMLとCSSを学び始めた社会人向けのオンライン講座を想定します。主な目的は、講座内容と受講条件を理解した人が、無料相談へ進めることです。

この場合、ファーストビューに必要なのは、対象者・学べること・相談への入口です。その次に、カリキュラム、日程、受講環境、料金、よくある質問を並べます。実績数や受講者の声が提供されていないなら、AIに補わせず「掲載資料待ち」にします。仮の数字が整ったデザインに組み込まれると、あとから見分けにくくなるためです。

この表は、初稿を見たあとも使います。「洗練されているか」だけで採点すると、目的と無関係な装飾の調整に時間を使いやすくなります。まずは、必要な情報が存在するか、読めるか、次の行動が分かるかを確かめましょう。

ブランド資料は「見本」と「ルール」をセットで渡す

Claudeのデザインシステムは、提供した資料から色・書体・コンポーネント・レイアウトのパターンを抽出して利用する仕組みです。ブランド資料などは会話から、Reactコンポーネントやトークンがある場合はClaude Codeの/design-syncを使う経路が案内されています。出典：デザインシステムの設定ガイド

ここで重要なのは、資料を大量に渡すことより、正しい資料を選ぶことです。古いページと新しいガイドラインを同時に渡して、どちらを優先するか書かなければ、古いボタンの色や余白が再利用される可能性があります。本記事の例なら「2026年版を優先」「ロゴは提供ファイルのみ」「強調色は主要ボタンだけ」のように優先順位を添えます。

素材がまだない段階なら、簡単なルール表で十分です。たとえば、背景はオフホワイト、本文は濃い紺、主要ボタンは深い緑、見出しと本文の書体は同じ系列。これは本記事の仮の設定なので、実案件では承認済みのブランド仕様に置き換えてください。ルールを文字にすると、出力のどこが逸脱したかを指摘しやすくなります。

コピペして試せる、初稿用のプロンプト

以下は本記事の設計例です。角括弧の内容を、自分の案件の確定情報へ置き換えて使ってください。最初から全ページを作らせず、一つの導線で要件の伝わり方を確かめる構成にしています。

オンライン講座の募集ページのプロトタイプを作ってください。
対象：HTML/CSSを学び始めた社会人。
目的：講座内容と条件を理解した人が無料相談へ進むこと。

先に、情報の不足と、あなたが仮定する点を一覧にしてください。
料金・日程・実績・受講者の声は創作しないでください。
不明な部分には「要確認」と表示してください。

構成：対象者と学習目標 → カリキュラム → 受講条件
→ [承認済みの料金と日程] → FAQ → 無料相談の案内。
無料相談ボタンは目的と遷移先が分かる文言にしてください。

提供資料：[ブランドガイド、確定原稿、使用許可済み画像]。
維持するもの：[ロゴ、色、承認済みの料金・文章]。
画面幅390pxと1440pxで読みやすく配置してください。
フォームは未入力・入力エラー・送信中・完了の状態を見せてください。
実際の送信機能がない場合は、デモであることを明示してください。

初稿のあと、要件を満たした点・未確認の点・実装が必要な点を
分けて説明してください。

「不明な部分を先に出す」「維持するものを決める」「状態まで見せる」の三つが、この指示の核です。AIの説明をそのまま検証結果として扱わず、実際の画面と照合してください。説明では390px対応と書かれていても、長い見出しや入力エラーで横幅が崩れることがあります。

修正は、情報・構造・見た目の順で進める

初稿が出たら、すぐに「もっとかっこよく」と頼む前に、文章を読んでください。受講条件が曖昧なら、余白を整えても申し込み前の不安は残ります。今回なら「受講に必要な環境がFAQに埋もれている」という問題を見つけたら、まず受講条件の位置を直します。

次に、見出し・説明・ボタンのまとまりを確認します。料金欄から申し込みボタンが離れすぎているなら、どの料金の申し込みなのかが伝わりにくくなります。内容が同じまとまりに見える距離に調整し、補足と主要情報の強弱をつけます。最後に、文字サイズや色、余白の細部へ進みます。

受講条件のセクションだけ修正してください。
問題：必要なパソコン環境がFAQ内にしかなく、見つけにくい。
変更：カリキュラム直後に「受講前に用意するもの」を追加。
維持：料金、日程、ロゴ、他のセクションの順序と配色。
完了条件：390px幅でも項目名と説明が対応して読めること。
変更した箇所と、維持した箇所を説明してください。

修正ごとに範囲を限定すると、よくなった部分と、別の場所に生じた変化を見比べやすくなります。大きな変更の前には書き出したファイルや比較用の画面を残し、何を採用したかを記録すると、合意済みの案を管理しやすくなります。

完成度を左右するのは「普通ではない状態」

見た目の初稿は、短い見出し、適度な文章量、きれいな入力値で整っていることがあります。実際の利用では、名前が長い、メールアドレスを間違える、送信に時間がかかる、途中で通信が切れる、といった状況が発生します。これらを画面で確認できないまま「完成」とすると、実装段階で仕様を決め直すことになります。

未入力ならラベルと必須条件が分かるか。エラーなら何を直すかが文章で示されるか。送信中なら二度押しを防ぎ、待っていることが伝わるか。完了なら受付後の流れが分かるか。さらに、通信失敗時は入力を失わず再試行できるかを確認します。プロトタイプで見せられない状態は、実装者向けの未決事項として残してください。

今回の無料相談フォームなら、最初に必要な項目を「名前」「メール」「相談したいこと」に絞る設計を検討できます。ただし、これで成果が改善するとは実測なしに言えません。必要項目と入力負担の関係を整理し、実際の運用で計測して判断するための仮説です。

公開前に確かめたい、五つの観点

1. 情報：料金・日程・実績を原資料と照合します。仮の文章と本番の文章が混ざっていないか確認します。
2. 画面幅：390pxと1440pxに加え、中間の幅でも確認します。文字の折り返し、表の横スクロール、固定ボタンの重なりを見ます。
3. 操作：リンク、入力、エラー、完了までをたどります。キーボードで移動でき、フォーカス位置が見えるかも確かめます。
4. 読みやすさ：文字と背景のコントラスト、本文の行間、見出しの階層を確認します。色だけでエラーを伝えない設計にします。
5. 実装接続：デモと本番を区別し、送信先、管理画面、画像、アクセス解析、CMSで編集する項目を整理します。

コントラストは感覚だけで判断せず、測定ツールで確かめましょう。WCAG 2.2のAA基準では、通常の文字は原則4.5:1以上、大きな文字は3:1以上が求められます。ロゴなどの例外もあるため、すべての要素に同じ条件を当てはめるわけではありません。出典：W3C「Contrast (Minimum)」

390pxで表示できるだけで、レスポンシブ対応が終わるわけでもありません。WCAGのリフロー基準は、原則として幅320 CSS px相当で内容や機能を失わず、二方向のスクロールを必要としないことを求めます。図や表など例外となる内容があります。文字を拡大した場合も含め、必要な情報と操作が使えるか確認してください。出典：W3C「Reflow」

WordPressへ持ち込むときの実務上の分岐

生成したプロトタイプをWordPressで使うなら、編集運用まで考えます。お知らせや料金を担当者が更新するサイトでは、ページ全体を一つの巨大なHTMLとして貼るより、見出し・説明・画像・CTAなどに分けて、更新対象をブロックやテンプレートへ落とす方針を検討できます。

引き継ぎメモには「画面」「入力や表示の状態」「データの接続先」「未確認項目」を残します。たとえば、無料相談ボタンはフォームページへの遷移、フォームは既存の承認済み仕組みを使用、完了文は担当者の確認待ち、と具体化します。見た目だけでなく、運用で誰が何を変えるかまで説明できれば、次の工程へ進みやすくなります。

まずは一つの導線を作り、採用基準で比較する

Claude Designを試すなら、最初の課題は「募集ページ全体を完成させる」より、「講座内容を理解して無料相談へ進める一つの導線を作る」とすると評価しやすくなります。初稿と修正後を並べ、情報の不足、見つけやすさ、操作の迷い、スマートフォンでの読みにくさがどう変わったかを確認してください。

制作時間を記録する場合も、生成にかかった時間だけでなく、資料準備・修正・確認・実装まで分けて記録します。画面がすぐできても、確認や手直しに時間がかかるなら、その工程を改善する必要があります。AIの導入効果は、最終的に採用できる成果物まで含めて判断しましょう。

次の一歩は、目的・確定情報・維持するルールを一枚にまとめ、上のプロンプトで一つの案を作ることです。そして、五つの確認観点で修正します。AIが案を作り、人が判断基準を持って育てる。その往復を設計できることが、実務で使えるプロトタイプへの近道になります。