E-inkデバイスで最高のUXを作るには？Webフロントエンド開発のベストプラクティスを教えて！

TL;DR: Bigme Hibreak Pro BWなどのE-ink端末向けに、ブラウザベースで快適なUIを構築するための知見を求めています。最近、アテンション・エコノミーから距離を置くためにE-inkスマホへ移行しました。ハードウェアとしては最高なのですが、既存のWebサイトはE-inkの特性を考慮しておらず使いにくい場面が多いです。そこで、LemmyやOpenRouter用のE-ink最適化フロントエンドをWeb技術で自作しようと考えています。開発にあたり、特に以下の課題について皆さんの経験を貸してください。まず、ブラウザ側から直接制御できない画面更新（リフレッシュ）をどうデザインに組み込むか。次に、LLMのストリーミング出力のような大量のテキスト更新を、どうバッファリングして読みやすく表示させるか。また、ゴースト（残像）問題を回避するために、スクロールを避けてページネーションを導入すべきか。最後に、色を使えない環境で「見やすいUI」を作るためのデザイン言語（昔のMac OSのようなスタイルが適しているのかなど）についてもアドバイスが欲しいです。個人的なプロジェクトですが、完成後はGPLで公開予定です。実戦経験のある方、ぜひ知恵を貸してください！

コンピュータのガイドラインよりも、印刷物のユーザビリティや可読性のガイドラインに注目した方がいいかも。5HzのE-Inkは、低速なコンピュータというよりは、動く新聞に近いからね。

https://www.mediapoint.com.au/design-tips/composition-layout... (https://www.mediapoint.com.au/design-tips/composition-layout-print-design-guide) この辺りが少しは参考になるはず。

ただ、個人的なアドバイスとしては、リフレッシュに頼りすぎないこと。アニメーションやトランジションは禁止。あらかじめコンテンツを正しい位置に配置しておいてから、中身を埋めるのがいいよ。（これは逆よりもずっとうまくいく！）

処理に時間がかかる場合は、別のページで読み込むのが賢いね。

Web UIじゃないんだけど、最近自分のBoox Note Air 5cタブレット用にこれ0を作ったんだ。参考になるかもしれないからチェックしてみて（GitHubにソースコードもあるよ）

アイデアを一つ投げてみるよ。E-Ink製品は普段使っていないんだけど、昔ポータブルリーダーが出始めた頃に少し触ったことがあるんだ。

コンピュータでキーボードを使ってテキストをスクロールする時、SpaceやPageUp/Downを押すと、読んでいる場所の連続性が失われてイライラすることがよくあるんだよね。（60Hzの残像がそれを悪化させてるのかも？）結局、最後にどこを読んでいたのか見失ってしまうのが原因だと思う。

スクロールに専用のボタンがあるなら、移動距離を調整できるようにしたらどうかな？例えば、画面の100%分下に移動する、95%分移動する（前のページの切れ端を残す）、あるいは80%分移動する（前のページの一部を残す）とか。

タッチディスプレイなら、長押ししてドラッグするスクロール機能はどうだろう？押している間はインジケーターを出さず、指を離した瞬間に画面をリフレッシュする感じ。（反応がないのは理想的とは言えないけど、仕組みを理解しているユーザーには便利かも。昔のOSにあったような、デバイス内での操作デモが必要になるだろうけどね。）

あと、専用のスクロール取り消しボタンもあるといいかも？操作ミスをして元に戻したい時用だね。デスクトップやスマホでうまく修正できずにイライラしている年配の人をよく見かけるから、こういう機能は助かると思うよ。

初期のMacOSのUI/UXだけでなく、スマートフォン以前のデバイスも見てみるといいよ。Palm Pilotや昔の携帯電話なんかだね。解像度の低いスクリーンで何ができるか、いいヒントになるはず。

それから、優れたTUI（テキストユーザーインターフェース）アプリケーションも参考にしてみて…（描画パスじゃなくて、全体的な結果として）…要素の配置やスペース、明確なコントロールなんかだね。まあ、タブやEnterキーよりはタッチ操作中心になると思うけど。TUIアプリは文字ベースで描画されるけど、全体のレイアウト構成は学べる点が多いよ。階層の少ないシンプルなメニューリストなんかがそうだね。

もし物理ボタンがあるなら、その機能についてはよーく考えた方がいい。特に数が限られている場合はね…本当に重要なことだけを割り当てるべきだよ。

TRMNLが最近、ePaperディスプレイ専用のCSSフレームワークをオープンソース化したよ[1]。オープンソースのファームウェア[2]を使えば、市販のコンポーネントを組み合わせてすぐに良い感じのソリューションが作れるはず。

開示：私はTRMNLで働いています。

[1] https://github.com/usetrmnl/trmnl-framework (https://github.com/usetrmnl/trmnl-framework)

