電子書籍のススメ【電子書店のUI・UX】

こんにちは、ユイPです。
夏もそろそろ終わりですね。今年は暑くなるのが遅かったので、いわゆる夏!は一瞬だったように思います。

みなさんは、書籍を読む時に「電子書籍」を利用する事はありますか?
有名企業が電子書店を運営していたり、専用の端末を出していたり、近年スマートフォンやタブレットで書籍を読む文化が普及しています。特に「漫画」に関しては電子の売り上げがどんどん伸びているそうです。
「いやいや、好きな本は紙で持っておきたいでしょ!電子はちょっと!」そんな方もいるんじゃないかと思います。私も少し前まではそうでした。ですが最近は「電子書籍ってすごい便利じゃない?」という事に気づいたので、電子書籍で漫画を読む事が増えました。

という事で今回は、電子書籍の便利さ・メリット、併せて電子書店のUIなどについても紹介していけたらと思います。


読みたいと思った時にすぐ読める

「今見たアニメめっちゃよかった!原作漫画なの?すぐ読みたい!」

例えばこんな時。電子書店なら24時間いつでもどこでも、品切れ取り寄せなしで読むことが出来ます。
「気になった時にすぐに手に入る」ってすごく大事で、例えば上記の画像のような状況の場合、手に入るまでに時間がかかるとちょっと熱が冷めてしまったりするんですよね…「昨日の夜はすごい読みたかったけど…やっぱいいかな」ってなったり。
その点電子書籍ならネットさえ繋がってればすぐに手に入るので気になった瞬間、熱が冷めないまま読める!
「紙派」の方も、とりあえず電子で読んでみてめちゃくちゃよかったら紙の本を買ったらいいんじゃないかなと思います。お金はかかりますが…好きな作品は本棚に並べたい気持ちもわかるので、電子をまず取っ掛かりにしたらいいんじゃないかなと思ってます。

どこでも読めて場所を取らない

「電車でも読みたいけど…持ち歩くのは大変」
「もう家に本棚の空きがないよ~」

この悩みも電子書籍ならスマートフォンorタブレット一つで済むので即解決。
でも外で読むと通信料めっちゃかかるんじゃない?と思うかもしれませんが、多くの電子書店ではアプリを利用して読む事が出来るので、事前にwi-fi環境でアプリにDLしておけば通信料も抑えられますね(携帯の空き容量は必要になりますが)。電波のない山奥でも読める。
本棚に空きがない問題も本好きな方なら必ず直面する問題だと思いますが…例え100巻超えの名作でも、電子書籍なら場所を取りません…!

導入話が無料で読める

続き物の漫画など第1話が無料で読めたりタイトルによっては複数話無料で読める場合もあります。
無料の導入話がある作品を読んでいたら、思いがけず名作に出会い続刊も読みたくなって買ってしまったり…。運命の出会いはどこに落ちているかわかりません。
本屋さんで買うとそのような事はないので、お得に購入する事が出来ますね~。本屋さんで買うよりも作品への敷居が低くてお手軽な所も電子書籍の魅力だと思います。

単話配信で早く読める

漫画って、基本1冊に数話分のストーリーが入っていてまとめて1冊のコミックスになっている…そんなイメージですが。
電子書店では「1話ごと」に売っている作品もあります。巻よりも値段も安いです。雑誌で連載している作品の最新話を、コミックスになる前にいち早く読めたりもします。
なんなら最近は紙にならずに電子のみの配信でヒットしている作品もあります。ツイッターなどのSNSでも漫画がバズる事が多いですし、現代の漫画のあり方って多様だな~と思います。

その他のいいところ

・紙の本で絶版になった作品が配信されている
古い作品などが電子でのみ配信されていたりします。懐かしの作品も最新機器でお手軽に読めますね。

・本屋さんで買いにくい作品も、電子なら恥ずかしくない
本屋さんで買うのが恥ずかしい場合は電子書籍がおススメです。
実際電子書店ではそういう作品が紙よりもプッシュされていたりしますね。

だがしかし!デメリットもある

・貸し借り、譲渡が出来ない
「この作品すごいよかった!友達にも読んでほしい!」という時も友達に貸す事が出来ません。
読まなくなったから古本屋に持っていこう~とかも出来ないですね。まあ場所を取る事がないので処分に困る事はありませんが。

・簡単に買えすぎるので買いすぎてしまう
お手軽なのはとてもいい事ですが…ついつい買いすぎて請求額が大変なことになったり…。
読みたいと思った気持ちは大事に、けれども買う時は慎重に。


以上、ユイPによる電子書籍のススメでした。
ご紹介した通り、電子書籍は便利ですが、個人的には紙の本も廃れてほしくはないです!電子に電子のよさがあるように、紙には紙のよさがある。紙をめくる感覚が好きだし、紙の本で持っておきたい作品ってあると思うので。
今後も適材適所で、紙と電子、上手く読み分けていけたらな~と思っています。

ではでは、ユイPでした。

「HAPPY!コミック」など多彩なサービスを展開してます↓
デジマース_コンテンツ

ツイッター↓
ユイP@デジマースブログ

ドロップシャドウ(影)とボカシ/濃淡の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デザインの意識次第なのではないでしょうか。

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

押したくなるボタンとは?UI目線で考えてみる

前に、「押せる画像・ボタンについて考えてみる」記事を書きましたが今回はそれに伴い、押せる認識がしやすくなったボタンを、ユーザーに押してもらえるようにするにはどうすれば良いのか。
気を付けるコツを個人的な解釈ではありますが書いていきたいと思います。

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

おさらい

サクッと簡単に「押せる画像・ボタンについて考えてみる」で紹介した内容をまとめてみました。

■押せない画像との差別化(左右のスペース)
・押せるボタンは画面横いっぱいまで使用せず画像の左右のスペースをあけるとべたっとした状態から浮き出てくるので差別化がしやすい。

■一目で押せると分かる様にする。
・三角マークで遷移できることを視覚化。「こちら」などのダイレクトな文言でも可。
・押せるものは角丸など。

■押せる画像は大きすぎると押せる=ボタンの認識が弱くなりやすい

■押せる色と押せない色をしっかりわけて設定することで、一目でボタンと認識しやすくなる

※細かく読みたい、気になる!方はこちらから読めます。
押せる画像・ボタンについて考えてみる

押したくなるボタンとは?①

