【スマホで完結！】Claudeを使って自分のホームページを作るプロンプト手順【Chat GPT・Geminiでもおｋ】

〔業種〕のホームページを作ります。1ページ完結の予定です。

まず、この業種のサイトを見にくるのはどんな人か、
その人が何を確かめたくて来るのかを整理してください。

・訪問者はどこから来るか（検索／看板／紹介／SNS／地図アプリ）
・来た時点でどんな状態か（急いでいる／比較検討中／不安がある）
・何を確かめられたら安心するか
・何があると離脱するか
・検討から決断までどれくらいかかるか
・このサイトの「唯一の仕事」は何か

そのうえで、載せるべき項目と、載せなくていい項目を教えてください。

属性ではなく、行動と状態で書き直してください

その訪問者像で進めます。
必要な情報を項目ごとに聞いてください。

このロゴをWebサイトで使います。
以下を確認して、足りないものがあれば作ってください。

・背景が透過されているか
・16px まで縮小して判別できるか（favicon 用）
・単色にしても成立するか
・暗い背景に置いたときに見えるか
・正方形に切り出せるシンボル部分があるか
・高さ36pxの横ロゴにしたときに社名が読めるか

主要色をHEXで抽出して報告してください。
SVGでなければ、単色パスのSVGにトレースし直してください。

〔ロゴが入っているコンポーネントのHTMLを添付〕

このHTMLにを参考に、ロゴを3案作ってください。
STEP 1 で整理した情報に合うものにしてください。
各案とも、シンボルから社名の文字組みまで通しで作ってください。

【シンボル】
・画像生成ではなく、SVGコードで直接書く
・viewBox="0 0 48 48" の正方形／fill="currentColor"／パスは最小限
・文字は入れない
・単色で成立する（塗り分けに意味を持たせない）
・16px まで縮小しても判別できる
・〔業種〕でありふれた記号は避ける

【社名の文字】
・「〔正式表記〕」を既存の書体で組む（文字を描き起こさない）
・Google Fonts など無料で使える日本語書体を優先
・使った書体名を明記する
・この段階ではアウトライン化しない

【出力】
・3案を1つのHTMLファイルにまとめてください（ブラウザで開いて比較できる形）
・各案について、次を並べて表示してください
  - 添付HTMLに差し込んだ実寸のプレビュー
  - 拡大表示（形を確認する用）
  - 白背景と暗い背景の両方
  - シンボル単体を16pxで表示
・SVGはインラインで書き、外部ファイルを参照しないこと
・各案の下に、どんな印象で、なぜこの訪問者に合うのかを1行

社名：〔正式表記〕
英字表記：〔ある場合〕
避けたいイメージ：

〔選んだ案〕で確定します。Webサイトで使える形に整形してください。

まず社名の文字をアウトライン化してください。
・字間・字面の調整はアウトライン化の前に済ませる
・text 要素を残さず、すべて path にする
・font-family の指定に依存しない状態にする

そのうえで、以下を書き出してください。

1. 横組みロックアップ（シンボル＋社名）／SVG／添付HTMLと同じ高さ
2. シンボル単体／SVG／viewBox="0 0 48 48"
3. 白抜き版（暗い背景・ヒーロー用）
4. 単色版（fill="currentColor"）
5. favicon 32px / apple-touch-icon 180px
6. 主要色のHEX

このテンプレート〔HTMLファイルを添付〕とロゴ〔画像を添付〕を基に
ホームページを作ってください。
情報は先ほど整理したものを使ってください。

文言もこの段階で、各セクションの入る長さに合わせて書いてください。

・テンプレートの構成は変えないでください
・セクションを勝手に増やさないでください
・入らない情報は押し込まず、後でまとめて報告してください
・未確定の箇所は〔要確認〕と書いてください

英語テンプレートなので、日本語に合うように次を参考にスタイルを調整してください。

・フォントを日本語のあるものに差し替える（欧文フォントに日本語グリフはない）
・文字サイズを縮める
・行送りを調整
・字送りを調整
・約物を詰める（font-feature-settings: "palt" 1）
・両端揃えをやめる（text-align: justify → left）
・改行は overflow-wrap: break-word にする（anywhere は使わない）
・テキストアニメーションを文字単位にする（スペース分割は使わない）

