お掃除ロボットは何故カワイイの?【UXで考えてみる】

こんにちは!
今回のテーマは「お掃除ロボットは何故カワイイの?【UXで考えてみる】」です。

働くロボットや愛玩ロボットなど、私たちの何気ない生活の中にロボットが溶け込み初めていますよね。
有名所だとルンバやAIBO、Pepper君でしょうか。持っていないこそすれ、名前だけは聞いたことがあると言う人がほとんどかと思います。

そんなロボットたちに、みなさんは“カワイイ”と感じた事はありますか?
私はあります。世の中にはロボットをカワイイと感じ、親しみを覚えたり愛着を持つ人間がいます。
人間や生き物でもないただの機械を、なぜカワイイと感じてしまうのか。
今回は「お掃除ロボット」に焦点を当て、UXデザインの観点から考えてみたいと思います。


お掃除ロボットと利用シーン

お掃除ロボットは、いつどこで誰が何の為に利用するのでしょうか。少し整理してみます。


1.いつ?

仕事に行っている間や寝ている間、別の家事をしている間など。人間が別の事をしている時に掃除しておいてもらう事がほとんどかと思います。

2.どこで?

家庭のリビングや廊下など共用スペースで利用される事が多いかと思います。
一般家庭だけでなく会社で利用している場合もありますね。弊社にも休憩時に使うスタッフルームにお掃除ロボットが常駐しています。

3.誰が?

対象ユーザーは忙しい共働き夫婦や一人暮らしの男性、掃除が困難な老人など、老若男女様々です。

4.何の為に?

利用する目的は「人間の代わりに掃除して欲しい」です。そのままですね。
少し言い方を変えると、掃除はロボットにまかせて、空いた時間を別の事に活かしたいと言う目的もあるかと思います。


利用シーンをざっくり書いてみましたが、これだけだとロボットをカワイイと感じる要素はないかと思います。
ですが、これをUXに置き換えてみると少し変わって来ます。


ロボットとUXのハニカム構造

お掃除ロボットをUXの観点から見ると、非常に優秀だと言えるかと思います。

UXとは、楽しさや心地よさなどのユーザー体験の事です。
UXには下記のようなハニカム構造があります。

お掃除ロボットはこのハニカム構造の多くを満たしています。

特に注目したいのが「Useful (役に立つ)」と「Desirable(好ましい)」です。ここに、お掃除ロボットを“カワイイ”と思わせる要素が含まれていると私は考えます。

「Useful (役に立つ)」は、人間の代わりに掃除をしてくれる所です。
「Desirable(好ましい)」は、上記に加え、少し不器用な面がある所です。


不器用で健気なUX

お掃除ロボットの不器用な面とは、ロボットだけで隅々まで掃除する事が出来ない所です。
床のゴミを吸い取るロボットは、構造上の問題でコーナーや狭い場所の掃除が苦手です。ちょっとした障害物や段差があると掃除する事が出来ません。
また、掃除の時間も人間以上に掛かります。長い時には1時間以上掛けて掃除する場合もあります。
一見マイナスな事ばかり書いてしまいましたが、ここにロボットの“カワイイ”のポイントがあります。
人間だったらさっさとこうするなと思う反面、健気さも感じるからです。

お掃除ロボットはプログラムやAIによって、行動、学習、計算のサイクルを繰り返して掃除を行います。
部屋全体を最適なルートで綺麗に掃除する為であり、非常に合理的ですが、それ故に融通が利きません。
言い方を変えると「不器用だけど頑張り屋」です。
段差や障害物の前ではぶつかったり小刻みに動いて状況を判断、方向転換してルートを考えます。地道な作業を繰り返しながら、部屋を何往復もしながら掃除してくれます。
そのため人間が掃除機を掛けるより時間が掛かりますが、結果として人間の目的である「綺麗な居住空間(継続的)」と「掃除に掛けるはずだった時間」を提供してくれます。

人間とはまったく異なる小さな無機物が、彼らなりに考え、指示された目的を達成しようとする姿はとても健気で、人に「好ましい」と言う感情を起こさせます。
ロボットの構造上やむを得ない不器用さの中で、人間の欲求を満たしてくれる「好ましさ」が人に“カワイイ”と感じさせるのではないでしょうか。


おわりに

いかがでしたでしょうか?
お掃除ロボットに焦点を絞り、UXデザインの観点から何故カワイイと言う感情を起こさせるのか考えてみました。
その結果、「Useful (役に立つ)」「Desirable(好ましい)」の部分が影響している事がわかりました。
お掃除ロボットに焦点を絞って書いてはいますが、他の家庭向けロボットにも共通して言える事ではないかと思います。
ロボットがより人間に近い動きや見た目になると、便利だと感じこそすれ、カワイイとは思わないかもしれませんね。

それではまた!デジマースのコンでした。

UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】

こんにちは!ユイPです。もうすぐ梅雨ですね。
私は傘を持ち歩くのを忘れがちで、夕方から雨予報なのに傘を持ってない…なんて事がたまにあります。
そんな時いつも、(ここで私に「この傘よかったら使ってください」なんて言ってくれる素敵な男性が現れないかな~)という妄想をします。
しかし現実にそんな恋愛ゲームのイベントみたいな事起こるはずもなく…大抵小走りで帰るので家に着く頃にはびしょ濡れです。

前振りが長くなってしまいましたが、これも伏線…今回のテーマは、
UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】です。
恋愛シミュレーションゲーム(以下・乙女ゲーム)のUIにどんなものがあるのか、それぞれどんな役割をしていてどんな体験を得られるのか…分析してみたいと思います!
ちなみに冒頭の妄想からわかる通り、ユイPは普段から乙女ゲームをそこそこに嗜んでいます。


♥今回は”家庭用ゲーム機用のゲームのUI”として考えていきます。
♥”ゲームのプレイ画面”とそこに関わる機能のUIに触れていきます。
♥ゲームの形式はノベル形式のもので考えています。


基本のプレイ画面

まず、乙女ゲームの基本的なプレイ画面を確認してみましょう。

いや本当にこういうイベント現実に起きないんですか?
私の記憶と経験と乙女ゲームのサイトを巡って導き出した最適な解がこちらです。もちろんゲームによって差異はあります。
これを基本として、それぞれのパーツが何の役割を果たしているか書きだしてみます。