上記のイメージ画像をみて「ボタン1」を押す際、分かり辛く、押し辛く感じる方が多いのではないでしょうか。
ボタンがギュッとつまっているので認識するのにも少々時間がかかってしまう気がします。

この場合どうすれば、ユーザーに押して貰える分かりやすいボタンに
なるのでしょうか。考えていきたいと思います。

・押せないものとの差別化、押せるマーク(>)を付けるなど、「押せるものである」と認識できる作りになってはいるが、ボタンの上下左右幅が狭く圧迫感がある。
・ボタンどうしが近いため誤タップを引き起こす可能性がある。
・引きで見た際に1つの塊に見えてしまう。

■ボタン周りのタップ領域を確保する
・ボタン周りがすっきりし、ボタンそのものがしっかりと見え、視認性がアップ。
・ボタンが上下左右並んだ際にも、タップ領域を確保することで誤タップ、押し辛さを回避。

個々のボタンをしっかり独立させ、ユーザーの目にとまり、押しやすい環境を作ることで必然と押してもらえる押しやすいボタンになるのではないでしょうか。

押したくなるボタンとは?②

上記のボタン、押せるマークがあるのでボタンなんだなと認識はできますが、押せるマークが無ければ、ボタンと認識し辛くないでしょうか。どちらかというとボタンではない別の画像に見えてしまいます。

どうしてボタンではない画像に見えてしまうのか、早速ですが見ていきましょう。

・ボタンに華美な装飾があることで見た目の情報量が多く、ボタンと認識し辛い。
・その他のコンテンツとの差別化がされ辛い。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

■必要最低限の情報量でシンプルに分かりやすく
・目的があって華美な装飾があるのであればこの限りではございませんが、装飾が強すぎるとサイト内のコンテンツとの差別化がし辛くボタンが埋もれてしまう場合も考えられます。

そのボタンの目的は何かを考えた上で、複雑にしすぎず伝わるものを用意する必要があります。ひとめ目につくだけでユーザーは装飾を重要視していません。

押したくなるボタンとは?③



パッと見て、フルーツの特集のバナーということが分かりますね。
視認性も悪くなく問題なく押せそうですが、よりユーザーへ伝わるものと考えたとき、上段の写真が入ったものが伝わる気がしませんか?

■上の写真が入っているもの
・訴求文言を補足するように写真のイメージが入っているため、今回の場合、実際にどんなものが「旬なフルーツ」に該当するのか、ユーザーがイメージしやすい。
・イメージが浮かぶと、ボタンを押して進む次のステップに入りやすく行動もしやすくなり結果的に押しやすいボタンになりやすい。

レストランなどのメニューで文字だけ書かれているよりも、合わせて料理の写真があった方が「これ、おいしそう!食べてみたい!」となりやすいですよね。

■下の写真が入っていないもの
・訴求文言の視認性は良いが写真イメージがないため、訴求文言を見ても、瞬間的にイメージはし辛い。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

押したくなるボタン

押したくなるボタンとは、目に見える形や配置の仕方など以外にも大切なポイントがございますので紹介していきます。



大半の方はAと答えるのではないでしょうか。
この場合、ユーザーメリットとして「無料」と書いてあるバナーの方が敷居が低くなるため、結果的に押しやすいボタンとなります。
もしも、ユーザーのメリットになる文言があれば簡潔に追記してあげた方が押しやすくなると考えられます。



大半の方はBと答えると思います。
この場合、スタンプが貰える点では同じ意味合いですが、そのための行動がBの方が負担が少ないですよね。Aの方は20個もアンケートに答えなければならないため、面倒くさいと感じる人が多そうです。
せっかく訴求している内容ですからユーザーに触れてもらいたいものです。そのためにはユーザーの視点にたって、スルーされない、見てもらえるものを考える必要がありそうです。



大半の方はAと答えると思います。
この場合、どちらも同じ意味をもつボタンになりますが、Aの方が、スッとボタンが目に入ってきますよね。
Bの方はボタンのサイズと載せている文言のバランスがおかしく、視認性、可読性が低下しています。
『押したくなるボタンとは?①』に記載しました“ボタン周りのタップ領域を確保する”のと同じで文言周りの視認性、可読性を保つための領域を確保する必要があります。

最後に

今回あげた内容は、ほんの一部にすぎませんが、ユーザーに押して貰えるボタンとはどんなものかを考えた時に、でてくるものは考えれば当たり前のことばかりです。逆に当たり前だからこそ見落としやすい部分でもあるので、運営者の好みではなく常にユーザー視点にたって考えることが大切になってきます。

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

あると回したくなるカプセルトイの魅力

量販店や、ホームセンターなど至る所にカプセルトイ(総称)のマシンがあります。
見つけると、何か良いものないかな~と目を向けてしまいますよね。私なんかは通りすがり必ずチェックしてしまいます。そんなカプセルトイの魅力を今回はカプセル物に絞って追求してみたいと思います!

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

魅力5

カプセルトイの魅力を個人的な解釈で紹介したいと思います。

1.ユーザーメリットも!

「カプセルトイって小さい子が遊ぶものでしょう?」
いいえ!老若男女関係なく複数人でも1人でも楽しめる万能マシンであると私は思っています。
基本的に現代ですと100円~500円あれば気軽にカプセルトイが楽しめます。主流なのは200、300円あたりでしょうか。
カプセルトイ日本初登場の1965年では10円~が主流でしたが、様々な時代背景の移り変わりを経て現代価格になっています。
その分クオリティーもアップしていますね。
今では偶にコンビニ等に置いてあるガムのマシンですと100円以下でカプセルトイを楽しむことができます。

上記でも書きましたが100円から遊べるため、あっいいなというものがあればついつい回してしまうものです。

2.種類の豊富さ

飾り物から文房具、植物、スマホ関連、時計など実際に使えるもの、アニメグッズなどなど、これが有ったらいいのになと思うものは今では、たいていカプセルトイで商品化されています。商品自体の発想も面白いです。(例:実際の物をミニチュア化した巾着等)
この種類の豊富さが老若男女問わない理由の一つではないでしょうか。
1つの商品ラインナップが大体5種くらいから多いものですと30種を超えるものもあります。

3.ドキドキわくわく感