[2] https://github.com/usetrmnl/trmnl-firmware (https://github.com/usetrmnl/trmnl-firmware)

Reactコンポーネントをレンダリングするための、早くてシンプルな方法を探しているなら、このリポジトリがおすすめだよ：

https://github.com/marcomattes/epaper-components/tree/main (https://github.com/marcomattes/epaper-components/tree/main)

Bigmeはかなり高品質なE-Inkディスプレイだけど、E-Inkの基本的な特性は共通しているからいくつか一般的なアドバイスをあげるね。

まず、どんなE-Paperディスプレイでも、最新のLCDやOLEDと比べるとコントラストは低い。だから、デザイン的な理由でコントラストを落とすようなUIは避けるか、修正した方がいい。つまり、読みやすさが重要なところではコントラストを最大化するってことだね。最近のWeb/モバイルデザインシステムではコントラストを抑えるのが一般的だから、自分で調整が必要になるだろうね。

次に、色をアクセントとして頼りにしてはいけないということ。多くのUI（送信ボタンなど）がそうしているけど、色に頼らない一貫したアクセントパターンを定義する必要があるよ。枠線や反転表現を使うのがいいだろうね。

スタイルとしては、E-Inkには滑らかなコンテンツよりもシャープなコンテンツの方が映えると思う。まあ、300dpiで16階調のディスプレイなら、そこまで気にしなくても大丈夫かもしれないけどね。

面白い話題だね、まさに自分の専門分野だよ。

1. 持続性はタダ。
2. 画素は安い。
3. 再描画は高い。
4. リフレッシュは遅い。
5. 色は限定的か存在しない。
6. スクロールよりページネーション。
7. パン（移動）よりフルリフレッシュ（ページ全体または一部）。
8. 発光型ではなく反射型。
9. アニメーションを最小限に。
10. グラデーションよりも線画やハーフトーン。

<https://news.ycombinator.com/item?id=31396797 (https://news.ycombinator.com/item?id=31396797)>

何度か繰り返し（時々修正し）てきたリストがあるから見てみて：

"E-Ink Design Principles for Web and Applications"
<https://diaspora.glasswings.com/posts/638a8d10e041013afba844... (https://diaspora.glasswings.com/posts/638a8d10e041013afba8448a5b29e257)>

これが上のリストの元ネタで、それぞれの選択理由を詳しく解説してるよ。UI/UX開発のガイドラインがどこにもなくて自分で書いたものだけど、いくつかポジティブな反応ももらえてる。

HNで「pixels are cheap」で検索すると僕のコメントがいくつか出てくるよ（15件くらい）。これもその一つだね。

僕はE-Inkをメインで使っていて、SSHからtmux、vimでのコーディングまで全部E-Inkでやってるよ。

UIはすべてRustとRatatuiで作ってるんだけど、すごく快適だ。

Webに関しても、同じ考え方が適用できるはず：

0. アニメーション禁止。0.3 fpsくらいしかないからね。下手に動かすと目が疲れるよ。

1. スクロール禁止。ページネーションだけにする。

2. 入力コントロールやカーソル、選択範囲を示すには、視覚的な要素を直接追加すること。色やフォントの太さに頼っちゃダメだ。アスタリスクやUnicodeの矢印なんかを使うんだ。

3. 直接的なアクションコントロール。ボタンを押したら「何かが起きる」ようにする。メニューを開くためのボタンを、さらに別のメニューを開くためだけに使うなんてことはやめよう。

4. 画面全体を使う！ピクセルをオン・オフするだけならコストはかからない。変化する部分だけがコストになるんだ。だからホワイトスペースは無駄に画面の不動産を浪費して、リフレッシュの回数を増やす原因になる。

E-Inkディスプレイ自体はもっと高いリフレッシュレートに対応できることが多いんだけど、ドライバーボードやソフトウェアがダメなケースが多いんだよね。

ゼロから設計されたE-Inkがどうあるべきかは、modosをチェックしてみるといいよ。

https://www.crowdsupply.com/modos-tech/modos-flow#products (https://www.crowdsupply.com/modos-tech/modos-flow#products)

実は自分と友達用にPartifulイベントのクローン0を作っていて、これが最初に実装した機能の一つなんだ。大きな気づきだったのは、サイト上のどんな画面でも自動でページネーションしてくれるスクロールコンポーネントだったこと。僕は「The Minimal Phone」を使っているんだけど、PWAとしてかなりうまく動いてるよ。宣伝じゃないんだけど（むしろ赤字だし！）、E-Inkモードを試してみて。ログインは4152127777でテストコードは123456（明日には無効にする予定）。E-Inkモードは右上のプロフィールメニューにあるよ。

これらの端末がmonochromeメディアクエリ1に対応してくれたらいいんだけど、そうはなってないんだよね。