Kindle Paperwhite や BOOX には、地味ですがちゃんとした Web ブラウザが入っています。ここで遊べるパズルゲームを10本ほど作って公開したので（E-Ink Games）、液晶向けの感覚のまま作るとハマるポイントを設計メモとしてまとめます。
対象読者は「普通の Web フロントエンドは書けるけど、電子ペーパー向けは初めて」という人です。
1. 電子ペーパーは「遅い・白黒・残像が出る」ディスプレイ
液晶と比べたときの前提条件を先に整理しておきます。
| 項目 | 液晶/有機EL | 電子ペーパー |
|---|---|---|
| 書き換え速度 | 16ms 前後 | 数百ms、全面リフレッシュは更に遅い |
| 色 | フルカラー | 基本16階調グレー（カラー機でも発色は弱い） |
| 残像 | ほぼなし | 部分更新を繰り返すとゴーストが残る |
| 電力 | 表示し続けると消費 | 静止画の保持はほぼゼロ |
つまり 「動かさなければ最強、動かすと最弱」 のディスプレイです。ゲームの設計もここから逆算します。
2. アニメーションは全部捨てる
CSS の transition や animation、requestAnimationFrame でのトゥイーンは、電子ペーパーでは中間フレームがすべて「汚れ」になります。60fps のつもりの補間が、実機では灰色の残像を何枚も重ねるだけ。
そこで方針を「状態が変わったら、最終状態を一回だけ描く」に統一しました。
/* 電子ペーパー向けのリセット */
*, *::before, *::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
prefers-reduced-motion を見るだけでは足りません。Kindle のブラウザはこのメディアクエリを返してくれない前提で、最初からモーションなしで作るほうが確実です。
3. 「変化」は動きではなく白黒反転と太枠で伝える
アニメーションを捨てると、「何が変わったか」がプレイヤーに伝わらなくなります。2048 で言えば、タイルがスライドしてくる動きがないので、どこに新しいタイルが出たのか分からない。
採用したのは次の2つの視覚言語です。
- 新しく出現したもの → 1ターンだけ太い黒枠
- 結合・正解・確定したもの → 白黒反転（黒地に白文字）
グレーの濃淡で差をつけるやり方は避けました。16階調とはいえ、実機で明確に区別できるのは白・黒・せいぜい中間グレー1段です。コントラストが足りないと、日光の下ではまず見えません。
Wordle 風の Word Daily でも同じ考え方で、色ではなく「塗りつぶし」「太いアウトライン」「細いアウトライン」の3種類で判定を表現しています。
4. 再描画の範囲を最小にする
電子ペーパーは書き換えた領域だけが更新されます。逆に言えば、DOM を丸ごと作り直すと画面全体がチラつきます。
- 盤面は固定グリッドの DOM を最初に作り、以降はセルの
className/textContentだけを変更する - タイマー表示は毎秒更新すると部分リフレッシュが常に走るので、表示頻度を落とすか、目立たない位置に小さく置く
- 仮想 DOM ライブラリを使う場合も、キーを安定させて「作り直し」が起きないようにする
数独なら、タップしたセルと、ルール違反で反転表示するセルだけが書き換わる、という状態を目指します。
5. 入力：タッチ・スタイラス・物理キーの全部に対応する
電子ペーパー端末の入力はバラバラです。
- Kindle：タッチのみ（反応はやや鈍い）
- BOOX：タッチ＋スタイラス、機種によっては物理ページキー、Bluetoothキーボードも普通に使える
- Kindle Scribe：大画面＋ペン
なので、すべてのゲームで 矢印キーによるカーソル移動＋Enter/Space で決定 を実装しました。マインスイーパーなら F で旗、三目並べなら 1〜9 キーでマスを直接指定、といった具合です。タッチターゲットは最低でも指の腹サイズ（おおよそ 44px 以上）を確保し、15×15 のノノグラムのようにセルが小さくなる盤面ではキーボード操作を推奨しています。
もう一つ大事なのが 連打対策 です。電子ペーパーは表示が遅いので、ユーザーは「反応していない」と思って二度タップしがちです。神経衰弱では、不一致の2枚を約1秒見せている間は3枚目のタップを無視するようにしました。
6. Kindle のブラウザで動く JavaScript の範囲
ここが一番ハマるところです。実機で試した結果の目安は以下の通りです。
- Kindle Paperwhite（2021年以降）/ Scribe / Colorsoft：ファームウェア 5.13.7 以降なら普通に動く
- BOOX：Chromium ベースなので最も快適
- Kobo：内蔵ブラウザが古く、機種・ファームによっては動かない
- 2016年以前の Kindle（実験的ブラウザ）：モダンな JS が動かないので、ページは読めるがゲームは起動しない
そのため、JS が動かない環境でも遊び方の説明や対応表は HTML として読める ようにし、ゲーム本体はプログレッシブに乗せる構成にしています。<noscript> で「JavaScript を有効にしてください」と表示するだけでも、黙って真っ白になるよりずっと親切です。
7. 進行状況は localStorage に保存
電子ペーパー端末は、スリープやブラウザの再読み込みが頻繁に起きます。数独の途中で本を読みに戻って、また開いたら盤面が消えていた、というのは致命的です。盤面・タイマー・戦績を localStorage に保存し、次に開いたときに復元するようにしました。アカウントは不要で、データは端末内にだけ残ります。
8. 「一日一問」は電子ペーパーと相性がいい
Word Daily とノノグラムのデイリーは、日付から問題を決めているので、世界中のプレイヤーが同じ日に同じ問題を解きます。サーバー側に状態を持たなくても、日付をシードにした決定的な生成で済むのがポイントです。
// 日付文字列から決定的な乱数列を作る（例）
function seedFromDate(d = new Date()) {
const s = d.toISOString().slice(0, 10); // "2026-09-28"
let h = 2166136261;
for (const c of s) { h ^= c.charCodeAt(0); h = Math.imul(h, 16777619); }
return h >>> 0;
}
一日一問・短時間・静止画、という形式は、電子ペーパーの「静かな画面」という性格にぴったりでした。
まとめ
- アニメーションは捨て、最終状態だけを描く
- 変化は白黒反転と太枠で表現し、グレーの濃淡に頼らない
- 再描画範囲を最小にし、DOM を作り直さない
- タッチと物理キーの両方に対応し、連打を吸収する
- 古いブラウザでも説明だけは読めるようにする
実際に動くものは games.e-ink.me で、Kindle や BOOX のブラウザからそのまま開けます（無料・登録不要・広告なし）。Web 記事を EPUB にして Kindle に送るツールも e-ink.me で作っているので、電子ペーパー好きの方はあわせてどうぞ。