各々のマシンに展開されている商品ラインナップを見てあらかた欲しいものが決まると思いますが、回して商品が出てくるまでのドキドキ、わくわく感が楽しいのです。
欲しいものが一度で手に入れば素直に嬉しいですし、欲しいものが出てこない、同じものが立て続けに出てくるなんてことはよくあることですが、その分欲しいものが手に入ったときの喜びは計り知れませんね。
これは個人的な見解ですが、必ずしも欲しいものが手に入るとは限らない中、回す際に「きっと当たらないよ~(でも当たるかも)」と不思議な感覚になるのも一種の特徴な気がします。

4.コレクション魂

日本人にはコレクションをするのが好きな方が多いですよね。
カプセルトイの商品は1点だけでも十分満足で出来ますがそんなコレクション好きの気持ちに応えるかのように、1点物で完結しない集めて1つのものになるシリーズが最近増えています。物によってはかなり大きなサイズで出来上がったり、シリーズ物で並べたときは圧巻です。
一度の価格がそれほど高くは無い為、その安さからもコレクションがしやすいと思われます。
まぁ、同じものが続けば別の話ですが……

5.クオリティーの高さ

手に取れば一目瞭然、カプセルトイのクオリティーは年々上がっている気がします。200、300円で細かな着彩や精密な設計がされています。もちろん量産物、手作業だったりするため中には、あれれ……と思うものも紛れていることは稀にありますが、それでもこの値段であのクオリティーが出せているのは凄いことだと思います。

商品の形態

販売商品によって出てくる形態が異なります。よく見られるものはこんな感じでしょうか。最近ですと円柱型もよく見かけるようになりました。

商品サイズに合った形態にすることでカプセルトイのマシン内の収納も良くなり多くの商品を展開することができます。
もしも小さなピンバッチが大きなカプセルに入っていたら場所をとる上にユーザーが手に取った際に、カプセルが大きいのに商品が小さいなどネガティブな思考が浮かんでしまうかもしれません。(※ラインナップの一部の商品のみが小さい場合等は除く)
おにぎりを1個買った時に大きなビニール袋に入れられたら、なんで?もっと小さい袋でいいのに……と思ってしまいます。

カプセルトイのマシン

マシンを販売している会社や用途によってマシンのデザインが変わっています。よく見かけるなじみ深いマシンを図にしてピックアップしてみました。
※実際のものとは異なる表現を使用しています。

3社ともカプセルトイを回す際に必要である、1.金額表示、2.お金投入口、3.お金返却口、4.ハンドル、5.取り出し口と機能面的には同じになっております。必要最低限の項目が明確に表されているため、ユーザーにはわかりやすいUIとなっています。
これらは各社によって操作面の配置やマシンのデザインが異なります。普段何気なく遊んでいますが、よくよく見るとマシンごと微妙に異なる部分がありました。

商品購入までの流れ

マシンを見てみると、回し方などの操作面について書かれています。でも、大体の人はさらっと流して感覚で回しているのではないでしょうか。図にした各社のマシンにおいて商品購入までの流れを考えてみたいと思います。

A社のものがマシン上での言葉の説明が一番少ないです。
カプセルトイを回す前に金額が表示されている部分を確認しますが、横書きの文字は左側から見る習性がありますよね。そのためすんなり目に入ってきます。そこから時計回りで機能が配置されているため、目線の運びが自然とハンドルを見て商品取り出し口まで向かっていきます。
もしも、お金の返却が必要であれば流れの中で返却ボタンがしっかり目に入ってくるので迷うことはないですね。

またこの場合のA社のマシンですが、ハンドルの周りに回転させる方向を示す矢印をハンドルの上下左右どこを見ても目に入るよう複数置かれているため、右に回すという認識がしやすいと考えられます。

そのため、細かく回し方などの説明を書かなくてもユーザーは理解できるのではないでしょうか。

A社と比較すると、「お金返却」「ハンドルを回す」の3・4番の順序が入れ替わりました。
お金返却の優先度を低く設定しているのではと考えられます。
使用頻度の低いものの優先度を下げることで、ほかの機能、この場合ですとハンドル部分の優先度が上がっていますね。

気になる点を2つ挙げるとすれば、

①ハンドルを回す方向の矢印のスタート地点

回し方の説明にあるように、右に回すのであれば矢印は、左スタートで右に向かっている方が自然な気がしました。

②返却の仕方に説明があるように見える

お金を入れてから「回すのをやめる」とき、目線の流れを考えると、お金返却口がハンドルの下に配置されているため、少々分かり辛さを感じてしまいますがこれは機能の優先度を下げていると考えたため問題はないと思われます。
ここで気になるのは「お金返却部分が右にある“回し方の説明文言”と同カテゴリに見える」ということ。

早速ですが改善法を少し考えてみました。

いかがでしょうか。カテゴリを意識してレイアウト調整するだけで分かりやすいUIになったのではないでしょうか。

A社、B社と比較すると、C社は先にお金投入口を見てしまいます。

先にも書きましたが横書きというものは左上から目線が向く傾向があります。パッと左上を見たらお金投入口があるので「あれ金額はどこだ」となってしまいがちです。とはいえ10秒20秒と探すわけではなく一瞬の出来事であり金額の視認性じたいは良いのですが。目線の動きをふまえると少々気になってしまいました。

購入の流れとしては、お金を投入してから購入のしやすいUIになっていると考えられます。左上からそのまま下がっていくだけでお金投入(返却)・ハンドル回し・商品受け取りが出来ますね。

ただ、C社のものはハンドル部分とパネル部分に▲矢印がついており、合わせてからお金投入(返却)・ハンドル回しが出来るようです。そのため、言葉での説明が少々多くなっていますね。
慣れていない人であれば、▲矢印を合わせ忘れてしまうかもしれません。

マシンの機械音

全てのマシンに共通して言えるのが「回すときに鳴るマシンの機械音」です。
手動で機械を回して動かしているため機械音が鳴りますよね。
一見、「ただ回しているときの音」の認識ですが、実はハンドルを回している際の機械音のレスポンスがあるため、ユーザーはちゃんと回せているという実感・体験・安心を得ることができるのです!

身近なもので例えると、家のカギをかけるときにガチャンと鳴るロック音などです。ロック音が鳴ると分かりやすいですし安心できますよね。

未来

