osh2026

IT 系エンジニア・学生・企業スポンサー・登壇者候補者向けのイベントサイトです。

技術スタック

• フレームワーク: Next.js 15 (App Router)
• 言語: TypeScript
• スタイリング: TailwindCSS
• フォント: Inter, Noto Sans JP
• ホスティング: 静的サイト (GitHub Pages / Firebase Hosting)

開発

前提条件

• Node.js v20.16.0 (.tool-versionsで管理)

セットアップ

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

開発サーバーは http://localhost:3000 で起動します。

ビルド

# プロダクションビルド
npm run build

# 静的サイトエクスポート (out/ ディレクトリに生成)
npm run build

プロジェクト構成

src/
├── app/                 # App Router ページ
│   ├── page.tsx        # トップページ
│   ├── sessions/       # セッション一覧
│   ├── speakers/       # 登壇者紹介
│   ├── sponsors/       # スポンサー紹介
│   └── archive/        # 過去イベント
├── components/         # 再利用可能コンポーネント
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── SessionCard.tsx
│   ├── SpeakerCard.tsx
│   └── SponsorCard.tsx
├── data/              # 静的データ（JSON）
│   ├── sessions.json
│   ├── speakers.json
│   ├── sponsors.json
│   └── archive.json
├── types/             # TypeScript型定義
└── lib/               # ユーティリティ関数

特徴

• レスポンシブデザイン: モバイルファーストの設計
• SEO 最適化: meta tags、JSON-LD 構造化データ対応
• アクセシビリティ: ARIA 属性、キーボードナビゲーション対応
• パフォーマンス: 静的サイト生成による Lighthouse 最適化
• 外部連携: Connpass 申し込みリンク対応

データ管理

コンテンツは src/data/ 配下の JSON ファイルで管理されています。更新は該当ファイルを編集してください。

ブランドカラー

メインカラー: #E63C08