create-website について
ウェブサイトをゼロから企画・制作するための、チーム向けの対話型スキルです。戦略、メッセージ、デザイン、コンバージョンの作業を10段階で進め、判断や成果物をプロジェクトの docs/ に記録します。
主な機能
- 0110段階のサイト制作プロセス
- 02デザイン前にメッセージを確定
- 03判断時にユーザーへ確認
- 04段階別スキルによる手法の適用
- 05判断と進捗を docs/ に記録
活用シーン
- 01新規サイトの対象顧客と目標設定
- 02サイトの中心的なメッセージ作成
- 03ビジュアルデザインとタイポグラフィの策定
- 04ユーザビリティとコンバージョン設計のレビュー
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ wondelai/ skills --skill create-websiteインストール後、Claude Code で/create-websiteを入力して読み込まれたか確認します。
同梱ファイルreferences/artifact-templates.md
詳細
Webサイトを作成する
何もないページが、依存関係を尊重した順序で実行される10のフェーズを経て、コンバージョン率の高いライブWebサイトになります。メッセージ、次にデザイン、次にコンバージョン、そして厳しいレビューへと進みます。このジャーニーは対話型です。エージェントはあらゆる判断の前に質問し、メッセージが確定する前にデザインを始めることはありません。また、すべての判断と成果物がプロジェクトの docs/ フォルダーに保存されるため、途中から再開できます。各フェーズを進めるのはあなたです。構成スキルが手法を担います。
基本原則
メッセージ、デザイン、コンバージョンの順に進めます。「問題なさそう」は最低ラインであり、目標ではありません。 訪問者は5秒でその場に留まるかどうかを判断します。その判断は、自分に何ができ、なぜそれが「自分にとって」重要なのかをすぐに理解できるかどうかにかかっています。だからこそ、まず明確さを確保し、それをデザインで支えます。このスキルはフェーズの順序を定め、質問を投げかけ、決定を記録します。構成スキルがフレームワークを担います。手法を独自に考案するのではなく、それらを呼び出してください。
ジャーニーマップ
| フェーズ | スキル | 答える質問 | 成果物 |
|---|---|---|---|
| 1 | one-page-marketing | 誰を対象とし、このサイトの唯一の役割は何ですか? | docs/MARKETING.md を作成し、docs/CUSTOMER.md を拡張します |
| 2 | storybrand-messaging | 顧客を主人公として、何を伝えますか? | docs/POSITIONING.md、docs/WEBSITE.md を作成します |
| 3 | made-to-stick | メッセージを記憶に残すにはどうすればよいですか? | docs/POSITIONING.md、docs/WEBSITE.md を拡張します |
| 4 | top-design | このページを忘れられない見た目にするものは何ですか? | docs/DESIGN.md を作成します |
| 5 | web-typography | 文字はドラマチックでありながら読みやすいですか? | docs/DESIGN.md を拡張します |
| 6 | refactoring-ui | デザインに一貫性があり、体系化されていますか? | docs/DESIGN.md を拡張します |
| 7 | ux-heuristics | 誰でも考え込まずに使えますか? | docs/DESIGN.md を拡張します |
| 8 | cro-methodology | 訪問者がコンバージョンしない理由は何で、それにどう答えますか? | docs/WEBSITE.md、docs/EXPERIMENTS.md を拡張します |
| 9 | scorecard-marketing | まだ購入の準備ができていない多数の人々と、どう接点を持ちますか? | docs/WEBSITE.md、docs/MARKETING.md を拡張します |
| 10 | steve-jobs-design-review | 驚くほど素晴らしいですか。それとも未完成ですか? | docs/WEBSITE.md を拡張します — GATE |
運用ルール
- まず再開します。 何よりも先に、
docs/CREATE-WEBSITE-PLAN.mdとジャーニーマップ内のすべての成果物を読みます。トラッカーが存在する場合は、ジャーニーの状態を3〜5行で要約し、どのフェーズに入るかを尋ねます。ユーザーが開始地点を確認した時点で完了です。トラッカーがあるジャーニーは再開し、最初からやり直すことはありません。 - 初回のみインテークを行います。 トラッカーがない場合は、以下のインテークを実施してから、すべてのフェーズのステータスを
pending | in-progress | awaiting-evidence | done | deferred: reason | skipped: reasonのいずれかにしたdocs/CREATE-WEBSITE-PLAN.mdを作成します。トラッカーが存在し、ユーザーがフェーズ計画を確認した時点で完了です。 - フェーズへの移行。 そのフェーズで行うこと、判断が必要なこと、作成する成果物、おおよその所要時間を伝えます。続行/スキップ/延期を提案します。GATE と記されたフェーズは延期できますが、スキップはできません。続行する場合は、フェーズを
in-progressにします。ユーザーが選択した時点で完了です。 - スキルの呼び出しと代替手段。 該当フェーズのスキルを読み込み、使用します。各フェーズの Invoke 行にスキルのスラッグが記載されているので、そのスキルを使ってフェーズを実施します。利用できない場合は、
npx skills add wondelai/skills/<slug> --globalを提案します。ユーザーが断った場合は、Brief に従ってフェーズを実施します。どちらの方法で進めているかを明示します。 - フェーズ内の判断。 「Decide with the user」にあるすべての質問を、具体的な選択肢と推奨案とともに尋ねます。選択内容をトラッカーの Key Decisions に記録します。判断を黙って決めることは不備です。
- フェーズの終了。 書き込む前に、成果物の草案を提示して承認を得ます。承認後、
docs/のファイルを作成または拡張し、トラッカー(ステータス、Key Decisions、Next Actions)を更新します。ファイルへの書き込みが完了し、フェーズの行がdoneになった時点で完了です。 - 成果物の取り扱い。 書き込む前に読み込みます。ファイルは、存在しない場合にのみ作成し、それ以外は拡張します。自分のセクションを追加または更新し、他の人の内容は保持します。
docs/内のファイル名はすべて大文字にします。すべての推奨事項は、担当者と優先度を記載したチェックボックスまたは表の行にします。docs/ファイルを初めて作成するときは、references/artifact-templates.md を参照してください。完全なひな形(すべてのセクション見出しを含む)から作成し、その後、該当フェーズで指定されたセクションに内容を記入します。 - サイト上の希少性の主張、推薦文、保証は、すべて事実でなければなりません。 説得の手法に、証拠をでっち上げる必要がある場合は、手元にある証拠を使う手法に置き換えます。
インテーク
トラッカーを作成する前に、以下を尋ねます。
- 製品またはサービスは何で、誰を対象にしていますか?(Phase 1 のニッチと顧客像、およびメッセージ全体を決めます。)
- create-business の実行時に作成された
docs/POSITIONING.mdまたはdocs/CUSTOMER.mdはすでにありますか?(ある場合は Phases 1〜2 の作業を軽減して再利用します。ポジショニングが不十分な場合は、optional の obviously-awesome フェーズを追加します。) - 最優先のコンバージョン目標は何ですか?トライアルの開始、デモの予約、購入、またはクイズへの回答ですか?(Phases 1、8、9 のすべての CTA 判断を決めます。)
- 複数ページのサイトとランディングページ1枚のどちらにしますか?(サイトマップの範囲、および Phases 8〜9 が適用されるかを決めます。)
- 技術スタックは何で、コードはどこにありますか?(引き継ぎ用ドキュメントではなく、デザインとコピーを実際のファイルに反映するためです。)
- 現時点でどのような証拠となる素材がありますか?推薦文、実績、ロゴ、保証などです。(Phase 8 の説得力監査と Rule 8 に関わります。)
- クラフトはどの程度重要ですか?デザインで競争しますか、それとも機能するサイトを目指しますか?(Phases 4〜5 を全面的に実施するか、軽めに実施するかを決めます。)
スキップの判断基準:以前の実行ですでにニッチ、顧客像、USP が確定している場合は Phase 1 をスキップします。クラフトで売り込む必要のない社内向けページや使い捨てのページでは、Phases 4〜5 を軽めに実施します(refactoring-ui は決してスキップしません)。直接的な CTA が1つあれば十分で、ナーチャリング施策もない場合は Phase 9 をスキップします。非常に厳しいスケジュールの場合に限り Phase 3 をスキップできます。ただし、明快でも記憶に残らないコピーは消えてしまうことを警告します。その後、テンプレートからトラッカーを作成し、計画を確認します。
すべてのフェーズのステータスが記載された docs/CREATE-WEBSITE-PLAN.md が存在し、ユーザーが計画を確認した時点で完了です。
フェーズ
Phase 1 — 戦略を固め、ニッチを一つ選ぶ(one-page-marketing)
目的: ページを作成する前に、サイトの対象者、USP、主要なコンバージョン目標を一つ決めます。
ブリーフ(フォールバック): PVP Index — 候補となるニッチを、Personal fulfillment(個人的な充実度)、Value to the market(市場への価値)、Profitability(収益性)で評価し、一つ選びます。「全員に語りかければ、誰にも響きません」。入れ替えテストに合格するUSPを書きます。競合他社の名前をタグラインに当てはめられるなら、汎用的すぎます。Before と During の各マスを具体的なページに対応づけ、それぞれに一つの役割を持たせます。
実行: プロダクトと受付時に得たターゲット情報を使って、one-page-marketing スキルを利用します。(a)2~3個のニッチのPVPスコア、(b)アバターを一段落で説明したもの、(c)入れ替えテストに合格するUSP、(d)Before/During の各マスをホームページ、ランディングページ、リード獲得ページに対応づけたものを求めます。
ユーザーと決定すること: どのニッチで優位に立つか(PVPスコアが最も高いものを推奨します)?主要なコンバージョン目標は何か一つ — トライアル、デモ、購入、クイズのリードのどれか?
成果物: ## Target Market & Avatar(ニッチ、アバター、USP、主要目標)と ## Before / During / After Grid を含む docs/MARKETING.md を作成します。docs/CUSTOMER.md に ## Segments & Best-Fit Customer を追加します。トラッカーを更新します。
完了条件: MARKETING.md にニッチを一つ、入れ替えテストに合格するUSP、主要目標を一つ記載し、CUSTOMER.md に最適な顧客セグメントを記録します。ユーザーがニッチと目標を確認済みです。
Phase 2 — StoryBrand でメッセージを書く(storybrand-messaging)
目的: 訪問者が5秒で判断する言葉を書きます — 顧客が主人公で、あなたがガイドです。
ブリーフ(フォールバック): SB7 — 何かを望む主人公、問題(外的/内的/哲学的)、共感と権威を備えたガイド、計画、行動喚起、失敗のリスク、鮮明な成功。外的な問題だけでなく、内的な問題(どのように感じるか)を明確にします。一文で表すと、「[character] が抱える [problem] を [solution] で解決し、[result] を実現できるよう支援します。」
実行: MARKETING.md のアバターとUSPを使って、storybrand-messaging スキルを利用します。完全な BrandScript、StoryBrand ワイヤーフレームに沿ったホームページのコピー(ヘッダー、リスク、価値、ガイド、計画、CTA)、繰り返しやすさの順に並べた一文メッセージのバリエーション5案を求めます。
ユーザーと決定すること: 一度聞いただけで最も繰り返しやすい一文メッセージはどれか?主人公がブランドではなく顧客であることを確認します — 冒頭を「私たちは…」にしないでください。
成果物: ## Brand Script (StoryBrand)、## One-Liner、## Key Messages を含む docs/POSITIONING.md を作成します。## Sitemap と ## Page Briefs(ワイヤーフレームから作成したコピーのブロック)を含む docs/WEBSITE.md を作成します。トラッカーを更新します。
完了条件: POSITIONING.md に完全な BrandScript と確定した一文メッセージがあり、WEBSITE.md にサイトマップとホームページのページブリーフがあります。ユーザーが一文メッセージを承認済みです。
Phase 3 — メッセージを記憶に残す(made-to-stick)
目的: 明快なコピーを記憶に残るコピーに変え、タブを閉じた後も忘れられず、人から人へ伝わるようにします。
ブリーフ(フォールバック): SUCCESs — Simple(シンプル)、Unexpected(意外性)、Concrete(具体性)、Credible(信頼性)、Emotional(感情)、Story(物語)。知識の呪いに立ち向かいます。最も効果が高いのは具体性です。抽象的な表現をすべて情景が浮かぶ表現に置き換えます(「レポート作成を4時間から10分に短縮」)。意外性のあるフックを一つ、シナトラテストに合格する証拠を一つ、名前のある顧客のストーリーを一つ追加します。
実行: WEBSITE.md の ## Page Briefs にあるコピーと、POSITIONING.md のメッセージを使って、made-to-stick スキルを利用します。SUCCESsスコア、抽象的な便益すべての具体的な書き換え案、意外性のあるヒーローフック一つ、短い顧客ストーリーを求めます。
ユーザーと決定すること: 記憶に残る書き換え案を承認し、ヒーローフックを選びます。どの数値や主張が事実で、出典を示せるか(ルール8に反映されます)?
成果物: docs/POSITIONING.md の ## Key Messages(記憶に残るバージョン)と docs/WEBSITE.md の ## Page Briefs(具体的なコピー)を拡張します。トラッカーを更新します。
完了条件: 抽象的な便益すべてが、実際の正確な数値を含む具体的な成果になっています。意外性のあるフックが一つあり、顧客ストーリーも一つあります。コピーが承認済みです。
フェーズ 4 — シグネチャーモーメントをデザインする(top-design)
目的: スクリーンショットに収めたくなる、唯一無二の瞬間から着手し、テンプレートではなくエージェンシーが手がけたようなページに仕上げます。
ブリーフ(代替案): すべてのピクセルに意図を持たせます。ヘッダーではなくシグネチャーモーメント(通常はヒーロー)から着手します。ドラマチックなスケール(表示テキストと本文の比率は最低 10:1)、非対称な構成、約 80ms 間隔で単語を順に表示する、演出された読み込み。カスタム cubic-bezier(expo-out 0.16,1,0.3,1)を使い、アニメーション対象は transform/opacity のみにします。純粋な黒ではなく、温かみのあるオフブラック(#0a0a0a)を使います。カスタムカーソルはユーザーが希望した場合に限ります。
実行: POSITIONING.md と WEBSITE.md のページブリーフを使い、top-design スキルを実行します。シグネチャーヒーローのデザイン、カスタムカラーシステム(AI でよく見られる紫から青へのグラデーションは使わない)、タイポグラフィ、構成、モーション、色、細部にわたる採点付き監査を依頼します。
ユーザーと決めること: スクリーンショットに収める価値のあるシグネチャーモーメントは何か。カラーシステムを承認します。カスタムカーソルを使うか、標準のカーソルを使うか(クラフト自体が製品でない限り、標準のカーソルを推奨します)。
成果物: ## Design Direction(シグネチャーモーメント、パーソナリティ、参考資料)を含む docs/DESIGN.md を作成します。トラッカーを更新します。
完了条件: DESIGN.md にシグネチャーモーメントとカラーシステムが記載され、top-design 監査のスコアが記録され、ユーザーがデザインの方向性を承認していること。
フェーズ 5 — タイポグラフィを選び、調整する(web-typography)
目的: ドラマチックでありながら読みやすい文字にします。ドラマを支える規律です。
ブリーフ(代替案): クリスタルゴブレットの原則 — タイポグラフィはコンテンツに奉仕します。「一瞬のための文字」(見出し)と「日常的に使う文字」(本文)を使い分けます。書体の選択よりも、次の 3 つの尺度が重要です。本文は 16〜18px、行長は 45〜75ch(最適値は 66、max-width: 65ch)、行の高さは本文で 1.5〜1.7/見出しで 1.1〜1.25 とします。書体ファミリーは 1〜2 種類にします。ファイル容量は 200KB 未満とし、WOFF2、可変フォント、流動的なスケールに clamp() を使い、フォントを先読みして font-display: swap を指定します。
実行: DESIGN.md の ## Design Direction を使い、web-typography スキルを実行します。見出し用と本文用の書体の組み合わせ、完全な CSS(clamp スケール、コンテキストごとの行の高さ、65ch の行長)、レイアウトシフトが発生しない 200KB 未満のフォント読み込み計画を依頼します。
ユーザーと決めること: 書体の組み合わせを承認し、パフォーマンス予算を確認します(ファイル数を減らすため、単一の可変フォントを推奨します)。
成果物: docs/DESIGN.md の ## Typography を拡張します(書体、スケール、行長、行の高さ、読み込み戦略)。トラッカーを更新します。
完了条件: DESIGN.md の ## Typography に書体の組み合わせ、スケール、行長、200KB 未満の読み込み戦略が指定され、ユーザーが書体の組み合わせを承認していること。
フェーズ 6 — システム化する(refactoring-ui)
目的: 2 番目、3 番目のセクションで魅力が損なわれないよう、一貫性を加えます。
ブリーフ(代替案): まずグレースケールでデザインし、色は最後に加えます。才能よりもシステムを重視し、スペーシング(4、8、16、24、32、48、64)、タイポグラフィ、色、シャドウに制約のあるスケールを設けます。大きさ、太さ、暗さを組み合わせて階層を作り、3 つすべてを使うのは 1 つの要素だけにします。グループ間の余白はグループ内の余白より大きくします。純粋な #000 ではなく、ニアブラック(#111827)と色味のあるグレーを使います。2 層のシャドウをエレベーションに対応させます。ぼかしテストを実施します。
実行: DESIGN.md を使い、refactoring-ui スキルを実行します。グレースケールでの階層監査、制約のあるトークンセット(スペーシング、色味のあるグレーを含む 9 段階のパレット、タイポグラフィスケール、シャドウスケール)、セクションごとにプライマリーアクションを 1 つ設けた、リファクタリング後のボタン/フォーム/カードの各コンポーネントを依頼します。
ユーザーと決めること: トークンのスケールを承認し、プライマリー/セカンダリー/ターシャリーのボタン階層を確認します。
成果物: docs/DESIGN.md の ## Tokens(スペーシング、パレット、シャドウ)と ## Components(コンポーネントごとの判断)を拡張します。トラッカーを更新します。
完了条件: DESIGN.md でトークンのスケールとコンポーネントごとの判断が定義され、ボタンでセクションごとに明確なプライマリーアクションが 1 つ示され、ユーザーがトークンを承認していること。
フェーズ 7 — 使いやすさを徹底する(ux-heuristics)
目的: 訪問者に考えさせる手間をなくします。
概要(フォールバック): ページは見ただけで内容がわかる必要があります。ユーザーはざっと読み、ほどほどの解決策を選び、何とか使いこなそうとします。トランクテスト — 初めてページを見た人が、どのサイトか、どのページか、どんなセクションがあるか、次にどこへ進めばよいかを答えられるでしょうか。「言葉を半分に減らす」を実践します。CTAには平易な言葉を使います。フォーカスが外れたときにインラインで検証し、必須ではない項目には「任意」と表示します。タップ領域は44x44pxにし、システムの状態(「保存中…」/「保存済み」、スケルトン表示、確認メッセージ)を見えるようにします。
実行: WEBSITE.md と DESIGN.md を使って ux-heuristics スキルを実行します。Krugの法則とNielsenの10ヒューリスティックスに照らしたユーザビリティ監査を依頼し、各問題を0〜4で評価するとともに、エラーメッセージとCTAラベルを書き直してもらいます。
ユーザーと決定: 優先度の高い修正リストを承認します。致命的な問題(4)から着手し、ローンチ前に対応する修正と後回しにする修正を確認します。
成果物: docs/DESIGN.md に ## UX Audit Findings(Issue | Heuristic | Severity | Fix | Status)を追記します。トラッカーを更新します。
完了条件: すべてのページがトランクテストに合格し、致命的な問題が修正され、UX Audit Findings に重大度とともに記録され、ユーザーが修正の順序を承認していること。
フェーズ 8 — コンバージョンを高める(cro-methodology)
目的: 明快で使いやすいページを、訪問者がコンバージョンしない本当の理由に応えるページへと変えます。
概要(フォールバック): 推測せず、見つけ出します。Big 5(信頼、価格、適合性、タイミング、労力)について、反論とその対策の表を作成します。それぞれの対策は摩擦が生じる箇所に配置し、FAQの奥に埋もれさせないでください。訪問者が認めたがらない反論には「CO Only」を使います。証拠の優先順位:文脈を伴う具体的な成果 > 実名入りの推薦文 > 導入事例 > ロゴのみ。プルーフサンドイッチを使います。具体的な数字(「約50,000」ではなく「47,832」)を示します。
実行: WEBSITE.md とインテークで収集した証拠素材を使って cro-methodology スキルを実行します。配置を含むBig 5の反論/対策表、証拠の優先順位に沿った説得素材の監査、不足している証拠の希望リスト、A/Bテストの仮説を依頼します。
ユーザーと決定: 今すぐ実施する対策と、入手が必要な証拠を待つ対策を決めます。対策で証拠を捏造していないことを確認します(ルール8)。
成果物: docs/WEBSITE.md に ## Conversion Elements(Objection | Counter | Placement | Status)を追記します。docs/EXPERIMENTS.md の ## Experiment Cards と ## Experiment Backlog を拡充します。トラッカーを更新します。
完了条件: Big 5の表に、すべての反論について証拠に裏付けられた対策と配置が記載され、不足している証拠がアクションとして列挙され、テスト仮説が記録され、どの対策も捏造した証拠に依存していないこと。
フェーズ 9 — リード獲得クイズを追加する(scorecard-marketing)
目的: 今日購入する準備ができていない約97%の人に、より負担の少ないオファーでアプローチします。
概要(フォールバック): すべてはリード獲得から始まります。クイズのコンバージョン率は30〜50%で、静的なPDFの3〜10%を上回ります。4つのステップ:ランディングページ(コンセプトフック + 3つのC — Clarity、Credibility、Connection)、質問より先にメールアドレスを取得するアンケート、段階別の結果ページ、セグメント別のフォローアップです。恐怖訴求よりも「目指す姿に近づく」フックが効果的です。コールドトラフィック向けの場合、質問数は8〜15問に抑えます。
実行: 主な目標とアバターを使って scorecard-marketing スキルを実行します。コンセプトフックとランディングページ、3〜4カテゴリに分類した採点式の質問10〜12問、動的コピーとCTAをそれぞれ備えた3段階の結果、段階別のフォローアップシーケンスを依頼します。
ユーザーと決定: サイトにリード育成の施策が必要でしょうか。直接的なCTAが1つあれば十分な場合は、このフェーズをスキップします。それ以外の場合は、コンセプトフックを承認します。
成果物: docs/WEBSITE.md の ## Lead Capture(クイズファネルの設計)を拡充します。docs/MARKETING.md の ## Nurture Sequences(段階別フォローアップ)を拡充します。トラッカーを更新します。
完了条件: WEBSITE.md の ## Lead Capture にフック、メールアドレスを最初に取得する15問以下の質問、段階別の結果が記載され、MARKETING.md にセグメント別のフォローアップがあり、フックがアセスメントで提供できる範囲を超える約束をしていないこと。
フェーズ 10 — 非常に優れた基準を貫く(steve-jobs-design-review)— ゲート
目的: サイトを公開して訪問者を迎える前に、完成したサイトを一度、容赦なく率直にレビューします。
概要(代替案): 「顧客体験を起点に、逆算して考えます。」初めて訪れる人として、予備知識なしで体験します。「唯一のこと」を一文で述べます。価値を得るまでのステップ数を数えます(三つであり、九つではありません)。時間がかかる経路をたどります。フォームが空の場合、エラー状態、決済失敗、モバイルでの初回起動です。フェンスの裏側も確認します。404、エラー文、確認メールです。判定は二択です。非常に優れているか、未完成かです。集中するとは、ノーと言うことです。
実行: steve-jobs-design-review スキルを、公開中のサイトまたは全ページに対して使います。初見の印象、「唯一のこと」、価値を得るまでのステップ数、失敗状態/空の状態とフェンスの裏側の確認、二択の判定、優先順位を付けた削除リストと修正リストを求めます。
ユーザーと決める: 削除リストを実行します。唯一の主要目標を守るために、何を削除しますか?判定が NOT DONE の場合、どの修正が公開の妨げになっていますか?
成果物: docs/WEBSITE.md の ## Audit Findings(Issue | Severity | Fix | Status)を拡張し、削除リストと修正リストを追加します。トラッカーを更新します。
完了条件: 判定が INSANELY GREAT(「かなり良い」ではありません)であり、削除リストを反映し、フェンスの裏側を確認し、公開を妨げる修正を完了していること。これらを満たして初めて、サイトを公開します。
オプションのフェーズ
| スキル | 追加する条件 | 成果物 |
|---|---|---|
| obviously-awesome | docs/POSITIONING.md がまだ存在せず、メッセージングの土台がない | docs/POSITIONING.md を作成 |
| influence-psychology | 価格設定ページまたは登録ページで、説得原則の監査が必要 | docs/WEBSITE.md を拡張 |
| high-perf-browser | Core Web Vitals または読み込み速度がコンバージョンを脅かしている | docs/WEBSITE.md を拡張 |
| design-everyday-things | ビジュアルは明快なのに、フォームやフローでユーザーが混乱している | docs/DESIGN.md を拡張 |
| microinteractions | 静的なデザインだけでは足りず、サイトにインタラクションの仕上げが必要 | docs/DESIGN.md を拡張 |
オプションのフェーズにも同じ運用ルールが適用されます。記載された各スキルを、コアフェーズと同じ方法で必ず読み込んで使用し、「追加する条件」が初めて満たされた時点で挿入してください。
よくある間違い
| 間違い | 修正 |
|---|---|
| メッセージがないままデザインする | フェーズ 2(storybrand)とフェーズ 3 をフェーズ 4(top-design)より先に実施します。デザインは言葉に奉仕するものであり、その逆ではありません。 |
| 自社ブランドを主役にする | storybrand では、顧客の課題と望む成果から始めます。最初の文が「私たちは」で始まるなら、書き直してください。 |
| 複数の CTA を競わせる | 直接的な CTA を一つ、段階的な CTA を一つにします。refactoring-ui と Jobs review のどちらも、各セクションの主要アクションを一つにするよう徹底します。 |
| 分かりやすさと記憶に残ることを混同する | made-to-stick の確認を行います。具体的な数字、意外性のあるフックを一つ、顧客のストーリーを一つ取り入れ、タブを閉じた後もメッセージが記憶に残るようにします。 |
| 異議ではなくボタンの色をテストする | まず cro-methodology で「異議/反論」テーブルを作成します。「控えめな微調整」では、コンバージョンが向上することはほとんどありません。 |
| うまくいく経路だけを磨き、ほかはすべて壊れたままにする | Jobs review では、空の状態、フォームエラー、404、確認メール、モバイルでの初回起動を確認します。これがフェンスの裏側です。 |
旅の完了
終了チェックリスト:
- POSITIONING.md に、すべての掲載面で一貫したブランドスクリプト、繰り返し使える一言の説明、主要メッセージが記載されている
- WEBSITE.md に、サイトマップ、コピー付きのページ概要、異議/反論の表、(対象範囲に含まれる場合は)リード獲得の設計が記載されている
- DESIGN.md で、デザインの方向性、タイポグラフィ、トークン、コンポーネントが定義され、UX監査に合格している
- Steve Jobs によるレビューで「非常に優れている」という評価が返されている。「まあまあ」ではなく、カットリストも適用されている
- ページ上の希少性に関する主張、推薦文、保証はすべて事実である
トラッカーを締めくくります。各フェーズを done または skipped: reason とし、残っている Next Actions はチェックボックスとして成果物に引き継ぎます。その後、次のステップに進みます。サイトが公開され、コンバージョンデータが届き始めたら、improve-website スキルを引き続き使用し、今日の仮説を検証済みの成果に変えていきます。ウェブサイトで販売する製品をこれから開発する必要がある場合は、create-app スキルを引き続き使用します。