以上、ここまで個人的な見解を綴って参りましたが、最近増えている飲み物の自動販売機のカード購入やタッチパネル化。種類は異なれど同じ自販機なので、カプセルトイもいつかはカード購入が出来たり、マシン自体がタッチパネルになってしまうのでしょうか……。(すでに有るのでしょうか??)
小銭を持っていない時を考えると便利ではありますが。

カプセルトイのアイデンティティといえば手動でハンドルを回し、機械音を立てながらガランと商品が出てくるこの工程と考えています。いつかは古いと言われてしまうかもしれないですがこのまま続いていくことを望んでしまいます。

最後に

いかがでしたでしょうか?
カプセルトイのマシンの種類はここにあげたようなものだけではなく様々な種類のものが存在します。また、マシン自体も少しずつ進化しています。
よく、マシンを観察してみると同じようで実は進化し異なる部分があったりしますよ。
もちろん全てのマシンを新しいものに差し替えることは難しい為新旧混在して並べられていることが多いです。

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

ストレスを感じるUI

webページやアプリを使用していると「このUI使いにくいな~」とストレスを感じることがあります。UIの設計ミスからくるストレスは大きなものから小さなものまでありますが、小さいものに関してはネタとして小さいので記事にする人は少ないです。

今回の記事では、そんなちょっとしたストレスを生むUIについて紹介したいと思います。
小さく細かな事に関してご紹介いたしますが、こういった事を直すか直さないでUIの良し悪しが変わってきますので是非チェックしてみてください。

1.見た目と動作にズレのあるインジケーター

職場のPCでファイルを検索していたときのことです、検索に時間がかかっており、待っている間が仕事をサボっているように見えたらどうしよう…と一人でソワソワしながらインジケーターが満タンになるのを心待ちにしていました。

メーターが終盤に差しかかり、そろそろ終わる!と思いました。

しかし…
ゲージは終点だと思っていたところを超えて進みはじめました…。

終わると思っていたのに突然「実は終わっていませんでした」という現実を突きつけられたため、この後の待ち時間はさらに長く感じました。

このように、見た目と実際の動作や状態がかみ合っていない状態はUIではNGです。オレンジ色のガムを噛んだときにマスカットの味がしたらモヤモヤしますよね。

2.間違った記号の使い方

このようなメニューがありました。各項目に+マークがついています。

その中からカテゴリ一覧を押すと…

このように追加の小カテゴリが開くのかと思ったのですが…
実際は”別のページへ遷移しただけ”でこのメニューに使用している+の記号には何かを付け加えるという意味はありませんでした。この場合は+ではなく矢印が最も直感的で適切です。

“記号”の持つ意味はとても強いです。
矢印は矢印です。プラスはプラスです。(だんだん何を言っているのかわからなくなってきましたが…)利用頻度が高く意味が周知されている記号はよほどひねった見せ方をしない限り別の意味を付け加えることはできないですし、付け加えるべきではありません。
記号は薬のようなものです、決まった症状に決められた効果しか発揮しません。風邪薬を肌に塗っても意味はありませんし、湿布を口に入れても何の意味もありません。

3.動作に一貫性の無いボタン

とあるページを見ていたときに下記のような連続するボタン(ポイント①~③)がありました。
ポイント①ボタンとポイント③ボタンは押下するとポップアップが表示され、②ボタンはページ内の別の箇所へジャンプ(ページ内リンク)という構成になっていました。

①をタップした場合ポップアップが表示されるため、ユーザーは②を押した場合も同じようにポップアップが表示されると予想します、しかし②を押すと予想に反し同一ページ内のどこかに飛ばされます。
こうなってくるといよいよ③のボタンは何が起きるかわからなくなってきますよね。このような状態はユーザーにストレスを与えます。
ユーザーはサービスを利用する事で無意識に利用方法を学習していくため、起きるアクションは全て統一するべきです。アプリケーション単位でのルック&フィールを意識できていないためこのような作りになったのだと思います。

また、②を押してページ内のどこかへ飛んだユーザーはポイント③を押そうとして再び③を探します。この時点でユーザの目的は読むから探すへ変わるため本来目的が変わってしまい結果的に動作をとめた事になります。

4.動作の妨げになる表示

あるOSではスマートフォンの音量を変更した時、画面の中央に音量表示が大きく現れることがあります。(2018年9月現在)
動画を見ているときでも容赦なくこの表示が出てくるので、音量変更のたび視聴の邪魔をされます。また、ブラウザ使用中でも、ゲーム中でもこの表示は画面中央に大きく現れるためとてもストレスを感じます。この見せ方は音量調節を頻繁に行うユーザーにとっては頭が痛くなる見せ方です。

ここまで大胆に表示しなくても十分伝わるのに…せめて表示位置の設定をさせてもらえれば…。と思ってしまいます。
解決法はシンプルです。画面の上下左右または四隅に表示するだけです。


今回は細かくて地味ですがストレスを感じるUI を紹介しました。このような細かいストレスでもちりも積もれば…ですので、改めてサービスを見直してみてはいかがでしょうか!

お読みいただきありがとうございました!
(はら)

実は似ている?UIと映画の没入感

こんにちは!
今回のテーマは「実は似ている?UIと映画の没入感」です。

私は映画が好きなのですが、好きな理由の1つに「没入感」があります。
映画を見る中で、没入感を演出する為の考え方が映画とUI設計で似ているなと思ったのでまとめてみました。


UIと映画の没入感とは

没入感とは何かと言うと、「すっかり熱中して、その世界に入り込んでいるという感じ、浸っている・没入しているという感覚などを意味する語。(Weblio辞書)」です。
映画やゲームなどで、創造力と技術が織りなす映像や音楽、ワクワクするシナリオ、魅力的なデザインに夢中になった経験があるのではないでしょうか?その体験が没入感です。

映画などに集中する様を形容する場合に使われることが多いですが、UI/UXやVRの世界でも同じ意味で用いられている言葉です。
UI/UXに没入感?と思った方は、スマホアプリを見てみると想像しやすいかもしれません。
ゲーム系でもツール系でも、それぞれのアプリの目的に合ったUI/UX設計がされていると、ユーザーはストレスなくサービスを利用することが出来ます。
ユーザーが迷わないと言う事は、集中して目的を達成出来ると言うことですので、そのサービスに没入出来ていると考えられます。
これがUI/UXで使われている没入感です。


どこが似ているの?

UIと映画の没入感について、一体どこが似ているのかと言うお話ですが、ポイントは2つあります。

