ドロップシャドウ(影)とボカシ/濃淡のUI活用

『ドロップシャドウ』のほか、『ボカシ』と『透明度(アルファ)』をつかって、単純なグラフィックデザインの表現としてではなく『UI』の機能/優先度を補助する設定をしてみます。

今回の内容は、
この先である将来のUIの機能による表現を、手軽にCSSやプログラムで動的にインタラクションとして組み込んだ場合の想定ですのでご理解ください。

それでは早速ボタンUIを作ります。


ドロップシャドウの設定あれこれ

ボタン単体としてみると、Aのシンプルなドロップシャドウがない表現で十分に機能しますが、

実際には、バナー画像やサムネイル画像、テキスト本文が含まれる総合的な画面のなかでUIとして十分に認識でき機能しなければいけません。

ドロップシャドウの表現もCSSで細かく設定できます。

box-shadow: 2px 2px 4px 0px gray;

最初の「2px」部分はx座標、
次ぎの「2px」部分はy座標
次ぎの「4px」部分はボカシ具合
次ぎの「0px」部分はドロップシャドウの大きさ
次ぎの「gray」部分は色設定 ※「#000000」系の記述も可
末尾に「inset」をつけると影が内側に設定できます
※間は半角スペースを入れる

box-shadow: 2px 2px 4px 0px gray inset;

「,」(カンマ)を入れて複数ドロップシャドウを設定出来るので、「inset」でボタンの質感のテカリを再現、その他にドロップシャドウでボタンの影を設定もできます。

box-shadow: 2px 2px 4px 0px gray,2px 2px 4px 0px #ffffff inset;

↓値を変更することで、画像のAのようなパキッとした表現や、Bのようなボカシを設定して実際の影のような表現も段階で表現できます。

トレンドでは、影がさらにぼやけて広がり拡散した状態のドロップシャドウが、WEBデザイン、グラフィックデザインで多く使われています。

それでは複数課金のボタンUIでのドロップシャドウに、意味合いと優先度を設定してみます。

ドロップシャドウの表現を揃えれば、優先度は横並びとなり、上下左右の設置位置による些細な優先度だけが存在している状況です。

この並びのボタンUIにドロップシャドウのボケ具合の程度で差異を出すと、コントラストの違いにより、ボカシが弱く濃い左上のボタンの優先度が高くなります。

次に、
実際の影の付き方を再現して、ボタンに「高さ」と「奥行き」の距離感を設定してみます。

手前に飛び出て見える感もありますが、微妙な表現の違いにとどまっており、4つのボタンの優先度に大きな違いはありません。

さらに、
ボタンの面部分とそのボタンから落ちるドロップシャドウの距離を離して違いをだしてみました。

ここまでの表現は現在のブラウザCSSでも設定できますが、これから先の内容を動的インタラクティブなUIとして現在機能させるには、JavaScript/jQueryなどの重い処理を利用し疑似的に力技で処理する必要があり、ユーザー体験にも処理が重く読み込みに時間もかかりデメリットがあります。

今後のブラウザ側の機能追加とデバイス側の処理速度向上が必要です。


ボカシの設定あれこれ

「ボカシ」表現自体は、OSネイティブアプリレベルではホーム画面やsafariブラウザ上部領域の透かし処理などのエフェクト処理として確認出来ますが、WebのCSS3レベルでは、画像を部分的にぼかすことができず一部のブラウザのみ画像全体のボカシ処理にとどまっています。
※CSS3のfilter:blur(ぼかし)は現在SafariやGoogleのChromeなどのwebkitブラウザだけ実装されています

将来的には「視線追跡機能」等により、見ているUIパーツや優先度の高いパーツの「ピント具合」を動的に調節できる機能が実装されるとおもわれます。

他にも利用者が注力して見ている場所以外のレンダリング解像度を落とし、デバイスの処理を軽くすることでバッテリー持ちを良くしたり、閲覧レスポンスを快適にするなどUX向上メリットも期待できます。

それでは話を戻して「ボカシの優先度」をUIに活かして設定してみます。

この段階まで表現できて、やっと判断しやすい優先度に見えるようになりました。


濃淡(透過/アルファ)の設定あれこれ

最後の表現として「手前」「奥」の濃淡表現(空気遠近法)を対象UIパーツに透過/アルファの数値設定を行い、優先度の低いUIコンポーネントパーツの透明度を下げ視認性を下げてみます。

メリハリがでてわかりやすくなったところで、訴求金額の上下を逆にしてみると、また見え方が変わってみえますね;

ボタンの並び方を変更して大きさに遠近感を出すとこのような感じです↓

使いやすくユーザビリティに問題なくUIが機能できるかはこの表現が動的にインタラクションする必要があります。


さいごに

スマートフォンなどのUIにおける画面要素の「重なり構造表現」へ意識は、マテリアルデザインへの意識向上、新技術のデバイスへの組み込みにより今後さらに必要となってきます。

SF映画のなかで登場する「未来的でシンプルなUI」は、カッコいいけど簡素過ぎてわかり難いものばかりでした。今後、技術が追いついた時、それらについて適切な情報設計が出来るかどうかは、表現とUIデザインの意識次第なのではないでしょうか。

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

【公共サインのユーザビリティ】信号機のない横断歩道で車が一時停止する方法

こんにちは!
今回のテーマは「【公共サインのユーザビリティ】信号機のない横断歩道で車が一時停止する方法」です。
信号機のない横断歩道で自動車やバイクや自転車などの車両(以下、車)がちゃんと一時停止する方法について、ユーザビリティの観点から考えてみました。

信号機のない横断歩道を渡ろうとした時、なかなか車が途切れず渡れない…と困った経験をした方も多いのではないのでしょうか。
非常によくある光景ですが、これは車(の運転手)が間違っているんです。

そもそも、信号機のない横断歩道で歩行者や自転車が横断しようとしている場合、自動車やバイクや自転車などの車両は一時停止をして歩行者や自転車の通行を妨げてはいけないと言う法律があります。
日本自動車連盟(JAF)がこの実態を把握すべく、2018年に調査を行ったところ、全国でこの法律を守っている運転手は8.6%しかいないと言う驚きの結果が出ました。
<参考:日本自動車連盟(JAF)>

そこで、約9割の運転手がルールを守れていないと言うことは、運転手の知識やモラル以外にも何か原因があるのでは?と仮定し、なぜルールが守れないのか、この問題を解決できるように考えていきたいと思います。


信号機のない横断歩道を改めて見てみる

信号機のない横断歩道が、現状どのようなユーザビリティになっているか見てみましょう。
車側から見た時はこのようになっているのが一般的です。

横断歩道がある事を示す青い三角形の道路標識と、車道に連続した白いラインなど道路標示が描かれているのが一般的です。
ユーザビリティのポイントとしては、この「道路標識」と「道路標示」の2つが挙げられます。

一度、2つのポイントの基礎を整理したいと思います。

まず道路標識に関してですが、こちらは種類が4つあります。
「大人が1人描いてある物」「小さい子供が2人描いてある物」「自転車が描いてある物」「人と自転車が描いてある物」です。