①人物名
台詞を話している人物の名前が表示される。主人公が喋っている時は主人公名が表示される。
②メッセージウィンドウ
台詞が表示される。台詞の表示速度は基本的に変更可能。ユーザーの好みで変える事が出来る。
ゲームによってはここの不透明度を調整出来るものもある。キャラクターを透かすか文字の読みやすさを優先するかはお好みで。
③台詞送りマーク
台詞が全文表示されると表示される。「台詞を次に送れるよ」という合図。
チカチカするアニメーションがついている事が多い。
④自動台詞送りマーク
台詞が自動送り(操作しなくても勝手に進んでいくモード)になっている時だけ表示される。自動に設定していない場合は出てこない。
画面右上に表示が出るゲームが多かった。ただ右上に日付など他の要素が表示されているゲームの場合、テキストウィンドウの横など別の場所に表示されることも。

ゲームをプレイしている際、常に画面上に表示されている最低限のパーツはこの4つが多いです。
ゲームによっては日付だったり、主人公の顔も表示されていたりするものもあります。世界観にあわせてゲームによって色々変わってきますが、あくまで「男性キャラクター」がメインなのでそれを邪魔するほど目立つ要素は配置されていないように思います。

また、これらのパーツはボタン1つで簡単に表示/非表示が出来るようになっています。(後ほど詳しく説明)

プレイ中に呼び出せる機能

常に表示されているパーツ以外にも、ゲームをプレイする際に必要な機能は他にもありますよね。セーブやロード、設定などです。

これらのメニューや機能は普段は画面上に表示されていない事が多く、それぞれ対応したボタンを押す事で呼び出す事が出来ます。
(※「MENU」が常に表示されていたり、各機能がメッセージウィンドウの下に表示されている場合などもあり)

乙女ゲームでプレイ中に呼び出す事の出来る機能は、

①「セーブ/ロード」
その名の通りセーブやロード。タイトル画面に戻るのも大体ここから。
②「クイックセーブ/クイックロード」
ボタン1つ(もしくは2つ)でセーブやロードが出来る。
③「オートON/OFF」
上記でも説明した台詞の自動再生のON/OFFが切り替えられる。
④「スキップ」
既読の部分をスキップする事が出来る。速度は自由に変えられる。
周回する事が多い乙女ゲームにおいて大事な機能。もちろん未読でもスキップは出来る。
⑤「履歴(バックログ)」
これまでの台詞の履歴を見る事が出来る。ボイス再生が出来るものが多い。
⑥「メッセージウィンドウなどの表示/非表示」
一瞬で画面上のキャラクター以外のパーツの表示/非表示が切り替えられる。
キャラクターの絵の隠れていた部分や、スチルと呼ばれる1枚絵をじっくり見るための機能です。
⑦「キャラクター/ステータス」
キャラクターのプロフィールや好感度、イベントの発生条件などを見る事が出来る。
⑧「用語解説」
ゲーム中に通常した用語の解説。難しい世界観や特殊な設定のあるゲームには必須。
⑨「タイトルに戻る」
タイトル画面に戻ることが出来ます。
⑩「オプション(設定)」
台詞の速度やキャラクターボイスの音量調整など、ゲームの各種設定が出来る。

…など、このような機能が多いです。

これがどのように各種ボタンと連動しているかというと、
例えばとあるゲームでの、ボタンと機能の関係はこのようになっていました。
※S社の某携帯ゲーム機です。

「クイックセーブ」や「履歴」「スキップ」「表示/非表示」といった即時に行いたいものはボタン1つで出来るようになっていました。
このゲーム以外にも基本ワンタッチで行いたい操作はボタン1つで呼び出せるものがほとんどでした。ストレスフリー。
セーブやロード、キャラクターのページなど画面自体が切り替わるものはメニューを呼び出して開くようになっています。

選択肢や好感度などのUI

ノベル形式なので読み進めていく事がメインですが、「ゲーム」ですのでただただイケメンとのストーリーを読んでいくだけでは話は何も発展していきません。
途中で「選択肢」というものが登場します。この選択によってルート分岐というものが行われ、ハッピーエンドかノーマルエンドかバッドエンドか…つまりは結末がわかれていきます。

選択肢は乙女ゲームにおいて運命を左右するものといっても過言ではありません。なので、どの選択肢を今自分が選択しようとしているか、見てわかりやすいように工夫されている事が多いです。(色が違う、カーソルが表示される…など)
ちなみにこの画像の選択肢の場合、真ん中の選択肢が大正解です。1番上は普通、1番下は論外ですね。

そして正解(1番好感度があがるもの)を選んだ場合、その証拠としてエフェクトが出る事が多いです。

正解が可視化される事で「よかった~合ってた~!」という安心を得る事が出来ますね。逆に出なかったり、好感度が下がるエフェクトが出ると焦ります。切羽詰っているとクイックロードで選択肢のちょっと前に戻ったりします。シビアな世界なので。
また、正解がわかる事によって「このキャラはこういう返しをされるのが好きなんだな?」と、なんとなく性格が読めてくるのでその後の選択肢も選びやすくなります。

その他、気になったゲームの工夫

これは私が今までプレイした中でユーザーに配慮されているな…と思った要素の一つなのですが、
とあるゲームで「主人公(つまりプレイヤー)」の顔の描写をON/OFFに出来るという機能がありました。
恋愛シミュレーションゲームにおいて、主人公を自分と重ねて実際に自分がキャラクターと恋愛している気分になるか、はたまた第三者の視点で主人公とキャラクターの恋愛模様を楽しむかプレイスタイルは人それぞれです。でも前者だった場合、あまりにも主人公の個性が前面に出ているとちょっと没入出来ないよ…って人がいるかもしれません。
そこで「イベントCG(1枚絵で表示されるイラストのこと)」で表示される主人公の表情をOFFにする事が出来る!という機能のついているゲームがあり、没入系プレイヤーへの配慮がされていて手が込んでいるなあと思いました。だって表情ありとなしの2パターン用意されているわけですからね…。
イベントCGの顔は消せなくとも、メッセージウィンドウ横に表示される主人公の顔をOFFに出来るゲームも多いですね。

まとめ UIが生み出す世界観

