操作や管理のためのインターフェース、IoTアプリのUIデザイン

大岡

Apple WatchやJINS MEMEを筆頭に、モノのインターネットことIoTやウェアラブルが割と身近になってきました。現在、様々なIoTやウェアラブル製品が市場に出回り始めています。使用していなくても何かしらにIoT製品やウェアラブルを見たことがある、触ったことがある人も多いのではないでしょうか?
                                                                 
IoTは”Internet of Things”の略です、つまりモノとインターネットがつながるということです。製品はスマートフォンやPCにつながり、専用のアプリケーションから操作することができます。

実際に使っている人であれば、専用のアプリケーションの画面は日常的に触れていると思いますが、まだ実際にIoT製品やウェアラブルを持っていない、使用していないという人はにとって、操作や管理側の画面はあまり馴染みのないものかもしれません。

今後、我々制作側もIoT製品やウェアラブルを扱うためのアプリケーションの案件に、携わることも多くなってくるでしょう。そこで今回はいくつかのIoT製品やウェアラブルの、専用アプリケーションのUIデザインを集めました。

JINS MEME

blog_img01

まずは2015年の11月に発売された、アイウェアを用いたウェアラブル「JINS MEME
まばたきの回数や眼球の動きなどを測り、普段の生活での目の動きを、数値化し可視化してくれます。

img01_01
[出典] JINS MEME オフィシャルサイト

対応するアプリは現在4つほどリリースされていて、メインのアプリは「ココロとカラダが健康であるためのライフログ」というコンセプトで、項目がマインドとボディに大きく分かれています。計測結果から体や心の年齢や、姿勢や集中力などをデータ化してくれます。

フラットで無彩色の画面に、JINSのコーポレートカラーのレッドを用いて、はっきりと見やすい印象です。数値やデータを分かりやすい言葉やインフォグラフィックに落とし込み、管理画面としての堅苦しさがなく、日常的に使いやすいデザインになっています。アニメーションを使用したインタラクションなども上手に活用されています。

img01_02
[出典] JINS MEME オフィシャルサイト

他にも、眠気の可能性を知らせてくれ、安全運転に役立つドライバーのためのアプリ「JINS MEME DRIVE」、リアルタイムにランニングフォームを可視化する、ランニングに特化したアプリ「JINS MEME RUN」、体幹の強化をサポートして成果が可視化できる、体幹トレーニングのためのアプリ「JINS MEME TAIKAN」など、様々な用途に合わせたアプリケーションが各種用意されています。

Qrio

blog_img02

Qrio Smart Lock」はスマートフォンで自宅の鍵の開閉や、戸締り確認ができるデバイスです。LINEやFacebookメッセンジャー、メールなど使って、家族や友だちなどに期間や時間を限定して鍵をシェアすることもできます。

img02_01
[出典] Qrio オフィシャルサイト

すっきりとしたクリーンなトーンで、鍵の解錠、施錠操作、共有状況などが確認できます。メインの画面は大きく左右にスライドするボタンがあり、鍵の開閉の操作を確実に行うことができるようになっています。

主要なナビゲーションなどには明るめのグリーンを使い、鍵の閉まっている状態を示すバイオレッドと、開いていることを示す水色というように色分けされていて、分かりやすくしかるべき操作が出来るようになっています。その他の色は基本的に彩度が低めの色や無彩色でまとめられ、情報の重要さの度合いが明確に差別化されています。

img02_02
[出典] Qrio オフィシャルサイト

Apple WatchやAndroid Wearなどのスマートウォッチにも対応していて、これによりスマートフォンを取り出さなくても、スムーズに解錠などが行えるようになっています。

SMART ROPE

blog_img03

進化した縄跳びの「SMART ROPE」は跳んでいる回数や消費したカロリー数を、リアルタイムに目の前に表示することができ、自身のデータに基づいて消費カロリー計算やBMI測定を行ったりすることができるデバイスです。

img03_01
[出典] SMART ROPE オフィシャルサイト

縄跳びに23個のLEDが付いておりSMART ROPE自体でも、運動中にリアルタイムで飛んでる回数や消費カロリーなどの情報が確認できるという、今までにない画期的なデバイスです。

専用アプリの「Smart Gym Pro」はブラックが全面的に使われていて、SMART ROPEの革新性にマッチしたクールなテイストになっています。LEDをモチーフにしたドットのグラフィックやタイポグラフィ、鮮やかで蛍光感のあるパープルやオレンジ、グリーンなどの色がふんだんに使われていて、操作するのがワクワクするデザインです。

img03_02
[出典] SMART ROPE オフィシャルサイト

運動中に目の前に現れるLEDとアプリは同期をしていて、より良いトレーニングの後押ししてくれます。Apple Watchにも対応しているので、トレーニング中はロープのLED表示で確認、休憩中はApple Watchで確認、トレーニング後はスマホで確認など、その時々によってより良いデバイスで管理や確認が行えます。

C3fit IN-pulse

blog_img04

国内初の“着る”ウェアラブルセンサー「C3fit IN-pulse」は着用するだけで心拍数の計測ができるという新機軸のウェアラブルです。ウェア形なのでデバイスが外れることを気にせずに、トレーニングやフィットネスに打ち込むことができ、正確に心拍数が計測できます。

img04_01
[出典] Runtastic オフィシャルサイト

フィットネスアプリのベンダーであるRuntastic社とドコモが共同開発したサービス/アプリケーションの「Runtastic」に対応していて、GPS位置情報などをもとに、運動時間から走った距離、消費カロリー、ランニングのペースや経路まで、詳細にトレーニングデータを計測してくれます。

ヘッダーの鮮やかなブルーが目を惹く爽やかでスッキリとした、ランニングの爽快感を体現したようなデザインとなっています。重要度が最も高いランニング時間を大きく目立つように表示し、それぞれのデータの重要度に応じて、的確に文字のジャンプ率がコントロールされています。

img04_02
[出典] Runtastic オフィシャルサイト

計測データはアプリケーション以外にも、WEBページからの確認も行えるため、それを元に友人と活動の記録を共有したり、コーチと情報を共有してより良い指示を受けることが可能です。

こちらはトレーニングに関する情報から、SNS機能に至るまですっきりとまとめられていて、雑多になりがちな詳細な情報の設計が、しっかりとなされた管理画面という感じが伝わってきます。

CliniCloud

blog_img05

CliniCloud」はデジタル聴診器とタッチレス温度計からなる、自宅で手軽に扱えるメディカルキット。スマートフォンと組み合わせて発熱、肺や気管支の症状をモニターできます。さらに、医師のオンライン診察を受けることも可能です。

img04_01
[出典] CliniCloud オフィシャルサイト

医療系の一般的なイメージとは違い、鮮やかなカラーリングの画面デザインで、体調を崩して落ち込んだ気持ちが、少し明るく前向きになりそうなデザインです。大きくテキストやアイコンを表示し、背景にガウスのぼかし処理を使ったシェア画面など、体が弱っている時も迷わずに使うことができそうです。

これからも様々なIoTやウェアラブルが登場してくると思いますが、作る側としても様々なデバイスに日頃から見たりして触れたりして、より良いIoTのアプリケーションのUIデザインを行っていきたいと思います。

///////////////////////////////////

Webサービスの新規立ち上げ、UI/UX改善にお困りの方はお気軽にお問い合わせください。

また、株式会社DenDesignではサービスデザインに興味があるWebクリエイターを募集しています。求人情報はこちらからご覧ください。

大岡
デザイナー