どれも標識の位置に「横断歩道(または自転車横断帯)がある」ことを意味しています。
この標識がある場所は歩行者(または自転車)優先です。
子供が描いてある道路標識は幼稚園や小学校の周辺で子供が多く通る道に設置されているので、子供の飛び出しなど不規則な動きに一層注意したい所でもあります。

また道路標示に関しては、「歩行者が横断する白いライン」の他に、「車の停止線」「前方に横断歩道があるので減速を促す為のひし形のマーク」がある場合もあります。

ざっくりこんな感じで整理が出来たところで、次はそれぞれの問題点を洗い出していきたいと思います。


【問題点の洗い出し】

信号機のない横断歩道のユーザビリティ「道路標識」と「道路標示」には共通の問題があります。
それは、「一見しただけでは何を意味しているか分かり辛い」と言う点です。
横断歩道を全否定したい訳ではなく、より良いユーザビリティに繋がる可能性が秘められていると私は考えています。

例えば道路交通法の知識が1ミリもない人が車を運転した時、信号機のない横断歩道で連続した白いラインだけ見ても止まる事は出来ないと思います。
ありえない例えではありますが、このような観点から問題点を洗い出すと下記のようになりました。

「道路標識」の問題点

■ 絵が何を意味するのか分かり辛い。
■ 文字の情報が一切ない。
■ 色

「道路標示」の問題点

■ 文字の情報が一切ない。
■ 歩行者が渡りたいのか判断し辛い場合がある。


良いユーザビリティとは

ここで一旦、そもそも良いユーザビリティとはどのようなものなのか思い出してみます。
簡単に言ってしまうと、「分かりやすい」「簡単」「ストレスがない」と言った条件が満たされていると良いユーザビリティと言えます。

また一般的に、絵だけの情報より文字情報の方が理解されやすく、アクションを起こしやすいです。

横断歩道の良いユーザビリティとは「歩行者優先であることが分かりやすい」ことだと思います。
このような良いユーザビリティの観点を元に改善案を考えてみます。


【改善案】

「道路標識」の改善案


絵と文字で伝えます。
歩行者の絵の下に「優先」と書くことで、ぱっと見て歩行者が優先である事が分かりやすくなったのではないでしょうか。

補助標識を付けます。
絵の見易さをそのままに、文字の情報でしっかり意味を伝えることが出来ます。
ただこの場合、標識が複数ある場所だと見辛くなる可能性もあります。

警戒標識にします。
現在の横断歩道の標識は「指示標識」と言う物に分類されます。これは特定の交通方法を禁止したり指定する時に使われます。
「警戒標識」は危険な状態を予告し、注意して運転することを促す標識です。指示標識より強い警戒を促す事が出来ますので、車側が注意しやすくなります。

文字で伝えます。
文字だけにすることで歩行者優先であることが即座に分かりますね。


「道路標示」の改善案


歩行者優先と書きます。
シンプルですが分かりやすいですね。車に前方の横断歩道が歩行者優先であることを伝えられます。
道路標識と併用することでより分かりやすくなります。


横断歩道手前での一時停止を義務化します。
実現すれば一番確実で安全な方法ですが、交通量の多い道路では渋滞の原因にもなってしまいます。


おわりに

いかがでしたでしょうか?
ユーザビリティを少し変えるだけでも、歩行者優先であることが分かりやすくなりました。
そもそも車の運転手が道路交通法を守らなければいけないのですが、タイミングの問題でやむを得ず…と言う場合も多いかと思います。
マナーではなくルールであることを明示する、ユーザビリティを改善する事で、気付きのタイミングが増えたり認知度が改善する可能性があります。

実際に横断歩道のユーザビリティを改善する取り組みをしている国や地域もあります。

インドやアイスランドなどの海外では、「3D横断歩道」と言う横断歩道が導入されています。
トリックアートの原理で出来ており、遠くから見ると横断歩道が立体的に浮き出て見え、近付くと平面の横断歩道であることが分かる仕組みになっています。

細長い塊がいくつも並んで道を塞いでいるように見えるので、運転手が堪らずブレーキを踏んでしまうようなユーザビリティになっていてとても効果的です。
日本も静岡県や大阪府の一部地域で「3D横断歩道」が導入されているようです。

ぜひこれからも、注意を怠らずに安全で楽しい運転ライフをお過ごしください!
それではまた!デジマースのコンでした。

自動改札で止まらずスムーズに通るには

自動改札を通る時に、何らかの理由で通れないことを経験したことがありませんか?
今回はそんな自動改札をユーザビリティ目線で個人的な解釈ではございますが考えてみたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

最初に

電車を利用する人は言わずもがな、たくさんいますよね。
その利用する人分、自動改札は通られています。
大半を占めて同じ時間に利用することが多い、学生、社会人を始めとし、多くの目的を持った人たちが利用しています。
利用者が多ければ多いほど自動改札の通り方にも個性が出てきます。

乗車券のタイプも電子カードタイプの定期券でピッと通る人もいれば、磁気定期券を使用している人もいます。通常の切符、またお得な切符販売もあるので切符を利用する人もいますね。最近ではスマートフォンで通る人も多く見受けられます。

それらを入れている入れ物も、スタンダードな定期券入れだったり、お財布、スマートフォンケース、ぬいぐるみキーホルダーのようなものであったりと様々なため、自動改札を通る時の人の動作も異なるのが予想できると思います。

幅広い年齢層、電車を利用する状況、自動改札を通る時の動作、乗車券の形態などが異なるのをひとまとめに受け止めているそんな自動改札に「止められてしまう時ってどんな時」なのか、そして自動改札で止まらずスムーズに通るには?どうすればいいのか冒頭に戻りますが今回はそんな自動改札をユーザビリティ目線で個人的な解釈ではございますが考えてみたいと思います。

自動改札で止められる時どんな時?

主に通れない場合の状況はどんな時か調べてみました。

*電子カードの残金が少ない
 ・通る時に確認していない
 ・後でチャージしようとして忘れていた
 ・足りると思った
*電子カードのタッチミス
*別区間の磁気定期券を入れてしまうなどのカード間違い

などでした。予想通りの内容です。
悪気はなくても、一度自動改札が閉まるとしまっている状態が解除されるまでに何秒かのブランクが出来てしまう為、特に朝など忙しない時間帯ですと後ろのお客さんがつまってしまって、申し訳ない気持ちになってしまうのではないでしょうか。

「何とか改善方法はないの?」
「一言で言ってしまえば、通る為の準備を抜かりなくしておくこと!ですね。」

そうは思っていても、完璧に残金を把握し続けることは人間難しいでしょうし、「残金大丈夫だろう」「急がなきゃ!」など思ってしまったらそのまま自動改札へGOしてしまいます。
油断したらタッチミスも発生します。それでは一体どうしたら良いのでしょうか。

利用シーン2パターン

どんな瞬間に自動改札を止めてしまうのか、よくある利用シーンから改善、対処法をユーザビリティの目線で考えてみました。

