Claude Code Desktopでサイトを作って公開する

Dribbble で気に入ったウェブサイトデザインを探す

Dribbbleを開く

https://dribbble.com

デザインの方向性を1つ選ぶ

スクリーンショットを撮って保存する

ウェブサイト用のビジュアルを作成または収集する

Google Flow でオリジナルのビジュアルを作成するか、Pexels から既製の素材をダウンロードするか、実際のビジネス素材を使用します。

Google Flowを開く

https://labs.google/fx/tools/flow

Pexelsを開く

https://www.pexels.com

サイト用の画像を生成する

ウェブサイトにそのまま使える Google Flow の画像プロンプトを 1 つ作成します。

Create one premium, photorealistic, website-ready image for {{BUSINESS_TYPE}}. The image should show {{IMAGE_TYPE}}, shot in a {{VISUAL_STYLE}} style. Aim for {{MOOD}}. For colors, use {{BRAND_COLORS}}. Make it realistic and high-end, like professional commercial photography: clean, well lit, and uncluttered, with natural depth, sharp detail, and calm empty space where website text can sit on top. Generate one single, final, website-ready image only, and set its aspect ratio to {{ASPECT_RATIO}}. Do not create multiple variations, a collage, an image grid, a contact sheet, a split-screen or multi-panel composition, or several images combined into one result — return exactly one image. Avoid text, logos, watermarks, distorted faces or hands, busy or distracting backgrounds, heavy filters, neon glow, and any obviously AI-generated look.

Google Flowを開く

ビジネスまたはプロジェクトの種類

選択してください

画像の種類

選択してください

ビジュアルのテイスト

選択してください

ブランドカラー

選択してください

雰囲気

選択してください

アスペクト比

選択してください

ヒーロー動画を生成する

シネマティックな Google Flow の動画プロンプトを作成します。

Create a short, cinematic background video for the hero section of {{BUSINESS_TYPE}}. It should show {{VIDEO_SUBJECT}}, filmed using {{CAMERA_MOVEMENT}}. Aim for {{VISUAL_MOOD}}. The overall style should be {{BRAND_STYLE}}. Keep the clip short and easy to loop, around 5 to 10 seconds, with smooth, slow, steady motion. Make it premium and realistic, like a high-end commercial, and simple enough that a headline stays readable on top of it. Keep the lighting and color consistent with a professional website. Avoid text, logos, watermarks, fast cuts, shaky or jarring movement, distorted faces or hands, busy backgrounds, and any obviously AI-generated look. Deliver the video in {{VIDEO_ORIENTATION}}.

Google Flowを開く

ビジネスまたはプロジェクトの種類

選択してください

被写体またはシーン

例：木のカウンターに置かれた淹れたてのコーヒーから立ちのぼる湯気

カメラの動き

選択してください

ビジュアルの雰囲気

選択してください

ブランドのテイスト

選択してください

動画の向き

選択してください

ウェブサイトのアセットを整理する

ウェブサイトの画像とヒーロー動画は assets フォルダーに入れます。デザインの参考スクリーンショットはその外に置いてください。

Claude Desktop をインストールしてログインする

Claude Desktopをダウンロードする

https://claude.ai/download

ウェブサイトプロジェクト用のフォルダーを作成する

アセットフォルダーとインスピレーション用スクリーンショットを追加する

Claude Desktop でプロジェクトを開く

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Claude の frontend-design スキルをインストールする

frontend-design

Install the frontend-design Claude Skill from https://github.com/anthropics/skills/tree/main/skills/frontend-design for my user account. Inspect the SKILL.md and LICENSE.txt files first, then copy the complete frontend-design folder to ~/.claude/skills/frontend-design while preserving its structure. Confirm when it is installed and ready to use.

ウェブサイト用プロンプトをカスタマイズする

サイトを作る

ビジネス情報と用意したビジュアル参考素材を使って、完全なウェブサイト構築プロンプトを作成します。

Build a premium, visually impressive website for my business using the brief below. BUSINESS Business name: {{BUSINESS_NAME}} Business type: {{BUSINESS_TYPE}} Location: {{BUSINESS_LOCATION}} Main services: {{MAIN_SERVICES}} {{CONTACT_DETAILS}} Additional information: {{EXTRA_INFO}} DESIGN DIRECTION Brand colors: {{BRAND_COLORS}} Visual style: {{VISUAL_STYLE}} Main call to action: {{MAIN_CTA}} Sections: {{WEBSITE_SECTIONS}} Use the inspiration screenshot in this project folder as the visual direction. Match its layout feel, spacing, and quality level. Do not copy it exactly, and do not reuse its brand, logo, or text. ASSETS Use the images, logo, and video inside the assets folder in this project folder. Use the hero video wherever it makes the design stronger, and keep the headline readable on top of it. Do not use placeholder or stock images when a real file exists in the assets folder. WHAT TO BUILD Build a complete static website using only HTML, CSS, and JavaScript. If you ask me to choose a project type, use a multi-file static site. Name the main file index.html. Organize every required file clearly inside this project folder. Make the website: - premium, modern, and visually impressive - fully responsive on desktop, tablet, and mobile - built around a memorable, visually strong hero section - premium in its typography, with polished spacing and clear visual hierarchy - smooth, with tasteful animations and interactive details - easy to navigate, with clear navigation and obvious calls to action Avoid: - a generic AI-generated appearance - cluttered layouts, excessive gradients, or neon glow - placeholder text left in the final result - broken links or empty sections - React, Vite, npm, a build step, a backend, or a database Before you start building, ask me any essential questions if important information is missing. Do not invent contact details, prices, reviews, awards, or business claims. Use clearly editable placeholders instead.

任意の追加情報です。よく分からない場合は空のままで構いません。必要になれば Claude が尋ねます。

店舗・会社名

例：Apex Auto Detail

業種

選択してください

所在地

例：ポルトガル・リスボン

主なサービス

電話番号

任意

メールアドレス

任意

住所

任意

連絡先情報

ブランドカラー

選択してください

希望するビジュアルのテイスト

選択してください

サイトのセクション

選択してください

メインの行動喚起

選択してください

そのほか店舗について伝えたいこと

任意 — 営業時間、対応エリア、他店との違いなど…

ウェブサイトをビルドしてプレビューする

プロンプトを Claude Desktop に貼り付けて送信し、ビルドが完了したら最初のプレビューを開きます。

ウェブサイトを確認して仕上げる

デスクトップとモバイルのレイアウトを確認し、変更点を説明するか、必要に応じてスクリーンショットを添付します。

Hostingerを開く

Hostingerを開く

サイトをアップロードして公開するために、Hostingerのダッシュボードを開きます。

https://www.hostg.xyz/SHJlq

ウェブサイトの移行を設定する

Hostinger Add Website Migrate an Existing Website Upload Website or Backup Files

ドメインを選ぶ

一時的なドメインを選ぶか、プランに含まれるドメインを取得するか、すでに所有しているドメインを接続します。

ウェブサイトの ZIP をアップロードする

プロジェクトディレクトリ内のファイルとフォルダーを圧縮します（親フォルダーではありません）。こうすると index.html が ZIP のルートに配置されます。

公開中のウェブサイトをテストする

選択したドメインを開き、ウェブサイトがデスクトップとモバイルで正しく動作することを確認します。