Communitygithub.com

gergobalogh/launch-check

新しい公開ページやウェブアプリが公開準備できているかを、フック、ボディ、スマホ・タブレット・ノートPC・大型デスクトップでの見た目と動作、次のステップ、共有、計測の観点からチェックします。ページを構築中・公開前、あるいはレイアウトや最初の画面を計画する際に使用します。すでに公開されているページには live-page-review を使用してください。

launch-check とは?

このスキルは、公開前のウェブページやアプリが本当にリリース可能な状態かを、29項目の包括的なチェックリストを用いて検証するためのものです。公開日当日にほとんどのトラフィックが集中するため、初日から完璧な状態にすることが重要です。チェックは、フック(最初の画面で価値を伝えられるか)、ボディ(約束を果たし、読みやすく、正確か)、画面表示(4つの異なる画面サイズで見た目と動作が正しいか)、使用(操作手順がスムーズか)、次のステップ(成功後の導線と共有機能)、検索エンジン対策(インデックス可能性と構造化データ)、計測(プライバシーに配慮したイベントトラッキングの実装)の7つのカテゴリに分かれています。各チェックは「ブロッカー」(修正必須)または「推奨事項」(報告推奨)に分類され、結果はプロジェクトのノートに記録されます。このスキルは、あらゆる種類のページ(記事、ツール、ハブなど)に対応し、ローカルビルドに対してヘッドレスChromium(Playwright)で実行されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/gergobalogh/claude-skills/tree/HEAD/skills/launch-check

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

公開チェック: このページは準備万端ですか?

公開日にはページのほとんどの視聴者が集まります。2日目に修正を行っても、ほとんどの視聴者を逃してしまいます。投稿が公開される前に、適切な状態にしましょう。

このチェックリストはあらゆるページに適用されます。ページ名やページデータは記載しないでください: ここには一般的なルールとして新しい教訓を書き、ページとその数値はプロジェクト固有のノートに保持してください。

実行方法

  1. ページに名前を付けます。 そのタイプ(記事またはストーリー、ツールまたはゲーム、ハブ)、一文での役割、そしてステップ: 到着 → 使用可能 → 初回使用 → メインアクション → 動作完了 → 次のステップ。該当しないステップは省略します。チェックを満たすためだけに入力、数値、アクションを追加しないでください。
  2. ローカルビルドを提供します(dist/ または開発サーバー)。アナリティクスはブロックしてください。ライブページを開かないでください。
  3. 以下の4画面すべてで各チェックを実施します。 各チェックに合格、不合格、未検証、または該当なしの理由を付けます。判断が必要なチェックでは、見た内容(言い換えた文章、見たスクリーンショット)を「合格」だけではなく書いてください。
  4. ブロッカー: 修正するか、ユーザーの明示的な免除を得て、未検証の場合は検証してください。推奨事項: 報告します。公開を妨げるものではありません。
  5. 結果をプロジェクトのノートまたはタスクボードに書き込みます。 29のチェックすべてを計上します: 公開チェック: 25 合格, 1 不合格, 1 未検証, 2 該当なし; ブロッカー: U1 不合格; 推奨事項: S3 未検証; 該当なし: U2 (入力なし), U3 (待機なし).

画面: スマホ 390×844、タブレット 820×1180、ノートPC 1366×768、大型デスクトップ 1920×1080。それぞれをチェックします。ワイドレイアウトも狭いレイアウトと同じくらい要素を動かします。レイアウトの不具合はスクリーンショットで確認します。ソースだけでは表示できないためです。

ブラウザ: ローカルビルドはログインを必要としないため、ヘッドレスChromium(Playwright)で十分です。ページを読み込む前に、そのタブでアナリティクスホストをブロックします(page.route(/your-analytics-host/, r => r.abort()))。これにより、チェックが訪問としてカウントされなくなります。

ページタイプ別:

  • 記事またはストーリー: スクロールし続けることが次のステップであるため、U2は該当なし、U3は待機するものがない場合も該当なしです。
  • ツールまたはゲーム: T2はページにあるテキストをカバーします。初回使用は実際の結果を返す必要があります。
  • ハブ: 成果は適切なものを見つけることです。そのため、T1は各リンクが約束したことを実現することを意味します。

