ui-templates

UI テンプレート — 人間がデザインしたテンプレートライブラリ

9 つのプロフェッショナルなテンプレートライブラリから提供される 380 個の構築済み HTML/CSS/JS テンプレートです。 すべてのテンプレートは人間によってデザインされており、本物のデザイン品質を備えています — AI 生成ではありません。 エージェントは必ず既存のテンプレートを出発点として使用してください。HTML/CSS/JS をゼロから書いてはいけません。

---

1. テンプレートの探し方

ステップ 1 — カテゴリを決定する

ユーザーのリクエストを §4 カテゴリリファレンスの 1 つ以上のカテゴリに照合します。 正確に — 一般化した憶測ではなく、ユーザーが実際に述べたニーズに一致させてください。

• 「レストランのウェブサイトが欲しい」 → restaurant
• 「ポートフォリオを作ってほしい」 → portfolio
• 「ブログが必要」 → blog
• 「アプリのランディングページを作ってほしい」 → app または landing
• 不明確または一般的なリクエスト → 候補となる 2〜3 個のカテゴリカタログを読んで比較する

ステップ 2 — カテゴリカタログを読む

各カテゴリには JSON カタログファイルがあります: catalogs/{category}.json（このスキルディレクトリからの相対パス）。

read_file("skills/ui-templates/catalogs/{category}.json")

特定のカテゴリが一致しない場合は、catalogs/multipurpose.json を使用してください。 広範なリクエストの場合は、複数のカタログを読んでください（例: personal と portfolio の両方）。

ステップ 3 — カタログメタデータを使ってテンプレートを照合する

各カタログエントリには、インテリジェントな選択のための豊富なメタデータが含まれています:

フィールド	型	使用方法
matchSignals	string[]	主要なマッチング — キーワード配列。ユーザーのリクエストキーワードと照合します。
description	string	150〜700 文字の詳細な視覚的・構造的説明。適合性の評価とユーザーへの提示に使用します。
colorScheme	"dark" / "light" / "mixed"	ユーザーのスタイルの好みに合わせます。
visualStyle	string	一行の視覚的雰囲気の概要。ユーザーへの提示に使用します。
layout	string	"single-page" / "multi-page" / "sidebar" / "fullscreen" / "grid" / "dashboard"
features	string[]	機能的な能力（例: "responsive"、"search"、"accordion"）。
sections	string[]	ページセクションの種類（例: "hero"、"pricing"、"contact"）。
colorPalette	object	名前付きの役割を持つ完全なカラーシステム。カスタマイズ時に使用します。
typography	object	フォントファミリー、ウェイト、サイズ、スペーシング、スタイル。カスタマイズ時に使用します。
source	string	テンプレートのソース — 品質ティアを示します（§3 を参照）。

マッチングの優先順位:

1. matchSignals のキーワードがユーザーのリクエストと重複しているか
2. features と sections がユーザーの機能的なニーズに一致しているか
3. colorScheme + visualStyle がユーザーの美的な好みに一致しているか
4. source の品質ティア（より高いティアを優先）

ステップ 4 — テンプレートをダウンロードして使用する

テンプレートは GCS でホストされています。各カタログエントリには、.zip ファイルを指す downloadUrl フィールドがあります。

# Download and extract the template
curl -sL "{downloadUrl}" -o /tmp/template.zip
mkdir -p output/website
unzip -o /tmp/template.zip -d output/website/
rm /tmp/template.zip

展開後、カタログエントリの indexPath フィールドを使用して、展開先ディレクトリ内の index.html を特定してください。

---

2. カスタマイズガイド

テンプレートをカスタマイズする際は、人間がデザインした構造を保ちながら、コンテンツの置き換えに集中してください:

