縦書き段組スクロール + タイポグラフィシステム + CSS分割

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -1,2 +1,172 @@
-# layout-lab
-破滅派でHTML+CSSによる組版のパターンを試すためのリポジトリです。
+# hametuha-reader-lab
+
+日本語縦書き長文のための Web閲覧UI実験リポジトリ。
+
+このリポジトリは、小説投稿サイト「破滅派」での閲覧体験を改善するために、
+長文日本語テキストをブラウザで快適に読むためのレイアウトとUIを検証するための実験環境です。
+
+WordPress本体の実装とは切り離し、HTML / CSS / JavaScriptのみで
+さまざまな表示方法を試しながら最適な閲覧体験を探索します。
+
+⸻
+
+## 背景
+
+破滅派では以下のような特徴があります。
+
+	•	原稿用紙20枚程度（約8000文字）の作品が中心
+	•	100枚以上（約4万文字以上）の長文作品も存在
+	•	作者によって文字サイズ・記号・改行などの使い方が大きく異なる
+	•	閲覧環境（PC / タブレット / スマートフォン）が多様
+	•	フォントサイズ変更など読者側のカスタマイズも想定される
+
+そのため、
+	•	固定ページ組版（PDFのようなページ分割）
+	•	事前に決められた段組
+
+などは破綻しやすく、Webブラウザ上での動的なレイアウト設計が必要になります。
+
+このリポジトリでは、長文小説に適した閲覧UIを検証します。
+
+⸻
+
+## このリポジトリで検証すること
+
+主に次の要素を組み合わせて比較します。
+
+レイアウト
+	•	横書き
+	•	縦書き（writing-mode: vertical-rl）
+
+段組
+	•	1段
+	•	2段（見開き風）
+
+スクロール方式
+	•	通常スクロール
+	•	Scroll Snapによるページ単位スクロール
+
+操作方式
+	•	スクロール操作
+	•	キーボード操作
+	•	ボタンによるページ送り
+
+表示環境
+	•	Desktop
+	•	Tablet
+	•	Smartphone
+
+テキスト長
+	•	約8000文字（短編）
+	•	約40000文字（長編）
+
+⸻
+
+目標
+
+このプロジェクトの目標は 紙の本を再現することではありません。
+
+Web上で長文を読む際に重要な次の点を満たすことです。
+	•	長時間読んでも疲れない
+	•	読書位置を見失わない
+	•	フォントサイズ変更に耐える
+	•	画面サイズの違いで破綻しない
+	•	長文でもパフォーマンスが落ちない
+	•	ブラウザのジェスチャー（戻る操作など）と衝突しない
+
+⸻
+
+検証予定のUI案
+
+A. シンプル縦書きスクロール
+
+最もシンプルな方式。
+
+縦書き
+↓
+通常スクロール
+
+メリット
+	•	実装が簡単
+	•	長文に強い
+	•	パフォーマンスが良い
+
+デメリット
+	•	本を読む感覚は弱い
+
+⸻
+
+B. 縦書き2段 + 縦スクロールページ
+
+1画面を「見開き」として扱う方式。
+
+┌─────────────┐
+│ ページ1 │ ページ2 │
+└─────────────┘
+        ↓
+   次の見開き
+
+Scroll Snap を使い、
+1画面単位でページ送りを行う。
+
+メリット
+	•	本に近い体験
+	•	横スワイプの戻るジェスチャー問題を回避
+
+デメリット
+	•	レイアウト調整が必要
+
+⸻
+
+C. 疑似ページめくりUI
+
+電子書籍のようなページめくり表現。
+
+メリット
+	•	視覚的に楽しい
+
+デメリット
+	•	実装コストが高い
+	•	可変テキストと相性が悪い
+
+⸻
+
+プロジェクト構成（予定）
+
+.
+├── index.html
+├── styles.css
+├── reader.js
+└── samples
+    ├── short.html   # 約8000文字
+    └── long.html    # 約40000文字
+
+
+⸻
+
+実験方針
+
+このリポジトリでは次の方針で開発します。
+	1.	WordPress依存を持たない
+	2.	UIのみを検証する
+	3.	JavaScriptは最小限にする
+	4.	CSSレイアウトを中心に実験する
+
+最終的に安定したUIが見つかった場合、
+破滅派本体の閲覧ページへ統合します。
+
+⸻
+
+将来的な展望
+
+この実験が発展すると、次のような用途に拡張できる可能性があります。
+	•	小説サイト向け閲覧UIライブラリ
+	•	日本語縦書きWebリーダー
+	•	EPUB / PDFビューアのWeb版
+	•	@hametuha/novel での閲覧エンジン
+
+⸻
+
+License
+
+MIT