1.電子カードの残金が少ないことに気づかないまま自動改札へ向かう

このパターンは比較的多くの方が経験されているのではないでしょうか。
自動改札を通る前に券売機で残金を確認してみる、のも1つの手ですが頻度を考えるとあまり効率的ではありませんね。

手軽にだれでもすぐ残金が少ないこと、改め電子カードのチャージ金額に気づくための気づきのポイントがあれば…と思い電子カードをまじまじ見たところ、チャージ金額の残金が表記されていたらユーザー的には認識がしやすいのではないかと考えます。

ところでカード式の金券を、お店で使用したことはありませんか?
使用するとカードに後どれくらいの残りがあるかカード自体に穴を開け、ざっくりですが目で見てわかる様に工夫されていますよね。例えばカードを手に取った時に、足りない分を現金で払う準備の目安にもなります。

このように今回、電子カードの「チャージ金額」が視覚的に分からないことが、原因の1つではないかと考えます。
それならば…

現在の電子カードで実現できるかは分かり兼ねてしまいますが、もし改善案としてユーザビリティ目線から提案をするならば上記でも述べたようにカード式の金券のように電子カード上で、いつでも確認できる視覚情報を、用意してあげることで今回の「電子カードの残金が少ないことに気づかないまま自動改札へ向かう」原因の内と考えられる、通る時に確認していない、後でチャージしようとして忘れていた、足りると思った等のことが消化できるかもしれません。

2.電子カードのタッチミス

「根本的に自分が気を付けることが早いと思われますが…」

気を付けていても発生するのがタッチミス。自動改札のユーザビリティも視野に入れながら考えていきたいと思います。
以下に自動改札を用意しました。よく見る自動改札です。

タッチミスが考えられる要因として次のことが考えられます。

1.電子カードが財布などに入っており、タッチパネル部分に照準が合いずらい。
2.電子カードの周りに物があり(別のカードなど)センサーが届かない。
3.タッチが素早すぎて、自動改札からのレスポンスが追い付かない。
4.人が先に歩きすぎている。
5.そもそも電子カードを間違えた
6.手がふさがってしまっている状態でタッチし辛くて

などなど。タッチミスする人の中には、歩いている間に出てきた障害物(自動改札)かのように見ずに、流れで通る印象も少なからず感じます。
――――いくつか挙げてみましたが、個人の意識を高める事で解決の道へと向かう可能性が高いものばかりですが、人間意識を変えるのはなかなか難しいですよね。

「そしたら電子カードを手に握りしめ、タッチパネルに獲物を狙うかのようにタッチしに行けばいいの?」

そうできたら間違いはないと思いますが、そんな神経注いで自動改札を通るのは大変ですし…疲れてしまいます。
それではここで自動改札のユーザビリティを違う目線から考えてみましょう。単純に「電子カードを認識する」領域を広げてみてはいかがでしょうか。

《1》タッチ領域を広げてみる
的を広げることでユーザーに余裕をもたせる

《2》タッチ部分に追加して側面でも判定できるようにする
電子カードが何かしらに妨げられているためタッチパネルに
反応しないところを立体的に構えることで対応できるようにする

受け身を増やすことで、もしかしたら対応できるのではと考えてみました。タッチパネルの部分は広げすぎると後ろの人と同時にタッチしてしまう可能性があるので、難しい部分もあるかもしれませんが…的が広がることでタッチミスは減るかもしれませんね。

さらに飛躍してみた

今まで、現実的な目線も含めて考えてきましたが、もしこんなことが出来たら画期的、近い未来こうなると便利だなというのも含めていくつか提案してみたいと思います。

1.タッチミスはご退場

タッチミスをした際その当事者があたふたして後ろがより、つまることがありますよね。なので入口は1つですがタッチミスをした人には再タッチを不可にし、右に抜けてまた後ろに並んでもらうシステムなんていかがでしょうか。
メリットとして、後ろがつまりづらくなること、並びなおすのが大変と感じることでミスをしないよう心がけるのではないでしょうか。また、タッチミスで自分はうまいこと自動改札を抜け、後ろの人を待たせるパターンも稀にありますが、そのようなことの減少にもつながるかもしれませんね。
デメリットとして、抜ける分の幅を取ってしまうところでしょうか…。引っかかってもちょっと恥ずかしい…

両方向から利用できると便利ですが、思いのほかシビアな改札になりました。

2.歩くだけでOK!

※エラーの解決は考え兼ねています。ご了承ください。
歩くだけで判定してくれるシステムはどうでしょうか。床に判定システムがあるので、手がふさがっていたり、歩行の補助を持っている方、車いすの方でも安心して通れるのではと考えます。
(電子カードをそのまま判定させるのか、スマートフォンなどの別の何かを判定させるのかは考えどころですね)

3.個々の自動改札をなくす!

※エラーの解決は考え兼ねています。ご了承ください。
いっそのこと個々の自動改札をなくし解放感のある自動改札を考えてみました。
未来感があふれていますが、例えばスマートフォンや何かしらの電子端末に定期などの情報はすでに入っており別区間を利用するときは自動的に加算され、電話料金と同時に請求されるというもの。チャージする必要はないですね。

最後に

考えれば考えるほど、今の自動改札が「入場者のスピード制限」「乗車可能かどうかの判定」「整列入場」などのユーザーに対しての安全性も含めた考えられたものである印象が強くなりました。
これらが保たれたまま、より便利かつ効率的なものが今後出てきたら、嬉しいですが!今は周りのことも考えつつ、スムーズな通行が出来るよう一人ひとり心掛けることが大事と思います。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

傘はどうして持ち主の手から離れてしまうのか

ふと気が付いたら、傘が無い!なんてことを経験したことがある人は意外といるのではないでしょうか。
置きっぱなし、取り間違え等様々なシーンが考えられます。

早速ではありますが、
「傘はどうして持ち主の手から離れてしまうの?」
「本人が無くしたからでしょう!」

と声が聞こえてきそうですが、今回はユーザビリティ目線で個人的な解釈ではございますが考えてみたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

無くなる時どんな時?

どういった場面で傘は手元からなくなりやすいのか少しばかり調べてみました。

・取り間違い
・破損
・紛失
・置き忘れ
・どれだか分からなくなった
・雨が止んだら傘の存在を忘れていた
・置き忘れたけど取りに行くのが面倒くさい
・落とした

などでした。大体予想通りです。
さらに言うと、電車内や公共の場での傘立てで、傘とサヨナラしてしまうケースが多いような気がします。

それならいっそのこと傘を離さず置かず持っていれば?手に括り付けてしまえばいいのでは?……うーん。そうしてしまえば無くなりはしませんがとても現実的ではございません。
無くさない様に気を付ける!……ことが出来れば苦労はしません。
では一体どうしたら良いのでしょうか。

利用シーン3パターン

どんな場所、どんな時に無くなってしまうのか、よくある利用シーンごとに改善、対処法をユーザビリティの目線で考えてみました。

1.電車内に置き忘れてしまう<長い傘編>