1つ目のポイントは、どちらもユーザー(観客)に体験を提供している点。そしてその体験がユーザーにとって良いモノであればこそ好まれる点にあります。
この良いユーザー体験こそが没入感へと繋がっていきます。

良いユーザー体験とはどのような事なのか、ザックリ言うと「ストレスなく目的を達成できた」と言うことです。
UIで言えば、分かりやすい動線、デザインを用いたUI設計を行う事で、ユーザーは何にも邪魔されることなく目的を達成する事が出来ます。
映画で言えば、整合性の取れたストーリーや適切な環境があって初めて、ユーザーは映画を見ると言う目的を達成する事が出来ます。

2つ目のポイントは、UIも映画も基本が大事だと言う事です。
1つ目のポイントとも関わってきますが、分かりやすさや見やすさなどそもそもの部分が出来ていなければ、ユーザーに混乱や不快感を感じさせてしまいます。
混乱や不快感はユーザーにストレスを与え集中力を削いでしまいますので、没入感からは程遠くなってしまいます。
その為、完成度を高めたり作り手の事情を盛り込む前に、基本が押さえられているかしっかり注意する必要があります。


ポイント1:ユーザー体験の良し悪し

UIと映画のユーザー体験について、もう少し掘り下げてみたいと思います。

UIの場合

サイトを訪れるユーザーは「アレが見たい」「コレが買いたい」と何か目的があってその場を訪れています。
例えばサイトを訪れてすぐのファーストビューで、目当ての物を見たり購入することが出来るようにします。すると、ユーザーは一切のストレスなく目的が達成できますので、良い体験が出来たことになります。
上記は極端な例ですが、UIはこう言った観点からサービスを構築する様々な要素や導線を考慮して設計を行います。

目的を達成する為に必要な工程など避けて通れない部分が最適化されていないと、それはユーザーにとって大きなストレスになります。これは離脱や継続率の低下に繋がってしまいます。
分かり辛いUIもそうですが、宣伝用のモーダルウィンドウや過剰な広告表示もその1つです。

映画の場合

映画を見に来た観客の目的は、そのまんまですが「映画が見たい」です。(特に、映画館に足を運んで見る人はこの思いが強い傾向があります。)
最後まで集中して映画を見ることが出来れば、それは良い体験が出来た事になります。
映画に集中する為には、辻褄のあったシナリオや役者の演技に違和感がないことなど映画の内容はもちろん、映画の見せ方などの環境も大きく影響します。

UIと同じく、「映画を見る」と言う目的を達成する上で避けて通れない部分が最適化されていないと、それはユーザーにとって大きなストレスになります。
よく話題になるのが、吹替え版やアニメ映画でプロの声優以外を起用してしまうケースです。これはユーザー体験を無視した作り手側の都合の押し付けなので非常に悪手です。
声優以外の他業種の人間が声を当てる場合、残念ながらほとんど棒読みか違和感のある演技になっています。
「声」も大事な映画の一部ですので、これが適切でないと強い苦痛を感じ、映画に集中出来なくなってしまいます。

また、映画館であれば一緒の空間で見る他の観客にも影響されますよね。
上映中に何度も喋る人、妙なタイミングで大声で笑う人、咀嚼音、椅子を蹴ってくる人、ひじ掛けの争奪戦。これらも没入感を阻害する大きな原因の1つです。
多くの映画館では上映前に最低限のマナーなど禁止事項をアナウンスしています。
完全に防ぐことは難しいですがある程度の抑止にはなりますので、没入感を演出する為の対策として大切な事です。


ポイント2:UIと映画の基本

UIにも映画にも、わかりやすさや見やすさなど表現の基本があります。

UIの場合

ユーザーが目的を達成する際に迷わないようにしてあげるのがUIの基本です。
優先度の高い要素から配置する、遷移する要素は明確にする、ユーザーが目的を達成する為に不要な要素は消したり隠したりするなど、様々な方法があります。
こうすることでサービスを訪れたユーザーは何をすれば自分の目的が達成できるのか直感的に理解する事が出来ます。
誰が見ても分かる、と言うのは難しいことなのですが、一般に浸透している表現であれば多くの人が理解して自然にアクションを起こせます。
ハンバーガーメニューなどがそうです。見た目だけでは正直何が出来るのか分かりませんが、周知されている形と意味なので迷わず使うことが出来ます。
独自の設定やアクションを組み込んでしまうと、ユーザーが混乱してしまう可能性がありデメリットになってしまいます。

映画の場合

映画の基本ですが、映画作品としての完成度とは少し違うお話になります。私が気になったのは字幕の表現です。
映画の字幕と聞くと、多くの人が映像の下部に白色で小さく表示されている文字を想像すると思います。これが一般に周知されている字幕の基本です。
地名の説明や異なる言語を表現する際に左右に表示される場合もありますが、通常セリフは一貫して下部に表示されます。
海外のあるミュージカル映画を見ていた時、歌うシーンで字幕が上部に表示されたことがありました。しかも一貫性がなく、画面の上下でランダムに表示されたので非常に見辛かったです。
歌うシーンの演出としてそのアクションになっていたようで、これは良くないケースかと思います。
UIと同じく、独自のアクションを組み込んだ為に観客が混乱し、映画に集中出来なくなってしまいました。

オリジナリティも大事ですが、まずは基本を押さえることでユーザー(観客)の没入感に繋がります。


おわりに

いかがでしたでしょうか?
UIと映画と言う異なる分野でしたが、没入感と言う観点から見ると意外と似ているのではないでしょうか?
改めて考えてみると、ユーザーの目的をストレスなく達成させる為には基礎が大事である、と言う共通点がある事が分かりました。
作り手側の都合で完成度を高めるのではなく、ユーザーの目的に沿った作り込みを行うことで没入感を感じてもらう事が出来ます。
良いサービス作りを行う為に、ぜひ意識してみて下さいね。

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

パンくずリストとは~改めて考えてみる~

突然ですが、パンくずリスト(話し合いの場ではパンくずと略して言うときもありますね)と聞いたときに何を思い浮かべますか?
知らない人からしてみれば、食べ物のパンのくずを連想する方もいると思います。
ある意味間違いではないのですが、今回ここでは食べれない“パンくず”とはどんなものか改めて調べてみました!

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

1.パンくずリストとは