ノベル形式のゲームでは、メッセージウィンドウなどの要素はゲームをプレイしている間、常に目に入ってくるものになります。
メインはキャラクターや背景などのグラフィックかもしれませんが、UIもゲームの世界観の一部を表現しているといっても過言ではありません。私はどんなにキャラクターや背景の絵が綺麗でも、それをとりまくUIに手が込んでいなかったらなんだかテンション下がってしまいます…。
例えば幕末が舞台で新撰組隊士と戦争の中恋愛していくシリアスなお話なのに、UIがピンクでキラキラしたメタリック!だとおかしいですよね。和風のお話ならUIも和風なテクスチャを使用したり、使うフォントもゴシック体よりは明朝体とかだと世界観を壊さずにゲームをプレイする上でしっくりきます。
もちろんこれは恋愛シミュレーションゲームに限った話ではなくどんなゲームのUIにも言える事ですが、常に視界に入ってくるノベル形式の恋愛ゲームでは特に大事と言えるのではないでしょうか。

乙女ゲームがUIによってどんな世界観を生み出されているか、どれほど手が込んでいるのか、気になった方は是非乙女ゲームブランドさんのサイトを見てみてください。


以上、UI/UXについて考える【女性向け恋愛シミュレーションゲーム編】ユイPがお送りいたしました。
この記事で例にあげたゲームが何かわかった貴方はユイPのお仲間です♥

★ユイPおすすめ乙女ゲームをツイートするかも?
デジマースブログ公式Twitter

エレベーターの開閉ボタンについて

身の回りのUI第2弾です。

エレベーターの「開ける・閉める」ボタンが間違えやすいという話を昔からよく聞きますよね?未だにこの話を聞くということは、車のワイパーが未だに昔と変わらず棒が左右に動き水をよけている事と同じで、もはや解決策がないのかもしれません…

ということで、今回はエレベーターの開閉ボタンが間違えやすい理由についてあれやこれやと考えていきたいと思います。

※本文中に出てくる「かご」とはエレベーターの人が乗る箱状の部分の事です。


では、突然ですが問題です。
どちらがエレベーターの「あける」ボタンでしょうか?

左ですね。

簡単に答えることができたはずです。

「あれ?いつもは迷うけど、今回は迷わなかったな」と思った方もいらっしゃるのではないでしょうか?

迷わなかった理由は“状況が違う”からです。

エレベーターで「開ける/閉める」の二択を迫られるときは「慌てて人が駆け込んできた」「早く閉めたい」など慌てている状態が多いですが、今回は違いますよね?自宅やオフィスで、ゆっくりしながら落ち着いて答えましたよね?(多分ですが…)

人は焦るとパフォーマンスが低下し、ミスを起こします。焦るという状況が発生しやすい環境も改善する必要があるため、開閉ボタンの問題をアイコンのデザインだけで解決するのは難しいかもしれません。ですが今回はアイコンのデザインでミスを軽減しようという考えのもと話を進めます。

なぜ間違うのかを考える

1.ひらくボタンを押すまでの手順の問題

ドアが閉じるまでは4秒前後です。その4秒前後で「ひらくボタン」を見つけて押す必要があります。ドアが閉まりかけの時に人が乗ろうとしてきた場合は4秒も確保できません。
このことから分かるように、アイコンデザインの良し悪し以前に押すまでの時間が短いという問題があります。
エレベーターのボタンは、どちらが「開く」か「閉じるか」に迷うよりも先に“探す”という行為を先に行う必要があります。ですので、開閉ボタンのデザインは「限られた時間でいかに早く見つける事ができるか」が重要になってきます。

※ちなみに…車椅子用ボタンを押すと閉まる時間が10秒ほどになります。また、エレベーター内のミラーは、車椅子の方がバックで降りるために設置されています。(かごの中で回転するのは難しいためです)

2.アイコンのデザインの問題

エレベーターの開閉アイコンは同じようなデザインのものが多いのですが、規格により統一されているわけではないので、アイコンを記憶しても意味はありません。統一してくれればいいんですけどね…。
開閉ボタンのアイコンは、迷わず行動に移せるほど分かりやすく、誰が見ても同じ意味を想像できる形が理想的です。そこを踏まえた上で現在頻繁に見かけるアイコンについて考えると、完全なものではないように思えますのでその理由について説明いたします。

頻繁に見かけるアイコンのデザインがわかりにくい理由

こちらのアイコンはよく見かけますが、パッと見た時に、どちらなのだろうかと迷い、結局補足の文字に頼ることが多いので、なぜ間違えやすいのかについて考えてみたいと思います。

1.ひらいている様子が伝わりにくい
「ひらく」も「とじる」も中心に矢印が寄せてあり、どちらも閉じていると言われれば閉じているように見えます。

2.ドアなのかが分からない
矢印のみだと、何がどのように動くのかが分かりにくいです。シンプルですがパッと見た時の情報が少ないです。

3.三角形だと矢印として伝わりにくい
人によっては矢印という意味よりも先に三角形ととらえる可能性があります。情報量を減らすという意味では成功していますが、「矢印」「三角」のどちらにも見えるとういあいまいな状態は、ナビゲーション目的のデザインにおいては避けるべきです。

以上のことからアイコンは「“何がどう動くのか”あいまいな表現を避けてハッキリと伝える」ことが重要となることが分かりました。


今回はボタンの開閉が間違えやすい理由についてあれやこれやと考察してみましたが、「限られた時間でいかに早く見つける事ができるか」「“何がどう動くのか”あいまいな表現を避けてハッキリと伝える」ことが重要なのではということが見えてきました。
ほとんどのエレベーターのボタンは「左がひらくボタン」です。また、色が付いているならば「色がついているほうがひらく」です。もちろん全てのエレベーターにあてはまるわけでは無いのですが、ほとんどがこのようになっています。
このような情報をユーザーが予め持っていればいいのですが、当然そうはいきません。そもそもUIデザインではユーザーの知識や経験を頼りに設計することはあってはならないことです。ユーザーは何も知らないし、間違うことを前提に設計する事が基本です。
少し話がそれましたが、今後もエレベーターのボタンに関して気になることがあれば記事にしたいと思います。
それではまた次回

(はら)

プロトタイプ/プロトタイピングの活用

今回は「起案」と同時にプロトタイプをつくる「プロトタイピング」の工程を進めてしまうことで、
より多くのサービスをUXを意識出来るレベルまで具現化して並行提案(開発)出来ないか妄想してみました。


