キット：閲覧、プレビュー、モジュールの追加

Explorerは3つの階層になっており、それぞれがページ自身のアドレスに含まれています（単なる画面の状態ではありません）。カテゴリ一覧（/projects/kit または /projects/<id>/kit）、1つのカテゴリのモジュール一覧（?cat=<key> を追加）、1つのモジュールの詳細ページ（&module=<id> を追加）です。そのため、ブラウザの戻るボタンは常に正しく動作します。特定のモジュールの詳細ページは実際に共有できるリンクになるので、「見積もり依頼フォームで何ができるか」を場所を説明する代わりに、そのままリンクで案内できます。Escキーも戻るボタンと同じく、一度に1階層ずつ戻ります。

プロジェクト内（/projects/<id>/kit）から開くと、ページはどのプロジェクトを見ているかを把握するため、すでに含まれているものを表示し、そのプロジェクトへ直接追加できます。単独で開いた場合（/projects/kit。Kitタブのリンクから、または直接アクセス）も同じ3階層ですが、プロジェクト固有の情報はありません。何を作るか決める前の閲覧や、特定のプロジェクトを開かずにカタログを紹介するのに便利です。

カテゴリ一覧の上部には、aiKitの他の場所と同じ2択の切り替えがあり、カタログ全体を分けています。サイトキットは、ウェブサイトやアプリ自体の一部になるセクションや機能です（ページ、フォーム、ギャラリー、ストア、予約、SEO）。ビジネスツールキットは、プロジェクトの中ではなく並行して動くツールです（マーケティング自動化、請求書、CRM、スタッフ用ツール、レポート）。各カテゴリのタイルには、モジュール数が表示され、「準備完了 N件」のバッジは、そのうち1つでも「今すぐ使える」モジュール（下記参照）がある場合に表示されます。

カテゴリの上にある検索ボックスは、どちらの切り替えが選ばれていても、カタログ全体（サイトキットとビジネスツールキットの両方）からモジュール名または説明で検索します。そのため、サイトキットを見ている間でも「invoice」と検索すれば見つかります。

プロジェクト内から開き、検索していない間は、aiKitに実際のおすすめがある場合にカテゴリ一覧の上に「このプロジェクトへのおすすめ」の行が表示されます。これは、プロジェクトの種類に基づくAIを使わない単純なルールで決まります（ウェブサイトなら見積もりフォーム、お問い合わせフォーム、レビュー紹介、ローカルSEO、FAQページが提案され、オンラインストアならカートと決済、カゴ落ち対策、商品レビューが提案されます。ランディングページ、アプリ、管理システム、ダッシュボード、クライアントポータル、ブログ、マーケティング自動化プロジェクトも同様です）。さらに、プロジェクトの目標文に含まれるキーワードにも一致します（「quote」「booking」「review」「email」「invoice」「sell online」と書かれていると、それぞれに対応するモジュールと一行の理由が表示されます）。すでにプロジェクトにあるものは除外され、リストは最大6件です。

すべてのモジュールには2種類のステータスラベルのいずれかが付いており、その表現は意図的に文字通りで、マーケティング用語ではありません。「今すぐ使える」は、ビルドエンジンでテスト済みのモジュールであることを意味します。サンプルデータが実際の情報の代わりに入った、実際のページを表示する本物のコードで、ライブサイトが受け取るものと全く同じテンプレートです。「あなたのためにつくる」は、カタログに実際に計画されているものの、まだ表示されるものがないモジュールを意味します。これを選ぶと計画に追加され、実際の作業項目が登録されます。そのモジュールは、他のAI編集と同じように、サイト自体のコードに、そのブランドと文言で組み込まれます。ただ、今日すぐに使えるテスト済みのテンプレートがないだけです。

どちらのステータスも「本物ではない」「仮定の話」という意味ではありません。どちらも、aiKitが実際にあなたのために作るものです。ラベルが示す違いは、完成形を今すぐ見られるか、説明と図から想像する必要があるか、という点だけです。

