crazy-ecommerce-builder-skill

Crazy Ecommerce Builder

短い企業概要から、一貫性のあるクリエイティブな主張、独自の画像世界、実際に機能する E コマース体験を作り上げます。ランダムな効果ではなく、製品の本質を表現することで、意外性のある仕上がりを目指します。

必須の関連スキル

実装と検証には利用可能な sites-building スキルを、独自のラスター素材の作成には imagegen を、公開には sites-hosting を使用してください。ただし、ユーザーがサイトをローカルにとどめるよう求めた場合は除きます。これらのスキルを使って作業を始める前に、それぞれの内容を確認してください。いずれかが利用できない場合は、最も近いローカルのワークフローに従い、その制約を簡潔に伝えてください。

入力

以下を抽出するか、推測してください。

• 企業名または製品名
• 販売するものと、それが明確に異なる理由
• 顧客層と価格帯
• カタログの規模または代表的な製品
• ブランドの個性、避けるべきこと、望ましいビジュアルリスクの度合い
• 既存の素材、コピー、サイト、技術スタック、公開の希望

完全な概要を求めないでください。不足している情報によって事業やクリエイティブの方向性が大きく変わる場合に限り、短い質問を最大2つまでしてください。それ以外の場合は、仮定であることを明示して作業を進めてください。提示された製品の事実、価格、主張、素材を正確な情報源として扱い、規制、医療、サステナビリティ、性能、認証に関する主張を決して作り上げないでください。

ワークフロー

1. ワークスペースを確認し、保護する

新規サイトか既存プロジェクトかを判断してください。既存のパッケージマネージャー、アーキテクチャ、動作中の機能、ユーザーによる変更、ホスティング設定を維持してください。編集前に現在の製品の状態を確認してください。好みのフレームワークを使うためだけに、機能しているプロジェクトを置き換えないでください。

2. クリエイティブな主張をまとめる

デザインに着手する前に、概要を以下の5点にまとめてください。

1. 製品の緊張感 — 製品の内側にある、意外な矛盾や変化。
2. 顧客の感情 — ファーストビューで生み出す感情。
3. ビジュアルの世界観 — カラーパレット、文字の扱い、構図、写真、動き、質感を含む具体的なアートディレクションの体系。
4. 購買までの道筋 — 興味を引き、製品の理解を促し、購入へつなげる最短経路。
5. 象徴的な仕掛け — 縫い目、分割、軌道、裂け目、標本ラベル、サーマルマップ、あり得ないスケールの変化など、製品に結び付いた記憶に残るモチーフを1つ。

方向性を選ぶ際は、creative-system.md を読んでください。主張に一貫性があると確信できるまでは、実装を始めないでください。

ユーザーが明示的に複数の方向性から選ぶよう求めた場合、または該当する Sites ワークフローで選択画面が必要な場合は、互いに明確に異なるコンセプトを3つ作り、そのワークフローに従ってください。それ以外の場合は、最も有力な方向性を選び、中断せずに構築してください。

3. 小規模な画像システムを計画する

image-system.md を読んでください。互いに無関係な見栄えのよい画像ではなく、意図的に統一された素材群を生成してください。標準では、以下を用意します。

• コピーを配置できる余白のある横長のヒーロー画像を1点。
• 一貫性のある製品カード画像を2〜4点。
• 情報を加える場合に限り、製造工程またはエディトリアル画像を1点。
• サイトのカラーパレット、見出し、モチーフが固まった後に、完成したソーシャルカードをちょうど1点。

標準では組み込みの ImageGen モードを使用してください。プロジェクトで使用する最終素材はすべてワークスペース内に保存してください。生成結果を確認し、製品の正確さ、テキストの誤り、不要な物体、素材の不一致、形状の崩れ、照明の不統一がないか調べてください。修正が必要な場合は、対象を絞って再生成してください。

4. コマース体験を構築する

commerce-checklist.mdを読みます。一般的なナビゲーションやダッシュボードのシェルではなく、商品を中心にファーストビューを構成します。具体的なブランドコピーと、現実味のある商品データを用意します。

階層、構成、トリミング、タイポグラフィ、色の組み合わせ、コピーの語り口、そして目的のあるインタラクションを1～2つ取り入れ、型にはまらない印象のサイトにします。読みやすさ、商品理解のしやすさ、明確な行動喚起、キーボード操作、タッチ操作の使いやすさ、レスポンシブ対応、動きを減らす設定への対応は維持します。

最低限、次の要素を実装します。

• 商品の価値を明確に伝える、個性的なヒーローセクション；
• 商品名、価格、役立つ詳細情報、カート追加ボタンを備えた商品一覧；
• カートの状態を表示し、操作できるカート画面；
• 信頼できるブランド、制作工程、実績を伝えるセクション；
• モバイル対応とアクセシブルなラベル；
• チェックアウト、在庫、ニュースレター、その他の連携機能についての誠実な説明。

決済、在庫管理、メール、フルフィルメントのサービスが接続されていない場合は、完成度の高いデモ状態を実装し、その旨を引き継ぎ時に伝えます。実際には処理されていないのに、決済、サブスクリプション、注文が処理されるかのように示してはいけません。

5. 規模に応じて検証する

実装後に本番ビルドを実行します。実際のエラーを修正して再ビルドします。生成されたアセットが正しく読み込まれること、主要な商品情報が含まれていること、インタラクションがコンパイルされること、以前のスターターのブランドが残っていないことを確認します。Sites のプレビュー規則に従い、依頼された場合、または必須の場合を除き、ブラウザーによる QA を追加しないでください。

6. 公開して引き継ぐ

ユーザーがローカルのみの作業を依頼していない限り、ビルド成功後にsites-hostingを通じて公開します。ライブ URL を最初に提示します。コンセプト、動作するコマース関連のインタラクション、生成画像のセット、チェックアウトなど意図的に未接続の本番サービスを簡潔にまとめます。

品質基準

• 無関係な会社にそのまま流用すると意味が失われるデザインになっている。
• 実験的な表現を取り入れつつも、ファーストビューで商品が理解できる。
• 生成画像すべてが、同じ商品設定とアートディレクションを表現している。
• モバイル表示が単に要素を縦に並べただけではなく、適切に構成されている。
• モーションがコンセプトを支え、動きを減らす設定にも配慮している。
• コピーに個性がありつつ、購入に必要な情報を妨げていない。
• ユーザーに提供するのはムードボードや静的なモックアップだけでなく、動作するサイトである。

避けること

• ありきたりなラグジュアリー系ベージュ、デフォルトの SaaS グラデーション、目的のないグラスモーフィズム、テンプレートそのままの商品カードグリッド；
• 無作為な歪み、カーソルのギミック、買い物を妨げるアニメーション；
• 偽のレビュー、偽の在庫僅少カウンター、偽の認証、裏付けのない主張；
• HTML のテキストなら選択可能でレスポンシブにできるのに、テキスト量の多い画像を生成すること；
• 不足している商品情報の代わりに生成画像を使うこと；
• プロジェクトのアセットを ImageGen のデフォルト出力ディレクトリに置いたままにすること；
• ビルド検証を行わずに完了としたり、未完了の連携機能を隠したりすること。