1. ページタイトルと見出し — <title> と主要な見出しを更新する
2. ナビゲーション — 実際のセクションに合わせてナビリンクを調整する
3. 本文テキスト — lorem ipsum を実際のコンテンツに置き換える
4. 画像 — ユーザーが自身の画像を提供しない限り、テンプレートのオリジナルを維持する
5. 色 — colorPalette を使用して、ブランドカラーに合わせてどの CSS プロパティを変更すべきかを把握する
6. フォント — テンプレートのフォントを維持する（人間のデザイナーによってすでに適切に選ばれています）
7. セクション — ユーザーのニーズに合わせてセクションを追加・削除・並べ替える
8. レスポンシブ — ほとんどのテンプレートはすでにレスポンシブです。breakpoints フィールドを確認してください。

---

3. テンプレートのソースと品質ティア

ソース品質の優先順位: web3 > html5up > styleshout > startbootstrap > tooplate > themefisher > templatemo

ティア 1 — プレミアム（これらを優先）

• Web3（14 テンプレート）：Crypto/DeFi/NFT のダッシュボードとツール。ダークテーマ、リアルタイムデータ、Chart.js。ブロックチェーンプロジェクトに最適。
• HTML5 UP（29 テンプレート）：クリーンでモダン、レスポンシブ。全体的なデザイン品質が最も高い。純粋な HTML/CSS/JS。
• StyleShout（36 テンプレート）：プロフェッショナルで洗練されている。ポートフォリオや個人サイトに最適。
• Start Bootstrap（12 テンプレート）：Bootstrap ベースで構造がしっかりしている。ビジネスサイトに適している。

ティア 2 — 良好

• Tooplate（88 テンプレート）：バリエーションが豊富で、品質はまずまず。特定のニッチに適している。
• ThemeFisher（42 テンプレート）：Bootstrap ベースでプロフェッショナル。
• AdminMart（1 テンプレート）：ダッシュボードテンプレート。
• GitHub（2 テンプレート）：コミュニティが提供するテンプレート。

ティア 3 — 補助的

• TemplateMo（156 テンプレート）：最大のコレクションだが、品質はまちまち。ニッチなカテゴリに適している。

---

4. カテゴリ一覧（36 カテゴリ）

カテゴリ	説明	件数	使用例
multipurpose	汎用テンプレート	83	一般的なウェブサイト、クイックプロトタイプ
business	ビジネス / 企業 / コンサルティング	56	企業サイト、コンサルティング会社
personal	個人ページ / 履歴書 / CV	24	個人の履歴書、自己紹介
blog	ブログ / マガジン / ニュース	20	個人ブログ、ニュースサイト
agency	クリエイティブエージェンシー / スタジオ	21	デザイン会社、デジタルマーケティング
restaurant	レストラン / カフェ / ベーカリー	15	レストラン、コーヒーショップ、ベーカリー
crypto	暗号資産 / DeFi / NFT / Web3	14	取引プラットフォーム、ウォレット、DeFi
ecommerce	Eコマース / ショップ / ファッション	11	オンラインストア、ファッションブランド
portfolio	ポートフォリオ / ショーケース	11	デザイナーのポートフォリオ、プロジェクトのショーケース
app	アプリのランディングページ	11	モバイルアプリのプロモーションページ
dashboard	ダッシュボード / 管理パネル	11	バックエンド管理、データパネル
travel	旅行 / ホテル / 休暇	10	旅行代理店、ホテル予約
landing	ランディングページ	8	製品のランディングページ、サインアップページ
photography	写真 / 画像ショーケース	7	フォトグラファーのポートフォリオ、ギャラリー
coming_soon	近日公開 / カウントダウン	7	製品のティザー、ローンチカウントダウン
saas	SaaS / ホスティングサービス	7	SaaS製品ページ、クラウドサービス
event	イベント / カンファレンス	5	カンファレンス、イベント登録
fitness	フィットネス / スポーツ	5	ジム、スポーツブランド
automotive	自動車 / タクシー / レンタル	5	カーディーラー、レンタルサービス
other	その他 / 雑多	5	未分類のテンプレート
gallery	画像ギャラリー	4	フォトギャラリー、アート展
nature	自然 / エコ / オーガニック	4	環境団体、オーガニックブランド
beauty	美容 / サロン / SPA	4	美容サロン、理髪店
food	食品 / レシピ	3	フードブログ、レシピ共有
medical	医療 / ヘルスケア	4	クリニック、医療サービス
real_estate	不動産 / インテリアデザイン	4	不動産会社、インテリアデザイン
technology	テクノロジー / イノベーション	4	テック企業、イノベーション製品
component	UIコンポーネント	4	フォーム、管理パネルのコンポーネント
music	音楽 / バンド	3	バンド、ミュージシャン
education	教育 / トレーニング	3	学校、オンラインコース
charity	チャリティー / 非営利	2	チャリティー団体
wedding	結婚式	1	結婚式の招待状
construction	建設 / 建築	1	建設会社
coworking	コワーキングスペース	1	コワーキングスペース
job	仕事 / キャリア	1	求人ポータル
wellness	ウェルネス / 瞑想	1	瞑想、メンタルヘルス

