- 投稿日：2026/04/24
- 更新日：2026/04/24
この記事は約10分で読めます
要約
ClaudeデスクトップアプリCodeタブで素材（メニュー・営業時間・アクセス）を参考にホームページの骨組みHTML/CSSをダークモード対策込みで作ってもらう手順を画像付きで解説します。
この記事でできること
前の記事で用意した素材ファイル（メニュー・営業時間・アクセス）をもとに、Claudeデスクトップアプリの「Code」タブでカフェのホームページの骨組み（index.html と style.css）を作ってもらい、ブラウザで表示するところまでを解説します。プロンプトをコピペするだけなので専門知識は不要です。
※画像の差し込みは次のClaude Designで行うため、本記事のスコープ外です。
前提
Claudeデスクトップアプリ導入済み／Claude Codeも使える状態~/Documents/cafe-hp-mock/files/ に menu.md / hours.md / access.md が配置済み
前提となる記事：
【画像で解説】Claude Chat（AI）にホームページ素材を作ってもらう手順
※画面はMacですが、Windowsもほぼ同じです。
※記事内の画面は2026年4月時点のものです。
続きは、リベシティにログインしてからお読みください
