UXはこんなにも心地良い！iOS10「新生iMessage」を育てたインタラクションデザイン
Amebaクリエイティブディレクターが語る
スマホアプリのデザイントレンド
2016年10月26日
執筆：山幡 大祐（株式会社サイバーエージェント）
スマホアプリのデザイントレンド
2016年10月26日
執筆：山幡 大祐（株式会社サイバーエージェント）
日々進化するデバイスやユーザーに合わせ、スマホアプリのデザイントレンドの移り変わりは非常に早い。本コラムではアップデートによって進化を遂げたサービスUIや新機能、新サービスなどにフォーカスし、より良いユーザー体験を提供するうえでの工夫についてサービスごとに考察する。今回はiOS10で大幅な機能アップデートが行われた「iMessage」を取り上げる。
【iMessage】・・・iOSにプリインストールされているメッセージアプリ。先日発表されたアップデートでは「ステッカー機能」「入力テキストにエフェクトをかけられる機能」「GIFアニメの送信」等が可能になり、専用のiMessage App Storeも登場した。
【インタラクション】・・・アプリやWEBサービスでは操作や入力、それに対する反応などを指し、”対話的な操作方法”というイメージで用いられている。UXデザインにおいて登場することが多く、ボタンを押したときのアニメーションなど、より直感的なサービスをつくる上で重要な「動き」の部分を担っている。
【インタラクション】・・・アプリやWEBサービスでは操作や入力、それに対する反応などを指し、”対話的な操作方法”というイメージで用いられている。UXデザインにおいて登場することが多く、ボタンを押したときのアニメーションなど、より直感的なサービスをつくる上で重要な「動き」の部分を担っている。
▷「ステッカー感」を伝えるインタラクション
まずは「ステッカー」を見てみよう。LINEのスタンプ機能と似ているが、好きな場所に貼れるという点では大きく異なる。絵文字のように使うこともできるし、写真に貼り付けることもできる。さらにはメッセージの一部を隠したり、複数のステッカーを重ねて貼ることだって可能だ。
他のアプリと比べて格段に自由度の高いステッカー。その「自由度の高さ」と「貼る感覚」をユーザーが最大限に体験できるよう、インタラクションには様々な工夫が施されている。
ステッカーを長押しすると、そのステッカーは波を打ちながら浮かび上がり、指を離すと波を打ちながら貼りつけられる。この動きによってステッカーの”薄さ”と、ペタッと貼る時の”心地よい感覚”が表現されている。物質感を過度に表現しないフラットUIにおいて、利用時にだけリッチなアニメーションを与えることで効果的に「ステッカーらしさ」を伝えている。
▷「開いた瞬間」に楽しさを演出するエフェクト
メッセージ送信時には「エフェクト」を選択できるようになった。Apple公式ページではこの機能を「文字装飾」ではなく「言い方」と表現している。
テキストを入力し、送信ボタンを長押しするとエフェクト選択メニューが登場。そのまま指をスライドさせることでエフェクトを確認しながら選択できるところが気持ち良い。この動きによりユーザーは、それが「何という名前のエフェクトか」ということよりも、動きを見ながら「イメージにあったものを」「感覚的に」選択することに集中できる。この直感的な操作感が「言い方を選ぶ」感覚を上手くイメージさせている。
左：吹き出しエフェクト「スラム」／右：スクリーン（背景）エフェクト「紙ふぶき」
エフェクトの手法は大きく分けて2種類。吹き出し自体をアニメーションで出現させる「吹き出しエフェクト」と、画面全体に紙ふぶきや風船を登場させる「スクリーンエフェクト」だ。どちらも短い時間で派手にアニメーションし、メッセージを開いた瞬間のインパクトで全体の雰囲気を作り上げている。
エフェクトがかかるのは1度だけ。ループ再生された方が目につく回数も多くなるところを、タイミングを限定し短い時間で派手に動かす。これが「開いた瞬間が一番楽しい」状態を作るのに一役買っている。計算された素晴らしい演出だ。
エフェクトがかかるのは1度だけ。ループ再生された方が目につく回数も多くなるところを、タイミングを限定し短い時間で派手に動かす。これが「開いた瞬間が一番楽しい」状態を作るのに一役買っている。計算された素晴らしい演出だ。