【初心者必見】コード不要!Claudeでウェブサイトを作る完全デモ

概要

Claude(Anthropic)のArtifacts機能と新機能Claude Designを使い、プログラミング知識ゼロで15分でプロ品質のホームページを作るデモ動画。会話だけでサイトの骨格を作り、細部のデザインを仕上げる2段階のワークフローを紹介している。

主なポイント

• Claude Designは2026年4月17日にAnthropicがリリースしたビジュアル生成特化の新機能で、Proプラン以上・週ごとの利用枠制限付きで利用可能
• Artifactsはテキスト指示だけでウェブページのコードを自動生成しその場でプレビューできる、無料プランでも使える定番機能
• Claude Opus 4.7のビジョン能力により、色の使いすぎや余白不足など非デザイナーが陥りがちなミスを自動回避してデザインを生成
• 編集ボタンから文字修正・サイズ変更・色変更などピンポイントの部分修正が可能で、全体の構成を崩さずに繰り返し修正できるのがClaudeの強み
• 既存サイトのスクリーンショットを添付すればそのデザインテイストを抽出して反映させることも可能
• 理想のワークフローはArtifactsで素早く骨格を作り、Claude Designで仕上げ、Netlifyへドラッグ&ドロップで無料公開する3ステップ
• AIが生成した文章(住所・電話番号・価格など)は公開前に必ず人間が事実確認する必要がある
• この手法は情報表示中心の静的サイト向けで、会員ログインや決済・データベース連携が必要な場合はClaude Codeへのステップアップが必要

実践に使えること

• Claudeのデザインメニューでプロジェクト名・サイト概要・特徴を伝えるだけでサイトの初期構成を作れる
• 対象ユーザー・デザインの方向性・言語・デバイス・欲しいセクション・インタラクティブ要素・ブランドカラーなどを質問に答える形で指定すると精度が上がる
• まずArtifactsで骨格を作り、Claude Designで仕上げるという2段階のワークフローを試す
• 参考にしたい既存サイトのスクリーンショットを添付してデザインテイストを指定する
• 完成サイトはNetlifyへドラッグ&ドロップして無料公開する