【Claude 3.7 Sonnet】最新AIのコーディング力で爆速でホームページ作ってみた！

近年、Web制作の現場でも生成AIの活用が注目されています。2025年2月に登場したAnthropic社のClaude 3.7 Sonnetは、特にコーディングやフロントエンド開発で大幅な性能向上を示した最新モデルです​。

Claude 3.7 Sonnetについて詳しく解説した記事はこちら→

https://note.com/embed/notes/n3efbaa4be0b7

こうしたAIの力を使えば、ホームページ制作はどこまで効率化できるのか実際に私の事業部の簡単な紹介用ページを制作してその威力を確かめてみました。

要件定義とAIへの指示

まず最初に、どのような事業紹介サイトを作るか要件を整理しました。
すでにノーコードツールで作ったページのスクリーンショットをClaudeに与えてみます。

上の画像のような依頼をしてみたところ、以下ように整理してくれました。

株式会社メイト ウェブページ要件定義

1. サイト構造

• 会社概要、サービス、お知らせ、お問い合わせフォームを含む単一ページのウェブサイト
• トップに主要セクションへのリンクがあるナビゲーションメニュー
• ヘッダーとフッターに会社ロゴ「mate」を目立つように配置

2. コンテンツセクション

ヘッダー

• 会社ロゴと以下のメニュー項目を含む固定ナビゲーションバー：
  • ご紹介
  • 私たちの仕事
  • お知らせ
  • 会社情報
  • お問い合わせ

ヒーローセクション

• デジタルトランスフォーメーションに取り組む人々を示す大きなバナー画像
• 見出し：「中小企業のDXを加速させる」

会社紹介

• 会社のミッションとデジタルトランスフォーメーションへのアプローチに関する説明文
• デジタルワークスペースを示すサポート画像

サービス内容

• アイコンと説明付きの3つの主要サービスカテゴリ：
  1. ノーコードによるシステム開発事業
  2. AIを活用した業務効率支援
  3. 迅切な手技でのwebサイト制作
• 各サービスには簡潔な説明とサポート画像を含む
• 詳細情報へのリンク「VIEW MORE」ボタン

会社情報

• 構造化された表形式での会社ロゴとプロフィールの詳細：
  • 会社名：株式会社メイト
  • 代表取締役：新名海斗
  • 設立：2020年2月5日
  • 電話番号：03-6346-6161
  • 所在地：大阪府大阪市天神橋3丁目2-9 川那辺ビル７F
  • 公式HP：https://mates-promo.com/

お知らせセクション

• 「お知らせ」見出し
• 小さな画像とテキストを含むニュース項目：「AIを活用した業務効率支援をリリースしました」
• ニュースの日付と簡単な説明

お問い合わせフォーム

• セクション見出し「お問い合わせ」
• お問い合わせフォームの導入テキスト
• フォームフィールド：
  • お名前（必須）
  • 会社名
  • メールアドレス（必須）
  • 電話番号
  • お問い合わせ内容（必須）
  • プライバシーポリシーのチェックボックス
  • 濃紺の「送信」ボタン

フッター

• 会社ロゴ
• ヘッダーと一致するナビゲーションリンク
• 著作権情報
• プライバシーポリシーへのリンク

3. デザイン要素

• カラースキーム：黒、白、ボタン用の濃紺
• タイポグラフィ：クリーンでモダンなサンセリフフォント
• 画像：木製テーブルのある会議室、コンピューター作業をする人々、デジタルインターフェース
• モバイルとデスクトップデバイスで動作するレスポンシブデザイン
• クリーンで専門的な外観のための十分な余白

4. 技術要件

• HTML5/CSS3準拠
• レスポンシブフレームワーク（Bootstrapまたは同様）
• 検証機能付きのお問い合わせフォーム
• クロスブラウザ互換性
• 高速読み込み時間
• 日本語検索向けSEO最適化

5. 機能性

