【イカしたUIを見る】Vol.4「誰かのメガネ」をかけると見える、気の利いたUI
こんにちは！UIデザイナーのsugaso、haruとエンジニアのchigeです。UIデザインの面白さにはまってしまった私たちは、定期的に「イカしたUIを見る会」（以下、イカ会）という課外活動を行っています。
前回の記事はこちら！
第1回でも触れましたが、私たちにとって「イカしたUI」とは、単にビジュアルが尖っていたり、奇抜なデザインで目を引くものだけを指すわけではありません。特定のユーザーや利用シーンを深く考え、作り手のこだわりや工夫が細部にまで行き届いたUIこそが、それに当てはまると考えています。
では、そうしたUIはどのようにして生まれるのでしょうか？
私たちが考える答えの1つは、「デザイナーが自分自身の視点や感覚から抜け出し、ほかの誰かの眼鏡をかけて考える」ということです。使う人を意識してデザインするのは当たり前のことですが、本当の意味でそれを追求するには、デザイナーが「自分でない誰か」になりきり、その人にとっての便利さ・心地よさ・うれしさを目に映るように描くことが重要です。
こうした視点でアプリを見てみると、ユーザー像や利用シーンの切り取り方が秀逸なサービスや、細部まで工夫が詰まったUIが際立って見えてきます。今回もイカしたUIを一緒に見ていきましょう。
1. 東京都防災アプリ
東京都防災アプリは、災害時という緊急の状況下で情報を迅速に提供するだけでなく、日頃から備えや学びを支えるツールとしても使えるようになっています。
特に、東京都防災アプリのモード機能はまさに「誰かのメガネ」をかけて作られたデザインです。シニアモードとキッズモードがあり、ユーザーごとに異なるニーズやシーンに応じた設計がなされています。
例えば、シニアユーザーは視力や反応速度が低下している可能性があります。そのためシニアモードでは、文字サイズを拡大し、シンプルなレイアウトを用いて視認性の向上に努めています。また現在地から近い避難所など、緊急時に必要な避難情報をすぐに取得できるように情報設計も工夫されています。筆者はまだ20代ですが、分かりやすいので普段からシニアモードに設定しています。
一方、キッズモードでは漢字をできるだけ使わずに分かりやすいアイコンやイラストが用いられ、防災学習に重点が置かれています。防災クイズや防災シティといったゲーム要素があり、遊びながら防災意識を根付かせる工夫がなされています。
また、東京都防災アプリは、「やさしい日本語」に対応しているアプリの一つでもあります。「やさしい日本語」とは、ストレートな表現やできるだけ簡単な文を使って外国人にも分かりやすくした日本語表記のことで、阪神・淡路大震災をきっかけに誕生しました。
外国人だけではなく、子供や高齢者、障がいのある方にも分かりやすいですよね。短時間で複数の言語に翻訳することが困難な緊急時にも、より多くの方に情報を届けられると思います。
また、多言語にも対応しており、言語設定を開くと、日本語、英語、中国語（简体）、中国語（繁体）、韓国語、やさしい日本語の6つから選ぶことができます。画面読み上げなど、まだ完全なアクセシビリティには対応していないものの、多様なニーズに応える工夫はアプローチの一つと言えるのではないでしょうか。
2. Oko
「Oko」は、視覚障がい者の人がスムーズに移動できるよう作られた歩行者信号認識アプリです。このアプリの最大の特徴は、歩行者信号認識機能です。
マップ画面の「読み取り」ボタンを押すと、カメラビューに切り替わり、歩行者信号を映すことで、それぞれの信号に応じた音声と振動フィードバックが提供されます。この機能により、ユーザーは信号の存在を認識し、安全に横断できます。
実際に使ってみると、Okoは日常的に使いやすいよう細やかな配慮が施されていることが分かります。例えば、赤信号では「ピッ、ピッ」、青信号では「ピピピ」と、信号の色に応じて異なる振動フィードバックを設定しています。赤信号の際にはゆっくりとした音で待機状態を示し、青信号では素早いリズムで早めに渡るよう促します。
もしこれが逆だった場合、赤信号で急かされるような感覚になり、不快に感じるかもしれません。このように、細やかな音のデザインが施されている点は非常に気が利いていますね。
また、Okoの認識機能はカメラに信号が映っていないと機能しないため、Okoではスマートフォンを胸の近くで持つよう推奨しています。
多くの人はカメラを使う際、腕を伸ばして構えるイメージを持っているかもしれません。正しく認識させることが直接ユーザーの生死にも関わるため、ユーザーの当たり前に行う行動に全てを委ねるのではなく、自然な形で適切な使い方を伝えているのがサービスとしてとても誠実だなと思いました。
視覚障がい者にとって、歩行者信号を渡る際の情報は意外と限られていますが、Okoを活用することで、より安全な移動が可能になります。このように、日常生活の中で少し不便を感じる場面を想定し、気の利いた機能を提供することが、より多くの人に役立つサービスを生み出す鍵となるのではないでしょうか。自分もこのようなプロダクトを世の中にたくさん溢れさせたいなと強く思えたアプリでした。
3. 朝日新聞紙面ビューアー
朝日新聞社が提供する「朝日新聞紙面ビューアー」は、朝刊・夕刊を新聞紙面と同じレイアウトで読めるビューアーアプリです。このアプリの優れた点は、ユーザーの利用シーンを深く理解し、それに適した体験を提供していることです。特に象徴的な機能が、記事の音声読み上げです。
新聞を読む習慣といえば、朝、コーヒーを飲みながら紙面に目を通す姿を思い浮かべるかもしれません。しかし、現代では忙しくてその時間を確保できない人も多いでしょう。そんなとき、通勤時間が代替手段となります。
ですが、電車の中で紙の新聞を広げるのは難しく、スマホ片手に読むのも満員電車では困難です。そこで役立つのがイヤホンを使って記事を聴くという体験。これなら、新聞を読む習慣を維持しつつ、必要な情報を効率的に得られます。
また、新聞は一般的に目次がなく、ページをめくりながら気になる記事を探すスタイルですが、このアプリでは記事の見出しを一覧表示することで、忙しい社会人が短時間で必要な情報をキャッチアップしやすくなっています。このように、朝日新聞紙面ビューアーは、従来の「読む新聞」から、読む・聴く・メモするといった、デジタルならではの付加価値を自然に取り入れたアプリです。
単に便利な機能を追加するのではなく、「朝日新聞の読者はどんな人で、どのような課題を抱えているのか」というメガネ（＝視点）をかけ、そこから導き出された、気の利いた体験設計がなされています。
また、通常の「朝日新聞」アプリも最近アップデートされ、とても読みやすく気の利いた体験が詰め込まれています。ぜひ合わせて観察してみてください！
4. かんじ検索PLUS
「かんじ検索PLUS」は漢字を手書きで検索できる漢字辞典アプリです。
日本に住む日本語学習者にとって、読めない漢字は日常茶飯事です。最近では翻訳アプリのカメラ機能を使えば文章の意味を理解でき、困る機会は少ないでしょう。ただ、漢字を学習したいというモチベーションのある方には、読めない漢字に注目できないため、あまり向かない方法かもしれません。
一方「かんじ検索PLUS」が提供するのは、新しい漢字に出会ったときにその場で漢字の意味を学べるという体験です。読めない漢字を見様見真似で手書きすれば、漢字がどんな意味を持っているのか、どんな熟語が作れるのかを英語訳付きで簡単に知ることができます。
そもそも紙の漢字辞典や、和英辞書、Web検索などで、今目の前にある漢字を調べたいと思った時に、どんな読み方なのか分からないと、そもそも調べようがないという問題があります。
これは、ほとんどのデジタルデバイスにおいて、ローマ字入力から変換して漢字を入力しているため。漢字の読みが分からないとデジタル入力ができないのです。日本語話者にとっては当たり前に使っている検索機能ですが、日本語学習者のメガネを掛けるとその難度は想像以上に高いことが分かります。
「かんじ検索PLUS」なら、目の前にある漢字の形をまねて手書きすれば良いだけです。端末の言語設定が英語の場合にも対応しているため、街中で出会った読めない漢字の意味を英語で読むことができます。
それだけでなく漢字をコピーすれば、Web検索に使うこともできます。熟語モードならワンタップでWeb検索が可能です。漢字が読めない日本語学習者にとってこのアプリはなくてはならないキーボードなのです。アナログとデジタルの架け橋を担っている、イカしたインターフェースといえるのではないでしょうか。
漢字の表示は、明朝体、ゴシック体、筆順の3種類から選べるため、フォントの微妙な違いで迷ってしまうケースも軽減されます。
漢字辞典アプリとしてみても、構成パーツや画数、部首による検索、書き順のアニメーション表示など、内容が非常に充実しています。赤線で漢字をなぞれる機能もついており、漢字の学習体験に非常に重きをおいたアプリです。
日本人でも読めない漢字はたくさんあります。旧字体にも対応しているため、翻訳アプリが訳せないような古い文献にあたるときや、漢詩を読むときなどにも重宝するでしょう。
5. らくらく育児記録
株式会社ROLLCAKEの「らくらく育児記録」は、赤ちゃんを育てる親の目線で作られたアプリです。毎日のミルク、睡眠、排泄といった赤ちゃんのお世話や行動を記録することで、回数や頻度を把握できます。
このアプリがイカしていると思うのは、赤ちゃんのお世話の片手間で使うことを前提にしているところです。
例えば、初めてアプリを開くとまず「どちら側で操作しますか？」というダイアログが出てきます。この初期設定で左右どちらかを選択すると、アプリ内で最も頻繁に操作するアクションボタンが右または左寄りに配置され、片手で簡単に操作できるようになります。
ユースケースは本当にシンプルで、「ミルクを飲んだ」「寝た／起きた」「うんちをした」など赤ちゃんの行動を選択し、下部に出てくるシート内で時間を記録します。横スワイプをすると1日ずつ前に遡れて、上部の小さいダッシュボードで毎日の変化を見ることもできますし、ホーム画面のウィジェットから記録を始めることもできます。
子育てでバタバタしている人に向けて、「片手で素早く、必要な記録を毎日できる」というシンプルながら鋭いコンセプトを感じます。
このようなアプリを生み出せるのは、人が普段と少し違う状況にあるときに何を必要とするかを想像できているからではないでしょうか。
子育てや妊娠だけでなく、怪我や体調不良、人混みの中にいる、すごく急いで移動しているなど、人は誰しもイレギュラーな状況に置かれることがあります。こういった特殊な状況への想像力を働かせ、必要な情報をスムーズに提供できれば、特定の人にとって価値のあるサービスを生み出すことができると考えます。
6. Crouton
「Crouton（クルトン）」というレシピ管理・献立アプリにも、使う人の気持ちが分かっているなと思う工夫がありました。
Croutonは、Webで公開されている料理レシピを集めて管理できるアプリです。レシピのWebページから材料や手順の情報を自動で抽出し、1つのフォーマットに統一してくれるので、複数のサイトを横断してアプリ内でレシピを閲覧できるようになります。
レシピ集を作れるのもとても便利ですが、私がさらにイカしているなと思うのは、料理中のハンズフリーモードです。
料理を始めるときにスタートボタンを押すと、画面が「料理中モード」に切り替わり、レシピの最初の手順と材料リストが表示されます。スワイプで手順をめくっていったり、用意した材料にチェックを入れることができます。料理中に少し遠い距離からも片手で操作しやすいよう、文字サイズは通常よりも大きめになっていて、タップエリアも広めにとられています。
また、地味ですが一番うれしいのは、料理中モードの時だけアプリの画面が常時点灯になることです。ブラウザでレシピを見ていたときは、料理の途中でスマホが消灯してしまい、何度もスマホを開き直さなければいけませんでした。Croutonの料理中モードでレシピを見るようになってからは、この小さいストレスから解放されました。
この事例のように、小さな工夫であっても、ユーザーにとっては「毎日繰り返していたストレスがなくなった」といううれしさにつながることがあります。
さいごに
いかがでしたか？今回も、デザイナー目線で「（イカしすぎていて）悔しい」「自分が思いつきたかった」と思うような魅力的なUIをご紹介しました。
このシリーズを読んでくださっている皆さんも、イカしたUIを見つけた際には、ぜひ発信したり周りの人と語り合ってみてほしいなと思います。それでは、次回もお楽しみに！
執筆者紹介
