デザインノート
折り目がノドになるまで
どの折りたたみスマートフォンにも、真ん中に 1 本の線があります。多くのアプリにとって、それは避けて通るべきものです。けれども本にとっては、これ以上ないほど自然なもの。本には昔から、その線があったのですから。Tomelet のリーダーが折り目をノドとして扱うようになった経緯と、その背後にあるデザインのルールを紹介します。
無料、アカウント不要。見開き表示は無料のリーダーに含まれています。
問題:引き伸ばされたスマホのページ
折りたたみ端末を開くと、スマホ向けに作られたアプリはただ横に広がるだけです。行は長すぎて読みにくくなり、本文は折り目をまたぎ、ボタンが折り目の上に来ることもあります。閉じれば画面は作り直され、読んでいた場所から 1 ページ、あるいは 1 章ずれてしまいます。
Apple は iPhone Duo とともにデザインガイドラインを公開し、Android にも折りたたみ端末向けの独自のガイドラインがあります。両者は違いよりも共通点のほうが多く、Tomelet はひとつのリーダーでその両方に従います。iPhone Duo でも、Galaxy Z Fold でも。その形を決めたのは、5 つのルールです。
1. 折り目は予約された領域
Apple は折り目を「予約された領域」、つまりアプリが空けておくべき画面の一部と呼んでいます。Android はアプリに折り目の正確な位置を伝えるので、Tomelet は 2 ページのあいだの内側の余白をまさにそこに置き、タップ領域、ボタン、選択ハンドルをそこから遠ざけます。折り目をまたぐペンの線は 2 つのページに分けられるので、それぞれのページが自分の手書きを持ち続けます。
iPhone Duo では、Tomelet を書いているツールキットの Flutter が、まだ折り目の位置をアプリに渡していません(flutter/flutter#192515)。そのため Tomelet は、内側の余白を画面の中央に置きます。
これが、折り目がノドになる一歩です。紙の本でも、ノドには何も印刷されません。そこは 2 つのページが出会う場所なのです。
2. 折りたたむことは、離れることではない
Apple は、デバイスを開閉しても途切れない体験を求めています。Samsung は、スクロール位置と入力中のテキストを保つようアプリに求めています。Tomelet は折りたたみを画面サイズの変化として扱い、画面の移動としては決して扱いません。
ページ番号では、これに耐えられません。カバー画面は別のサイズで 1 ページを表示するので、折りたたむたびに本のページ数が変わります。そこで Tomelet は、読書位置を本文の中の位置、つまり左ページの最初の 1 文字として覚えます。本を組み直してその文字を含むページを開き、新しい画面の準備ができるまでは前の画面を表示したままにします。ハイライト、メモ、手書きは言葉に結び付いているので、言葉と一緒に動きます。
開き直しもなく、広告も出ません。折りたたんでも、本の外に出ることはないのです。
3. 向きではなく、大きさ
iPhone Duo の内側のディスプレイはアプリの回転ロックを無視し、Android 17 も大画面では同じふるまいをします。だから、スマートフォンをどの向きに持っているかでレイアウトを決めることはできません。Tomelet が見るのは、ページに使える広さです。それぞれのページが快適に読めるなら 2 ページ、そうでなければ 1 ページ。同じルールが、タブレットでも、横向きに持ったスマートフォンでも、デスクトップのウィンドウでも働きます。
ページの組み合わせ方は、写真のカルーセルではなく印刷物から来ています。最初のページは単独で、そのあとは 2–3、4–5。だから、出版社がデザインした見開きは必ずひとつの見開きとして表示されます。アラビア語、ヘブライ語、縦書きの日本語の本は右から始まり、左へめくれます。向きを指定している固定レイアウトの本には、閉じられる 1 行のヒントが表示されます。リーダーが勝手にスマートフォンの画面を回転させることはありません。
4. 姿勢が変えるのは配置であって、本ではない
Apple のガイドラインは、ヒンジの角度は「操作や効果のためのもので……レイアウトのためではない」としています。Tomelet も同じ考えなので、ヒンジに追従するページ効果はありません。Android で姿勢が変えるのは、本のまわりの構成です。
半開きであることを知らせる Android の折りたたみ端末を本のように持てば、折り目の両側に 1 ページずつ、操作ボタンは外側の端に並びます。Android の折りたたみ端末を半開きにしてテーブルに置けば、ページは上の階へ、操作ボタンは下の階へ。ページスライダー、目次、メモ、表示の設定です。いわば Flex Mode の発想を、Android のリーダーそのものに組み込んだものです。
iPhone Duo では、Tomelet はどの角度でも開いた本のレイアウトを保ちます。Flutter がヒンジの状態をアプリに渡すようになる日に備えて。
5. キーボード
キーボードを出したままスマートフォンを折りたたんでも、入力していた検索欄やメモは、テキストも、フォーカスも、カーソル位置もそのままです。
画面を分け合う
ほかのアプリと並べているとき、つまり iPhone Duo の Split View や Android の画面分割では、Tomelet は 1 ページを表示し、折り目の位置を推測せず、操作ボタンを外側の端に置きます。
余白に、ペンを
Apple は Apple Pencil(USB-C)を iPhone Duo の両方のディスプレイで使えるようにします。Tomelet のペンツールは、それを迎える準備ができています。EPUB でも PDF でも余白に書き込み、ひと筆で行をハイライトし、指でページをめくり、動かし、ズームしながら Pencil で書き込む。手書きは本文に結び付いているので、折りたたみでページが組み直されても、余白のメモはその段落の横に残ります。折り目をまたいで描いた線は、2 つのページに分けられます。
作らなかったもの
ヒンジの角度に追従するページ効果
持ち方を変えるたびにページが揺れるべきではありません。
iPhone での 2 つ目の Tomelet ウィンドウ
画面をうまく分け合えるウィンドウがひとつあれば十分です。
なぜノドなのか
本は、この世でいちばん古い折りたたみ画面です。ノドは本が曲がる場所であり、何も印刷されない場所であり、2 つのページが出会うと約束した場所です。折り目をノドとして扱うのは、技術の上にかぶせた比喩ではありません。本がもともとしているとおりにふるまうリーダーへの、いちばんの近道だったのです。