電車内の椅子の端っこに座っている人、または立っている人に多く見られることがあるのではないでしょうか。
気づけば傘だけがポツンと手すりにかけられているのを何度目撃したことか…。その場で気づいてあげれば、渡してあげることもできますが、なかなか難しいものです。

電車内では常に傘を手に持っていることを心掛けることができれば忘れない方法として手っ取り早いですが、人間なかなか意識を変えるのは難しいですよね。

……それでは傘の手元(持ち手のこと)に注目してみてください。
よくあるJ字になっている手元、改め曲がり手元、実はこれが電車内に傘を置き忘れてしまう原因の1つではないかと考えます。

この持ち手とても便利ですよね、持ち運ぶときに腕にスッとかけられ、傘を干すときにもひっかけられたり何かと便利です。
とにかく持たなくてもひっかけて使用することが出来るので、電車内で特に濡れた傘なんかを持っていたら、掛けられそうなところがあれば掛けて、少しでも手持ちを減らし優雅な電車移動を望むのではないでしょうか。

それでは、そのまま寝てしまったら、スマホなどに夢中になってしまったら、既に雨が止んだ後であれば等、傘の存在が薄くなってしまいますよね。そのまま降車時にさようならということになり兼ねません。

「じゃあどうすればよいの?
傘に鈴をつけて気づきポイントを作ればいいの?」

確かに無しではないですが原始的な方法でなく、傘の手元のユーザビリティを違う目線から考えてみましょう。持ち手がひっかけられる形をしているのであれば、そうさせなければいいことです。

寸動手元、折り畳み傘なんかでは見かける方も多いのではないでしょうか。この手元であればひっかけることはできませんよね。そのため必然的に手で持っていなければならないスタイルが確立されます。
こうすれば仮に手から落ちても気づきやすく、置き忘れの心配が改善されるかもしれません。

2.電車内に置き忘れてしまう<置き傘編>

置き傘も曲がり手元のものであれば、長い傘同様にひっかけられるので同様のことが起こり得る可能性がありますよね。
それなら、こちらも曲がり手元でないものにすれば良いのではと考えますが…

…が、置き傘は小さくコンパクトなため、長い傘と違って手元に関係なく、電車内の物置棚や椅子に置けてしまう場合があります。

これでは置き忘れてしまう可能性は重々にあります。それではどうすべきか。

「すぐにでも鞄に入れたくなるようにする!」

鞄に入れたくなるということは鞄に入れても特に気にならない、邪魔にならない状態が望ましくなります。
それでは仮に折りたたんだ後がもっと細ければいかがでしょうか。もし……キュウリくらいの細さに収まれば、鞄の中でもかさばることも少ないですし隙間に入りやすくなるのではと考えます。

細ければ上記の図のような、電車内の荷台に乗せることは傘自体が細くなることで隙間から落ちてしまう可能性があるので物理的にも難しくなります。また、置き傘が細くなることで全体サイズも小さくなり、椅子にポイッと置く行動も少なくなるのでは?と思います。

補足ですが、強度などの問題を考え調べてみたところ細い置き傘は実際にあるようですね!約3.5センチほどで強度も申し分ないようです。

3.取り間違い

公共の場の傘立てで、取り間違いによる紛失を経験された方は知らないだけで結構いるのかもしれません。
この場所に置いたと認識していても、類似する傘が周辺にあれば意図しなくても間違って持ってってしまい、後に気づくもどうすることもできない……など、個人が気を付けていても防ぎようがない部分もあります。美術館などのカギがついてる傘立てであれば万事解決ですがなかなかそうはいきませんよね。

「ではどうすれば、取り間違いに巻き込まれないのか。」

いっそのこと傘立てを使わない。ユーザビリティを提案します。


室内をぬらさず、荷物の1つとして持ち込めればおおよそ問題はないと考えます。それでは長い傘にも置き傘のようなカバーをあらかじめ付けた状態のものを用意する(販売する)といかがでしょうか。


傘ケースを傘に取り付けられるようにすれば無くし辛くなりますし、さほど邪魔にはならないのではないでしょうか。

ユーザビリティの観点から見ても傘ケースがあれば、余ほどのことが無い限り傘立てに入れる必要がなくなりますし、常に傍らに置いておくことが出来るのではと考えました。

これらはあくまでも私的な考えですが、こうであれば使いやすいなと考えるのはとても楽しいですね。
傘を忘れやすい人は色味の目立つものやあえて高いものを使用して意識を高めるのも効果の1つだと思います。

最後に

意識しなくてもこんな傘だったらたら、無くしにくいのにな……と考えるといろいろな案が出てきます。個人が気を付ければ一番早いですが、人間難しいものです;
実際、傘が手元から離れてしまうことを100%なくすことはできませんが色んな考えによって、減少させることはできるかもしれませんね。また、ユーザビリティをいつもとは違った目線で考えてみると傘だけに留まらず、意外な突破口があったりするかもしれません。
次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

文字の大きさと距離のレイアウト【利用シーン】

文字の大きさはディスプレイの大きさや種類、視認できる距離などに影響をうけるため、状況により変化させる必要があります。
今回はそういった利用シーンによって変化する文字レイアウトや大きさを考えます。


様々な大きさのディスプレイ

下記の様な大きさの違うデバイス向けクリエイティブを制作する場合、文字の大きさやレイアウトは同じではいけません。

理由は、デバイスによっては数メートル離れた場所から確認する利用シーンもあり、モバイルデバイスなどと同一のレイアウトでは文字の視認性が悪いからです。


「必然」と「適切」な文字サイズ

図のAとBはフィーチャーフォン向けのバナーサンプルです。

フィーチャーフォンの画面は3インチ程度と小さくさらに解像度も粗いため「文字の再現」と「可読性」を求めると、文字サイズはそれなりの大きさになってしまいます。

スマートフォンのようにきめ細かい小さな文字や画数の多い漢字の再現はできませんので、
バナー効果を上げるためにはバナーの全体を余白なく隅々まで使い、訴求を行います。

また、
Bのような文字サイズと余白を設けてしまうと、肝心の訴求文言は周辺の情報量と差異が無いため溶け込み、読まれる機会を失います。

したがって、実際によく目にしたAのような余白の無いバナーが必然と使われ効果を出しました。

次に、余白の無い表示物として、身近な電車の「車内案内表示ディスプレイ」を紹介します。

ディスプレイを見る距離は数メートル離れる状況ですが、扉上部の限られたスペースにディスプレイがあり、
扉から離れている利用者も確認できるように文字の大きさが優先され、ディスプレイ内にレイアウトの余白はなく、ぎっしりと可能な限り大きく優先度の高い文字が表示されています。

先程のAのバナーように、まわりの情報量に埋もれず、ターゲットに訴求を伝える為には、想定された利用シーン/環境での可読性がまず重要視されなければなりません。

あらためて「車内案内表示ディスプレイ」の周りに目を向けると、ディスプレイ外に適切な余白が設計されていることが分かります。

ディスプレイの中の情報表示としては文字(次の停車駅)を大きく見せる優先度で表示されてますが、
「車内案内表示ディスプレイ」自体の優先度と視認性はその周りの余白によって保たれているのです。

