ClaudeやChatGPTなどのスマホアプリでホームページを作る全手順とプロンプト

概要

Claude Code等のツールを使わず、ClaudeやChatGPTといったスマホアプリだけでホームページを作る手順を解説する動画。情報整理→ロゴ作成→テンプレートへの当てはめ→画像生成→調整→公開という流れを、実際の公務店サイト制作を例に実演している。

主なポイント

• スマホアプリ(Claude/ChatGPT/Geminiいずれでも可)のみで、Claude CodeやCodexなど開発ツールなしにホームページ制作が完結する
• 業種ごとに「サイトを見に来る人は誰か」「何を確認しに来るか」をAIに整理させてから掲載項目を決める事前準備が重要
• Auraというサイトのロゴコンポーネントを参考HTMLとして添付し、AIにロゴ案を複数作らせてから色・字体を調整する
• Auraの業種別テンプレート(フリー/プロ)をHTMLでダウンロードし、それをAIに読み込ませて自社情報を流し込む
• 海外製テンプレートは日本語に合わせて文字サイズ・行送り・字送り・両端揃えなどのスタイル調整を明示的に指示する必要がある
• 必要な画像サイズをAIに一覧出力させ、手元の実写真を「プロが撮ったような写真」に加工する(ゼロから生成せず実写ベース)
• 人物写真は顔がAI感丸出しになりやすいため、代表者の顔写真はイラスト化して差し替えるのも一つの手
• 完成後はAIに最終チェックをさせ、公開前に直すべき点(未確定情報・レスポンシブ崩れ等)を洗い出してもらう
• HTMLと画像一式をZIPにまとめCloudflare Pages(pages.dev/drop)にアップロードするだけで公開URLが発行される

実践に使えること

• ホームページ制作をAIに依頼する前に「誰が何を確認しに来るか」を質問形式で整理させると情報設計の質が上がる
• 海外テンプレートを使う際は日本語向けのタイポグラフィ調整を明示的に指示する
• 素材写真は完全AI生成でなく手元の実写を加工することで「嘘っぽさ」を回避できる
• Cloudflare Pagesのドラッグ&ドロップ公開(pages.dev/drop)は無料かつサーバー契約不要でホームページを即時公開できる