カテゴリを開くと、そこにあるすべてのモジュールがカードとして表示されます。サムネイル、モジュール名、ステータスラベル、一行の短い説明、「おすすめの用途」のチップ（最大3つ）、そして（プロジェクト内で閲覧している場合）すでに追加済みなら「このプロジェクトにあり」が表示されます。「今すぐ使える」モジュールのサムネイルは、実際のページの小さなライブプレビューです。画面にスクロールして入ってから初めて読み込まれ、同時に表示されるライブサムネイルは6件までなので、長いカテゴリでもページが重くなりません。上限を超えたものは、実際に見えるまで単純な読み込み中の表示になります。「あなたのためにつくる」モジュールのサムネイルは、下で説明する説明図と同じものが小さく表示されます。ただし、動作するプレビューがあるモジュール（下記参照）は例外で、実際のサンプルサイトを縮小して表示し、「動作プレビュー・N種類」のバッジと、「詳細を見る」ではなく「動きを見る」ボタンが表示されます。「詳細を見る」を押すと、そのモジュール自身のページが開きます。

「Ready now」モジュールでは、プレビューは実際にテスト済みのページを本来のサイズで表示した本物のiframeです。小さなブラウザウィンドウのような枠に入っていて、「デスクトップ」「スマホ」の切り替えで枠のサイズが実際に変わるため、スマホでの見え方を確認できます（実際のスマホでは、切り替えの代わりに「スマホプレビュー」という簡単なラベルが表示され、枠はフォームの位置まで自動スクロールされるので、ヒーロー部分だけでなくフィールドも確認できます）。枠の下端はフェードアウトします。その下の「プレビューを全画面で開く」を押すと、ページ全体が新しいタブで開きます。キャプションには、代わりに使われているサンプルのビジネス名が表示されます。プロジェクト内で開いた場合は、「このサイトの色で表示」を切り替えると、同じプレビューがプロジェクトのブランドカラーとプロジェクト名に差し替えて再読み込みされます。ブリーフのブランドメモに入力された#hexコードから色が読み取られるので、一般的なサンプルではなく、実際のサイトに近いイメージを確認できます。

「Built for you」モジュールでは、ライブのiframeは表示されません。代わりに、カテゴリ一覧と同じイラスト風のワイヤーフレームを大きく描いたものが表示されます。レイアウトの形を示すシンプルな線画のSVG図で、フォームの入力欄、カレンダーのグリッド、ダッシュボードのタイルなど、そのモジュールに合った画面の種類が描かれ、モジュール自身のプレビューデータから取った短いラベルがいくつか付きます。その下には必ずキャプションが表示され、削除されることはありません：「レイアウトのイラストです。お使いのバージョンはサイトに合わせてデザインされます。」これは、形のスケッチが完成したブランドに合ったプレビューと誤解されないようにするためのものです。

動作するプレビュー（2026年10月4日）：「Built for you」モジュールの中には、スケッチの代わりに、クリックで操作できる完全なサンプルサイトを開くものが増えています。詳細の上に全幅で表示されます。E-commerce / Online Storeの12モジュールはすべて、陶器ショップのサンプル「Juniper Kiln」を開き、各モジュールの主要部分を見せます。カタログでは、絞り込み、並べ替え、検索、商品を開いて釉薬とサイズを選ぶ操作ができ、写真と価格が変わります。カートと決済では、数量の変更、商品の削除、WELCOME10、FREESHIP、GIFT-2580の入力、郵便番号による配送日の目安の確認、注文確認ページへの決済ができます。支払い方法では、カード、Pay in 4、ウォレットボタンを確認できます。配送料金、割引コード、ギフトカードも確認できます。商品レビューでは、星数や写真で絞り込んだり、「参考になった」を付けたり、レビューを書いたりできます。セット商品とアドオンもあります。販売税では、配送先の都道府県を変更すると税額の表示が変わります。顧客アカウントでは、サインイン、再購入、荷物の追跡、返品の開始ができます。注文メールでは、注文確認、発送、配達完了のメールに加え、実際に動作する追跡ページを確認できます。返品と交換では、注文を探し、商品と理由を選び、返送ラベルを取得できます。在庫では、在庫を変更すると購入者側の表示が変わるオーナー画面を確認できます。Online Courses & Digital Productsの10モジュールはすべて、パン教室のサンプル「Rise & Crumb」を開きます。レッスンを再生（速度や字幕の変更）し、完了にしたり、進捗リングが埋まるのを確認したり、クイズに挑戦したり、無料プレビューから登録したり、修了証を見たり、レッスンの下で質問したり、デジタルダウンロードを購入したり、コースセットを選んだり、決済時のアドオンにチェックを入れたりできます。オーナー画面に切り替えると、レッスン名の変更、並べ替え、追加、非公開化、各週の公開日時の設定ができます。公開スケジュールのモジュールでは、フレームの上にある「プレビュー時間」の行で1週間先に進めたり（「今日に戻す」も使えます）、ロックされたレッスンが公開日に開く様子を確認できます。