このような構成は、車両構造の影響とも考えられますが、色々な車両も確認してみたところ、「車内案内表示ディスプレイ」には隣接して広告物が貼りだされている構造は多くありませんでした。
もっとも、「車内案内表示ディスプレイ」内に表示ローテーションとして「PR映像」や「広告」が差し込まれているケースも増えてきておりますが。


余白が使えるスマートフォン

バナーに話を戻します。
CとDのバナーはスマートホンを想定したサンプルです。

フィーチャーフォンの3インチの画面から、4.7インチと大きな画面と倍以上のきめ細かい解像度となっています。
文字の大きさはフィーチャーフォン向けのサイズで十分な可読ができているので、なおざりになっていた「余白」を有効的に使うことができ、バナーへの目線の誘導に大きな効果を発揮しています。

Cのバナー構成は、フィーチャーフォンの環境では最適で効果を出していたのですが、スマートフォンの画面の大きさと繊細な文字表示の中では必要以上の大きさになってしまい、周辺情報量のバランスが悪く浮いてしまっています。
この状況ではCのバナー構成は利用者にネガティブな印象を与えてしまうのです。

こうして、スマートフォンの「画面の大きさ」と、紙印刷同等以上の「繊細な解像度(ppi)」を得たことで、フィーチャーフォンでは不可能であった「余白のデザイン」が表現できるようになりました。
つまりは本来あるべき「レイアウトデザイン」が、やっと出来るような環境が整ったのでした。


まとめ

クリエイティブを作る際、「キレイ」「カワイイ」「カッコいい」といった雰囲気は、最終的な表層制作をする工程で対応するもので、それを優先度高く真っ先に工程に盛り込んでしまうことは、伝わらないクリエイティブを生み出す原因となります。

ターゲット、需要、環境、状況、目的を踏まえ、
過剰にならない、利用者の利便性を考えて、
「大きさの優先度」「余白」を利用した「伝わる」設計を自身も注意していきたいものです。

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

家庭用ゲーム機 それぞれの魅力

こんにちは!ユイPです。2018年ももう12月…私もブログデビューして丁度1年が経ちました。あっという間ですね~。

さて、みなさんゲームはお好きですか?以前にもゲームに関係した記事を書いた通り、私はゲームが好きです。RPG、アクション、恋愛ゲームなどをよくプレイします。
世界には魅力的なソフトがたくさんありますが、ソフトだけじゃあゲームは出来ない。ゲームをプレイするためのゲーム機、今も昔も色々なタイプのものがありますね。人によって何でプレイするのが好きか、好みも様々だと思います。
今回はそんなゲーム機、中でも家庭用ゲーム機にはどんな特徴があってどんな魅力があるか、考えていきたいと思います!


★個人的な見解も含まれますので、それを踏まえて読んでいただけるとありがたいです。
★「家庭用ゲーム機」がテーマなのでアーケード、スマホ、PCゲームなどについては基本的には触れません。


家庭用ゲーム機は、大きくわけてこの2タイプにわかれます。

据置型

据置型ゲーム機とは、コンピュータゲームが動作する家庭用ゲーム機のうち、テレビと繋いで使用する製品の事を指します。
世界で初めての家庭用ゲーム機が発売されたのは1972年ですが、そのゲーム機は据置型でした。よくゲームの事を「TVゲーム」と称する事もありますし、パッとゲーム機を思い浮かべて1番最初に想像する形は据置のゲーム機な方も多いのではないでしょうか。

据置型は、最初の文の通りテレビと繋いで使用する事です。ではテレビと繋ぐ=据置にはどんな特徴があるかというと…

画面が大きい・画質が綺麗

なんといってもこれですね。もちろん使用するテレビやモニターのサイズや質によりますが…。
大きいTVでグラフィックの綺麗なゲームをやると、圧巻ですよね!映画を観ているような気分で世界観にどっぷり浸る事ができます。
実際にグラフィック重視のゲームは据置用のソフトで発売される事が多いように感じます。現在の主流はS社でしょうか。
プレイしている自分以外の人も画面が見やすいので、実際にプレイするのは苦手だけど見ていたい…!という場合にも適しています。

イケメンだって大画面!

本体とコントローラーが別

本体とコントローラーが別なので、ゲーム画面との距離感はユーザーが自由に決める事が出来ます。最近のものはワイヤレス対応しているので割とどんな格好でも出来ちゃいます。
背筋を伸ばして正座してやるもよし、あぐらをかいてやるもよし、ソファーやクッションにもたれかかってやるもよし!でも大事なシーンやグラフィックがすごいシーンだとついつい前のめりになって見てしまったり…。

映像に合わせてコントローラーが震えたり、自分の手の動きに連動するコントローラーがあったり…ゲームの世界への没入感は据置の醍醐味だと思っています。


他にも、据置機ではブルーレイが見れるものもあったり、映像配信サービスが見れるものがあったり、ゲーム以外の用途にも使うことも出来ます。
ただ持ち運びには適していないので、友達の家に持っていったりするのはまあまあ大変です。コンセントとモニターがなければ出来ないし、学校などでみんなでプレイするのは厳しいですよね。それに家に1台しかTVがない場合「アンタそろそろいい加減にしなさいよ!」なんて家族に止められた経験がある方もいるのではないでしょうか。
そんなシーンにも対応しているのが…

携帯型

携帯型ゲーム機は携帯可能なサイズに小型化された家庭用ゲーム機の事を指します。世界で初めて携帯型ゲーム機が家庭用に発売されたのは1976年です。据置の4年後ですね。
携帯型はその名の通り、携帯する事が出来ます。つまり、魅力は…

いつでもどこでもプレイ出来る

持ち運びが可能なサイズなので、家の中ならリビングに自分の部屋、外でも電車の中に学校に、どこでもプレイする事が可能ですね。
友達同士で持ち寄って通信や対戦!も盛り上がりますよね。例えば某モンスターをハントするゲーム、最新作は据置用ですが、それ以前は携帯機で色んな場所でやっていましたね~。
先ほど据置の部分で「割とどんな格好でもプレイできる」と書きましたが、どうしても出来ない格好が1つありますよね。それは…完全に寝転んだ状態でプレイすること。携帯型はそれが可能です。「今日TVつけるのめんどくさいな~起き上がりたくない~」という方にもぴったりです。私もそのタイプの人間です。

携帯機の画面が暗転した時あるある。

本体に色々な機能がついている

N社の主流の携帯機は画面が2つに分割されています。例えばRPGのゲームで上の画面がフィールド、下の画面がマップやメニューだったりしますね。このスタイルは、いちいちボタンを押してメニューを出したりする手間が省けてとてもいいですよね。
また、携帯機はある時期から「タッチ」の機能がついたものが多くなりました。画面2つのものもそうですし、S社の最新の携帯機(来年出荷が停止になってしまいますが;)も画面と背面をタッチする事が出来ます。それまでゲームはボタンを押してプレイするもの、だったのでタッチ機能は初めて触れた時はとても新鮮だった事を覚えています。発売当時はタッチを活かしたゲームもたくさん発売されましたね!


