design-research

デザイン調査

概要

プロフェッショナルなウェブサイトテンプレートには、何千時間にも及ぶ UX テスト、コンバージョン最適化、反復的なデザイン改善が反映されています。ゼロからレイアウトを考案するのではなく、テンプレートを設計の指針として活用しましょう。

基本原則： ウェブサイトをデザインする前に、対象のニッチ分野で優れた既存のテンプレートを見つけてください。そのパターンを抽出し、当て推量ではなく、実績のある土台をもとに構築しましょう。

例外なし。回避策なし。近道なし。

最優先指針

NO WEBSITE LAYOUT WITHOUT TEMPLATE RESEARCH FIRST

ユーザーの業界やニッチ分野のテンプレートマーケットプレイスを調査していない場合、プロフェッショナルが費やした何千時間ものデザイン作業を無駄にすることになります。フィットネススタジオのウェブサイトは、汎用的な AI 生成ページのように見せるのではなく、優れたフィットネステンプレートを参考にするべきです。

使用する場面

必須となる場面：

• あらゆる業界や業種のウェブサイトを構築する場合
• ランディングページをデザインする場合
• ウェブアプリケーションをレイアウトする場合
• EC ストアを立ち上げる場合
• ポートフォリオサイトやエージェンシーサイトを作成する場合
• SaaS のマーケティングサイトを構築する場合
• ダッシュボードや管理パネルをデザインする場合

導入手順

BEFORE designing any website layout:

1. CLASSIFY: What industry or niche does this serve? (fitness, legal, SaaS, etc.)
2. SURVEY: Search template marketplaces in that niche across multiple sources
3. ANALYZE: Study the top 3-5 templates - their sections, layout, colors, typography
4. EXTRACT: Identify the common patterns (what do ALL strong templates in this niche share?)
5. PRESENT: Show the user your references and recommended blueprint
6. ADAPT: Build using those patterns, tailored to the user's brand
7. ONLY THEN: Write the code

Omit any step = generic AI website indistinguishable from every other AI website

検索方法

フェーズ 1：ニッチ分野を分類する

「このウェブサイトはどのカテゴリに該当するか？」を判断します。以下のマーケットプレイス検索語に当てはめてください。

ユーザーの説明	検索カテゴリ	主な情報源
ジム、トレーナー、フィットネス	フィットネス／スポーツ	Qode Interactive, ThemeForest
レストラン、カフェ、ベーカリー	飲食	Qode Interactive（110 種類以上のテーマ）、ThemeForest
法律事務所、弁護士	法律／専門サービス	ThemeForest, TemplateMonster
医療機関、クリニック	ヘルスケア	ThemeForest, TemplateMonster
物件情報、不動産会社	不動産	ThemeForest, Webflow
オンラインストア、ブティック	EC	Shopify Theme Store, ThemeForest
ポートフォリオ、クリエイティブエージェンシー	クリエイティブ	Framer, Webflow, Squarespace
SaaS 製品、スタートアップ	テクノロジー／SaaS	Cruip, Tailwind Plus, Framer
ブログ、オンラインマガジン	出版	WordPress エコシステム、Ghost
管理パネル、社内ツール	ダッシュボード／管理画面	Creative Tim, AdminLTE, CoreUI
ウェディングプランナー、イベント	イベント	Qode Interactive, ThemeForest
ホテル、旅行代理店	ホスピタリティ	Qode Interactive, ThemeForest
建設、工業	建設／工業	ThemeForest（1,000 種類以上の選択肢）
スパ、サロン、ウェルネス	美容／ウェルネス	Qode Interactive, ThemeForest
オンライン講座、大学	教育	ThemeForest, TemplateMonster
非営利団体、慈善団体	社会貢献／非営利	HubSpot, ThemeForest
金融サービス、コンサルティング	ビジネス	ThemeForest, TemplateMonster

フェーズ 2：複数のソースを調査する

優先順位に従って検索します（質の高い結果が 5 件以上見つかった時点で終了します）。

ティア 1 -- 厳選されたプレミアムテンプレート：

• ThemeForest (themeforest.net) -- 50,000 点以上のアイテムを扱う最大のマーケットプレイス
• Qode Interactive (qodeinteractive.com) -- 100 種類以上のニッチに特化したプレミアムテーマ
• Webflow Marketplace (webflow.com/marketplace) -- 7,000 点以上のテンプレート
• Framer Marketplace (framer.com/marketplace) -- 2,500 点以上のテンプレート
• Shopify Theme Store (themes.shopify.com) -- E コマース向け