• ナビゲーションからセクションへのスムーズなスクロール
• 検証機能付きのインタラクティブなお問い合わせフォーム
• チェックボックスリンクからのプライバシーポリシーモーダル/ポップアップ

Claude 3.7のコーディング力

先ほどの要件定義をそのままコピーしページの制作を依頼したところコードを生成してくれました。出来上がったページはそのまま右画面のPreviewモードで確認できます。

Claudeは一度の応答でHTML/CSS/JSすべてをまとめて出力してくれるので、すぐにプレビューを見ることができます。私もPreviewモードも使いましたが、より詳細な部分を見たかったので自分のPCにindex.htmlというファイルのみを作りそのファイルにすべてをコピペするだけで簡単にチェックすることができました。

デザインのカスタマイズ

生成直後のサイトはひとまず要件通りのものが出来上がりましたが、「さらにデザインを良くしたい」と思う点も出てきます。そこで、Claudeに追加の指示を与えてデザイン調整を行ってみました。ありがたいことに、Claudeは一度生成したコードに対して「ここを直して」と会話形式で依頼すると、その依頼に対応する部分を前回のコードから見つけ出し、対応する箇所を書き直してくれます​。

例えば、最初の出力ではボタンのデザインがシンプルすぎたので修正を依頼してみました。「モダンでおしゃれなデザインにして」といっただけで下のようにここまで詳しくデザインをClaude自身で考え実装してくれました。

次にある程度納得したものができれば、HTML・CSS・JavaScriptといったそれぞれのファイルに分けて出力してもらいます。下のようなファイルの構成からClaude自身で考え、出力してくれます。このとき、今までのHTMLにまとめて各やり方ではないのでパスの指定が必要になりますが、下のディレクトリの構成に従ってClaude自身でパスの指定が済んだコードを出力してくれます。

最終的に画像をCanvaでササっと生成し、出来上がったものは下のリンクからご確認いただけます。

株式会社メイト – 中小企業のDXを加速させるmates-promo.com

Claudeを使うメリット

やってみて感じたメリットの一つは、圧倒的なスピード感です。ここまで1時間もかかっていません！！詳細な要件定義から実装まですべてを指示のもと進めてくれますし、一度にコード全体を出力するので時間がかかりそうですが、Claude 3.7 Sonnetは一瞬でコードを生成してくれます。
また、自然言語のみの指示でコードが書けるので、ヒーローヘッダをスライドショーにするのも「ヒーローヘッダをスライドショーにして」と指示するだけで簡単におしゃれなサイトが作れてしまいます。

二つ目は修正の簡単さです。
ディレクトリの構造全体を理解・把握してくれるため修正が容易に行えました。簡単な指示ですぐにおしゃれなデザインに修正できるので人間は「こうなったらいいな」を伝えるだけでClaudeが一瞬で修正してくれます。また、コードやプレビューがリアルタイムで見られるのでコードの生成・修正後のチェックも簡単にできます。

まとめ

今後も生成AIの進化は続きますが、現時点でもClaude 3.7 Sonnetは「AIと二人三脚でWeb制作するアシスタント」としての実用的なツールとなっています。私自身、今回の体験で得た手応えを踏まえ、これからのプロジェクトでも積極的にClaudeを相棒として活用していきたいと思います。参考にするサイトがなくとも、自分のイメージを自然言語で伝えるだけでも詳細な要件定義から実装までが可能となったいますので、皆さんもぜひ一度、この新しい開発体験を試してみてはいかがでしょうか。Claude 3.7 Sonnetが生み出す可能性に触れれば、きっとWeb制作の概念が変わるはずです。

株式会社メイトではこれからも最新のAI技術をまずは自分たちから活用し、その知識やノウハウを発信していきます。
そんな経験と知識をもとにAIについての講義、導入、AIを組み込んだシステム開発などを手掛け、未来のビジネスを創造するDXパートナーを目指しています。ご相談やお問い合わせなど、どうぞお気軽にご連絡ください。