このプロジェクトはtomokisun.comの90年代スタイルのウェブサイトで、1990年代のウェブデザイン要素を特徴としています。HonoX、Vite、Bunを使用して構築され、Cloudflare Workersにデプロイされています。
- Bun: JavaScriptランタイムおよびパッケージマネージャー
- Vite: ビルドツールおよび開発サーバー
- Hono/HonoX: Webフレームワーク（JSXレンダリングを使用）
- Tailwind CSS: ユーティリティファーストのCSSフレームワーク
- Cloudflare Workers: デプロイメントプラットフォーム
- Cloudflare KV: 訪問者カウンターなどのデータ保存に使用
- テーブルベースのレイアウト（90年代の標準）
- 明るく対照的な色使い
- Comic Sansなどの当時人気だったフォント
- アニメーション要素（点滅するテキスト、マーキー）
- 訪問者カウンター（Cloudflare KVを使用）
- 「常に工事中」の通知
- カスタムマウスカーソルとトレイルエフェクト
- レスポンシブデザイン（モバイル対応）
- 虹色の区切り線
- キリ番通知機能
- 右クリック禁止機能（通知付き）
ローカルでプロジェクトを実行するには：
# 依存関係のインストール
bun install
# 開発サーバーの起動
bun run devその後、ブラウザでhttp://localhost:5173/を開きます
tomokisun.com/
├── app/ # アプリケーションのソースコード
│ ├── client.ts # クライアントサイドのエントリーポイント
│ ├── server.ts # サーバーサイドのエントリーポイント
│ ├── style.css # グローバルスタイル（Tailwind CSSを含む）
│ ├── global.d.ts # グローバル型定義
│ ├── components/ # 再利用可能なコンポーネント（Atomic Design）
│ │ ├── atoms/ # 基本的なUIコンポーネント
│ │ ├── molecules/ # 複合的なUIコンポーネント
│ │ ├── organisms/ # 複雑なUIコンポーネント
│ │ ├── pages/ # ページコンポーネント
│ │ └── templates/ # テンプレートコンポーネント
│ ├── routes/ # ページルート
│ │ ├── _404.tsx # 404エラーページ
│ │ ├── _error.tsx # エラーページ
│ │ ├── _renderer.tsx # JSXレンダラー設定
│ │ ├── accounts.tsx # アカウント一覧ページ
│ │ ├── index.tsx # ホームページ
│ │ └── products.tsx # プロダクト一覧ページ
│ └── utils/ # ユーティリティ関数
│ ├── format-date.ts # 日付フォーマット関数
│ └── visitors.ts # 訪問者カウンター機能
├── docs/ # プロジェクトドキュメント
│ └── tone-and-manner.md # デザインガイドライン
├── public/ # 静的アセット
│ ├── .assetsignore # アセット除外設定
│ └── favicon.ico # ファビコン
├── vite.config.ts # Vite設定
└── wrangler.jsonc # Cloudflare Workers設定
# パッケージのインストール
bun install
# 新しいパッケージの追加
bun add [パッケージ名]
# 開発用パッケージの追加
bun add -D [パッケージ名]# 開発サーバーの起動
bun run dev# プロジェクトのビルド
bun run build
# ビルド後のプレビュー（Wranglerを使用）
bun run preview# Cloudflare Workersへのデプロイ
bun run deployサイトには訪問者カウンター機能が実装されています。この機能は以下の仕様に基づいています：
- データストレージ: Cloudflare KVを使用して訪問者数を保存
- カウント方法: ホームページにアクセスするたびにカウンターが1増加
- 表示形式: 8桁のゼロ埋め数字（例: 00000123）
- キリ番通知: 特定の数値（キリ番）に達した際に通知メッセージを表示
- 実装場所:
- カウント処理:
app/utils/visitors.ts - 表示:
app/components/organisms/Menu.tsxのサイドバー内
- カウント処理:
サイトには90年代風のマウストレイルエフェクトが実装されています。この機能の仕様は以下の通りです：
- 実装方法: CSSアニメーションとJavaScriptイベントリスナーの組み合わせ
- エフェクト内容:
- マウスの動きに合わせて小さな光の粒子が表示される
- 粒子は時間経過とともにフェードアウト
- クリック時には複数の粒子が放射状に表示される
- カスタムカーソル:
- サイト全体でカスタムカーソル画像を使用
- インタラクティブ要素（リンク、ボタンなど）ではポインターカーソルに変更
- スタイル:
- 黄色の粒子（#FFFF00）
- ピンク色の光彩効果（#FF00FF）
- フェードアウトアニメーション（1秒）
- 実装場所:
app/style.css内のCSSルールとJavaScriptコード
90年代のウェブサイトはレスポンシブではありませんでしたが、このプロジェクトではモバイルデバイスでの表示も考慮しています。レスポンシブデザインの仕様は以下の通りです：
- 実装方法: CSSメディアクエリを使用
- ブレイクポイント:
- タブレット: 768px以下
- モバイル: 480px以下
- モバイル対応の主な変更点:
- テーブルレイアウトをブロックレイアウトに変換
- フォーム要素のサイズ調整（タッチ操作に最適化）
- フォントサイズの調整
- 余白の最適化
- iOSでのフォーム入力最適化（ズーム防止、角丸の除去）
- 実装場所:
app/style.css内のメディアクエリ
90年代のウェブサイトでは、コンテンツの保護やユーザー体験の一部として右クリックを無効化することが一般的でした。このサイトでも右クリック禁止機能を実装しています。この機能の仕様は以下の通りです：
- 実装方法: JavaScriptのcontextmenuイベントリスナーを使用
- 動作:
- ユーザーが右クリックすると、デフォルトのコンテキストメニューが表示されなくなる
- 代わりに「右クリックは無効になっています」という通知が画面上部に表示される
- 通知は3秒後に自動的に消える
- 通知スタイル:
- 半透明の黒背景
- 白色テキスト
- 角丸の枠
- ドロップシャドウ効果
- 実装場所:
app/client.ts
この機能は90年代のウェブサイトの雰囲気を再現するとともに、当時のウェブコンテンツ保護の考え方を反映しています。
このウェブサイトには、90年代ウェブデザインの多くの古典的な要素が組み込まれています：
- テーブルベースのレイアウト：CSSが標準になる前は、テーブルがページレイアウトに使用されていました
- 明るい色：鮮やかで、しばしば対照的な配色が一般的でした
- 点滅するテキスト：重要な情報を強調するための点滅効果
- 訪問者カウンター：サイトの訪問者数を表示
- 工事中：「常に工事中」の通知
- マーキーテキスト：スクロールするテキスト効果
- テクスチャ背景：タイル状の背景パターン
- 3Dボタン：3D効果を作り出すためのベベル加工されたエッジ
- キリ番通知：訪問者数が特定の数値に達した際の通知
- カスタムマウスカーソル：独自のカーソルデザイン
- 虹色の区切り線：セクション間の区切りに使用される虹色の水平線
このプロジェクトはAtomicデザインパターンに基づいてコンポーネントを構造化しています：
- Atoms: 最も基本的なUIコンポーネント（Button、Heading、Input、Link、Text、TextAreaなど）
- Molecules: 複数のAtomsを組み合わせた複合コンポーネント（FormField、MenuItemなど）
- Organisms: 複数のMoleculesを組み合わせた複雑なコンポーネント（Footer、Header、Menuなど）
- Templates: ページのレイアウト構造を定義するコンポーネント（PageLayout）
- Pages: 実際のページコンテンツを表示するコンポーネント（HomePage、AccountsPage、ProductsPageなど）
このパターンにより、コンポーネントの再利用性が高まり、メンテナンスが容易になります。例えば、Textコンポーネントは様々な場所で再利用され、一貫したスタイルを提供します。
プロジェクトにはdocs/tone-and-manner.mdファイルが含まれており、サイトのデザイン哲学、ビジュアル要素、コンテンツトーン、ユーザー体験に関する詳細なガイドラインが記載されています。このドキュメントは、サイトの一貫性を保ちながら開発を進めるための参考資料として使用できます。
- 意図的なレトロ感: 現代のウェブデザイン慣行に反して、初期のウェブの美学を称えるデザイン
- 「工事中」の永続性: 「Always Under Construction」というフレーズで表現される、完成しない魅力
- 技術的な素朴さ: 複雑なJavaScriptやCSSエフェクトを最小限に抑え、HTMLの基本に忠実
- カラーパレット: 深い青色の背景、明るい黄色のタイトル、ビビッドなピンク色のセクションヘッダー
- タイポグラフィ: Comic Sans MSなどの「クラシック」なウェブフォント
- レイアウト: 2カラム構造（左ナビゲーション + 右コンテンツ）、テーブルベースのレイアウト
- カジュアルで個人的: 堅苦しさを排除し、個人的な声で語りかける
- 技術的に正確だが親しみやすい: 専門知識を示しつつも、親しみやすさを維持
- 自己言及的なユーモア: 軽いユーモアを交えた文体
このプロジェクトはCloudflare Workersにデプロイされています。デプロイには以下の手順を実行します：
- プロジェクトをビルド:
bun run build - Cloudflare Workersにデプロイ:
bun run deploy
Cloudflare Workersの設定はwrangler.jsoncファイルで管理されています。このファイルには、KVネームスペースなどのバインディングが含まれています。
© 2025 tomokisun