今回のテーマ：ClaudeにHTML＋CSSをお願いしてみる
Claude（今回はSonnet）を使って、自然言語から シンプルな静的Webページ を生成する体験を行います。
キーワードは：
「自然言語で依頼し、HTML＋CSSを含んだ構造化出力を得る」
使用環境：
- Claude Sonnet（Poeの無料アカウント）
- Webブラウザ（出力結果はコピペしてLive Serverなどで確認）
公式サイトにアクセスしモデル選択
公式サイトにアクセスし、検索ウインドウ右上の「虫メガネ🔍」をクリック。
「Poe」公式サイト
最高のAIが全て一箇所に。GPT-4.1、Claude Opus 4、DeepSeek-R1、Runway、ElevenLabs、その他数百万のAIをご利用いただけます。
https://poe.com/モデル選択リスト画面が出るので、「Claude-3.5-Sonnet」と入力・選択。
Claude-3.5-Sonnet
- 2024年10月版の最新Sonnetモデル（Claude 3.5世代）
- Claude 3 Sonnetより高性能、かつClaude Opusにかなり近い
- 無料で使える（PremiumにしなくてもOK）
- 記事執筆、HTML生成、コードレビューに向いている
選択理由：速度・精度・会話能力のバランスが非常に良い
→ これを使って「Claude Code入門講座」シリーズを進めてください。
他の候補の補足説明（必要に応じて）
| 名称 | 内容 | 使用推奨度 |
|---|---|---|
| Claude-3-Sonnet | 旧モデル。軽量で速いが精度は劣る | △（可能なら3.5を） |
| Claude-3.7-Sonnet | ハイブリッド推論強化モデル（実験的） | △（研究・推論寄り） |
| Claude-Sonnet-4 / 4-Reasoning | 特定用途向けBot（制限付き） | ❌（初心者は非推奨） |
| Claude-3.7-Reasoning | 数学・思考系の強化Bot | ❌（通常開発には不要） |
使用手順（まとめ）
- Poe.com にログイン
- 左メニューの「探索」または上部検索で「Claude-3.5-Sonnet」と入力
- 「Claude-3.5-Sonnet（公式）」を選択して会話を開始
- プロンプトを入力して、HTML/CSSやコードを書いてもらう
実際の対話ログ（一部抜粋）
自己紹介ページ作成用プロンプト
HTMLとCSSで、自己紹介ページ製作用プロンプトを投げてみます。
HTMLとCSSで、自己紹介ページを作ってください。
内容は：
- タイトル「Hello, I'm lain」
- 見出し：自己紹介、スキル、リンク
- それぞれのセクションに簡単な文章を
- レイアウトは中央寄せ、フォントは読みやすく
Claude Sonnetの出力
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lain's Profile</title>
<style>
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
header {
text-align: center;
padding: 40px 0;
background-color: #fff;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5em;
color: #2c3e50;
margin-bottom: 10px;
}
section {
background-color: #fff;
padding: 25px;
margin-bottom: 30px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #3498db;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #2980b9;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
header {
padding: 20px 0;
}
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<header>
<h1>Hello, I'm lain</h1>
</header>
<section>
<h2>自己紹介</h2>
<p>
はじめまして、lainです。ウェブ開発とデザインに情熱を持つエンジニアです。
クリエイティブな問題解決と新しい技術の習得を常に心がけています。
</p>
</section>
<section>
<h2>スキル</h2>
<ul>
<li>HTML/CSS - ウェブデザインとレスポンシブ開発</li>
<li>JavaScript - フロントエンド開発</li>
<li>UI/UXデザイン - ユーザー中心の設計</li>
<li>Webアプリケーション開発</li>
</ul>
</section>
<section>
<h2>リンク</h2>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</section>
</body>
</html>
Claude Sonnetの補足説明
このHTMLファイルは以下の特徴を持っています：
- レスポンシブデザイン - モバイル端末でも見やすいレイアウト
- シンプルで読みやすいフォント
- セクションごとにカード型のデザイン
- 適度な余白とコントラスト
- やさしい影効果でセクションを浮き上がらせる
- スムーズなホバーエフェクト
- 中央寄せレイアウト
- セクションごとの見出しの装飾
必要に応じて、色やフォント、レイアウトなどをカスタマイズできます。
出力時のスクショ
確認用URL
自己紹介ページのURL
Poeで作成した自己紹介ページの確認用URL（シェア）
https://poe.com/preview/RCMg986ALIr41JXgRJZG出力内容のポイント
- HTML＋CSSを1つのブロックでまとめて出力
- モバイル対応（ viewport ）済み
- インデントや構造も読みやすい
- Claudeは文章構造と内容の整合性が高いのが特徴
所感・Tips
- Claude Sonnetでも十分に自然なHTML＋CSSが出力できた
- レイアウト指定（中央寄せ、フォントなど）もきちんと反映
- ChatGPTとの違いは、「丁寧な文章と、意図をくみ取る構文」
補足情報
①出力が崩れる場合の対処法
ClaudeのHTML出力は基本的に整っていますが、以下のような補助情報があるとさらに親切です：
- 「HTML/CSSが一部切れてしまう場合は、続けてやコードの続きを出してくださいと伝える」
- 「タグが閉じられていない場合もあるので、自動整形ツールやVSCodeのフォーマッタで補うとよい」
②出力を整えるプロンプトTips
今回は「構造」「内容」「見た目」すべてをまとめて依頼していますが、
あえて分けて依頼することで、より詳細な制御も可能です。
例：
まずHTML構造だけ出してください。そのあとCSSを別にお願いします。
または、
HTMLはレスポンシブ対応にしてください。スマホでは縦並び、PCでは横並びでお願いします。
など、段階的に依頼するプロンプト例を1つ紹介すると、次章とのつながりも自然です。
③「読みやすいコードを書く」点を強調しても良い
GPTと比べてClaudeは、初心者が学びやすい構文やコメントを添えてくれる点が強みです。
- 例：「初心者に読みやすい変数名やインデント」「冗長ではないが説明的なCSS」など。
今後の活用アイデア
- ポートフォリオページの生成
- プロフィールカード形式への応用
- Hugo記事のHTML下書き作成支援
次回予告
👉 [Claude Code入門講座 #03：Claudeで簡単なJSゲームを作る - モグラ叩き編]
💬 コメント