フレームの上には、モジュールが用意している各バリエーションの選択肢が1行ずつ表示されます（例：ショップのレイアウト：グリッド、リスト、注目商品／カート：スライドアウトカート、またはカートページ、チェックアウト：1ページ、またはステップ式／公開ルール：指定日に公開、参加後の日数、最後のレッスン完了後）。選択すると、サンプルサイトがすぐにそのバリエーションに描き直され、ページのアドレス（?v=…）に保存されるため、特定のバリエーションへのリンクを共有できます。「デスクトップ」「スマホ」で枠のサイズを切り替えると、サンプルサイトがスマホでの表示と同じように再配置されます（実際のスマホでは、簡単な「スマホ表示」ラベルになります）。「リセット」を押すと、サンプルサイトが最初の状態に戻ります。短い「やってみること」の行には、最初にクリックすべき項目が並び、選んだ各バリエーションの説明がフレームの下に表示されます。ブリーフにブランドカラーがあるプロジェクト内では、「このサイトの色で表示」を選ぶと、サンプルサイトのメインカラーがプロジェクトの色に置き換わります（白いボタン文字が読みやすいほど暗い色の場合に限ります）。

動作するプレビューの内容は、どれもサーバーに送信されません。決済の接続はありません。決済画面には「プレビュー：請求は発生せず、注文も送信されません」と表示され、カード番号は固定の読み取り専用サンプルです。ウォレットボタン（Apple Pay、Google Pay、PayPal）は注記を表示するだけです。メールは送信されず、レビューも投稿されず、何も保存されません。ページを離れると、すべて消えます。サンプルのビジネス、商品、人物、価格はすべて架空のものです。フレーム下のキャプションにも次のように明記されています：「架空のビジネスのサンプルデータによる動作プレビューです。お使いのバージョンでは、ご自身の商品、価格、文言、ブランドを使用します。ここでは何も請求、保存、送信されません。」その他の「Built for you」モジュールでは、引き続きレイアウトのイラストが表示されます。

• 訪問者が見るもの：モジュールを使う人が実際に体験する内容を、番号付きのわかりやすい流れで順に説明します。
• 得られるもの：モジュールがプロジェクトのオーナーに提供する内容です（実際の場所に記録されるリード、更新できるステータスなど）。
• 機能、および（カタログで明確に定義された名前付きのバリエーションがあるモジュールのみ）このセクション内にある「バリエーションを選択」の選択カード。最初のカードは小さなチェックマーク付きで初期選択されています。自由記述のカスタマイズではなく、実際の二者択一の選択をここで行えます。
• なぜ重要か：ビジネスがこれを導入すべき理由を、誇張なしで説明します。
• カスタマイズ方法（Ready now）または選べるバリエーション（Built for you）：実際に何を変えられるかを説明します。
• おすすめの業種：カードと同じ業種のチップを、すべて表示します。
• 仕組み — このモジュールがどのように作られるかを、一文で正確に説明します。今すぐ使えるテスト済みのページとしてエンジンが表示するか、ビルド中にAIがサイトに組み込むかのどちらかです。支払いや地図など、外部サービスのアカウントが必要な場合はその旨も書きます。