開発コストがリスクだったプロトタイプ

商品開発中に全容認識が容易になるプロトタイプの製作は有意義な作業であることは明確でしたが、
プロトタイプ自体の開発期間/コストが問題でそれを行わず、
本開発を進めてしまう現実がありました。
そんな中、
モバイルwebサービス開発支援を目的とした「プロトタイピングツール」の台頭により状況は大きく変わってきております。
詳しくない方でも名前を良く聞くのは、
「Prott」「Sketch」「Adobe Experience Design」でしょうか。

個人的には以前紹介した「Adobe Animate」でもアプリ寄りなプロトタイピングも出来ると考えております。

プロトタイピングツールによって、
従来専門的なスキルと多くのリソースが必要だったサービス設計のやり方にも変化が起きました。

HTMLやプログラムの知識が無くても全体像の構成サンプルをマウス操作で作ることが出来、
実機確認出来る状態を他者へ共有シェア、遷移図の資料等の自動書き出しまで行えるツールもあります。
つまり、
リスクだったプロトタイプ制作のデメリットが解消されたのですから取り組まない手はありません。


プロトタイピングのメリット

従来からサービスの有効性/ユーザビリティーの検証方法として、
「ユーザビリティー調査(テスト)」が提唱されておりますが、
アジャイル的迅速なサービス開発が求められる現在ではその非効率特性が顕著に表れてきてしまいました。
サービス設計者はスケジュールを考慮すると、
まず「削減」を考えるフェイズになってしまっているのが実情です。

非効率化を解消し、
プロジェクトメンバー間での効率的な共有をする目的で開発されたプロトタイピングツールがあれば、
まずは自身もしくは、プロジェクトメンバー全体での認識として、
満足度の高いイメージ/ビジョンが反映されやすい製品プロトタイプが作れる環境にはなってきているのです。

以前は、長い開発期間を経過するなかで薄れてしまったイメージ/ビジョンがあり、
ユーザビリティー調査で「答え合わせ」するまで良し悪しの判断が出来なかったことが、
ツールの導入により素早くプロトタイプが作成出来、
温度差/感覚差が生まれにくい環境が整ったことが最大の導入メリットと言えます。


従来の開発フローで進めるリスク

効率的なツールを競合他社が使うなか、
従来の手法で確実なサービス設計を進めるリスクを考えてみます。

どんな「ひらめき」や「アイデア」が市場で成功するかの確証は残念ながら得られません。
そんな中進めるサービス設計について、
従来のマス需要に向けていれば十分な成功が得られた時代は終わってしまいました。

生活環境が多用化した現在では、同じ環境/価値観自体が少なくなり、そのリサーチしやすい需要も少なくなってしまいました。
先が暗いマーケティング事情なのか定かではありませんが、
「大衆向けヒット商品」が出にくい時代になったことは判断できます。

そんな中で「確実なサービス設計」で進めることはリスクが大きく、
プロジェクトラインを多く抱えられない企業では大きな機会損失に繋がるので、
多くのアイデアを次々と短い期間で具現化し、
そしてビジネスモデル検証するフローが求められると考えます。
そこで可能性を活かす理想論が、「起案」と同時に「プロトタイプ」まで進めてしまうプロセスです。


「ビックプロジェクト」ではなく「ひらめき」の可能性

多用化した生活環境、多様化した需要は裏を返せば、
起案者自身の個人的な需要でさえも、必要とするニッチな需要層である可能性が考えられます。

都合が良すぎる話ですが、
例えば、起案者自身がプロトタイピングツールを使いUX設計を提案出来れば、
残ったリソースでも多くのプロジェクトラインを同時に立ち上げることも可能なのではないでしょうか。

「数打てば当たる」ではなく、
「数打てなければ可能性が埋もれる」でしょうか。

サービスの提供期間についても短く変化してきている感もありなおさら…ではあります。

プロトタイピングツール「Adobe Experience Design」については、
Adobe Creative Cloudのサブスクリプション契約下であればすぐにでも導入出来ます(Mac/Windows10環境)

まずは無料体験期間のあるツールを使用してみてはいかがでしょうか。

次回も、サービスUX設計の話題をしたいと思います。
以上、サービスデザインに関わっているデジマースのネモトでした。

サブスクリプション/ダウンロードと利用シーン

パッケージ版ソフトウエア(物理メディア)の所有にメリットはもちろんありますが、
昨今の単体製品としてのソフトウエアはダウンロード型にシフトしてきました。

サブスクリプション/ダウンロードの利用シーンを比較したので参考にどうぞ。


サブスクリプションとダウンロード

「サブスクリプション販売」型は一定期間の利用権を買うダウンロード版ソフトウエアです。※ソフトウエアの場合
「ダウンロード販売」型は「売り切り」でデジタルデータを買うダウンロード版ソフトウエアです。

比較事例は下記となります。(2018.02.19時点)

幅広い製品がデジタル化していることがわかりますが、
ポイントはサービスの利用形態です。

例えばデザイナーの多くが使用する「Adobe CC」については自宅と仕事場にインストールして使うことが出来、
仕事場での作業の続きを自宅で…、といった利用シーンが1つのライセンス購入で可能です。(2018.02.19時点)


ダウンロード版のメリット

それでは具体的にダウンロード版のメリットをあげていきます。
大きくはこの3つでしょうか。

・メディアの差し替えが必要ない(意図せずメディアが飛び出して後悔する状況がない)

・デジタルなので場所を取らない(所有製品のプライバシーが守れる)

・使用場所/機器を限定しない ※本体と利用権の紐づけを行うハード機器もあり

この3つのメリットは直接利用者の利便性を上げ、このような利用シーンが考えられます。

・子供の物理メディアへの不適切な接触による損壊を防げる

・物理メディアのセッティングの必要ないため、利便性が良くすぐに楽しめる

・複数の機器にインストール出来るので出先でも再生環境とアカウントを設定すればどんな状況でも使用できる


サブスクリプション版のメリット

続いてサブスクリプション版のメリットを上げていきます。
大きくはこの3つです。

・アップデートが適用でき、最新バージョンがいつでも使用できる

・製品ダウンロード版より安い導入コストで、一ヵ月/1年など使用期間の選択が出来る

・複数台の同時利用契約も可能

そして3つのメリットの利便性/利用シーンはこちらです。