ロゴの主要色をアクセントカラーにしてください。
テンプレート側のアクセント色は捨ててかまいません。
見出しの書体も、ロゴの書体の傾向に合わせてください。

画像は後から差し替えます。

テンプレートに入りきらなかった情報を全部リストにしてください。

それぞれについて、次のどれかを判定してください。

A. この業種のサイトに事実上必須（無いと問い合わせが来ない／法令で必要）
B. あったほうがいいが、無くても成立する
C. 今回は不要

判定の理由も1行で書いてください。

〔追加するコンポーネントのHTMLを添付〕

これを〔挿入位置〕に追加してください。
レイアウトの骨格だけを借りて、見た目は既存のページに合わせてください。

・色・書体・角丸・影・余白は、既存セクションの値に置き換える
・コンポーネント側が持ち込んだ独自のCSS変数・クラス名は残さない
・デモのダミーテキストと画像は全部消す
・外部ドメインを参照している画像があれば報告する
・新しい外部ライブラリ（CDN）が増えるなら、先に報告する

入れる内容：
〔このセクションに載せる情報〕

このセクションを追加してください。

・新しい色・書体・角丸・影を導入しないでください
・既存セクションの余白と最大幅をそのまま使ってください
・〔似ているセクション名〕と同じ構造で組んでください

このサイトで使っている画像を全部洗い出してください。

それぞれについて、画面幅によって枠の縦横比がどう変わるかを
1920 / 1440 / 1366 / 1024 / タブレット縦 / スマホ /
小型スマホ / 横向きスマホ で測ってください。

そのうえで、次の表だけを出力してください。

| 通し番号 | 使用箇所 | 何の画像か | 出力サイズ(px) |

出力サイズは、切り落としが最小になる比率で、
実際に必要な解像度で書いてください。

ホームページの〔使用箇所〕の〔何の画像か〕に使う写真です。

この写真をプロが撮ったような写真に、〔幅〕×〔高さ〕px で
作り直してください。

ホームページの事業内容の平屋づくりの箇所のイメージ写真です。

この写真をプロが撮ったような写真に、1600 × 1067 px で
作り直してください。

この写真を、サイトのイメージに合ったイラストに変換します。
サイトのHTMLデザインを見て、合うテイストでのイラスト化のプロンプトを作ってください。

・背景なし（透過、または単色で抜く）
・正面を向いていない。視線もカメラを外す
・仕事中のひと時のような、動作の途中の姿
・他人が撮ったような距離感と画角にする
・自撮りの特徴を全部消す
・サイズは〔幅〕×〔高さ〕px

この画像を〔配置場所〕に組み込んでください。

公開前の最終確認をします。
次の項目を上から順に確認して、結果を表で報告してください。
「問題なし」ではなく、測った値・該当箇所・件数で書いてください。

【表示】
・1920 / 1440 / 1024 / タブレット / スマホ / 小型スマホ / 横向きスマホ
  それぞれで、横スクロールが発生していないか
・JSエラーの件数（0でなければ内容も）
・画像の主題が切れていないか
・文字が乗っている画像のコントラスト比（見出し3.0:1／本文4.5:1）

【日本語組版】
・字間が不自然に伸びている箇所
・英数字が単語の途中で改行されている箇所
・暗い背景で本文が掠れている箇所

【リンクと導線】
・リンク切れ
・電話番号が tel: リンクになっているか
・フォームの送信先が設定されているか（未設定なら明示）
・「いちばんしてほしい行動」が最上部と最下部の両方にあるか

【内容】
・〔要確認〕の残数と、残っている箇所
・住所・電話・営業時間・許認可番号が揃っているか
・同じ情報で食い違っている箇所（営業時間と定休日など）

【ファイル】
・相対パスの画像で、実体が無いもの
・外部ドメインを参照している画像・スクリプト・フォント

最後に、公開前に直すべきものだけを、直す順に並べてください。

指摘のうち〔番号〕を直してください。
直したら、同じ項目をもう一度測って、直前の値と並べて報告してください。

〔Cloudflare Pages／Netlify／Vercel〕にそのままアップロードできる
形でzipにしてください。

- 埋め込み画像は外部ファイルに出す
- テンプレート由来の外部ドメイン参照があればローカル化する
- キャッシュ設定、favicon、404ページ、robots.txt、sitemap.xml、
  OGP、構造化データを追加
- index.html はアーカイブ直下に置く