まず最初に、パンくずリストとはインターネットのWEBサイトにて、ユーザーがWEBページのどの位置にいるかを視覚的に分かりやすいように、サイトTOP(上階層)から階層をたどった順にリスト化し、リンクを設置したリストのことを指します。
基本的には該当するページの上部に置かれることが多く見られます。

2.何故「パンくずリスト」と呼ばれるの?

童話「ヘンゼルとグレーテル」でヘンゼルとグレーテルが道に迷わない様にするために、通ってきた道にパンくずを置いて行ったエピソードに由来しているようです。
WEBサイトでも同様にユーザーがサイト内で迷子にならない様にするための道しるべとして、表示することからパンくずリストと呼ばれているのでしょう。

前置きのところで「知らない人からしてみれば、食べ物のパンのくずを連想する方もいると思います。ある意味間違いではないのですが~」と書きましたが、その理由がこちらでした。
呼び名、由来を知るまでは私も不思議で仕方ありませんでした。

3.パンくずの種類

パンくずリストはパンくずリスト。1つしかないと思っていたのですが、実はいくつか種類がありました。
ここでは使用頻度が割と高いとされる位置型と属性型を中心に書いていきます。
 

■位置型(ロケーションベース)


 
これが一番なじみ深いのではないでしょうか。
因みに上部にある「1.パンくずリストとは」の部分で紹介したものはこちらになります。
そのページがWEBサイト内のどの階層の位置かを示すもの。静的であり、最終的に辿り着くまでの経路が違っても同じページであればリストも同一なものになります。
ページ階層が多く必要とされるWEBサイトで使われることが多く、利便性も良いです。

例)商品購入サイト等

もう少しわかりやすく書くとこんな感じになります。

パンくずリストを見るとこのユーザーは、TOPからカテゴリ、雑貨、キャンドルと経緯を含め自分がどこにいるか一目瞭然です!
また、違う商品を見たいと思った場合パンくずリストの「カテゴリ」をクリック(タップ)するだけで戻れます。

簡単に移動出来て便利です。
ユーザーメリットも!

★ユーザーが自分のいる地点を把握できるため迷子にならない。
★自分の現時点の場所がどんなカテゴリに分類されているかがすぐにわかる。
★パンくずリストはリンクになっているため、来た道をすぐに戻ることが可能。

このような、パンくずリストですが皆様がご存知のアマゾンでも適用されています。適用されているのはPC版になり、欲しい商品のページを開いてロゴの下を見てみるとひっそりと商品の邪魔にならない様にパンくずリストが表示されています。
ですが、スマートフォンやアプリ版のページにはパンくずリストが見当たりませんでした。
この場合、ふと考えつくのが「スマートフォンなどの小さな画面では、パンくずリストを設置することで限られた訴求領域を使ってしまう」「パンくずリストが大きく表示されることはそうそうないと考えるとテキストリンクが小さくタップし辛い可能性がある」「ファーストビューに(ここでは)商品を優先している」等でした。

本来はユーザーへWEBサイト内のナビゲーションとして働くパンくずリストが本領を発揮できずに中途半端になってしまってはもったいないですもんね。

また、必ずしもスマートフォンには向いていないということではございません!適用しているWEBサイトも沢山あります。
サイトの方向性やサイトのデザインレイアウトなどに少なからず左右されるのではないでしょうか。

■属性型(属性ベース)

そのページがどんなカテゴリー、属性で分類されているかを示し、自分のいる位置を表示する位置型とは異なりページコンテンツの※メタデータが表示されます。
また、ユーザーの操作によって都度変化し、フィルターの役割を担うため複数の選択肢を選んで表示されるWEBサイトの傾向に向いています。

※メタデータ…データ本体そのものではなく、そのデータ本体に関する情報を記したデータ。
例えば画像に付属する、更新日などを指す。

例えばアマゾンのPC版では商品一覧ページに行くとロゴ下左側に選択した商品の種類に特化したフィルタ機能があり、価格帯など自由に項目を選択できるところがあると思います。

属性型と位置型がかけ合わさってより分かりやすい表現に。

さらに追加で検索フィルターをかけてみますと……


余談ですが「価格1500-5000円」を追加すると上部のパンくずは以下のようになります。

「ホーム&キッチン:家具:
リビングルーム家具:ピンクまたはブルー:1500-5000円

自分で選んだ項目について、居場所がすぐ反映されるととても分かりやすいですね。

■履歴型(パスベース)

そのページにどのような経路で辿り着いたのかを示します。動的であり、同じページでも辿り着くまでの経路が異なればリストも異なります。いわゆる自分が閲覧してきたページを表示するものだそう。
また、ブラウザの戻る(←)ボタン、履歴機能と同じ役割なため、最近では機能が重複してしまうため、見かけることが少ないようです。ユーザーへのナビゲーション機能として考えた際、利便性は良くなさそうです。

4.最後に

パンくずリストは使いようによってはとても分かりやすい位置情報です。
人間、自分の居場所が分かるほど安心なことはございません(と言い切ります!)
例えばリアルでも初めて旅行に来た土地で迷子になるなんてちょっと恐ろしいですよね。
もしも行くところどころに駅前にあるような地図や看板があれば、安心です。

ユーザーにストレスを与えることなくサイト巡りを楽しんでもらい、なおかつ運営側もページをしっかり把握することができたらより良いサービス向上につながる可能性もあるかもしれません。

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

ハンバーガーメニューについて考えてみる

今回はハンバーガーメニューについて考えてみたいと思います。
なんて美味しそうな内容なんでしょう!お腹がすいてきました!
…と言いたいところではございますがジャンクフードのではございません笑

WEBサイト、アプリを使用していればほとんどの方が三本線のこのマーク「≡」を見たことがあるのではないでしょうか。
今回はスマホを使用している際の「≡」について考えていきたいと思います。

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

最初に

ハンバーガーメニュー又はハンバーガ―アイコン(以下ここではハンバーガーメニュー)とは主に複数のメニュー等を表示させる目的でスマートフォンのアプリなどで広く使用されています。
横線三本が並んだ記号「≡」がハンバーガ―っぽく見えることからそう呼ばれているようですが、日本ではあまりなじみがないかもしれません。
私なんかもメニューアイコン等と呼んでしまいます。

特徴としてはWEBサイト、アプリの上部の左右どちらかに存在することがほとんどです。
WEBサイト、アプリによっては以下のように表現するところもあり、必ずこれではないといけないというわけではなさそうです。