・最新の機能、最新のセキュア

・一次的に短期間だけ本来の製品利用価格よりも安く使用可能

・複数の機器にインストール出来る ※製品による

以上のような利用シーンを持つ方に有効です。


それぞれのデメリット

どちらにも言えることですが、

・製品提供期間が終了した場合、再ダウンロードが出来なくなったり使用できなくなる可能性がある。
  ※特にネット認証が必要なサブスクリプション版
  ※ソフトウエア内に一定期間内の使用許諾コンテンツ(版権モノ等)が含まれる場合

・ネット環境が必須

以上のようなデメリットももちろんあり、契約規約を認識する必要があります。


最後に

「権利」と「利用期間」をそれぞれ購入するダウンロード版とサブスクリプションの仕組みは、
常時ネット接続環境下という条件付きではありますが、
様々な利便性ある利用シーンを私たちに提供できる可能性を持っています。

アカウントやパスワードの紛失時など利用者側のリスクを伴いますが、
一度体験した利便性は中々忘れがたいものではないでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

【身の回りのUI】テレビリモコンのUIって…

あなたのご自宅のテレビリモコンは使いやすいですか?

先日、某大手通販サイトに日本の某メーカーのテレビがサイバーマンデーと称し、3万5千円で販売されていたため購入ボタンを連打。

その後テレビが届いたので開封。ねじを数本回し組み立て完了!
外部機器を接続したためリモコンを手にして「入力切替ボタン」を押し……。

……。

……見つからない。

入力切替ボタンが見つからない…。
「絶対あるはずだ」と、入力切替ボタンを必至に探している時に思いました。

「無駄なボタン多い…」

私はテレビを普段使用しないのでこんなこと言うのもあれですが…(三ヶ月に一回見るか見ないか)
皆さんはテレビの機能って使っていますか?使いこなしていますか?

2画面、○○リンク、インフォメーション、電子取説、時刻表示、メニュー、サブメニュー、オプション、アプリ、節電切り替え、ヘルプ、他メーカー独自機能…

何に使うのだろうかというボタンばかりです。
文字で説明されても分からないボタンは使う気になりません。
使ったとしても、利用頻度はどうでしょうか?

昔はリモコンや本体のボタンからしか機能を引き出す導線がありませんでした、ですが現在は違います。昔のテレビと違い“テレビ内にホーム(またはメニュー)”画面を組み込むことができます。ホーム画面に入れれば済むような機能もあるはずなのに、ほとんどのリモコンは機能を全部のせしたような状態です。

テレビの使い方は人それぞれです。私は使わないから周りも使わないというわけでもありません。
当然、全てのボタンを使いこなすTVのスペシャリストも存在するはずです。

ですが、UIデザインの考え方でみるならば、ほとんどのリモコンのボタン数は適切ではないと感じました。

そんなこともあり。

リモコンにはまだ改善の余地があるのではないか!?
ブログのネタになるではないか!!

と思ったため、今回はリモコンのUI(主にボタン数)について、なぜ使いにくいのか?という事と、じゃあどうすれば良いのかという事についてまとめました。

1.リモコンのボタン数

各メーカーから出ているリモコンのボタン数を調べました。
※今回はテレビによく付属してくる「テレビ+録画機能」操作用リモコンでボタン数を調べています
※ボタンの配置は実際のものより若干変更しています

数字ボタン・音量・選局キーを除いたとしても46ボタン前後。ユーザーはこの中から目当てのボタンを探す事になります。この状態だと 使用に慣れても、手元を良く見てから押す必要があります。
ただ、スマートフォンのアプリケーションとは違い「使いにくいから削除」とはいかないので、使いにくくてもユーザーの方から我慢して学んでもらうことができます。しかし、ユーザーを迷わせる、直感的ではないという状態はUIとしては良くないので、どのリモコンもボタン数に関して改良が必要です。

 

 

ボタン数63形

ボタン数が多いため購入時は特にボタンの位置に迷うかもしれません。
テレビを購入したばかりのユーザーにいきなりストレスを与え、「難しい」という先入観を植え付ける可能性があります。また、利用の度に手元をしっかりと確認する必要も出てきます。お年寄りの方ならなおさらです。
様々な機能を知ってもらいたい、使ってもらいたい、という思いがあるのかも知れませんが、優先度が曖昧で、返ってどの機能も目立たなくなっています。
外見のデザインにも制限が多く掛かるため、お洒落、可愛い、など“所有することへの喜び”という体験を与える事は難しくなります。
機能的、見た目的にも……家庭向きなのでしょうか?と思ってしまいます。
まるで業務用デザイン…大型のロボットを動かせそうです!
これぞ日本メーカーといったデザインで、詰め込み&足し算デザインの典型といった感じです。デザイナーの意見は一切通らなかったのかもしれません…。

 

 

ボタン数53形

ボタン数を比較的抑えることができているリモコン。今回調査したリモコンの中だと一番ボタン数が少ないです。ユーザーは53ボタンの中から1ボタンを探すということを考えるとボタン数は少ないとは言えませんが、ボタンをしっかりカテゴリ分けするなどの見つけるためのきっかけを用意することができれば探すストレスは軽減できます。このボタン数だとボタンの配置が重要になります。
ボタン数から、機能を削りきれなかったが厳選した事が伺えます。デザイナー側のシンプルにしたいという思惑と、システム側の機能を使ってもらいたいという思惑がぶつかったようなデザインです。

2.ボタン数が多い事のメリットとデメリット

メリット
・多くの機能にアクセスしやすくなる
・多くの便利機能を知る事ができる
・機能が多いという安心感と充実感がある

デメリット
・目的のボタンを見つけにくい
・情報過多でボタンの優先度がわかりにくいため直感的な操作ができない
・スペースの都合上ボタンが小さくなる(押し間違えてしまう)
・リモコン本体サイズが大きくなる
・手元を見ないと操作が難しい
・デザイン面での自由度が低くなる(所有する喜びという体験が無くなる)

多少デメリットの方を盛った感がありますが…デメリットの事を考えるとやはりボタン数は改善すべきだと思います。

どのリモコンにも無駄だと思えるボタンが多く、使いやすくするためのシンプルさはありません。無駄だと思えるボタンと表現しましたが、正確には無駄なボタンではありません。押すとたいして需要のないであろう、差別化を図るためにメーカーが一生懸命考えた決定打にならない機能が起動するボタンです。

