📦 Kotobako

Kotobako は「パーティーや配信で使える面白いセリフ集」を手軽に閲覧できる、モダンな静的サイトです。 軽量な Astro ベースで、TailwindCSS によるレスポンシブデザインを採用しています。

デモサイト（GitHub Pages）

---

目次

• 特徴
• 技術スタック
• ローカルで動かす
• デプロイ
• プロジェクト構成
• 貢献
• ライセンス
• 今後の改善案

---

特徴

• シンプルで軽量な静的サイト (Astro)

• TailwindCSS を使ったカジュアルで拡張しやすいデザイン

• モバイルファーストでレスポンシブ対応

• GitHub Pages による簡単デプロイ

技術スタック

• フレームワーク: Astro (プロジェクトの package.json に準拠)
• スタイル: TailwindCSS
• デプロイ: GitHub Pages (gh-pages パッケージを使用)

詳しくは package.json の scripts / dependencies を参照してください。

---

ローカルで動かす

前提: Node.js (推奨: LTS)、npm

# リポジトリをクローン
git clone https://github.com/raiton-boo/kotobako.git
cd kotobako

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

# 開発サーバー起動（ホットリロード付き）
npm run dev

# ビルド
npm run build

# プレビュー
npm run preview

---

デプロイ

このリポジトリでは gh-pages を使い、npm run deploy で dist/ を gh-pages ブランチに push するよう設定されています。

1. npm run build でビルド
2. npm run deploy を実行

（GitHub Actions 等で自動デプロイを設定することも推奨します）

---

プロジェクト構成（抜粋）

• src/pages/ - ページコンポーネント
• src/components/ - 再利用コンポーネント
• src/layouts/ - レイアウト
• public/ - 静的アセット（スクリーンショット: public/docs/ScreenShot.png）
• package.json - スクリプトと依存関係

---

貢献

貢献歓迎です！

1. Issue を立てて提案やバグを知らせてください
2. フォークしてブランチを切り、プルリクエストを送ってください

開発フローの簡単な提案:

• ブランチ名: feature/xxx, fix/yyy など
• PR には変更の概要と確認手順を記載してください

---

ライセンス

このプロジェクトは MIT ライセンスの下で公開されています。詳しくは LICENSE を参照してください。

---

今後の改善案

• スクリーンショットや GIF を public/docs/ に複数追加して README に表示
• アクセシビリティ等の追加・改善
• ダークモードの追加
• 共有機能の強化
• アニメーションの強化
• 統計機能の追加

---

© 2025 raiton-boo

Docs writer by ChatGPT