2018.05.16
ユーザーの目線はどう動く? グッドパッチのデザイナーが紐解く「日本語アプリケーションのUI」

ユーザーの目線はどう動く? グッドパッチのデザイナーが紐解く「日本語アプリケーションのUI」

UI界をリードするグッドパッチ社。アプリケーションデザイナー/インターフェイスデベロッパーとして働く丸怜里さんは、日本語に適したインターフェイスを設計するために、まずは言語における文章の展開のされ方を調査した。そのプロセスに迫っていく。


※ 2018年3月に開催された「UI Crunch #12「伝える」を加速させる。書く、読むUI」のレポート記事としてお届けします。

文化を考慮した日本語アプリケーションのUI

「言語は、文化のインターフェイスのひとつだと考えています。UIを設計するためには文化の理解が必要だと感じ、一度アプリケーションの世界から離れ、文化の研究を始めることにしました」

こう語ってくれたのが、グッドパッチ社で働くアプリケーションデザイナー/インターフェイスデベロッパーの丸怜里さん。彼が担当することになったアプリは、中川政七商店さんの「さんちの手帖」。いきなり開発に着手したわけではなく、文化の研究・調査からスタートしたという。

グッドパッチ アプリケーションデザイナー/インターフェイスデベロッパー 丸 怜里さん グッドパッチ アプリケーションデザイナー/インターフェイスデベロッパー 丸 怜里さん

慣れ親しんだ書字方向を意識する

はじめに紹介されたのが、言語とインターフェイスの関係について。言語の書字方向がUIにどのような影響を与えているのかが具体的に解説された。

そこで例として挙げられたのが、「日本法令外国語訳データベースシステム」というサイトで利用できるソフトウェアキーボードだ。このUIは、日本語キーボードとしては正しく設計されていないという。

img http://www.japaneselawtranslation.go.jp/law/search_nm?re=01

「この五十音キーボードは、縦書きなのにキーが左から右に向かって並んでいます。縦書きでは右から左に向かって書くのが正しい順番なので、この並びには違和感があります」

では、日本語のキーボードとして正しいのはどのような配置であるのか。

「macOSやiPadのソフトウェアキーボードは、日本語の書字方向がきちんと考慮された配置になっています。五十音表を縦組みにするのであれば右から左に、横組みにするのであれば左から右に並びます」

macOSやiPadのソフトウェアキーボード

そして、私たちが街中でよく見かける自動車にも言及した。

「余談ですが、これは“ターャジス”ではなく“スジャータ”と読みます」

ターャジスと書かれたトラック

「なぜこのように左右反転しているのかというと、船舶の船名表記に見られるような『進行方向を頭とする』慣例が自動車にも適用されているのだそうです」

言語によって変化する情報展開の方向

macOSの例では、文章の書字方向は情報展開の方向に大きな影響を与えているという原則が示された。

「ウインドウ上の情報の流れを可視化すると、左上から右下に向かって情報が展開されていることがわかります」

情報展開の方向

「macOSの場合、左上のクローズボタンからウインドウの右下に向かって情報が展開していきます。Windowsでは情報が展開する方向がmacOSとは異なることもあります」

macOSとWindowsで異なる情報展開の報告

続いて見ていったのが、アラビア語環境のmacOSのインターフェイス。情報が展開する方向が左右反転していることがうかがえる。

img

スクロールバーやゴミ箱は左側に配置されている。このことからも、アラビア語環境のmacOSでは、日本語環境のそれとは左右反転しているということが実感できる。

「アラビア語の書字方向は右から左に向かいます。アラビア語環境のインターフェイスはそれに合わせてデザインされています。インターフェイスの設計では、言語や文化に合わせてデザインすることが大切だと思います」

縦組みのインターフェイスを実現するために

こうした研究・調査を経て作られたのが、中川政七商店のアプリ『さんちの手帖』。丸怜里さんがメンバーとして参画していたグッドパッチがデザインと開発を支援し、2017年度グッドデザイン特別賞を受賞した。全国の産地の見どころを訪れると獲得することができる「旅印帖(たびいんちょう)」について解説があった。

「『縦組み』『和暦』『漢数字・記数法』といった、従来のスマートフォンアプリではあまり見られない要素を取り入れています」

さんちの手帖

『さんちの手帖』の機能のひとつ「旅印帖」。見どころのある産地を訪れるとオリジナルの旅印が貰えるというものだ。神社などで集められる「御朱印帳」をモチーフにしている。

「旅印帖に合った日付を検討する必要があり、いくつかのパターンの中から検討を行いました」

検討したパターン

「神社で使われている皇紀も検討したのですが、実際に御朱印帳を再現するわけではなかったので、今回は和暦の漢数字表記を採用しました」

iOSでは標準コンポーネントを使っただけでは縦書きを実現することができないため、縦組みのテキストを扱えるコンポーネントを自作したそうだ。

「御朱印帳に見られる蛇腹の構造をどうやってデジタル上で表現するか。実際に紙を切り貼りしてペーパープロトタイピングを行ってみたのですが……。『面白いけれども、厳密にこれを再現しても使い勝手は良くならないかもしれないな』と思い、表現の方向を再検討することにしました」

試行錯誤の末たどり着いたのが、このUIだ。

最終的なUI

「チームメンバーと議論を繰り返した結果、最終的には平面的に並べることにしました。コンテンツが縦書きなので、スクロールの方向は右から左に向かうように調整しています」

優れたアプリケーションのデザインには、言語のルールや情報の流れなど、文化に基づいた思想が反映されている。ぜひ参考にしていただきたい。

(終わり)


文 = 新國翔大
編集 = CAREER HACK


関連記事

特集記事

リモートワーク時代の戦い方

新型コロナウイルスの影響によって進むリモートワーク。とくにテック企業でいち早く導入され、日々アップデートされている。リモートワークが当たり前となるなかで、いかに働き方を変え、さらに組織として戦っていくか。各社の取り組み、工夫、リモートワークのやり方などに迫ります。

AFTER 2020

時代は平成から令和へ。そして訪れる「2020年以降」の世界。2020年からの「10年」をいかに生きていくか。より具体的に起こすべきアクションのヒントを探る連載企画です。お話を伺うのは、常に時代・社会の変化を捉え、スタートアップと共に"一歩先”を見据えて歩まれてきた投資家のみなさんや、未来を切り拓く有志者のみなさん。それぞれが抱く「これから10年間で現実的に起こり得ること」と「新しい生き方」の思索に

お問い合わせ
取材のご依頼やサイトに関する
お問い合わせはこちらから