テレビは当然の事ながら映された映像を見るための道具です。それを踏まえると重要な機能は「番組視聴」「録画」「録画番組視聴」という答えに自然にたどり着きます。いくつかのリモコンはそんな利用頻度の高いボタンが、優先度の低いボタンに紛れていました。

使う人によっては、リモコンを使用した時点で「最近のテレビは使いにくい」「多機能すぎて難しいのでは?」「めんどくさそう」と思ってしまうかもしれません。

「そんなのどの製品でも最初はボタンの位置は迷うだろ!」

と思った方もいらっしゃるかと思いますが、ボタンが見つけにくいという問題を解消する方法はあります。
それは、不要な要素を削る、つまりはシンプルにするということです!

3.削ったボタンはどこへ?

ボタンは削る事はわかった。でも、削ったボタン(機能)はどうするのか?という意見もあると思いますが、
こちらに関しても解決策がございます!
それは…

テレビ内のホーム(メニュー)画面内に入れる!(テレビ内のホームのUIがしっかりしていればボタンに入れる必要がない)

です。
テレビ内のホーム(メニュー)画面にリモコンから削った機能を組み込めばいいだけです。
ただ、そのためには“ホームのUIも洗練されている”必要があります。
私が購入したテレビはテレビ内のホームもいまいちでした。テレビのUIに関してはまた別の機会に紹介いたします。

4.考えてみた

この機能もあの機能も使わないから取って…
この機能はメニューからアクセスできれば問題ないし…

ということで今回、私なりにリモコンのボタン数について考えてみました。
※テレビ購入時に付属する(テレビ+録画機能)操作用リモコンを想定しています

それがこちらです!

気になるボタン数は…40ボタン

テレビを見る、録画する、録画した番組を見るという、テレビを使用する上で重要な機能を中心にボタンを選定しました。お年寄りの方向けの究極にシンプルなリモコンレベルには削っていません(すでに多数存在するため)。

日本語で補足を加えるとこのようになります。

テレビを買って箱から出す、リモコンを手にとり自然に電源ボタンを押す、消音も入力切替も楽に見つかる。シンプルにする事でユーザーにとっての障害(探す・迷う)を減らすようにしました。

5.最後に

皆さんも自宅に帰ったら、リモコンを確認してみてください、きっと使っていない謎のボタンがあるはずです。そんなボタンが見つかったら、もったいないので是非使ってみてください!きっとマニュアルが必要となります。そして途中で面倒になり使用をあきらめるはずです。
テレビの差別化を図るために無理やり小技程度の新機能を付けるよりかは、シンプルなUIで上質な体験をどのようにして与えるか?ということに時間を割くべきだと思います。

ボタンを削るだけでは使用感に関して解決とまではいきません、テレビのOSとの連携をいかにスムーズにするのかがとても重要で、ユーザーに「ホームに行けばとりあえず機能が見つかる」と思ってもらえるUIにしておく必要があります。そうすればリモコンからボタンを削っても利用してもらうことが可能です。

(はら)

スマホが変化させた製品/サービスの利用シーン

スマートフォン(以下スマホ)の登場により、
あらゆるアクションが場所を選ばず行えるようになりました。
(ある程度の許容は必要ですが)

行動必需品と化したスマホですが、
スマホの無い日々を想像してみて下さい。

他人との関わりや恋愛、旅行とドライブ、映像鑑賞など、
スマホが優先度高くこれらの行動手段の手足になっている方は多いのではないでしょうか。

あらゆるサービスや製品の設計者が「利用シーン」を考えた場合に避けられない、
そんな「スマホ有りき」な状況が変化させた利用シーンを今回は考えてみます。


都合が良いスマホ

そもそも、
我々が何故スマホを手放せなくなっているのかといえば、
「都合が良い」ユーザーメリットの塊、という理由に尽きます。

・携帯性  / いつでも所持出来る
・連絡機能 / いつでも連絡/通信が出来る
・情報取得 / いつでも欲しい情報が見れる

電波さえ届く場所なら場所を選ばない便益な利用シーンがここにあります。


手、足、スマホ

ある意味、現代人の体の一部になっているスマホは、あらゆるサービスの利用シーンに必ず登場します。

トイレでも、お風呂でも、就寝中でも、違法で危険な車両運転中の事象までも発生してしまっており、
何をする時でも肌身離さずスマホがそばにある現実となっています。

これほどまでに生活に入り込むと、家電や車など製品連携は必然でした。
製品のそばで操作するのではなく、
身近な手段であるスマホが場所を選ばず遠隔から操作できるようになりました。


いつでも傍にいるスマホ

昨今、若者にとっての恋愛感は、
リスクが高くドライで優先度が低い認識として広がっております。

実際のところはどうなのでしょうか…?

個人にとって、不安で気の乗らない状況はデメリットで不明確ですから、
いつでも明確なやり取りが可能な状況のほうが都合がよいメリットとなり大きな安心を感じさせます。

必要なときに誰とでも繋がれるので完全な「独り」の状況がなくなりました。
一人でいられる時間が苦痛ではなくなり、万が一文句を言われても遮断できる環境になりました。

本来、面倒を掛け合う助け合いで成り立つ人間関係の頻度は日常では減少、隣近所の気遣いも気薄になり、
さらに、思い通りにならない煩わしい異性との付き合いは、
ネガティブのリスクがあり面倒な対象となっていると考えられます。

大げさですが、
「頼りになるのはスマホ」
の感覚は広がっているのではないでしょうか。


ドラマにならないスマホ

スマホが入り込んだ利用シーンは、本や映画やドラマなどの現代劇を扱う場合にももちろん影響が出ます。

あらゆることが瞬時に解決できてしまい、
単調なメッセージのやり取りで終わるシーンの連続になる状況も危惧できますし、
推理ドラマの犯行状況にも影響が多々ありそうで要らない心配をしてしまいます。

また、
一つの作品のなかに必ず登場するスマホには、
作品製作に協力する製品企業の存在もあり、権利問題が膨らみます。

時代の変化ですが、
シンプルなミニマルスタイルがデザイン分野で進むなか、
我々の利用シーンもシンプルな一極化を進んでいるのではないでしょうか。


束縛するスマホ

スマホはあらゆるニーズを取り込んでいます。