フック

  • H1 · ブロッカー。最初の画面だけで、あらゆるサイズにおいて、訪問者が得られるものを一文で言えること。 トピックではなく、成果です。その文を書き留めてください。書けない場合、または主題の名前だけを挙げている場合、これは不合格です。
  • H2 · 推奨事項。最初の画面が、見知らぬ人に続ける理由を与えること: 具体的な発見、数値、結果、または質問であり、真実であること。コンテキストなしで投稿から訪れた人にも機能するはずです。
  • H3 · 推奨事項。リンクプレビューも同じ約束をしていること。 og:image、タイトル、説明は成果を示しています。ビルド内のタグと画像を確認してください。
  • H4 · ブロッカー。最初のアクションが、スクロールせずにあらゆるサイズで表示され、明確にアクションのように見えること。 十分なコントラストがあること。スクロールストーリーの場合、最初のアクションはスクロールです。表示されているスクロールキューがあれば合格です。

ボディ

  • T1 · ブロッカー。ボディはフックが約束したものを提供し、それを早い段階で行うこと。 成果が最後まで待たされることはありません。ページが長い場合、短いバージョンを最初に配置し、残りは訪問者の選択とします。
  • T2 · ブロッカー。最初から最後まで読みやすいこと。 見知らぬ人のように、順番にすべてを読んでください。各部分は前の部分に続き、何かを追加し、無駄な部分はなく、全体を一文で言い換えられること。
  • T3 · 推奨事項。画面ごとに1つの主要なポイントまたは数値。 残りは表または「もっと見る」の背後に配置します。ページに数値や発見がない場合は該当なし。
  • T4 · ブロッカー。すべての数値と主張には出典があり、隠れているものはすべて機能すること。 すべてのドロワー、タブ、アコーディオンを開き、すべてのソースリンクをたどってください。閉じたセクションもページの一部です。
  • T5 · 推奨事項。コピーは著者のスタイルルールとAI作成チェックを通過していること。 プレースホルダー、下書き、デバッグテキストが残っていないこと。ページコピーはユーザーの名前で公開されるため、問題を報告して質問してください。単独で言い換えないでください。

画面

  • S1 · ブロッカー。4つの画面すべて、すべてのステップで正しく表示されること。 各ステップ後にスクリーンショットを撮り、それぞれを確認します。切り取られたり、重なったり、スタイルが適用されていない(スクリプトで作成された要素はスコープCSSを逃す可能性があります)部分がないこと、横スクロールがないこと。マップを移動させる検索や選択の後、結果がパネルで覆われていない部分に、あらゆるサイズで表示されることを確認してください。
  • S2 · ブロッカー。すべてのテキストがレンダリングサイズで読みやすいこと。 目視ではなく測定し、12ピクセル以上を目指します。SVGチャートの場合: フォントサイズ × レンダリング幅 ÷ viewBox幅。
  • S3 · 推奨事項。スマホで2秒以内に使用可能であること。 使用可能とは、最初のアクションが機能する最も早い時点を意味します。コールドキャッシュ、指定されたスマホのCPUおよびネットワークプロファイルで、ロード開始時から計測します。スロットリングなしのデスクトップ実行ではスマホでの合格を示すことはできません。
  • S4 · ブロッカー。低速および失敗したロードの両方が正しく表示されること。 低速ネットワーク(CDP Network.emulateNetworkConditions、9 / 1.6 / 0.75 / 0.4 Mbps)およびロード失敗をテストします。CDNのように圧縮して提供します。タイミングを計測するためです。非圧縮のローカルサーバーはすべての待機時間を実際よりも長く見せます。コールドスタートからロードハンドオーバーごとに0.5秒ごとにスクリーンショットを撮り、フレームを確認します。ローディングラベルを付けて最後の良い画像を維持します。フォールバックは失敗時のみ使用します。ローディング中および失敗後にラベルが正しいことを確認します。遅れてロードされるものがない場合は該当なし。

使用

  • U1 · ブロッカー。各ステップの後、次のコントロールがあらゆるサイズで画面内に表示されること。ページが訪問者を置き去りにしないこと。 ステップへの各経路(例、入力、タップ)を個別にテストします。すべてのスクロールターゲット、スティッキーヘッダー、フォールドをチェックします。
  • U2 · 推奨事項。フリーフォーム入力の横にワンタップで入力できる方法(例やプリセット)があること。 イベントはどちらが使用されたかを示すこと。フリーフォーム入力がない場合は該当なし。
  • U3 · ブロッカー。2秒を超える待機はすべて進行状況を表示し、明確な結果または明確なエラーで終了すること。 遅延応答と失敗応答をローカルで駆動します。決して終わらないスピナーは不合格です。アクションが待機しない場合は該当なし。 スクリプトがロードされる前に表示されるコントロール(遅延マップのフォーム)は、機能するかキューに入れる必要があります。ローディング中およびロード失敗後に使用してください。未処理のフォーム送信はページをリロードします。