据置より安価で手に入るので、最初の自分用のゲーム機は携帯型だった!という方も多いのではないでしょうか?
やはり画面サイズが小さい分画質などは多少据置よりは落ちてしまいますが、携帯型向けのソフトにはグラフィック重視というよりもゲーム性重視のものが多いように感じます。それに最新のものは十分に綺麗な画面ですよね。
ただ携帯型はコンセントに直接繋いでいないので、充電なしで永遠にプレイする事は出来ません。持ち運ぶ場合は寝る前にちゃんと充電しましょう。また寝転んでやるのは楽チンですが目にはよろしくないので、座ってある程度距離をとってやった方がいいですね…。

あるあるその②。顔面落下にはご注意。


とまあ、ここまで据置型と携帯型のそれぞれの特徴を紹介してみましたが…。
この2つの決定的な違いの一つに「持ち運べるか持ち運べないか」というのがありますね。TVの大きい画面でも出来るし、携帯で持ち運ぶどっちも出来るやつがあったらなあ~便利だよなあ~と思う私が数年前までおりました。そう、数年前まで…。
某ゲーム機の発売により、家庭用ゲーム機は「据置型」「携帯型」に加えて新しく、

ハイブリット型

という、据置と携帯をフュージョンさせたゲーム機が登場しましたね…。

そう、こちらのゲーム機です。
TVに繋げばTVで遊べ、TV用のアダプターから外せば携帯型にもなるというまさに次世代のゲーム機です。コントローラーも様々なタイプがあり、自分にあった形で遊ぶことが出来ますね。それにこれならTVが家に1台しかなくてお母さんに怒られようとも、携帯型にすればゲームを続行する事が可能ですね。
私はよくTVでプレイして「ちょっと疲れたな~」と思ったら携帯型に移行する、というのをよくやります…。

両方のいいとこどりした最強体では?と思いますし、実際とても素晴らしいゲーム機ですが、発売会社の説明を読むと「既存の据置型の範疇には入らないゲーム機」ではありつつも「携帯型としての利用も出来る据置機」という位置づけだそうです。分類するとすれば、どちらかといえば据置よりなんですね。
確かに携帯型にはなりますが、持った感じは元々携帯型のゲームよりはやっぱり大きいし重めです。片手では持てない。

でも早く進めたいとついつい持ち歩いたりしちゃうんですよね~。

結論:適材適所
据置にも携帯型にもハイブリット型にも適したシーンがあり、どの型にも魅力があるという事です。


今世の中では、スマートフォンのゲームの市場がとても大きく、昔に比べて家庭用ゲームの需要は少し減ってきたのかなと思います。実際スマホのゲームは手軽に出来ますし、無料で遊ぶことも出来るし、グラフィックやシステムのレベルも家庭用と遜色のないものも多いです。もちろん私もスマホゲームもやっています。
でもスマホゲームにはスマホゲームのいい所があり、家庭用ゲームには家庭用ゲームのいい所があります。

今回の記事は誰でも気づくような当たり前の事を書いています。ですがこうして改めてそれぞれの特徴を見直す事で、どのゲーム機も愛し、色んな形でゲームを楽しんでいきたいな~と書いている私は思えました。なので読んでくださった方にもそう思って頂けたら嬉しいです。
今後家庭用ゲーム機にどんな進化があるのか、スマートフォンの市場もどこまで広がっていくのか…VRなんかも増えていっていますし、いつかVR MMORPG…S●Oも夢じゃないかも…未来が楽しみですね!


以上、ユイPがお送りしました。
今の季節はちょうど、ゲームが最も売れると言われるホリデーシーズンです。全国のサンタさん、頑張ってください。
みなさん今後とも楽しくゲームをプレイしていきましょう~それでは!

★ゲームの事もたまにツイートしてるかも?
デジマースブログ公式Twitter

スマホと老眼_デバイスまでの距離とユーザビリティ/Webデザイン

驚愕ですが、15歳を過ぎると既に「老眼」の症状が進行しているそうです。

私はUI、ユーザビリティに関わっていますが、スマホなど近くが見えない老眼症状を感じる年齢になり、毎朝茶碗に盛られたお米にも焦点が合わず経験と感覚で食事してたりします。

そこはポジティブに受け止めて、自身でもある団塊ジュニア世代(第二次ベビーブーム世代)の大きなターゲットに向けたユーザビリティを考えてみます。


スマートフォンの画面

私の場合、画面との距離は30cm程度で持つとピントがハッキリとします。

一般的に近点距離の年齢別の目安として、
20歳で15cm
30歳で21cm
40歳で33cm
50歳で60cm
60歳で150cm

以上の距離が必要とのデータもありますので安定して進行しているようです。

下記はiPhone6系の画面にそれぞれのサイズの文字を表示させています。
※一部ブラウザの基本仕様により、10pxより小さいサイズはCSSで設定しても10pxで表示されてしまいますので、最小サイズは10pxに設定

⇒スマホでの実サイズ表示はこちら

確認してみると、10pxの文字は自身には可読性が低いと感じられます。

40代から老眼の症状が気になってくるといわれておりますが、
目の負担により、肩こり、頭痛、吐き気の症状があり仕事に支障をきたします。

ですが現実問題として老眼鏡をかけてスマホを見る行動について、外出中は特に難しいと感じています。

スマホの画面表示の場合は、優先度が高い部分での10px、12pxの文字の運用はターゲットにより控えるべきですが、
弊社の「フォントサイズ運用ガイドライン」を確認すると↓

優先度が低い訴求部分で10px、12pxの文字が運用されております。

メインターゲットにもよりますが、年齢に応じたCSSを使い分けるのも大変な手間なので、対象利用者は端末の文字サイズを「設定」から「標準⇒拡大」に変更する勇気ある決断が必要です。


混雑率200%~の車内

フォントサイズを大きくするなど物理的な対応を行い何とか乗り切れたとしても、どうにもならない状況が日々の通勤時に発生します。
「混雑率200%~の車内※」
(※週刊誌程度ならなんとか読める)
です。

主観では満員電車で必要外のスマホ利用は控えるべきと考えますが、
混雑率200%を超えてくると、車内で他の乗客と適切な感覚を確保する事は難しく、
その利用シーンではスマホ画面との距離は20cm程度まで近くなる状況になります。

そのなかで老眼の場合、ピントが合わず30cm以上距離をとる必要が出てきます。

物理的に無理があり他の乗客の迷惑となりますので利用者はスマホの使用を控えましょう。


大画面テレビ

老眼より近視の影響もありますが、
視聴距離が2mを越える4Kや8Kの50インチ越え大画面テレビのきめ細かさを認識をするためには、画面に近づく必要があるため高解像度化の恩恵がありません。

そんな状態で4Kの恩恵を得られるのは視聴距離が40~60cm程度と短いPCの画面など24インチ前後のモニター/ディスプレイです。


サービス側のユーザビリティ配慮

 
たとえば利用者が、書き方がわからない漢字を調べる場合

