ユーザーとアプリは言語を通してインタラクションするもの——グッドパッチ 丸怜里 #uicrunch

2018年3月13日、UIデザインイベント『UI Crunch』の12回目が開催された。 今回のテーマは『「伝える」を加速させる。書く、読むUI』。最後に登壇したのは、株式会社グッドパッチ アプリケーションデザイナー 兼 iOSデベロッパー 丸 怜里氏。テーマは『日本語アプリケーションのインターフェイスデザイン』。

デザインビジネスマガジン『designing』より転載)

2018年3月13日、UIデザインイベント『UI Crunch』の12回目が開催された。 UI Crunchは、UIデザインを追求していくコミュニティー。GoodpatchとDeNAが主体となり、UI開発に関わるすべての人を対象とした勉強会やワークショップを定期的に開催している。

12回目となる今回のテーマは『「伝える」を加速させる。書く、読むUI』。動画や写真などビジュアルコミュニケーションの価値が注目を集める一方で、改めて書く・読むにフォーカスしたUIを考えていく。

イベントは全4部のプレゼンテーション方式。最後に登壇したのは、株式会社グッドパッチ アプリケーションデザイナー 兼 iOSデベロッパー 丸 怜里氏。テーマは『日本語アプリケーションのインターフェイスデザイン』。

丸氏は、iOSデベロッパーとしてGoodpatchに入社したが、アプリを中心としたUIを考える機会が多く、エンジニアリングとデザインを行き来しつつインターフェイスの制作に携わる。これまでJINS MEMEやVEGERY、さんちの手帖(iOSアプリ)などを担当してきた。

今回のセッションでは、同士が手がけたさんちの手帖を入り口に日本語のインターフェイスデザインにまつわる様々な話が展開された。本記事ではさんちの手帖にまつわる内容をピックアップし紹介していきたい。

文化とインターフェイス

「さんちの手帖」は中川政七商店が手がけるメディア「さんち〜工芸と探訪〜」のアプリ版。

Goodpatchがデザインを手がけ2017年にはグッドデザイン賞を受賞している。本アプリはメディアの単なる移植版ではなく、位置情報から最寄りの“産地”を探す機能やチェックインして“旅印”を集める機能なども搭載。アプリならではの機能が付与された。

丸氏は今回、そのなかのひとつ旅印を集める「旅印帖」のデザインにおけるUIの話を展開した。

丸怜里氏(以下・敬称略):旅印帖の機能は、端的に言うと御朱印帖のようなUIを搭載しています。このUIには『縦組み』『和暦』『漢数字・記数法』など、従来のUIデザインでは考えられてこなかった要素がありました。このリサーチのために、縦組みなどの文化理解が必要だと考え、調査を行いました。

丸氏は歴史上の文献(縦書きが一般的だった頃から、縦書きと横書きが混ざっているころ)などを調査。縦書きの組み方から、なぜ立てて組まれているのかといった文化的背景の調査を繰り返していったという。

文化的背景に順応するMacのインターフェイス

話は、文化的背景に基づくUIの話からMacにおけるダイアログUIに関して展開していく。というのもMacのUIでは文化的背景に準じインターフェイスが変化しているからだった。

丸:Macのダイアログは、キャンセルが左、アクションボタンが右に置かれアイコンからタイトルメッセージという認知すべき情報の順に合わせ左上から右下へ情報の流れが展開されています。Finderのディレクトリ表示も同様に情報の階層が深くなるほど右に行くなど、左上から右下へ展開している。Windowsと比較してもMacは左上から右下へという情報の流れが徹底されています。

Macが文化的背景に準じているとわかるのは、アラビア語版と見比べたときだ。通常は左上から右下に展開しているのに対し、文字が右から左に読むアラビア語の場合、すべての画面要素が反転している。

丸:アラビア語の場合、右上にAppleメニューがあり、ウィンドウを閉じるボタンが右に、スクロールバーも左、ゴミ箱がひだりにありFinderが右にある。アラビア語が右から左に読む言語なので、それに合わせ情報も左右反転させ、右上から左下に流れているんです。

これも言語の持つ文化性に応じ、インターフェイスが呼応しているよい例だろう。

縦書き旅印帖のインターフェイスの最適解

こういった調査を経て旅印帖のUIは作られていった。同じ縦書きの和暦のなかでも、複数ある和暦を同表記するかや、プログラムでどう縦書きを実現するかなども検討要素としては含まれる。これらを経て、最終的には御朱印帖をフラットな画面で再現していったという。

丸:御朱印調のような蛇腹のUIをデジタルでどう再現しようかが悩みました。画面で蛇腹を再現するのはツラいので、最終的には平面に並べ、縦書きなことを踏まえて情報は右から左に流れるようにしました。

他にも丸氏からは、Macにおける日本語タイポグラフィーの取り扱いについてや、Goodpatch Blogに寄稿されたダイアログデザインに関する話が展開された。

https://goodpatch.com/blog/dialog-design/#i-5

これらの話を踏まえ、イベントの最後に丸氏からは言語、文化とインターフェイスデザインに関する関係性について言及された。

丸:言語は文化に対するインターフェイスのひとつです。ただデジタルの世界は、MacやWindows、iPhoneなどアメリカで作られたシステムの上で動くこと考えると、なかなか日本語に最適化するのが難しい。本来であれば言語も文化も我々がつくり上げたもので反映されるべきもの。ユーザーとアプリは言語を通してインタラクションするものですから、本質的にはつながるべきだと私は考えています。

slide: @usagimaru 

デザインビジネスマガジン『designing』より転載)

小山 和之
小山 和之

編集者・ライター。1989年生まれ。建築の意匠設計を経て、Webコンサル会社にて企業のWeb戦略ディレクション、オウンドメディアの企画・立ち上げ・編集等に従事。傍ら個人でもフリーの編集者・ライターとして活動した後、現在に至る。

『UNLEASH(アンリーシュ)』は、ビジネス、カルチャー、デザイン、テクノロジーの話題を発信するオンラインメディアです。