ミントノワールのプロダクトサイトv1.0.0

ミントノワールのプロダクトサイト

ソフトウェアや AI プロダクト向けのダークなマーケティングサイトを作成します。ほぼ黒のグラファイト面、やわらかなオフホワイトの文字、極細のボーダー、そしてミント一色のアクセント。各見出しの一語だけを大きなイタリックのセリフ体にします。サンプルでは、ネットショップ運営者向けの AI ビジネスチームという架空のプロダクト Corvel を使っています。内容は差し替えつつ、このスタイルを印象づける構成はそのまま残します。

含まれるもの

5 つの連動したページが、追従するナビゲーションバーとフッターを共有します。

• プロダクト — お知らせピル、2 行のグラデーション見出し、ダウンロードとブラウザ版の CTA、アバターによる信頼表示、そしてコードで描いた大きなアプリ画面（KPI タイル、売上チャート、主な発見のメモ入り）。その下に連携サービスの帯、3 枚の機能カード、Bento グリッド、成果の数値を添えたセリフ体の推薦文、グローをまとったクロージング CTA が続きます。
• 料金 — すべての価格を再計算する月額／年額スイッチ、中央のプランをグローで浮き立たせた 3 プラン、比較表、請求に関する FAQ。
• リソース — 入力に合わせて絞り込むヘルプセンター検索、6 つのカテゴリカード、人気記事、レベル別チュートリアル、サポートカード。
• イベント — カウントダウンが進むライブワークショップの特集とアジェンダ、絞り込める今後のセッション、アーカイブカード、ニュースレター登録フォーム。
• 変更履歴 — スクロールに合わせてアクティブなノードが移動するリリースタイムライン、情報量のあるリリースカード、「過去のリリースを読み込む」ボタン。

パッケージには、テンプレート、スタイルガイド、ページライブラリ、アイコンルール、フレームワーク対応ガイド、ローカル検証スクリプトも含まれます。

自分仕様にする

まずプロダクト名、一行のカテゴリ説明、Hero の一文を用意し、ミントのセリフ体にする一語を選びます。実際に対応している連携サービス、3 つの機能、説得力のある数値を伴う導入事例、そして料金プランを加えます。ヘルプ記事やイベント、リリースノートがまだない場合は、架空であることを明示した下書きをアシスタントが用意するので、内容を確認してください。

使っているフレームワークをアシスタントに伝えるか、プロジェクトを読み込ませます。指定がなければ Next.js App Router と TypeScript のプロジェクトを構築し、各ページを実際のルートに、繰り返し使うブロックをコンポーネントにします。

写真は人物に限ります。小さな丸いアバターと、エージェント ID カードのポートレート 1 枚です。自社チームの写真を使うか、無地のダークな背景とやわらかな暖色光で統一感のあるセットを生成してください。

仕上がりを確認する

すべてのページをデスクトップ幅とスマートフォン幅で開きます。請求スイッチを切り替え、ヘルプセンターを検索し、イベントを絞り込み、セッションに登録し、Bento のアクションを承認し、過去のリリースを読み込んでみてください。1 ファイル構成なら同梱の検証スクリプトを、フレームワーク構成ならプロジェクト自身のチェックを実行します。サンプルはデータを一切送信しません。実際のサービスは、本番サイトで必要な箇所にだけ接続してください。