ティア 2 -- フレームワーク別のテンプレート：

• Tailwind Plus (tailwindcss.com/plus) -- Tailwind コンポーネントの最高水準
• Cruip (cruip.com) -- Tailwind のランディングページとダッシュボード
• NextJS Templates (nextjstemplates.com) -- Next.js 専用
• Vercel Templates (vercel.com/templates) -- デプロイ可能なスターター
• shadcn/ui エコシステム (ui.shadcn.com, shadcnuikit.com)

ティア 3 -- 無料テンプレート：

• HTML5 UP (html5up.net) -- 洗練された無料 HTML テンプレート
• Start Bootstrap (startbootstrap.com) -- Bootstrap ベースのスターター
• Colorlib (colorlib.com/wp/templates/) -- 1,500 点以上の無料テンプレート
• BootstrapMade (bootstrapmade.com) -- 166 点以上の無料テンプレート

ティア 4 -- デザインの参考例（参考のみ、コードなし）：

• Awwwards (awwwards.com) -- 受賞歴のある公開サイト
• Lapa Ninja (lapa.ninja) -- 7,300 件以上のランディングページ
• Godly (godly.website) -- 手作業で厳選された美しいサイト
• Mobbin (mobbin.com) -- 実際のアプリや Web の UI パターン
• Dribbble (dribbble.com) -- UI/UX デザインのコンセプト
• SaaS Landing Page (saaslandingpage.com) -- SaaS 専用

フェーズ 3：テンプレートを評価する

見つかった各テンプレートについて、以下を記録します。

Template: [name]
Source: [marketplace]
URL: [demo link]
Popularity: [stars/sales/rating]
Price: [cost]

Section Sequence (top to bottom):
1. [Hero type] -- e.g., "Full-bleed image with text overlay + call-to-action"
2. [Section 2] -- e.g., "Service grid (3 columns with icons)"
3. [Section 3] -- e.g., "About block with side-by-side image and text"
4. [Section N]...

Color Palette:
- Primary: [hex]
- Secondary: [hex]
- Background: [hex]
- Body text: [hex]

Typography:
- Headings: [font family, weight]
- Body: [font family, weight]

Layout Approach: [full-width / boxed / asymmetric]
Navigation: [fixed top / sidebar / hamburger]
Footer: [multi-column / minimal / mega-footer]

フェーズ 4：共通パターンを特定する

そのニッチのテンプレートを 3～5 件調べた後、以下をまとめます。

SHARED PATTERNS (what ALL strong templates in this niche include):

Sections every [niche] website features:
1. [section] -- [why it is effective]
2. [section] -- [why it is effective]
...

Color tendencies: [dark/light, warm/cool, industry norms]
Typography: [serif/sans-serif, bold/light, industry norms]
Layout: [common structural approaches in this niche]
Distinctive elements: [what differentiates this niche from generic sites]

フェーズ 5：ユーザーに提示する

見つかった内容を、クリック可能なデモリンク付きのラベル付きオプションとして提示します。推奨案には星印を付けます。

I surveyed [niche] website templates across [N] marketplaces. Here are the strongest candidates:

**A)** [Template Name] — [rating], [sales/downloads]
   Demo: [clickable URL]
   Strengths: [what makes it excellent]
   Palette: [primary color approach] · Typography: [font approach]

**B)** [Template Name] — [rating], [sales/downloads]
   Demo: [clickable URL]
   Strengths: [what makes it excellent]
   Palette: [primary color approach] · Typography: [font approach]

**C)** [Template Name] — [rating], [sales/downloads]
   Demo: [clickable URL]
   Strengths: [what makes it excellent]
   Palette: [primary color approach] · Typography: [font approach]

**D) Hybrid blueprint** — Cherry-picked from all three ⭐ Recommended
   Sections: [synthesized section sequence from the strongest elements of A, B, C]
   Palette: [synthesized]
   Typography: [synthesized]
   Why: Combines [specific strength from A], [specific strength from B], [specific strength from C]

**Recurring patterns across all [niche] templates:**
- Every site includes: [section list]
- Color convention: [pattern]
- Typography: [pattern]

Check out the demos and pick A, B, C, or D.

YoloMode の例外： 参考例とテンプレートの選択は常に対話形式で行います。YoloMode であっても、選択肢を提示してユーザーに選んでもらいます。これらの選択は影響が大きすぎるため、自動で選ぶことはできません。

複数テンプレートの統合