電話/メッセンジャー、Web閲覧、カメラ、ビデオ、音楽プレーヤー

また保存したデータは、紐づいたクラウドに格納されており、
悪い言い方をすれば利用者の大切な情報を「人質」として委ねています。

この束縛は非常に拘束力が強く、
なかなか競合他社への乗り換えや別カテゴリのデバイス移動など、利用者の自由な選択肢の妨げになりつつあります。

委ねれば楽ですがそれで良いのでしょうか。


まとめるのもスマホ

電気、固定通信回線、携帯回線、すべてが一つに集約契約促進されている部分も拘束と考えられますが、
シンプルになりすぎた利用シーンには、万が一問題や変更が必要な状況ではリスクとなります。
後戻り出来るかは利用者次第という余地は残されておりますが、どれだけの人が対応できるリテラシーを持っているのでしょうか。

携帯電話がある利用シーンについては、

「携帯電話があると便利だね」
     ↓
「携帯もってる?」
     ↓
「え!?ケータイ持ってないの!?」

と時代の流れで人々の考えが変化してきたように、社会に出た場合はそれらの余地が少ない現実を受け止めなければなりません。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

スマホが速度制限でもストレスのないWEBページについて

現在主流の4G通信回線の実行速度は、
15Mbps(15,000kbps)程度といわれています(規格上は150Mbps~225Mbps)。
※「bps」=バイト・パー・セカンド/1秒間に受け取れるデータ量

そんな中、利用者は、契約ギガバイト数を超過すると厳しい速度制限を受けることになりますが、その「128kbps制限」を体験している利用者は65%程度いる様ですので見過ごせません。
※『スマートフォンに関する意識調査』NTTコミュニケーションズ調べ

今回はそんな方のなかでもデータ容量の追加購入せずに月末を乗り切る利用者を考慮して、
「128kbps制限でもストレスの少ないWebページ」
を考えてみました。


回線速度の変遷リスト

まずは、通信の歴史、
固定電話回線と携帯電話回線の変遷をリストにしました↓


<固定電話回線>

電話回線(アナログ回線)1990年代  ※銅線
28.8kbps

ISDN回線(デジタル回線)      ※銅線
64kbps/128kbps(2チャンネル時)

ADSL回線              ※銅線
512kbps/47Mbps

光回線               ※光ファイバーケーブル
100Mbps前後


<携帯電話回線>

3G回線
2Mbps程度(実行速度)(規格上数Mbps/14Mbps)

4G回線
15Mbps(15,000kbps)程度(実行速度)(規格上150Mbpsや225Mbps)
速度制限を超えると通信速度が最大128kbpsに制限

※記載の速度実数値は参考程度となりますのでご了承ください。


上のリストは1990年代から「通信」を経験してきた年代には懐かしく、若年層には見慣れない項目が多いと思われますが、
制限状態にある「128kbps」という通信スピードがいかに遅い回線状態だったか理解いただけるのではないでしょうか。


128kbpsでできること

それでは速度制限を逆手にとって、
制限中もストレスなくサービスを利用出来ないかと考え、
分析を進めてみます。

まずは過去のFP時代のページ総容量レギュレーションを確認してみると…

・1ページあたりの容量は100kバイト以内(※概ねの指標)

とありますので

128kbps制限下でも、容量数字上は2秒もあれば表示されます。

FP(フィーチャーフォン)向け程度のページ情報を表示する分には十分なスピードです。


文字中心のページ製作へ

テキストは1文字につき、

・半角英文は、1バイト
・全角が必要な日本語は、2バイト(アジア地域などは「2バイト圏」と呼ばれます)

容量を使います。

単純計算すると、
128kバイトであれば、タグやスタイル、JavaScriptを含めて、
128,000文字の文章が書けます。
ブログ記事は2,000文字(4kバイト)程度が多いので、テキスト本文だけで考えると十分足りる計算です。
今回、
1秒程の読み込みを目指すのであれば、
タグや画像に、残りの124kバイト使用できます。
読み中心の静的ページであれば十分なのではないでしょうか。

さっそくサンプルページ作りを始めます。


読み物中心のページを作る

画像を載せる場合は容量制限を設定し、
大きすぎず適切な減色による容量削減が必要です。

ポイントとしてこちらでしょうか。
・グラデーションは使わない
・PNG8形式(インデックスカラー)で保存
・CSSスプライトで画像を1ファイル化(アクション発生件数を減らす)

今回、この記事ページ自体をサンプルとして扱い、使用画像含め128kバイト以内で作りました。
本文テキスト部分の文字数は2,000文字程度です。

ページ内容のみの容量は25kバイト程度ですので、
通常の電波状況ではストレスなく表示が出来ると思われます。


最後に

動画や画像中心のリッチなコンテンツページは、128kバイト以内では作れませんが、
制限下でも情報を問題なく表示できるページ作成は可能です。

ここまで詰め切る需要も少ないと思われますが。
FPのころの通信インフラにやさしいエコなサービス作りに挑戦するのも新鮮ではないでしょうか。
是非お試しください。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

注意が必要なカルーセルパネルとユーザビリティーのポイント

カルーセルパネルとは?

カルーセル[carousel]パネルとは、
複数画像を左右にスライドさせることで表示させる展開(回転)構造を持ったWeb/UIコンポーネントです。


スマートフォンが登場した黎明期から、
カルーセルパネルはナレッジと予見が必要な敷居の高い機能であった為、PC/スマフォでの使用には賛否がありました。
特に最終スライドまでの認知は、構造上少なくなっていく傾向は止むを得ません。

実装は「jQuery」で、Webデザイナーでも簡単に組み込めることから広く利用されておりますが、
理想のカルーセルパネルソースに出会えず、適切に運用されていない状況もあるのではないでしょうか。

今回はそんなカルーセルパネルを有効活用するためのポイントを紹介致します。


使いやすさのポイント

単純に単体静止パネルとして素通りされてしまうのが一番の問題なので、気付きのアピールが必要です。

1. ちょい見せ

「単体パネル」ではなく「複数パネル」であることを認識させる表現にする。

2. 手動+時間での切り替え

停止したままではなく、一定時間経過で自動的に動かすことで複数枚を認識させる

3. 全体数の表示

全スライド数を認識させる

4. ポジション

現在のスライドの表示順番を認識させる

