それもまたUIだね。インタフェース散歩！(2) スマホで満足します

人とコンピュータの関係を考えると、二者間には常にインタフェースが存在します。本連載では、人とコンピュータの間に介在するインタフェースに着目し、インタフェースとそれらを世に生み出すプロダクト開発について議論します。独自のインタフェースを実装しながら、便利さと楽しさを備えたWebサービスを、Helpfeelではどのように開発しているのかをお伝えします。

こんにちは。shokaiです。Helpfeelでナレッジ共有ツール「Scrapbox」の機能設計・開発・運用を行っています。今回はScrapboxのモバイル・タブレット対応の際に考えた事などを書いてみようと思います。

最近、Scrapboxはタッチデバイスへの対応を進めています。スマホやタブレット、そしてMagic Keyboardを装着した状態のiPadや、Bluetoothキーボードと接続した状態のスマートフォン（スマホ）なども対象として開発しています。

Bluetoothキーボードと接続したスマートフォン

弊社の同僚（私の大学院時代の恩師でもあります）が2015年に出版した書籍『スマホに満足してますか？』でも言及していますが、2022年の現在でも、スマホというデバイスはテキスト編集とマルチタスクの機能が弱いと思います。調べ物をしてメモを取るようなタスクをこなしたい場合、画面が小さくてウィンドウを複数並べたり素早く切り替えたりしにくいスマホではなかなか難しいですね。

また、新型コロナウイルス感染症の拡大によるリモートワーク需要が増大していたこともあり、弊社のプロダクトであるScrapboxのユーザーの多くは、スマホではなくパソコンとキーボードを使っていたようです。そのため、正直なところ私はScrapboxのモバイルでの編集体験を後回しにしていました。

スマホでも満足したくなった

2022年に入ると、ワクチン接種の機会などもあり徐々に外出の機会が増え、モバイル端末でScrapboxを扱う場面が増えてきました。外にいる時にSlackから通知を受けてスマホでScrapboxを見て、コメントを書いたりする機会が増えました。会社の事業が好調で社員が増えてきたのもその一因です。

私を取り巻く社会的な環境の変化は上記の通りなのですが、UI開発においては別のモチベーションもありました。2022年に入ってから、iPad + Magic Keyboardや、Microsoft Surface、ChromeOSを搭載したタブレットなど、指で画面をタッチして操作するだけでなく、外付けしたトラックパッドでマウスポインタを操作してクリックを行うようなデバイスに触れる機会があり、「コイツはなかなか良くできてて面白い！」と思ったのです。付属している物理キーボードも結構打ちやすく作られていますしね。

タッチとクリックのUIをいい感じに切り替えたい

タッチデバイスのUIは、大抵の場合は指で操作するためにボタンを大きくしてあります。指はマウスポインタと違ってプルプル震えていて、さらに指自身が影になってボタンを隠してしまうので、あまりにもボタンが小さいと誤タップしてしまうからでしょう。

しかし先に挙げたiPad + Magic Keyboardを利用するシーンでは、画面をタッチする場合もあるし、付属のトラックパッドでポインタを動かしてクリックする場合もあります。例えば、私の場合、画面の上の方はトラックパッドで操作するのに、下の方はキーボードから指を離してタッチで操作している事があります。そういうデバイスの場合、常にタッチ用のUIが表示されているとトラックパッドでは操作しにくいので、気になっていました。

ポインタを動かしてクリックするような場合の使いやすさを説明するために、「フィッツの法則」があります。おおまかに言うと、以下のような法則です。・ポインタを動かす距離は短いほうが素早く操作できる・クリック対象は大きいほうがミスが少ない

タッチデバイス用にボタンを大きくしてしまうと、そのぶんトラックパッドでポインタを動かす距離が長くなってしまい、まどろっこしい感じになってしまうわけですね。

そのようなことを考えていたら、だんだんモバイル対応のモチベーションが上ってきました。タッチする場合もあるしクリックする場合もある。さらに、物理キーボードを付けている場合もあるし、取り外してスクリーンキーボードで操作する場合もある。そうしたデバイスのUIは、どう実装しようか？

クリックとタッチのどちらで操作開始したかに応じて、メニューのスタイルを切り替えた

すみません、話が少し脱線しました。タッチとクリックのUI切り替えの実装はまた別の機会に掘り下げようと思います。要するに、先の展望を考えたらやる気が出てきたという話でした。こういう面白いテーマがあると、その前に片付けなければならない面倒なタスクに向かうパワーが出てきます。

ScrapboxのモバイルUIを改善する

今回私は、「スマホのSlackにScrapboxのURLが送られ、確認を要請され、それをスマホで読んで、そこから少しページ同士のリンクを巡って文脈を把握し、返事を書く」というタスクに焦点を当ててUIを改善しました。

まずは改めてUIを見直して、おかしな挙動をリストアップしました。一部を抜粋すると以下のような感じです。
・長押しで編集を開始するのがまどろっこしいので、クリックで編集開始したい。しかし、画面スクロールのために編集領域をスワイプした場合も編集開始してしまうと、スクリーンキーボードが開いてしまって邪魔になる。いい感じになんとかしたい
・スマホで0文字目にカーソルを置こうとしてクリックするとテロメア（更新された日付や時刻を行ごとに視覚化するScrapboxの機能）が開いてしまい、編集できなくなる
・行の上下移動ボタンが邪魔でテキスト範囲を選択しにくい
・編集のUndoボタンの位置がわかりにくい
・物理キーボードで日本語変換候補を選択しつつEnterで確定せずに次の文字を入力すると、なぜか間にスペースが入ってしまう
・iOSでIME変換中の文字が左にめりこんでいる
・iOSでは、編集中の行がスクリーンキーボードで隠れてしまう事がある
・画面外にカーソルを置いた状態でswipe cursorが発動すると、カーソルがある位置に画面が強制スクロールされてしまう
・iOSのshare menuからリンクをコピーした場合、Scrapboxにペーストできない

などなど、列挙していくと60項目ぐらいになりました。まだ直っていない所もありますが、大半は修正できました。

その時、下図のように「まとめページ」を作ってタスクを整理しました。

タスクのまとめページ、青文字のリンク先でタスクの詳細を検討している

上に挙げたおかしな挙動の原因は、AndroidとiOSの差（例：スクリーンキーボードが表示された分、Androidはブラウザのheightが減るが、iOSは減らない）などもあるのですが、編集領域の近くに大きな当たり判定を持つボタンが出ていて邪魔しているというケースが多かったと思います。そのため、思い切って機能を削除したり、別のUIに置き換えたりしました

例えば、行を上下移動する三角形のボタンがテキスト選択の邪魔になっている事がわかったので、行を上下左右移動する専用のメニューに移動させました。

以前はテキスト選択した時に行の上下移動ボタンを表示していた

行を上下左右に移動する専用のUIを用意した

そのような感じで、スマホ単体でのScrapboxのUIはかなり改善できてきました。最近はスマホにBluetoothキーボードを付けている場合や、タブレットにキーボードとトラックパッドを付けている場合のUIの改善を進めています。

まとめ

複雑な調べ物をして複数のページに分けて定義をメモしたり、過去に作成したページを複数切り貼りしてアイディアを膨らませたりといったマルチタスク系の作業はスマホではまだ難しい。ですが、スマホのSlackで連絡を受けてScrapboxにコメントを返す、といったタスクは、以前よりもかなり快適にこなせるようになってきたと思います。

文：shokai