「ブログの見出しをおしゃれにしたいけど、CSSがわからない」——そんな悩みを解決するツールを、Claude Codeにプロンプトを投げるだけで作ってみました。プログラミング経験がなくても、AIに日本語で指示するだけでWebアプリが完成する時代です。この記事では、実際に使ったプロンプトから完成までの全過程を公開します。
完成したアプリ「見出しデザイン プレビューア」
まずは完成物をご覧ください。以下のリンクから実際に触れます。
デモURL：見出しデザイン プレビューア
主な機能
- 見出しデザイン14パターンをリアルタイムプレビュー
- CSSアニメーション付きデザイン7種（ホバーエフェクト・グラデーション流れ・タイピングカーソルなど）
- HTML+CSSをワンクリックでコピー（WordPressのカスタムHTMLブロックにそのまま貼れる）
- 見出しテキスト・HTMLタグ（h2/h3/h4）を自由に変更可能
- HTMLファイル1つで完結。ビルドツール不要
WordPressのブロックエディタでは再現できないデザイン（グラデーションボーダー、マーカー風、リボン、ストライプ背景、CSSアニメーションなど）に絞っているのがポイントです。
実際に使ったプロンプト
Claude Codeに投げたプロンプトはこれだけです。
ブログの見出しデザインをプレビューできるWebアプリを1つのHTMLファイルで作ってください。
要件：
- 見出しデザインを10パターン以上用意
- CSSアニメーション付きのパターンも含める
- 各デザインのHTML+CSSをワンクリックでコピーできるボタン
- WordPressのカスタムHTMLブロックにそのまま貼れる形式で出力
- 左カラムにテキスト入力・HTMLタグ選択、右カラムにプレビュー一覧の2カラムレイアウト
- レスポンシブ対応
- Noto Sans JPフォント使用このプロンプト1つで、約800行のHTMLファイルが生成されました。フレームワークもビルドツールも使わず、ブラウザでファイルを開くだけで動きます。
Claude Codeはどう動いたか
プロンプトを受け取ったClaude Codeは、以下の順序でアプリを組み立てました。
- HTML構造の作成 — ヘッダー、2カラムレイアウト、カード型のプレビューエリア
- CSSスタイルの定義 — 14種類の見出しデザイン（静的7種 + アニメーション7種）
- JavaScriptの実装 — テキスト入力の反映、CSSコピー機能、コード表示のトグル
- レスポンシブ対応 — スマホでは1カラムに自動切替
特筆すべきは、CSSアニメーション付きのデザインでは@keyframesや::after擬似要素が必要になるため、コピー出力を自動的に「HTML+CSSセット」形式に切り替えている点です。インラインスタイルでは表現できないデザインを正しく判定して、出力形式を変えています。
やり取りで調整したポイント
1回のプロンプトで基本形は完成しますが、そこから会話で微調整していきます。実際のやり取りを紹介します。
1. WordPressブロックエディタと重複するデザインの除外
最初の出力には「左ボーダー」「背景色」など、WordPressのブロックエディタで標準機能として設定できるデザインが含まれていました。ツールの価値を高めるため、ブロックエディタでは再現困難なデザインだけに絞り込みました。
2. タイピングカーソルの表示位置
タイピングカーソル風のアニメーションで、カーソル（点滅する縦線）がテキストの末尾ではなく、行の右端に表示されてしまう問題がありました。原因はCSSのwidth: 100%が効いていたためで、display: inlineとwidth: autoを指定して修正しました。
3. アニメーションのリピート設定
最初の出力では、アニメーションが1回再生して止まるものが混在していました。ブログに貼る見出しとしては常に動いている方が自然なので、すべてanimation: ... infiniteのリピート再生に統一しました。
非エンジニアがClaude Codeでアプリを作るコツ
今回の経験から、プログラミング未経験でもアプリを作るためのポイントをまとめます。
「1ファイルで完結」を指定する
「HTMLファイル1つで作って」と指示するだけで、React・Vue等のフレームワークを使わないシンプルな構成になります。ファイルをダブルクリックすればブラウザで動くので、開発環境のセットアップが不要です。
要件を箇条書きで伝える
「いい感じに作って」ではなく、欲しい機能を箇条書きで列挙します。曖昧な指示だとAIが勝手に判断して、必要のない機能が入ったり、逆に必要な機能が抜けたりします。
完成後の修正は日本語で伝えるだけ
「タイピングカーソルをテキストの末尾に表示して」「アニメーションをリピートにして」など、修正指示も日本語で伝えれば対応してくれます。コードを読む必要はありません。
デプロイまでAIに任せる
GitHub Pagesへのデプロイ（公開）もClaude Codeが対応します。「GitHub Pagesで公開して」と伝えれば、リポジトリ作成からデプロイ設定まで自動で進めてくれます。完成物がURLで共有できる状態になるまで、ターミナル操作は不要です。
技術構成
| 項目 | 内容 |
|---|---|
| 使用言語 | HTML / CSS / JavaScript（バニラ） |
| ファイル数 | 1ファイル（index.html） |
| 行数 | 約800行 |
| フレームワーク | なし |
| ビルドツール | なし |
| ホスティング | GitHub Pages（無料） |
| AI | Claude Code |
よくある質問
Q. Claude Codeは無料で使えますか？
Claude Codeの利用にはAnthropicの有料プラン（Claude Pro：月額20ドル〜）が必要です。無料プランでは使用できません。
Q. プログラミングの知識がなくても使えますか？
はい。日本語でやりたいことを伝えるだけで、コードの生成からファイル作成まで自動で行います。エラーが出た場合も、画面に表示された内容をそのまま伝えれば修正してくれます。
Q. 見出しデザインをWordPressで使うにはどうすればいいですか？
ツールの「HTML+CSS」ボタンでコピーした内容を、WordPressのブロックエディタで「カスタムHTML」ブロックを追加し、そこに貼り付けるだけです。
Q. GitHub Pagesの公開は無料ですか？
はい。GitHubアカウント（無料）があれば、GitHub Pagesで静的サイトを無料でホスティングできます。独自ドメインの設定も可能です。
Q. このツールのソースコードは公開されていますか？
はい。GitHubで公開しています。MITライセンスなので、自由に使用・改変できます。
関連コンテンツ
- CSS実装テクニック集【基礎・レイアウト・アニメーション・設計手法】
- CSS Grid Generator｜直感操作でグリッドレイアウトを生成
- WordPressプラグイン「ORECTIC SEO CHECK」｜管理画面からSEO診断
- HTML/CSS練習問題20選｜初心者向けコーディング実践課題集
まとめ
Claude Codeを使えば、プロンプト1つでHTMLファイル1つのWebアプリが作れます。今回作った「見出しデザイン プレビューア」は、プロンプト投入から公開まで実質的な作業時間は数十分でした。
ポイントは「1ファイルで完結」「要件を箇条書き」「修正も日本語で」の3つ。非エンジニアでも、自分だけのWebツールを作って公開できる時代になりました。
ぜひオリジナルアプリをつくってみてください。
