Bluetooth接続可能な腕時計と連動して使用する、G-SHOCK Connected、OCEANUS Connected、MR-G Connectedの各アプリのUIデザインを、カシオ計算機株式会社 デザインセンター様の監修の元に共同で制作しました。対応する腕時計をお持ちでない方もアプリ内のデモモードより動作イメージをご覧いただけます。

アニメーションを取り入れたUIデザイン
ブランド体験を高め、ユーザー操作の結果を分かりやすく伝える

各アプリの主要画面では、アニメーションを取り入れたUIを用いています。
アニメーションの使用には主に2つの背景があります。
一つはブランドのコンセプトに則したビジュアル表現の実現手段として、
もう一つはユーザーのアクションの結果を伝わりやすく表現する手段としてです。

例えば、波をモチーフとしたブランドロゴを持つOCEANUSでは、揺らぐ波のモチーフを使用したビジュアルを作成しました。このモチーフは画面のスワイプと連動してアニメーションしOCEANUSの持つ世界観を表現しています。

また、ワールドタイムの国を変更した際には世界地図が移動するとともに時計の針が該当する国の時刻まで回転し、ユーザーが設定した内容を視覚的に伝えます。

腕時計のモデル追加を踏まえた汎用性のある画面設計

各アプリでは腕時計の主要機能をカードに見立て、左右にスワイプすることで各機能に関連する画面が切り替わります。

あるモデルでは世界時計の設定機能、電池残量などのステータス表示機能、アラームとタイマーの設定機能があります。これらの機能はそれぞれカードとして表現され、左右のスワイプで切替えが可能です。これによって異なる機能を持つモデルが追加された際にも一貫性のあるユーザー体験が可能です。

プロジェクトメンバー

クライアント・デザイン監修:カシオ計算機株式会社
プロデューサー:丹羽美佳
UX設計・UI設計:細谷謙介
デザイン・アニメーション監修:清水陽介

アニメーションモック作成:武田 真也(フリーランス)

プロジェクト期間:4ヶ月


G-SHOCK Connected: iOS版 Android版
OCEANUS Connected: iOS版 Android版
MR-G Connected: iOS版 Android版