ブラウザに読みを入力。
・「忖度」…画数が少ないのでや文字が小さくても構成が判断できます。
・「薔薇」…この画数は厳しいです。

状況によって利用者はピンチ操作で画面表示を拡大します。
したがって、サービス側での配慮としては、10pxや12pxの文字サイズの運用を避けつつhtmlのメタ設定では、

<meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no" />

この記述内の
「user-scalable=no」部分を設定さえしなければ、利用者はピンチ操作で任意のページを拡大縮小できるようになります。是非配慮をしてあげてください。


その他の配慮

紙に印刷して展開する細かい数字などの資料ですが、
若い方には読めても、歳を重ねた方には大変な苦痛が起き、目が疲労して頭痛、肩こり、吐き気の症状があらわれます。
是非配慮をしてあげてください。


まとめ

老眼のユーザビリティ対応

・~10px、12pxの文字使用は避ける
・HTMLメタ内「user-scalable=no」の運用は避けピンチ操作に対応する

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

Featured Video Play Icon

左利きの視点から見たユーザビリティ

こんにちは、ユイPです。毎日暑いですね。平成最後だからって夏頑張りすぎじゃない?

突然ですが、あなたの利き手は右手ですか?左手ですか?おそらくほとんどの方が右手だと思います。
左利きの人口は全世界で約11%だそうです。100人いたら11人。多いか少ないかで言えば少ない方ですよね。
ところがどっこい、私ユイPは左利きです。お箸を持つのも字を書くのも絵を描くのもボールを投げるのも左手。スマホを持つ手は右です。

みなさんも一度はネット上で「左利きは●●が不便~!」みたいな話を見かけたことがあるのではないでしょうか。確かに世の中は右手を使う事を前提に作られているものが多いので正直不便に感じる事も多いです。
でも不便な事ばっかりじゃなくて、利点もあるのでは?そもそも今右利きを前提に作られているものも、少しの工夫で左利きにも優しくなるんじゃないかな?と考え、今回は左利きである私の視点から身の回りに溢れるもののユーザビリティについて書いていきたいと思います。
※決して「左利きってほんと不便なの!配慮してよ!」という愚痴をぶつける記事ではありません。


1.改札

改札でICカードをタッチしたり切符を入れる場所は右側ですよね。右利きの方はおそらくみなさん右手を使う方が多いと思います。私も無意識下では左手でICカードを持ってしまうので手をクロスした状態でピッとやります。もう慣れてしまいましたが…。

もしも改札が、両側どっちにタッチ(切符)してもいいよ!という設計になったら理想的です。

コストや事故など色々考えるとなかなか実現は難しいと思いますが。

2.スープレードル

ユイPが個人的に1番左利きでストレスを感じるのがこれです。ファミレスのスープバーなどでよく見かけるこやつ。
この写真のものは丸いお玉型をしているのでまだそこまで使いにくくないのですが、お店にあるもっと細くて先が尖ったタイプのやつ…(写真が用意出来なかったのでこちらから)使いづらさが最上級です。仕方がないので右でいつも使いますが、注ぎにくいのでこぼしてしまったりする事もあります。

なのでどちら側からでも注げるように、両側に注ぎ口があるレードルがあったりしたらいいなあと思います。

左利き用も売っているので自宅ではそれを使うしかないですね。

3.ハサミ

どうしようもない。
左利きハサミを常備するか、右で扱えるようにするしかない。私もハサミは右で使えます。右利き用でも普通に左手でも切れるやつあるんですが、切れないやつと何が違うんでしょうね?

4.お菓子の切り口

お菓子の切り口って左手で持って、右手で開ける事が想定されているので左側に切り込みが入っているものが多いです。なので左手で開ける場合裏返して開ける事が多いです。開ける事に支障はありませんが、切り口のガイドが見えないので切り方を失敗してしまう事もなくはないです。

両側どちらからも開けられるものだと嬉しいです。

5.電話機

会社でおなじみ!電話機。

左でとって右手でメモなどが出来るよう、左側に受話器がついていますよね。左利きは右でとって左でメモします。私も会社のデスクでは右側に電話を置いていますが、もしこれが位置固定で左側にしか置けなかったら…手がクロスしてメモが取りづらい。
なので受話器は上側にあったりすると平等かもしれません。

昔なつかしのこの形を更に改良していけば使いやすそう。

6.スポーツ

体育のキャッチボールとかだとペアの相手に嫌がられる事もありますが、勝負の世界だとレフティって有利とも言われますよね。これは左利きのメリットだと思います(私はスポーツ苦手なのであまり感じたことないです)。
左利きの人はおそらく利き足も左利きの人が多いですよね。サッカー選手でいうとメッシでしょうか。

7.銀行とか役所にある固定されたペン

(手作り感の強い写真ですみません)
紛失や盗難防止なのでしょうが、右側に固定されている事が多いですよね。この固定している紐やチェーンの長さが短いと書きづらい…。

これはシンプルに真ん中に設置する、そして紐は長めにしておいてほしいです。

8.楽器

私は学生時代左利き用のベースを弾いていました。まず左利き用の楽器を扱っているお店はあまり多くありません。そして左利き用を使っていると「あ、ちょっと貸して~」と友達に借りる事も出来ませんでした。
右も左もわからない初心者なら、一般的な右利き用で始めるのもアリだと思います。かつて私も楽器屋さんのお兄さんにもそう言われました。
(それでも当時の私は好きなアニメの推しキャラクターがレフティのベーシストだったという理由で左利き用を買いました。世界のポール・マッカートニーもレフティ)

9.キーボードとペンタブとマウスと私

これはペンタブで絵を描く方限定の悩みだと思うので、伝わりにくい方には申し訳ありません。

左手でペンを持っているとキーボードのCtrl+Z(を始めとした一般的なショートカットキー)が押しにくい!

カスタマイズ出来るタイプのキーボードやワイヤレスだといいのですが、普通に設置されているものだと右手がつりそうになります。
Photoshopなどはショートカットキーもカスタマイズ出来るのでそういった所で対処していくしかありません…。

ですが、左手でペンタブを使っている時にも利点はあります。
そう、それはマウス。

マウスは右という左利きさん、私もですが身近にも多いです(マウスも左だわ…という方がいたらごめんなさい)。
マウスが右だとペンタブを左手で使いながらマウスも握っていられるんですよね。これはとても利点だと感じています!

10.ノート

横書きのノートは左手の側面が確実に真っ黒になります。

ペンだとにじんでしまったり…これはもうどうしようもないです。にじまないボールペンが好きです。
またリング式のノートやファイルも手にリングが当たって書きづらいので、私はこれは取り外しの出来るルーズリーフを使って対処していました。会社のファイルなども出来る限り取り外しの出来るものだと嬉しいですね。

ただし唯一右利きに勝てる所があります。それは「縦書き」。

身近な所でいうと国語のノートでしょうか。これはものすごく書きやすいです。

11.左利き=天才じゃない?という風潮