---

5. カタログエントリの形式

拡充されたカタログエントリの完全な例:

{
  "id": "html5up-editorial",
  "source": "html5up",
  "dir": "html5up/editorial",
  "name": "Editorial",
  "title": "Editorial by HTML5 UP",
  "category": "blog",
  "hasIndex": true,
  "hasCss": true,
  "hasJs": true,
  "hasImages": true,
  "sizeKB": 3531,
  "indexPath": "html5up/editorial/index.html",
  "description": "Sidebar-layout blog/magazine template with a persistent left sidebar...",
  "colorScheme": "light",
  "primaryColor": "#f56a6a",
  "colorPalette": {
    "background": "#ffffff",
    "sidebarBg": "#f5f6f7",
    "text": "#7f888f",
    "heading": "#3d4449",
    "accent": "#f56a6a (coral-red)",
    "accentHover": "#f67878",
    "accentActive": "#f45c5c",
    "border": "#eff1f2",
    "muted": "#9fa3a6"
  },
  "typography": {
    "fontFamily": "Open Sans (body) + Roboto Slab (headings)",
    "headingWeight": "700",
    "bodyWeight": "400",
    "bodySize": "13pt",
    "letterSpacing": "wide (0.075em)",
    "style": "Serif+sans-serif dual font pairing. Editorial sophistication."
  },
  "layout": "sidebar",
  "layoutDetails": "Two-column: fixed left sidebar + scrollable main. Sidebar collapses to hamburger on mobile.",
  "visualStyle": "Editorial, magazine-like. Coral-red accent. Serif+sans-serif font pairing.",
  "features": ["responsive", "search", "hamburger-menu", "social-links", "accordion"],
  "sections": ["header", "navigation", "hero", "features", "blog", "contact", "footer"],
  "techStack": ["jquery", "font-awesome", "google-fonts"],
  "breakpoints": [360, 480, 736, 980, 1280, 1680],
  "matchSignals": ["blog", "magazine", "editorial", "sidebar", "search", "articles", "coral", "serif"]
}

---

6. 重要な注意事項

• 380 個のテンプレートはすべて使用可能です — すべてのテンプレートに index.html ファイルがあります。indexPath を使用して ui-templates/ 配下で見つけてください。
• カテゴリカタログ — 拡充されたメタデータを確認するには catalogs/{category}.json を読み取ってください。
• 人間によるデザインを維持してください — これらのテンプレートが見栄えするのは、人間がデザインしたからです。CSS 構造を過度に変更しないでください。
• カスタマイズには colorPalette を使用してください — ユーザーがブランドカラーを持っている場合は、colorPalette を使用して、どの CSS カラーを置き換えるべきかを把握してください。
• レスポンシブ — ほとんどのテンプレートはすでにレスポンシブです。レスポンシブな動作については breakpoints を確認してください。