高校生のためのUXデザイン入門〜Adobe XDを活用しよう!


過去の記事:

第1回:
XDはUXツールの「いいとこ取り」だけど、必要最低限の機能からスタートしてるんだ!

第2回:
えっ、こんなデザインだったんだ。なんか、イメージと違うなぁ。悪いけど作り直してくれる?

第3回:
動くプロトタイプをつくるときには、まずフィッツの法則を理解しましょう!




第4回「ゲームアプリで遊んでいて、BACKボタンをタップしてしまったとき、どんな画面になったらよいでしょう?」


Adobe Experience Design(アドビ・エクスペリエンスデザイン)通称、Adobe XD(エックスディー)を活用したUXデザイン入門、第4回目です。

XDを起動すると、パネルが表示されますよね。
「UIキット」と表示されている部分を見てください。文字が小さくて薄いので、わかりづらいけど、3つあるでしょう?

Apple iOS
Google マテリアル
Microsoft Windows



じゃ、「Apple iOS」をクリックしてみましょう。
たくさん画面が表示されていますね。



次は、左端にあるツールの下から2番目、「アートボード」のアイコンをクリックしてください。
右側に、iPhoneとかiPadなど、デバイスの名前が表示されました。
最上部が「Apple」、次が「Google」、そして「Microsoft」、「Web」と縦に並んでいます。



いま画面に表示されているのは、iOSのUIキットですよね。
だから、iPhoneやWatchのアートボードで使うことができるんだ。

iPhoneのアートボードで、Google マテリアルのUIキットを使ったらダメだよ。
Apple、Google、Microsoft、それぞれ決められたデザインのルールがあるんです。


もし、デザイナーや開発者が好き勝手にデザインしたら、大変なことになります。

新しいアプリをインストールしたら、まず「使い方」を覚えないといけないんですよ。全てのアプリの使い方が違っていたら、すごく面倒でしょう。

実は、昔のパソコンって、ソフトによってメニューが上にあったり、横にあったり、ボタンの形もさまざま、同じOKボタンでも意味が違っていたり、メチャクチャだったんだ。


今は「iOSで動いているデバイス向けにアプリをつくるときは、Appleが決めたガイドラインに従ってデザインしてね」ってことになっています。
Googleも、Microsoftも同じです。


だからXDを使う前に、まずルールについて学んでほしいんだ。

解説本は本屋さんで売っているんだけど、高校生のみなさんには難しいと思うので、動画の方がいいかな。

YouTubeには、GoogleやMicrosoftの社員の方々がていねいに説明してくれている動画が公開されているので、一つ紹介しておきますね。
ちょっと古いんだけど、基本的な考え方は変わりませんので。

Androidアプリ UI/UXことはじめ(48分51秒)
出演:Googleの松内良介さん、義嗣浩隆さん



この動画では、「どうして、使いやすいアプリと使いにくいアプリがあるのか」を教えてくれます。

例えば、おすすめしないデザインとして「Webページのように縦スクロールを強制する」をあげているんだ。
使っている人がイライラしない快適なアプリ体験を提供するには、基本的な操作に必要なものは画面におさまっているべき、とお話しています。


アプリの場合は、Webページと違って極力ユーザーに操作させない、操作しなくてもよいデザインを考えてほしいということなんです。

「これならWebページでいい、わざわざダウンロードして使いたくない」なんてユーザーの声もあるくらい、きちんとデザインされていないアプリが多いので注意してね、ということです。


例えば、ゲームアプリで遊んでいて、BACK(戻る)ボタンをタップしてしまったとき、どんな画面にすればよいでしょうね。

Androidには、BACK(戻る)ボタンが必ずついてますよね。
使っている人も、このボタンをタップすると「戻る」ということを知ってます。
意識してタップするときは、「戻る」ことを期待しているわけです。



でも、すぐにホーム画面に戻ったらどうでしょう。
みなさんも考えてみてください。

勘違いしてタップした人は、「えっ、もどっちゃったよ!」って怒りますよね。
同じようなことを経験したことないですか?


この動画でも説明していますが、
まず「ゲームが一時停止」になって、ダイアログが出て「ゲームを中止しますか? 続けますか?」と表示します。

中止するを選んだら、ホーム画面に戻る。
これだったら、使っている人も安心です。


じゃ、ダイアログが出たときに、
もう1回、BACKボタンをタップしたとき、どうしたらよいでしょう。
考えてみてください。


最も自然なのは「ダイアログが消えて、ゲームに戻る」でしょうね。

言葉を聞いただけでは「ん?」って感じでしょ。
だから、動くプロトタイプが必要なんですね。XDでつくって、実際にクリックしながら確かめてみてほしいんだ。

BACKボタンを押して、ダイアログが出て、もう一度、BACKボタンを押しちゃったら、ダイアログは消える。

動画のなかでも、取り上げているので見ておいてくださいね。
Googleの義嗣さんは、「もし、BACKボタンを2回押してゲームが終了した場合、ボクだったら(カッとなって)スマホを投げちゃいますよ」なんて言っています。



さて、ここまで話を聞いてどうですか?
使っている人のことを考えていないアプリって、こわくて「このボタン押していいのかな」と、ビクビクしながら使うことになってしまいますよね。

あと、Androidには、標準のBACKボタンがあるのに、アプリの中にも戻るボタンを付けちゃう。
動画では「安易に戻るボタン付けるのはやめて!」って強調しています。


これが「期待されるアプリ体験を提供していない」ってことなんです。

そして、iOS、Android、Windowsではルールが違う。
もちろん、Webとアプリも違う。


アプリの場合はルールに従ってデザインを考えるってこと、なんとなくわかってきたかな?
それでは!


※このテキストキャストは、以下のコンテンツには含まれない主に「概論パート」を中心に構成しています。

Adobe Experience Design(XD)
プロトタイピング[基礎編]


シンクゼロマガジンとは?

筆者:
Creative Edge School Books