最良の結果は、複数のテンプレートから優れた要素を組み合わせることで得られます。

Example: Building a Yoga Studio website

Template 1 (ThemeForest "ZenFlow", rating 4.8):
  -> Extract: Hero with serene background video + class booking CTA
  -> Extract: Class timetable with category filtering

Template 2 (Qode Interactive "AsanaStudio", rating 4.9):
  -> Extract: Instructor profile cards with hover credential display
  -> Extract: Wellness blog section with category navigation

Template 3 (Webflow "MindBody"):
  -> Extract: Membership tier comparison with highlighted recommendation
  -> Extract: Student testimonials carousel with portrait photos

Result: A yoga studio site that fuses the strongest elements from 3 premium templates,
each designed by professional UX teams with domain expertise.

ニッチ別のセクション構成

フィットネス／パーソナルトレーナー

ヒーロー -> プログラム／サービス -> トレーナーのプロフィール -> クラスの時間割 -> 変化／成果 -> お客様の声 -> 会員料金 -> お問い合わせ／予約

レストラン／飲食

ヒーロー（料理の写真） -> 看板メニュー -> ストーリー／伝統 -> 全メニュー -> シェフ／チーム -> ギャラリー -> レビュー -> 予約 -> 場所／営業時間

SaaS／スタートアップ

ヒーロー（製品のスクリーンショット） -> ソーシャルプルーフ（顧客ロゴ） -> 主な機能（3～4 件） -> 利用方法 -> 料金プラン -> お客様の声 -> FAQ -> 最終 CTA

法律事務所／専門サービス

ヒーロー（信頼感を重視） -> 取扱分野 -> 弁護士のプロフィール -> 事案の解決実績 -> お客様の声 -> リソース／ブログ -> お問い合わせ／相談

E コマース

ヒーロー（注目商品またはプロモーション） -> カテゴリー -> 注目商品 -> ベストセラー -> ブランドストーリー -> カスタマーレビュー -> ニュースレター -> 信頼の証

ポートフォリオ／エージェンシー

ヒーロー（印象的なメッセージ） -> 主な実績（ケーススタディ） -> 提供サービス -> 作業プロセス -> チーム -> 顧客ロゴ -> お問い合わせ

認知の罠

合理化	真実
「自分でデザインできます」	プロ向けテンプレートには、1,000時間以上のUXリサーチが凝縮されています。あなたには5分しかありません。
「テンプレートではありきたりな結果になります」	複数のテンプレートから優れた要素を組み合わせれば、独自性のあるものが生まれます。
「基本的なサイトに参考資料は必要ありません」	基本的なサイトこそ、実証済みのレイアウトから最も大きな恩恵を受けます。シンプルだからといって、見ればすぐ分かるとは限りません。
「アイデアを得るために、あとでテンプレートを見ます」	まずリサーチしてください。初期のデザイン決定は、あとから最も変更しにくいものです。
「ユーザーはテンプレートのリサーチを求めていません」	ユーザーが求めているのは、質の高いWebサイトです。テンプレートのリサーチは、それを実現する方法です。
「無料テンプレートは品質が低いです」	HTML5 UPやStart Bootstrapでは、洗練された、よく構成された無料テンプレートを提供しています。

ガードレール

禁止事項：

• まずテンプレートマーケットプレイスを確認せずにレイアウトをデザインする
• 単一のテンプレートだけを参考にする（3つ以上を組み合わせる）
• テンプレートのコードをそのままコピーする（パターンを抽出し、新たに作成する）
• ユーザーへの提示手順を省略する
• 業界固有のセクション構成の慣習を無視する

必須事項：

• 少なくとも2つのマーケットプレイスを検索する
• 対象分野のテンプレートを少なくとも3つ確認する
• テンプレート間で共通するパターンを特定する
• デモへのリンクを添えて、調査結果をユーザーに提示する
• 複数のテンプレートから優れた要素を組み合わせる
• 対象分野の標準的なセクション構成の順序を記録する

統合

呼び出しタイミング：

• godmode:intent-discovery — タスクにWebサイトの構築が含まれる場合
• godmode:ux-patterns — テンプレートリサーチではレイアウトの大枠を、UXパターンではコンポーネントレベルの詳細を扱います

補完スキル：

• godmode:codebase-research — デザインにはテンプレート、コード実装には公開リポジトリを使用します
• godmode:ui-engineering — テンプレートの設計図をもとにコンポーネントを構築する方法です
• godmode:design-integration — テンプレート分析に基づいてデザイントークンを定義します