MarsLink トップページ変更仕様書

1. 概要

MarsLinkのトップページを「CabinTime専用サイト」から「観光エコシステムプラットフォーム企業」としてのブランディングサイトへ変更する。

1.1 デザインコンセプト

  • 参考デザイン: SpaceX、Tesla風のミニマル＋未来志向
  • カラースキーム:
    • 背景: ダークグレー/ブラック (#111827, #000000)
    • テキスト: ホワイト (#FFFFFF)
    • アクセント: シアン/ブルー (#06B6D4, #3B82F6)
  • フォント:
    • 見出し: Orbitron（既存維持）
    • 本文: Inter/Roboto

1.2 技術スタック

  • CSS Framework: Tailwind CSS
  • UIコンポーネント: Flowbite
  • アニメーション: Tailwind CSS Animation + カスタムCSS
  • レスポンシブ: モバイルファースト設計

2. セクション別詳細仕様

2.1 Heroセクション

要素構成:

  • 背景: グラデーション or 抽象的なテクノロジー系ビジュアル
  • メインキャッチコピー: 「観光体験を、点ではなく循環へ。」
  • サブコピー: 「MarsLinkは移動・体験・発信・記録・再訪をつなぐ観光エコシステムをつくるスタートアップです。」
  • CTA: 3つのボタン（プロダクトを見る/資料請求/相談する）

デザイン仕様:

  • 高さ: 100vh
  • テキストアニメーション: フェードイン
  • ボタン: Flowbite gradientボタン使用

2.2 ビジョンセクション

要素構成:

  • セクションタイトル: 「MarsLinkのビジョン」
  • 2つのビジョンステートメント（カード形式）

デザイン仕様:

  • 背景: ダークグレー
  • カード: ガラスモーフィズム効果
  • アイコン: Heroicons使用

2.3 プロダクトポートフォリオ

要素構成:

  • 4つのプロダクトカード（グリッドレイアウト）
  • 各カード: アイコン、タイトル、説明文、「詳しく見る」リンク

プロダクト詳細:

  1. CabinTime: 移動中のオフライン観光メディア
  2. Map × 動画: 観光を動画と地図で再構造化
  3. SNS All Stars: 旅の投稿をAIで自動化＆多チャネル配信
  4. 旅ログ（MyTrails）: 体験を記録し、再訪・推薦に活用するUX

デザイン仕様:

  • デスクトップ: 4列
  • タブレット: 2列
  • モバイル: 1列
  • ホバー効果: スケール＋シャドウ

2.4 エコシステム循環図

要素構成:

  • インタラクティブな循環図
  • 5つのステップ: 移動中→現地体験→発信→記録→再訪

デザイン仕様:

  • SVGアニメーション or CSS Animation
  • レスポンシブ対応

2.5 実績セクション

要素構成:

  • 3つの実績カード（横並び）
  • 各カード: アイコン、タイトル、説明

実績内容:

  • OSAP採択
  • 地方自治体との実証
  • ローカル交通会社との提携

デザイン仕様:

  • コンパクトなデザイン
  • 数値強調

2.6 CTAセクション

要素構成:

  • 背景: グラデーション
  • 4つのCTAボタン（導入相談/協業提案/資料請求/採用）

デザイン仕様:

  • フルワイド背景
  • ボタン: アウトラインスタイル

3. レスポンシブ対応

ブレークポイント

  • モバイル: < 640px
  • タブレット: 640px - 1024px
  • デスクトップ: > 1024px

各デバイス対応

  • モバイル:
    • ナビゲーション: ハンバーガーメニュー
    • カード: 縦積み
    • フォントサイズ: 調整済み
  • タブレット:
    • カード: 2列グリッド
    • パディング: 中間値
  • デスクトップ:
    • フルレイアウト
    • ホバーエフェクト有効

4. アニメーション仕様

  • スクロールアニメーション: Intersection Observer使用
  • フェードイン: 各セクション到達時
  • パララックス効果: Hero背景
  • ホバー効果: ボタン、カード

5. パフォーマンス最適化

  • 画像: WebP形式、遅延読み込み
  • CSS: Critical CSS インライン化
  • フォント: preload使用
  • アニメーション: GPU加速

6. アクセシビリティ

  • セマンティックHTML: 適切なタグ使用
  • ARIA属性: 必要箇所に追加
  • キーボードナビゲーション: 対応
  • カラーコントラスト: WCAG AA準拠

7. 開発要件

必須要件:

  • Tailwind CSSで全体構成
  • Flowbite UIコンポーネントを積極活用（カード、ボタン、ナビゲーション、ヒーローなど）
  • スマホ／PC両対応（レスポンシブ）
  • コンテンツは実テキストで記載（Lorem ipsum不可）

参考URL:

  • Tailwind UI Marketing: https://tailwindcss.com/plus/ui-blocks/marketing
  • Flowbite Components: https://flowbite.com/docs/components/