5. ループ

最終スライドから先頭へ戻る(ループする)ことを視覚的に伝え、最初のスライドに手早く戻れることを認識させる。

以上に上げたポイントが一つでも十分でない場合、格納されたスライドの全てを認識させるのは難しくなります。


カルーセルパネルの動きをプロトタイピング

「jQuery」などオープンソースから理想の表現が出来ているカルーセルパネルが見つかれば話は終わってしまいますが、探すにも時間がかかるのではないでしょうか。

それでは、カルーセルパネルの内容や動きが確認できるプロトタイピングして具現化してみます。

デザインも出来て、JavaScriptが出来るWebデザイナーなら問題ないのですが、壁がとても高いと思われます。
そんなプログラムに精通していないデザイナーでも作れるツールが、過去の記事紹介している「Adobe Animate CC」です。

グラフィックUIの操作で作れるためデザイナーに相性が良く、
ある程度のJavaScript命令文を項目を選択するだけで記述出来、厳密に構文を覚える必要がありません。
「再生」「停止」「任意のポイントに戻る」「条件分岐」「繰り返し」
以上を組み合わせるだけでも、
プログラマーやプロジェクトメンバーに動きを確認してもらえるプロトタイプを作ることが出来ます。


早速作る

まずは基本的なレイアウトに「ちょい見せ」搭載したプロトタイプです。
クリックでしか動作が出来ておりませんが、回転してグルグルと回るカルーセルパネル本来の動きが確認できるのではないでしょうか。


プロトタイプならではのバリエーション

追加で2種類のデザイン案も作ってみました。

動きの想像が出来、ついつい回してしまいたくなる表現なら有効です。


最後に

いかがでしたでしょうか。
オペレーションソフトやブラウザ速度の向上した現在では、多くの表現がWeb上で可能となっております。
Webデザイナーに求められるスキルも必然と増え、インタラクティブな動的コンテンツが求められてきていると感じています。

それでは次回も、サービスUX設計に関係した話題をします。
以上、デザインに関わっているデジマースのネモトでした。

Apple Pencilに欠かせない120Hzの画面リフレッシュレートとUX

私たちが普段眺めているスマホやタブレットの画面ですが、
実は、操作してない時でも頻繁に画面を書き換えています。

画面を書き換え(⇒リフレッシュ)しているということは、
常に貴重なバッテリーを消費しているので、その部分だけ聞くとエコではありません。

スマホなど、使用開始から2年目に近くなると著しくバッテリーの劣化を感じますが、
出先での充電も面倒ではあるので、
可能であれば何とか温存して一日持たせたいところです。

そんなネガティブな話題から入りましたが、
リフレッシュレートの機能の恩恵は大きく、私たちの使用感/満足度など、
UXに大きく影響を与えます。

今回は機械的な話に寄りますが、
この(単位時間で画面をリフレッシュする⇒)「リフレッシュレート」の話をUXと絡めて考えてみます。


■リフレッシュレートとは?

一般的な説明として、リフレッシュレートとは、
1秒間にスマフォやテレビなどの画面を何回書き換え更新するか、の理解で良いと思います。
機器の仕様書には、

60Hz(ヘルツ)だの120Hzや最近ですと240Hzなんて数字も確認できます。

つまりはスマホの画面が一秒間に60回だったり120回だったり240回、
最新状態に書き換えしてる端末がそれぞれあるということです。
忙しくエネルギー使いまくってそうですね。

では日本でも売れているiPhoneやiPad Proの仕様についてみてみます。


■iPhoneやiPad Proのリフレッシュレートは?

・iPhone   60Hz
・iPad Pro  60Hz(可変リフレッシュレート)

でした。 ※2017/6/6時点発売済みの端末

ロック画面の静止画状態でも、1秒間に60回も書き換えているなんて、環境に申し訳ないですね…。
バッテリー消費もしているので使用者のメリットもありません。
これは良くない体験の様です。

でも…『iPad Pro』の仕様をよく見てください。
”可変リフレッシュレート” となってます。

『iPad Pro』の可変リフレッシュレートですが、
実は利用者が操作していない状況を判断して、
リフレッシュレートを低く[30Hz(30回書き換え)などに] 変更させているんです!
画面を操作していないときはエコモードになるなんて、
見えないところでもユーザーに恩恵を与えているんですね。
バッテリー持ちを良くするための機能だと思いますが、
双方にメリットがあり、
これは良い体験なのではないでしょうか。


■新型iPad Proの仕様

2017年6月6日、Appleは、
同社の開発者カンファレンス「WWDC17」の基調講演で、
「iPad Pro」シリーズの刷新を発表をしました。

・iPad Pro  120Hz [可変リフレッシュレート(48Hz/24Hzなど)]

こちらの製品の仕様では、
リフレッシュレートが大きく向上して120Hzに変更されました。
目的としては、「Apple Pencil」の体験向上が上げられ、
レスポンスが快適になるとのことです。

仕様上だけでもペン先への描画追従性が倍に上がるので、
”書き味”に大きな変化が現れることでしょう。

またリフレッシュレートの向上は、
画面スクロール時にも影響が出ると判断でき、
ヌルヌルとしたスクロールになることで、文字の視認性が良くなるのではないでしょうか。

大きな使用体験の変化は新たな需要を生みます。

「読む/見る」といったニーズでは行き渡った感があったタブレット端末ですが、
「描く/伝える」といった新たな体験と価値を提供するツールとして、
新しい市場を開拓するのではないでしょうか。

■今後のリフレッシュレートの向上について

モバイルツールとして120Hzのリフレッシュレートを実装してきましたが、
コンシューマ向け「据置型モニター」での市場では、
240Hzの領域まで量産技術が進んでいます。
さらに、
人間の目で判断できる限界(140~200Hzという説)もあり、
240Hzあれば十分なのですが、
ホールド型液晶画面は仕様上残像の問題が出るので、
その点をカバーする目的で、
高速にリフレッシュする480Hzまで行きつく必要があるのではないでしょうか。
表示応答性に優れた「有機ELディスプレイ」との組み合わせも考えると未知の領域ですが、
スマホでヌルヌルとスクロールしながら文字を速読する、
そんな体験が出来る時代までもう少しです。

次回も、サービスUX設計に関係した話題をしたいと思います。
以上、デザインに関わっているデジマースのネモトでした。