ハンバーガーメニュー

知っていれば、慣れてしまえば「≡」マークがハンバーガーメニューというメニューアイコンであると理解し自然に使用することが出来ます。
ハンバーガーメニューに馴染みのないユーザー、はたまたスマートフォンに慣れていないユーザー等にとっては大きなはじめの一歩となってしまいそうです。

たまたま押して「これはメニューが入っているのか」と気づくことはあるかもしれませんが、思っている以上にハードルは高く感じてしまいます。
ですがそんな中、今現在ではハンバーガーメニューの認知も上がっているのは確か。様々なところで見かけたりしますよね。
もし見たことがない、どれかわからない場合はキャリアのTOPを見て頂くと上部の方にあるかと思います。

↓一度は目を通している可能性が高いところですね

メリット、デメリット

ユーザー目線、デザイナー目線で見たときのメリット、デメリットを少し考えてみました。

《 ユ ー ザ ー 目 線 》

メリット

・どのWEBサイトやアプリでも表現方法はほぼ似通っているので、一度覚えてしまえばどこでも感覚的に使用することが出来る。
・上部に常設されていることや、上部を引き出すと出てくる事が多いため必要時に瞬時に使用しやすい。

デメリット

・初見だとメニューアイコンと認識するのに時間がかかる。
・ハンバーガーメニューの中身によっては余計に迷子になる可能性がある。
・開いてみるまで(タップ)中身が分からない。

《 デ ザ イ ナ ー 目 線 》

メリット

・ハンバーガーメニューを取り入れることで、小さなスマートフォン
の画面領域からUIデザイン領域を多く確保することが出来る。
・コンテンツ内容が多い際に使用するととても便利。

例えば一例ですが…

デメリット

・ハンバーガーメニューに頼りすぎてしまうことがある。
→目で見える部分のUIデザイン面を重視しすぎて、ハンバーガーメニューの中にたくさんのコンテンツを入れてしまい、結局はハンバーガーメニューの中でコンテンツを探させてしまう。
・使い方によっては味気ない中身のないデザインに陥ることも…

サイトを運営する側はサイトの傾向をしっかり把握したうえでハンバーガーメニューを使用することがユーザーを困惑させない一歩であると思います。

買い物が出来るサイトであれば、「カート」はほぼ必須といえます。
もしもハンバーガーメニューの中に入っていたら、仮にほとんどの人が気づくと考えたとしても、わざわざメニューを開くのは面倒くさいと感じさせてしまう可能性があります。
この場合、サイトの傾向である買い物をスムーズにしてもらうためにTOPにわかりやすく表示されていた方がユーザーには親切です。

「ログイン」「ログアウト」をさせるサイトでは基本的にはTOPに置かれるものが多く見受けられますが、SNSなどで常にログイン状態のままにしておくことが多いものは「ログアウト」がハンバーガーメニューの中に入っていることもあります。

最近の傾向では

ハンバーガーメニューを三本線で表さないところも多くみられます。
縦型の三点リーダーや二本線のもの、またメニューをタップした際にナビゲーションの意味合いとしてメニューマークが×マークに変化するもの等々、動くものも増えています。

AndroidとIOSで各々の傾向があると思いますが、WEBのシステム領域などで扱われるハンバーガーメニューで主に三本線以外のものがみられる印象があります。

またハンバーガーメニューなど、日に日にユーザーの感覚的な扱いに任せてしまっている点が垣間見えるため、いかに自然に扱ってもらえるかUI面での見せ方が今以上に大事になってくるのではないでしょうか。
便利なのに、扱えなければもったいないですからね。

まとめ8
  • 「≡」はハンバーガーメニューという
    (アイコンなどとも呼ばれたりします)

  • ハンバーガーメニューのほどんどはWEBサイトやアプリの上部に置かれる

  • 初見さんには分かりづらい表現である

  • タップするまで中身は分からない

  • 一度理解すれば感覚的に使用できる

  • ハンバーガーメニューに頼りすぎるデザインだと、ハンバーガーメニュー内でコンテンツを探す手間が出てくる
    (迷子になることも)

  • ハンバーガーメニューをうまく使うことで、UIデザイン領域を多く確保出来るため、見せ方の幅が広がる

  • サイトの傾向を把握したうえでの使用が望ましい

最後に

このハンバーガーメニュー。賛否両論が挙げられているのをよく見かけます。使いづらい、時代遅れ、便利等々…
自己見解ですが使い方によっては様まだまだ多くの可能性を秘めていると考えています。
便利なハンバーガーメニューですがサイトのUIとの匙加減が大事ですね。

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

タブとセグメンテッドコントロールの違いとユーザビリティー

モバイルwebページは画面が小さいため、フィーチャーフォン時代からUI部品の「タブ」を使い、ページ内の一部に部分的な表示切替を行い多くの情報を載せてきました。

今回は、そんな「タブ」と、機能の近い「セグメンテッドコントロール(Segmented Control)」の違いを紹介し、
後半にはタブ表現のバリエーションとユーザビリティーにふれ、最後にコピペして使えるソースを紹介します。


タブとは

ページ内の一部を部分的な表示切替を行うことで、優先度の低い情報も限られたスペースで表示できる便利な機能です。

ポイントとして

  • タブの数は3~4つ程度 ※各項目名の文字数の関係で。
  • デフォルトは一番左側がアクティブ状態にする
  • 優先度の高い項目を一番左に配置 ※閉じられたタブ(特に右端)は開かれることが少ない
  • 扱う情報をカテゴリ/ジャンルで切り替える(コンテンツ向き)
  • タブ毎の情報が重複しない

以上の注意が必要です。
置かれる情報は「題名」の子要素(並列なもの)を表示切替することが望ましいです。

例.



セグメンテッドコントロール
(Segmented Control)とは

iOSでは標準的なUIコンポーネントです。

「タブ」に似ていますが、テーマ全体に対してセグメントを分けて表示する機能です。

ポイントとして、

  • 項目数は3~4つ程度が望ましい ※2つだけの場合はどちらがアクティブかわかりづらい
  • デフォルトはタブと同じく一番左側がアクティブ状態にする
  • 一つのデータをセグメントにより分けて表示(情報/データ 向き)
  • 各セグメント間の情報は分け方により重複する

以上の注意が必要です。

置かれる情報は「主情報」の内容をセグメントにより表示切替することが望ましいです。

