design-website

ウェブサイトのデザイン

目標

見込み顧客のビジネス向けに、洗練された1ページのHTMLウェブサイトのモックアップを生成します。ウェブサイトはbuildinamsterdam.comの美的スタイルに合わせます。大胆なタイポグラフィ、オフホワイトの背景、エディトリアルなグリッドレイアウト、テラコッタのアクセントが特徴です。ウェブデザインサービスの提案に使用します。

入力

• 見込み顧客データを含むGoogle Sheet URL
• 対象の見込み顧客を選ぶ行番号（ヘッダーを除き、1から始まる）
• 任意：ワークシート名（デフォルトは最初のシート）

想定されるシートの列

スクリプトは以下の列をマッピングします（大文字と小文字を区別せず、柔軟に照合します）。

列	マッピング先
company_name / company	ビジネス名（ヒーロー、ナビゲーション、フッター）
description / about	概要セクション＋ヒーローのサブタイトル
keywords / services	サービスのグリッド（カンマ区切り）
phone / phone_number	お問い合わせセクション
email / contact_email	お問い合わせセクション
address / full_address	お問い合わせセクション
city, state, country	所在地情報
industry / category	Unsplashの画像検索クエリ
first_name, last_name	オーナーのクレジット表記
title / role	オーナーの役職

スクリプト

• scripts/read_prospect.py — Google Sheetsから見込み顧客の1行を読み取り、JSONに変換します
• scripts/generate_website.py — 見込み顧客のJSONからHTMLウェブサイトを生成します

手順

ステップ1：見込み顧客データを読み取る

python3 .claude/skills/design-website/scripts/read_prospect.py \
  --url "SHEET_URL" \
  --row ROW_NUMBER \
  --worksheet "WORKSHEET_NAME"  # optional

標準出力にJSONを出力します。

ステップ2：ウェブサイトを生成する

python3 .claude/skills/design-website/scripts/read_prospect.py \
  --url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py

JSONファイルを使う場合：

python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json

ステップ3：プレビューする

生成されたファイルをブラウザーで開きます。

open .tmp/website_*.html

出力

• .tmp/website_{company_slug}.html — あらゆるブラウザーで表示できる、自己完結型のHTMLファイル
• CSSはすべてインラインで、画像は外部URL（Unsplash）を使用します

環境

• .env の UNSPLASH_ACCESS_KEY — ストックフォトに必要です。無料のキーは https://unsplash.com/developers で取得できます
• キーが設定されていない場合は、厳選されたプレースホルダー画像（picsum.photos）にフォールバックします
• Google SheetsへのアクセスにはGoogle OAuth認証情報（token.json / credentials.json）が必要です

デザインシステム

• フォント：Inter（Google Fonts CDN）
• 色：オフホワイト #F2EFE6、黒 #000、白 #FFF、テラコッタ #C38133
• タイポグラフィ：太字の大文字ディスプレイ文字（72-100px）、セクション見出し（36-48px）、本文（16-18px）
• レイアウト：全画面ヒーロー、2列の概要、3列のサービスグリッド、2x2のギャラリー
• ボタン：枠線付き、大文字、文字間隔を広めに設定

エッジケース

• 列が欠けている場合：スクリプトは適切なデフォルト値を使用します（説明がない場合は「Welcome」など）
• Unsplashキーがない場合：picsum.photosのプレースホルダー画像にフォールバックします
• 会社名が長い場合：CSSがレスポンシブなフォントサイズで折り返しに対応します
• 特殊文字：出力時にHTMLエスケープされます

---

スキーマ

入力

名前	型	必須	説明
sheet_url	string	はい	見込み顧客データを含むGoogle Sheet URL
row	integer	はい	行番号（ヘッダーを除き、1から始まる）
worksheet	string	いいえ	ワークシート名（デフォルト：最初のシート）

出力

名前	型	説明
html_file	file_path	.tmp/website_{slug}.html にある自己完結型のHTMLファイル

認証情報

名前	ソース
UNSPLASH_ACCESS_KEY	.env（任意。設定されていない場合はpicsumにフォールバック）

組み合わせ可能なツール

このツールと連携するスキル：scrape-leads、gmaps-leads

コスト

無料（Unsplashの無料利用枠）