その他すべての下に「{project name}に追加」（プロジェクトが未選択なら「あなたのプロジェクト」）があります。このモジュールにカスタマイズ案が登録されている場合、まずチェックリストとして表示されます。「すぐに使える」モジュールでは「おすすめのカスタマイズ」、「お客様向けに作成」モジュールでは「ほしいバリエーションを選択」と表示されます。どれかにチェックを入れると、その項目が送信内容にそのまま追加されます。単なるチェックボックスではありません。

動作するプレビューがあるモジュールでは、パネルはプレビューの下の左側に表示され、「あなたのバリエーション」から始まります。これはプレビューの選択行で選んだバリエーションです（例：「カート：カートページ・チェックアウト：ステップ形式」）。追加を押したときにプレビューに表示されているものが記録されます。プロジェクトの概要に、そのモジュールと一緒に保存され、作業項目には「バリエーション：…」と表示されるので、作成する人はそのレイアウトで作ります。機能セクションに名前付きのオプションがあるモジュールでは、そこで「何が一番大切ですか？」と聞かれます。2つの選択が混同されないようにするためです。

「あなたに合わせて変えたい点は？」は自由記入欄で、aiKitのほかの場所と同じ音声入力ボタンがあります。さらに「写真またはPDFを添付」ボタンがあり、ロゴ、参考写真、仕様書などを添付できます（画像とPDFのみ、それぞれ2.5MBまで）。添付したファイルは、その場で削除できるチップとして表示されます。モジュールを適切に作るために必要な具体的な質問がある場合は、「お聞きする内容」の下に表示されます。それぞれに任意の入力欄があるので、後から聞かれるのを待つのではなく、先に回答できます。

実際のプロジェクトを開いていれば、「プランに追加」はいつでも使えます。選んだ内容はプロジェクトの概要に記録されます（サイトプラン画面とプロジェクトページが読み込むのと同じプランです）。さらに、フィードバックタブに実際のスタッフ向けの作業項目が「お待ちいただいています」の表示付きで作成されます。ほかのリクエストと同じ流れです。「今すぐ追加して作成」は、プロジェクトに編集できる実際のファイルがある場合にだけ隣に表示されます。最初のビルドが完了しているか、すでに公開されている場合です。このボタンは同じ2つの処理を行い、その後すぐに「AIで修正」と同じAIエディターで作業項目を実行します。別の待ち行列はありません。すでにプロジェクトにあるモジュールを追加しようとすると、重複を作らず「このプロジェクトにはすでにあります」というメッセージで拒否されます。

送信されると、ボタンの代わりに実際に起きたことを示す確認が表示されます。通常は「作業項目としてプランに追加されました」というメッセージです。今すぐ作成のリクエストの場合は、実際の状態（開始された、または確認前の承認待ちで保留中など、開始できなかった具体的な理由）が表示されます。さらに「プランを開く」と「リクエストを見る」への2つのリンクがあるので、どこに送られたか迷うことはありません。

/projects/kit では、ホストされたプロジェクトのダッシュボードと同じ本物のサインインが必要ですが、プロジェクトは不要です。すべてが同じように動作し、何かを追加しようとするまで変わりません。「プロジェクトに追加」ボタン（プロジェクトが読み込まれていない場合は「プランに追加」の代わりにこのボタンが表示されます）を押すと、「どのプロジェクトに追加しますか？」が開きます。アカウント内のすべてのプロジェクトを一覧にした小さな選択画面です。1つ選ぶと、そのプロジェクト自身のKit Explorerに直接移動し、同じモジュールが開いた状態で、追加を完了できます。まだプロジェクトがない場合は、選択画面にその旨が分かりやすく表示され、「プロジェクトを始める →」へのリンクが表示されます。