例.



タブとセグメンテッドコントロールそれぞれついて説明しましたが、
ポイントを踏まえて適切に使い分けていきましょう。


バリエーションの紹介

最後にタブのバリエーションを紹介します。

見比べると分かりますが、UI部品のデザインによって利用者はそれが「タブ」なのか「セグメンテッドコントロール」なのか、その他似た表現の「グローバルメニュー」なのか判断が難しいため、
デザインについてはユーザビリティーを考慮する必要があります。

「流行表現」にはそういった問題が付いてくるため、
見慣れた「定番表現」の方が利用者にとっては瞬間的にわかりやすいのではないでしょうか。

参考程度に定番表現タブのソースを掲載します。

定番タブのソースコード
(動かせます↓)

<div id="tabcontrol"><a class ="tab1"  href="#tabpage1" >HTML</a><a class ="tab1"  href="#tabpage2" >CSS</a><a class ="tab1"  href="#tabpage3" >JavaScript</a></div>

<div id="tabbody">
	<div id="tabpage1">タブ1内容</div>
	<div id="tabpage2">タブ2内容タブ2内容</div>
	<div id="tabpage3">タブ3内容タブ3内容タブ3内容</div>
	</div>	

@charset "utf-8";
/* CSS Document */

body {
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"MS Pゴシック",sans-serif;
}

	/* ▼タブ(カスタマイズ中) */

#tabcontrol {
	width: 100%;
	height: auto;
	border: 0.0px solid #FF0004;
	margin: 0px 0% 0% 0%;/* インラインブロック化 */
	border-width: 0px 0px 0px 0px;    /* 下以外の枠線を引く */
	position: relative;               /* JavaScriptでz-indexを調整するために必要 */
	overflow: hidden;
}

a.tab1 {
	width: 31.3%;
	border-top:solid 2px #656766;
	border-bottom:solid 1px #656766;
	border-left:solid 2px #656766;
	border-right:solid 2px #656766;
	font-size: 15px; font-size: 1.5rem;
	text-align:center;
	text-decoration: none ;/*リンク文字の下線を取る*/
	margin: 0% 0% 0% 0.8%;
	padding: 7px 0  7px 0;           /* 内側の余白 */
	border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */

	float: left
}

div.tabcontrol_btn1_a_tag_on {
	color: #656766;
	text-decoration: none ;/*リンク文字の下線を取る*/
	
	width: 31.3%;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #ffffff;
	border-left:solid 2px #656766;
	border-right:solid 2px #656766;
	text-align:center;
	margin: 0% 0% 0% 0.8%;
	padding: 1.75% 0  1.75% 0%;            /* 内側の余白 */
	border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
	background-color:#ffffff;
	float: left
}

div.tabcontrol_btn1_a_tag_off {
	color: #ffffff;
	text-decoration: none ;/*リンク文字の下線を取る*/
	
	width: 31.3%;
	border: solid #656766;
	border-width: 2px 2px 1px 2px;    /* 下以外の枠線を引く */
	text-align:center;
	margin: 0% 0.75% 0% 0.75%;
	padding: 1.75% 0  1.75% 0%;            /* 内側の余白 */
	border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
	background-color:#656766;
	float: left
}

/* ▼タブの中身(カスタマイズ中)  */

#tabbody div{
	width: auto;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #656766;
	border-left:solid 0px #656766;
	border-right:solid 0px #656766;
	margin: -2px auto 5% auto;
	padding: 3.75% 1% 3.75% 1%;            /* 内側の余白量 */
	background-color: #FFFFFF; /* 背景色 */

}

#tabbody1 div{
	width: auto;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #656766;
	border-left:solid 0px #656766;
	border-right:solid 0px #656766;
	margin: -2px auto 5% auto;
	padding: 3.75% 1% 3.75% 1%;            /* 内側の余白量 */
	background-color: #FFFFFF; /* 背景色 */

}

#tabbody2 div{
	width: auto;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #656766;
	border-left:solid 0px #656766;
	border-right:solid 0px #656766;
	margin: -2px auto 5% auto;
	padding: 3.75% 1% 3.75% 1%;            /* 内側の余白量 */
	background-color: #FFFFFF; /* 背景色 */

}

#tabbody3 div{
	width: auto;
	border-top:solid 2px #656766;
	border-bottom:solid 2px #656766;
	border-left:solid 0px #656766;
	border-right:solid 0px #656766;
	margin: -2px auto 5% auto;
	padding: 3.75% 1% 3.75% 1%;            /* 内側の余白量 */
	background-color: #FFFFFF; /* 背景色 */

}

/* ▼タブの配色 */
#tabcontrol a:nth-child(1), { color: #ffffdd; }/* 1つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(2), { color: #ddffdd; }/* 2つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(3), { color: #ddddff; }/* 3つ目のタブとその中身用の配色 */

function aa() {
// ---------------------------
// ▼A:対象要素を得る
// ---------------------------
var tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
var pages = document.getElementById('tabbody').getElementsByTagName('div');
	
// ---------------------------
// ▼B:タブの切り替え処理
// ---------------------------
function changeTab() {
   // ▼B-1. href属性値から対象のid名を抜き出す
   var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

   // ▼B-2. 指定のタブページだけを表示する
	for(var i=0; i<pages.length; i++) {
		if( pages[i].id != targetid ) {
			pages[i].style.display = "none";
		}
		else {
			pages[i].style.display = "block";
		}
	}

   // ▼B-3. クリックされたタブを前面に表示する
	for(var i=0; i<tabs.length; i++) {
		tabs[i].setAttribute('style','color:#ffffff;border-bottom:solid 2px #656766;background-color:#656766;');
	}
	this.setAttribute('style','color:#656766;border-bottom:solid 2px #ffffff;background-color:#ffffff;');

   // ▼B-4. ページ遷移しないようにfalseを返す
	return false;
}

// ---------------------------
// ▼C:すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する
// ---------------------------
	for(var i=0; i<tabs.length; i++) {
		tabs[i].onclick = changeTab;
	}

// ---------------------------
// ▼D:最初は先頭のタブを選択しておく
// ---------------------------
	tabs[0].onclick();
}

※JavaScript等、こちらのページ記事を参考にしてカスタマイズしてみました。
「ページ移動せずに内容を変更するタブ機能の作り方」

ご意見あればお願いします。

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

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