Name: BeEngineer Programming Camp - 合宿案内サイト
Author: K5

プロジェクト概要

BeEngineerプログラミング合宿（2025年11月22日〜24日）向けの情報提供サイト。ロゴスランド京都での2泊3日に必要な情報をまとめ、HTML5/CSS3/Vanilla JavaScriptのみで構成した軽量・静的サイトです。レスポンシブデザインでPC/タブレット/スマホに対応し、合宿中のスケジュール・持ち物・アクセス・フロア案内を一元化します。

開発目的

参加者への情報提供を効率化（スケジュール・持ち物・アクセス）
フレームワーク不使用で軽量なレスポンシブサイトを構築
タブ/アコーディオンなどインタラクティブUIの実装
チェックリストの状態をlocalStorageで保持し、再訪問時に復元

使用技術

プログラミング言語

HTML5 CSS3 JavaScript (ES6+)

フロントエンド

Vanilla JavaScript CSS Custom Properties CSS Grid / Flexbox Intersection Observer

データ管理・API

localStorage Google Maps埋め込み

主な機能

1. レスポンシブナビゲーション

PC: 固定サイドバー + セクション内リンク
SP: ハンバーガーメニュー + スライドメニュー
スクロールスパイで現在セクションをハイライト

2. インタラクティブUI

スケジュール：1日目/2日目/3日目のタブ切り替え
アクセス：車・電車/バス・京都駅タブ切り替え
フロアマップ：1F/2F/3F切り替え
SPではアコーディオンで情報を整理

3. 持ち物チェックリスト

チェック状態をlocalStorageに保存・復元
チェック済みを視覚的にフィードバック

4. ブログ（day1/day2/day3）

日別の写真ギャラリー
前後日のナビゲーション

システム構成

ページ構成

index.html（トップ）

↓

セクション（案内/日程/プログラム/フロア/持ち物/アクセス）

↓

blog/day1.html / day2.html / day3.html

↓

assets（fav, logos, blog images）

データフロー

ユーザー操作（チェックリスト）

↓

localStorageへ保存

↓

再訪時に復元しUIへ反映

技術的ハイライト

1. Intersection Observerでスクロールスパイ

const observer = new IntersectionObserver(observerCallback, {
  root: null,
  rootMargin: '-20% 0px -70% 0px',
  threshold: 0
});
sections.forEach(section => observer.observe(section));

2. localStorageでチェックリスト状態を永続化

checklistItems.forEach(item => {
  const key = item.dataset.item;
  if (localStorage.getItem(key) === 'true') {
    item.checked = true;
    item.parentElement.classList.add('checked');
  }
});

3. CSS変数でテーマ管理

:root {
  --color-primary: #0E8B62;
  --color-secondary: #F47F2E;
  --color-accent: #FF6B6B;
  --color-bg: #FAFAF8;
}

ファイル構成

BeEnCamp/
├── index.html
├── styles.css
├── script.js
├── blog/
│   ├── day1.html
│   ├── day2.html
│   └── day3.html
└── assets/
    ├── fav/
    ├── logos/
    └── blog/images/

デザインシステム

カテゴリ	カラー名	カラーコード
メイン	Primary	`#0E8B62`
メイン	Secondary	`#F47F2E`
アクセント	Accent	`#FF6B6B`
背景	Background	`#FAFAF8`

フォント: 'Segoe UI', 'Yu Gothic UI', 'Meiryo', sans-serif
タイトル: 2.5rem / 本文: 1rem
行間: 1.7

活用シーン

イベント・合宿の案内サイト
教育機関のイベント告知・レポート
シンプルなLPテンプレートとして再利用

開発情報

開発形態

個人開発

役割

フロントエンド / UI/UX / デザイン

期間

2025年11月（約1ヶ月）

パフォーマンス・セキュリティ

静的サイトで高速表示・脆弱性が少ない
XSS対策: innerHTMLを避けtextContentを使用
外部リソースはGoogle Mapsのみ
localStorageのみを利用し個人情報を扱わない

開発時の注意事項

本サイトは合宿参加者向けの情報提供を目的としており、以下に配慮しています。

デザイン・著作権

画像・ロゴは適切な権利範囲で使用（許諾確認済み）
カラーパレットやアイコンも許諾確認済み

技術的配慮

モダンブラウザ向け（IE非対応）
静的サイト構成でサーバーサイド依存を最小化
JavaScript無効時も基本情報は閲覧可能

アクセシビリティ

セマンティックHTMLで構造化し、キーボード操作に配慮
コントラスト比を確保、スクリーンリーダー対応は継続改善予定

プライバシー

個人情報を収集しない（localStorageはチェックリスト状態のみ）
外部リソースは信頼できるもの（Google Maps）に限定

デモ動画

合宿案内サイトはこちら

実際の合宿案内サイトの動作を動画でご覧いただけます。

謝辞

ロゴスランド京都: 会場の提供
BeEngineer: 合宿の企画・運営
MDN Web Docs: Web技術ドキュメント