THEME 14 アプリUIにおける縦と横の意味づけって？

人間の視線移動

日本語の文章は基本的に、縦書きならば右上から左下、横書きならば左上から右下に向けて読んでいきます。そのルールに則ってさまざま要素がiPhoneやMacでも並べられていることはご存じでしょうか。

特にデジタルデバイスでは、一部の例外を除いて基本的に横書きになっているので、今回は横書きのUIがどのように組み立てられているのか、「縦」と「横」の動作の意味づけをどのようにするのか、などを見ていきたいと思います。

さて、目線の移動は文章を読む方向に自然とリンクしています。そうなると日本語や英語など横書きのUIでは必然的に一番最初に文章が始まるであろう左上に目線がいくようになります。Macであればそこにリンゴマーク（アップルメニュー）があります?。象徴的な記号を一番最初に目に来るであろう場所に置いたのはおそらく意図的なものだと思います。

iPhoneでもホーム画面では自動的に左上からアイコンが並びます?。これらは並べ方などに依存するものなので、常に左上の要素が一番大事なものと断言できるわけではないのですが、こちらも人間の目線の移動を考慮した並びでしょう。

? 横書きのUIではまず左上に視線がいくことが多いです。Macの場合、そこにアップルメニューを配置しています。

? iPhoneのアプリも左上から右下に順番にアプリが並ぶようになっています。

横に並べるか縦に並べるか

基本的にスマートフォンでは、ページの並べ方を「横」か「縦」だけにするのではなく、両方の特徴を活かして使われています。

iOSの設定アプリを見てみましょう。関連するメニューが縦に並び、その下の階層のメニューを見て、任意の項目をタップすると、右から左へページがスライドインするアクションが表示されます?。これはiOSが一貫してリリース当初から貫いている基本ルールであり、アンドロイドでも基本的にそういったルールになっています。

これにより階層構造が明確になりますし、コンテンツが増えても柔軟に対応できる、模範的なUI設計のやり方といえるでしょう。しかし、たとえばSNSなど膨大な情報量を表示するアプリなどでは、最近、その考え方が変わってきているように思います。

先に上げた設定アプリの目的は、何か設定をしたい項目があり、そこを目指して最短でそのメニューに到達することが一番なので、とても明確です。それを踏まえたうえで、フェイスブックやツイッターといったアプリのUIに注目してみると、まったく違う目的を持ったものであることに気づきます。

フェイスブックやツイッターは基本的には新しい情報（新しくいいね！やコメントが付いた場合もある）の順番に並んでいます。しかし、それ自体はユーザが求めている情報かどうかはわかりませんし、（もちろん一概にはいえませんが）基本的にそこにある情報は流し読みをすることが多いので、いかにスムースにスクロールをして次々に投稿を閲覧していけるかが優先されるべき事項なわけです。その場合、メインとなる動作がスクロールする縦の動きになるので、たとえばそこから先の設定アプリのような横にスライドするようなアクションには明確な意味づけをしておくべきなのです。

フェイスブックでは、流れてくる情報を読むときは縦のスクロールを使い、その中で情報を深堀りするときは横にスライドして深い階層にいく、というルール分けがなされていることに注目です。

長い文章の投稿の際に表示される「続きを読む」を押したときは画面が横にスライドして詳細が開きますが（情報の深堀り）、投稿の写真（流れている情報）をタップしたときはそのまま写真が展開され背景が黒くなります?。そして、写真の場合はそのまま上下にフリックすると元のページに戻る仕組みになっています。いうならば、情報のリストの上に写真がそのまま重なったようなイメージでしょうか。写真をタップして閉じるまで横への移動がなく、縦にスクロールを続ければそのまま元の画面に戻れるため、スクロールの動作を滑らかに行うことができるのです。

実はLINEでも同様の機能が搭載されています。コンテンツを読み進めるときはインターフェイスを縦と限定してしまうことで、横の動きに対して別の意味づけができます。たとえばLINEは最近のアップデートで「トーク」と「アルバム」の切り替えが左右のスワイプでできるようになりました?。友だちとのメッセージを読むのは「縦の動き」に限定することにより、横に動くとそのトークに付随する情報が見られるという位置づけがより明確になります。この動きのルールが一貫していると、初めて使ってもすんなりと受け入れることができますし、一度慣れてしまうとそれが快適に感じられることでしょう。

? iOSの設定アプリの画面。メニューが縦に並んでいます。メニューをタップすると、右から左へページがスライドインします。

? フェイスブックアプリで写真を見た様子。記事の中の写真をタップすると、展開され背景が黒くなります。

? LINEのトーク画面から左にスワイプすると、ノート画面に、さらに左にスワイプすると、アルバム画面になります。

目的に合ったUI

最近ではグーグルのインボックス（Inbox）というメールアプリでも縦の動きをメインとした使い方をするUIになっています。フェイスブックや今まで取り上げたツールのUIは、元のUIにレイヤーのように重なっていくものでしたが、インボックスはリストがそのまま上下に伸びて展開されるという変わったものです?。

そして、インボックスはリストを横にスワイプすることで拡張メニューが表示されるようになっています?。左右のページ移動がインボックスでは行われないため、スワイプによる横の動きをそれぞれのメールに対するアクションに割り当てたのです。

iOS 7から、サファリやメモなどで、画面の端から左右にスワイプすることで前後のページを行き来する「エッジスワイプ」が追加されましたが、メールなどのように左右のスワイプに意味づけの違う機能を付けているアプリでは、時として意図しない動作が起こってしまう恐れがあるのも確かです。インボックスでは、ある意味エッジスワイプを捨てて、横の動作をスワイプのみに割り当てることで、ミスや勘違いを防ぎ統一した操作を実現しています。

もちろんエッジスワイプと横スワイプの共存が悪いというわけではありません。縦に操作を集中するのはSNSなどのコンテンツ消費を目的としたアプリでよく使われるUIであって、特定の目的を持ったアプリではそれぞれの意味づけをするために、横の動きを使ったページ送りをするときちんと目的への意識づけをすることができます。あくまでその目的に応じたインターフェイスがあり、今後もいろいろな新しいUIが生まれてくることでしょう。

? 一般的なメールアプリは、メールを選択すると、階層が1つ下がりメールの本文を表示しますが、インボックスはリストがそのまま上下に伸びて展開されます。

? iOS 8のメールアプリと同様に、横にスワイプすると、拡張メニューが表示されるようになっています。

【COLUMN】本が巻物になったら？

横書きで書かれた本の見開きページの場合、左ページから右のページヘ続きが書かれていますが、ワードなどで横書きの文章を書く場合、左上から書き始めた文章は、基本ずっと下に続いていきます。後者のようなものを物理的に実現しようとすると、延々と下に伸びていく、まるで巻物のような本ができますが、デジタルの場合はいくらでもスクロールをすることができますし、そこに制限はありません。そういった物理的制限がなくなった場合に、どちらのほうがより読みやすいのでしょうか。普段当たり前になっているものを、違う視点で考えるのも面白いものです。

【目的】

アプリにもそれぞれ目的があり、フェイスブックやツイッターは、設定アプリとはまったく違う目的をもったサービスであることがわかるはずです。何か特定の情報を求めてフェイスブックを開く機会はあまり多くはないですよね？

【背景】

そもそもフェイスブックは、写真の共有によって米国内でシェアを大きく拡大した背景がありました。そのため、写真の閲覧の操作性に対して強い思いがあるのかもしれません。