世界の名だたる偉人には左利きがとても多いです。レオナルド・ダ・ヴィンチも、ミケランジェロも、ピカソも、アインシュタインも、ニュートンも、エジソンも、ベートーヴェンもみんな左利きです。左利きの人は右脳が発達しているから、何かに長けていることが多い…という説がありますね。
ですが私は左利きでも今のところ何も発明していないので凡人です。
「左利きなんだ!なんかかっこいいね!」と言ってくる方たまにいますが、反応に困る。


というわけで、いくつか紹介をしてみました。いかがでしたでしょうか。
不便な点も多いですが、メリットがあるものもあれば、自分なりに改善できる点、世の中全体で改善して頂けたら使いやすくなりそうなものもありました。

世界の89%は右利きなので、多い方に有利な世界なのは当然だと思います。決して左利きにもっと配慮しろ!なんていうつもりはありません。正直私は日常生活を生きる上で左利きであることにそこまでストレスや不便さを感じていません(ここまでこれだけ色々書いたのに)。

ですが今回の利き手の話に関わらず、多い方だけを優先するのではなく少ない方に対しても少しでも配慮をする事が、デザインや開発をする上で心に留めておくべき大事な事なのではないでしょうか。

とりあえず左利きの人が食事の席で人の左側に座りたがる事を許してください。

さもユイPが人類の左利き代表のように書いてしまいましたが、そんなわけはないのでこういう意見のやつもいるんだなあ~という気持ちで受け止めて頂けたら嬉しいです。
それではまた次回!

右手で書きました。


★ほぼ毎日更新中!
デジマースブログ公式ツイッター

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

こんにちは、はらです。
私は前回エレベーターの「開く」「閉じる」ボタンのアイコンは紛らわしいという記事を書きました。

その記事では「なぜ紛らわしいのか?」「こうすると良いのでは?」など、あれこれ語ったにも関わらず、実際に新しいアイコンデザインは考えませんでした。

すると、やはりと言いますか…「あれこれ語ったのなら究極のアイコン作れるよね?」という声が上がりました。(震え声)

という事で今回、私が思う理想の「ひらく」「とじる」ボタンを実際に制作したいと思います。
エレベーターのボタンに関して現在はこうだという定量的な表現ができないので、デザイン上必要な条件を満たしていくという方法で最良の答えをみつけていきます。
この記事を書き終える頃にはきっと、とてもわかりやすい「ひらく」「とじる」ボタンが完成しているはずです!(震え声)

制作する上で注意した点

前回の記事を参考にしながら、制作する上で注意するポイントをまとめました。

1.ひらくボタンが優先されているか?

「ひらく」ボタンはドア挟み防止という安全上の理由から「とじる」ボタンより優先度を高く設定する必要があります。今回は色やアイコンの形状により優先順位を明確にします。
(開きたいと思った時に「とじる」ボタンに目線を向けてしまうとそれだけで時間を無駄にしてしまうので優先順位を明確にする事は大切ですね!)

2.色使いは適切か?

エレベーターの「あける」ボタンに色が付いている場合は緑色が使われています。
目立つので赤では?と思った方もいらっしゃるかもしれませんが、赤色は機械に使用すると非常用ボタンや緊急連絡ボタンなど「緊急」を連想させてしまうため、ボタンに利用すると押す際にためらいが生じます。また、焦りも増徴させてしまいます。黄色も同じように使い方次第で警告や注意喚起を連想させるため普段使いのボタンに使用すべきではありません。
緑は安心感、落ち着き、緊張の緩和などをのイメージに繋がります。機械に使用すると、進む、平常運行、作業完了、準備完了、充電完了、といったような安全なイメージ繋がります。以上の事からボタンを目立たせるという目的に使用する色は「緑」が良いといえます。

3.一目見ただけでアイコンの意味が理解できるか?

エレベーターのアイコンが抱えている問題はコレですよね…。一目見ただけでアイコンの意味が理解できるかという問題。ボタンが「ひらく」か「とじる」かを判断する時間は4秒前後のため当然アイコンは一目見ただけで判断できるようになっている必要があります。アイコンに対し過剰な装飾を加えたり、余計な立体感を加えると情報量が多く人によって処理に時間がかかってしまったり、解釈に違いが出てしまいます。いかにシンプルにするのかが重要です。今回は一つの記号に対し2つ以上の情報を与えないよう意識して制作を行います。

4.文字の表現は適切か?

年齢や国籍の事を考えるならば文字表記なしで伝わるのが理想ですが、前回の記事で文字に関しても触れたため今回は文字による補足も加えます。その文字表記に関して漢字は絶対にオススメしません。いわずもがなですが、「開」「閉」はとても紛らわしいです。焦っていない状況でも間違えます。文字を載せる場合はひらがなで、「ひらく」「とじる」がもっとも間違えにくいです。「左右」もそうですね「ひだり」「みぎ」と書いたほうが間違いを減らす事ができます。

この4項目を満たすと、わかりやすいアイコンになります。
それでは早速、上記のチェック項目を基に制作して行きたいと思います。

実際に考えてみた

良いと思えたもの

いろいろ迷いましたが完成!

もうすでにありそうですね…分かりやすくするために必要な4項目を全て満たしているので、押し間違いの発生率を下げることができる…はず…です。


「ひらく」ボタンのサイズを大きくしなかった理由

利用シーンあるいはユーザーの属性によって、どちらのボタンを重要と捉えているのかが変化するため、今回の記事ではボタンサイズを統しました。

介護施設や病院など判断や動作に時間が必要な方の利用が多いと考えられる場合は「ひらく」のボタンサイズを大きくするべきだと考えております。

「ひらく」を大きくする事は、目立たせる手段として大変効果的なため、サイズ感に関しては大変迷いましたが、今回は「ひらく」を目立たせるのではなくどちらが「ひらく」か判断を早めるという考えのもと制作を行ったため、サイズを統一いたしました。

また、「ひらく」を大きくする事によって、階数ボタンとの優先順位が変化し、階数ボタンよりも先に「ひらく」ボタンに目線が向かう可能性があると考えたためサイズを統一いたしました。

最後に…。

いかがでしたか?結局ありそうな形に収まりましたね…。
ひらくボタンは安全上必要な場合がありますが、とじるボタンは最悪無くても問題ありません。ですので閉じるボタンを削ってしまうのも手かと思います。とじるボタンが無ければ、ひらくボタン一択になり、迷う要素はありません。海外ではとじるボタンは無い事が多いそうです。
ただ、日本のUIは丁寧&補足詰め込みが大好きなので、削ったところで「このエレベーターには閉じるボタンがありません」なんていうシールが張られてしまいそうですね!
手でとめるというのも究極ですよね!何も迷いません。物理的にとめて開く…究極に直感的です。ただ、挟まると言う危険と恐怖がありますので良くはないですけど…。
このボタンの問題、完全な解決難しいと思いました。人が人である限り…。

ちなみに…アップル銀座のエレベーターには操作ボタンが全くありません。

それではまた。

(はら)

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

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

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

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

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


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

左ですね。

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

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

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

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

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

なぜ間違うのかを考える

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

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

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

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

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

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

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

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

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

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

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


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

(はら)