【webデザイン】UI/UXの基礎の基礎(アプリ開発で意識すべきデザインの観点)

更新日:

【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #44

UI/UXってよく聞くけど何なのか。自分のオリジナルアプリ開発に照らし合わせ、UI/UXデザインの考え方についてまとめます。

直接開発に関係する内容ではありませんが、webアプリを開発するにあたって意識すべきデザインの観点です。

はじめに

この記事は、railsフレームワークでオリジナルwebアプリ「免許学科試験学習サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。プログラミング初心者なので知識は少ないですが、現在通っているプログラミングスクール「DIVE INTO CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。

 

目次

 

UI/UXとは

定義の確認の前に

早速ですが皆さんに質問です。「UIとは何の略でしょう?」

下の画像のクイズです。

UIとはなんの略でしょう?

 

 

答えは58番です。

 

UI/UXを調べるにあたり面白い記事を発見し、そちらを引用させていただきました。任天堂のUI/UXデザイナーの方のお話です。

 

UI/UXの考えを綺麗に引っこ抜いたような質問。

UI/UXの基本が絶妙なユーモアとともに詰まってます。

 

では、UI/UXがどんなものか確認します。

 

UI(User Interface)

UIは”ユーザーインターフェース”の略。webサイトなら、ユーザーが直接目で見て触れるブラウザの外観そのもの。細かく見れば、画像や文字(サイズやフォント)、ボタン等1つ1つが全てUIに該当する。

 

UX(User Experience)

UXは”ユーザーエクスペリエンス”の略。ユーザーの「体験」のことを指す。「見やすい」「使いやすい」等、ユーザーがサービスを利用したときの感想にあたるものが該当する。

 

具体的には?

わかりやすい具体例があったので載せます。

暑い日、喉が渇いた人が自販機で水を買う。

その買い方がよく分からなかったり、

いくらの値段で販売しているのかが分かりにくく、

なかなか水が買えずイライラした。

暑い日なのに、せっかく買えた水がぬるい、

もう二度とこの自販機で買おうとは思わない。

オレンジ色の部分が「UI」、見た目を表します。

青色の部分が「UX」、体験を表します。

 

このような「UX/UI」をデザインし、ユーザーにより良い体験をしてもらうことが、アプリのデザインに取り入れなければならない考え方の基本です。

 

UIデザインとUXデザインの違い

「見た目」と「体験」な訳ですから、そりゃ違います。

違いがあることを認識することが大事。

 

「UIが良い=UXが良い」

 

という関係式は必ずしも成立しないということ。

「自分が作りたいデザイン」と「ユーザーが良いと思うデザイン」は違うということを、アプリデザインを考えるにあたって意識しておかなければならない。

 

「芸術」や「アート」というジャンルとは一線を画すものであるんだなと。

 

UI/UXを意識したデザイン設計

ここ1ヶ月ほどオリジナルアプリ製作を練習として行なっており、webアプリのデザインを考える機会が増えました。

今作成している「免許学習アプリ」ですが、「作ってる側」である自分は「使う側」目線がどうしても薄れていくというか。

意識してても、そもそもアプリ開発自体が難しいので、UXデザインまで細かく意識飛ばせなかったっていう。

ならば実際に「ユーザーの体験」を聞けばいいと思ったわけで。

実際に免許アプリを友人に使って見てもらったときの感想から、デザインを変更した部分についてまとめます。

 

上の記事に作ったアプリ載っけてますのでよかったら見てください。

 

「閉じる」ボタンの位置変更

以前までがこんな感じでした。

答えを見る

 

問題があり、「答えを確認」を押すと、

閉じるボタン

 

「答えを確認」ボタンが消え、「閉じる」ボタンと答えが表示されます。

 

このとき「閉じる」ボタンを左上に小さく配置しました。

「閉じる」ボタンはあまり大きいと変かな、っていう直感だけで。

 

しかし、実際に友人に使ってもらうと、

 

「閉じるときのボタンがもっと大きい方がいい。指を開くのと閉じるので場所変えるのがやりづらい。」

 

という感想でした。

 

まあ確かにな、と思い変えてみることに。

とにかく指動かさずに答え開閉できるべきなんだろな、ってことで

修正後

 

「答えを確認」ボタンと「閉じる」ボタンを一定の場所に配置しました。

もう一度友人に見せたら、「こっちの方が使いやすい」ってなりました。

 

そもそもデザインが大したことない、とか規模感とかは置いといて、

UXデザインの根本っていうのはこういうところにあると思います。

 

間違った問題だけ選べるボタン変更

こちらもユーザーからの意見。

「選択肢が2つしかないのに、セレクトボックスで選ばせるの変じゃないか?」

確かにおっしゃる通り。僕がめんどくさくなってサボってた部分です。

細かいところを詰めることも、UI/UXの観点では大事なんだなと。

 

実際にはこれ。

二択のセレクトボックス

「すべての問題から出題」と「間違えた問題から出題」という2つの選択肢しかないのに、

上二つと同じようにセレクトボックスで選ばせてます。

 

じゃあどうしよう、って話で。

 

二択を選ばせるのにベストなもの・・・・

なんかiPhone使ってるとよく出てくる「on」と「off」が切り替えられる緑のボタンがいいな。

 

ってことで検索。

ありました。cssだけで作っているというから驚きです。

 

実際に実装してみる。

オンオフボタン

 

使いやすさは上がったんじゃないかな。

 

ちなみにこのボタン、元はHTMLの「チェックボックス」だそうです。原型は全くないですが、使い方はチェックボックスに準ずるのでオンとオフで値を切り替えてパラメータで送る場合は、「:checked」をつける必要があります。

 

まとめ

レベルで言ったら大したことないUI/UXデザイン設計の内容ですが、こういう部分を主体的に経験できるのはオリジナルアプリ開発の良い点だと思います。

本当はもっとカッコ良いデザインのサイト作りたんですが、今回はあくまで「資格学習サイト」のデザインなので自己主張するのはやめました。

また違うアプリ開発ではおしゃれなものを作りたいです。UI/UXの観点も忘れないようにしますが。

 

以上ありがとうございました。

-プログラミング学習
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.