メインコンテンツまでスキップ

トップページ

参照デザイン: Figma

1. ページ目的・KPI​

  • 対社会人: 団体の活動実態の明確化、信頼感の醸成
  • 対大学生: 活動内容の理解 → 入会導線のクリック率改善
  • 主要KPI: 入会導線CTR、プロジェクト詳細への遷移率

2. 情報構成(IA)​

  1. ヒーロー: サークル名(ロゴ) + キービジュアル + 一言コピー
  2. MVV セクション: Mission / Vision / Value
  3. 活動写真ギャラリー: 代表的な写真数枚(カルーセル)
  4. プロジェクト抜粋: 最新 or 代表的な3件
  5. サークルの歴史(年表)
  6. 年間スケジュール(要編集性)
  7. フッター: ロゴ、SNSリンク(Instagram DM等)

3. UIセクション別 実装方針​

3.1 ヒーロー​

  • 内容: ロゴ、KV、コピー、主要CTA(入会/問い合わせ)
  • 実装: 画像はレスポンシブ最適化、LCP向上のため先読みと適切なサイズ提供
  • CMS接続: コピー文言をCMS管理可

3.2 MVV​

  • 内容: Mission / Vision / Value をカードまたはタイポグラフィ中心で表示
  • 実装: アクセシブルなカード群、モバイル1カラム・デスクトップ2〜3カラム
  • CMS接続: 3項目は独立フィールドで編集可能

3.3 活動写真ギャラリー​

  • 内容: 代表写真カルーセル
  • 実装: 遅延読み込み + スワイプ対応、サムネイル/ドットナビ
  • CMS接続: 画像アセットとキャプションを更新可能

3.4 プロジェクト抜粋​

  • 内容: 人数・目的・時期・名称・成果・画像
  • 実装: カードリスト(最大3件)、カードから詳細ページへ遷移
  • CMS接続: ステータス(公開/アーカイブ)で出し分け

3.5 サークルの歴史(年表)​

  • 内容: 2022/4設立、ビジコン参加、能登復興ボランティア、講演会 等
  • 実装: 年表コンポーネント(モバイル縦並び、デスクトップ左右交互)
  • CMS接続: 追記/整序が容易なリスト構造

3.6 年間スケジュール​

  • 内容: 4月説明会、5月学習会、6-8月ビジコン、10-1月講演会、2-3月サークルビジコン
  • 実装: カレンダー/リスト切替、月別アンカー
  • CMS接続: ソービズ側で編集可能(FAQ要件)

4. ルーティング・情報設計​

  • ルート: /(トップ), /projects, /schedule
  • 内部リンク: トップから各詳細へ明確な導線(抜粋カード → 詳細)
  • パンくず: 階層を浅くし必須ではないが、詳細ページでは表示

5. データモデル(概要)​

  • Project: id, title, period, members, goal, result, image, status
  • HistoryItem: id, year, month, title, description
  • ScheduleItem: id, month, title, description

6. 状態管理・取得戦略​

  • トップはSSG + 増分再生成(更新は半年〜年1回想定)
  • 抜粋セクションはビルド時取得、CMS更新時に再ビルド
  • 画像はCDNキャッシュ + 適切なキャッシュヘッダ

7. パフォーマンス・SEO​

  • LCP改善: ヒーロー画像最適化、クリティカルCSS
  • CLS対策: 画像アスペクト比予約
  • メタ/OGP: タイトル、ディスクリプション、OG画像自動生成

8. アクセシビリティ​

  • 色コントラスト、フォーカス可視化、画像ALT
  • キーボード操作でカルーセル操作可能