ウェブサイトデザイン
目標
見込み顧客のビジネス向けに、洗練されたシングルページHTMLウェブサイトのモックアップを生成します。ウェブサイトはbuildinamsterdam.comの美学（太字のタイポグラフィ、オフホワイトの背景、エディトリアルグリッドレイアウト、テラコッタのアクセントカラー）にマッチします。ウェブデザインサービスの提案に使用します。
入力
- Googleスプレッドシート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スプレッドシートから1行の見込み顧客データを読み取り → JSONscripts/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エスケープ