次のステップ

  • N1 · 推奨事項。成功時に、明確な次のステップが1つあること: 関連ページ、別の試行、もう一度プレイなど。成功が発生する場所に配置し、フッターには配置しないでください。
  • N2 · 推奨事項。結果を送信する共有ボタン: WhatsApp、Facebook、X、リンクコピー。それぞれに、タイトルだけでなく、結果を含む1つの文章が含まれていること。結果が表示される場所に配置します。文章は公開コピーであるため、ユーザーが文言を決めます。質問してください。発見がないハブでも、ユーザーからの文章が必要です。自分で考え出したり、単独でこの項目を該当なしにしたりしないでください。share イベントはネットワークのみを送信し、テキストやURLは送信しません。

検索

GoogleのAI回答(AI Overviews、AI Mode)は、通常のSearchインデックスからページを取得します。スニペットでランク付けされるページは引用される可能性があり、AI専用のファイルやマークアップは必要ありません。構造化データはページに表示されているものと一致する必要があります。

  • F1 · ブロッカー。ページがインデックス可能であること: 1つの正規URL、不必要な noindex がないこと、サイトマップに掲載されていること。ランク付けするには薄すぎるページ(他のページへのリンクのみのスタブ、空のリスト)は、代わりに検索から除外します: noindex とし、サイトマップから削除し、他の言語バージョンがそのページを指さないようにします。
  • F2 · 推奨事項。タイトルはサイト名だけでなく、ページの内容を示していること。 サイト名は最後に配置します。説明はそのページ独自のものであり、他のページには表示されないこと。
  • F3 · 推奨事項。誰が作成したか、いつ公開されたか、データの新しさが表示されている行があること。 構造化データにも同じ公開日が含まれていること。コンテンツが実際に変更された場合のみ変更日を更新します。ハブの場合は該当なし。
  • F4 · ブロッカー。HTML内のすべての画像に出典と適切な代替テキストがあること。 JavaScriptがない場合にのみ表示される図も含みます。空の <img> は不合格です。
  • F5 · 推奨事項。データに基づいて構築されたページはデータを提供すること: プライバシーチェック後のCSV(ページがすでに表示しているフィールドのみ)、ダウンロード横のライセンス行、Dataset マークアップ。動画にはポスター付きの VideoObject マークアップを取得します。ページにどちらもない場合は該当なし。

公開後: Search Consoleでページのインデックス登録をリクエストし(ユーザーのアカウントが必要なため質問してください)、プロジェクトがAI回答質問リストを保持している場合は、そのページが回答する質問をリストに追加します。

計測

このチェックは、プライバシーに配慮したイベントトラッカー(Umami、Plausibleなど)とカスタムイベントを前提としています。

  • M1 · ブロッカー。イベントは公開するビルドに含まれていること。 該当するステップごとに1つのイベント、アクションごとに1つ。成功はクリックではなく効果であり、*-leave イベントは最も進んだステップと表示時間を示すこと。
  • M2 · ブロッカー。イベントは実際のトラッカーを通じて発火すること。 スタブされたトラッカー関数はイベントロストを隠す可能性があります。本番ホスト名で実際のトラッカーを実行し、context.route でローカルビルドを提供し、トラッカーの送信エンドポイントをキャッチして、何もマシンの外に出ないようにします。すべてのコントロール、ジャンプリンクも駆動します。各イベントはそのアクションを記述し、失敗は成功を送信せず、コンテンツを飛び越えるジャンプは読み取りイベントを送信しません。追跡対象のアウトバウンドリンクを同じタブでたどり、*-leave イベントが引き続き到着することを確認します。ページのアンロード中に開始されたリクエストは失われる可能性があるため、そのようなリンクは新しいタブで開きます。
  • M3 · ブロッカー。イベントはプロジェクトの docs/analytics.md に公開時刻とともにリストされていること。 ファネル仕様は docs/funnels/ に保存されていること(アナリティクスツールに保存するにはユーザーの同意が必要です)。
  • M4 · ブロッカー。訪問者が入力または選択したものがアナリティクスに送信されないこと: ページビューのハッシュ(ハッシュは除外)、クエリテキスト、場所は含めません。固定ラベルとバケットのみ。
  • M5 · ブロッカー。ターゲットは公開前に文書化されていること(各ステップで到達が期待される数値)。公開後のレビューで比較対象があるようにするためです。
  • M6 · ブロッカー。エージェントはライブページにアクセスしないこと。 彼らの訪問は実際のトラフィックとしてカウントされるためです。ライブページを指す可能性のあるチェックスクリプトは、それ自体でアナリティクスをブロックする必要があります。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル