VMT TECH BLOG
PWA Night vol.14 ～UI/UX～（オンライン開催）レポート
こんにちはMonacaソムリエです。
先日PWA Night vol.14 ～UI/UX～に参加しましたのでそのレポートです。
https://pwanight.connpass.com/event/169056/
本来は東京で会場を借りて開催でしたが、今回はオンラインとなりましたので、
弊社のラウンジから参加させて頂きました。
ただ、このだだっ広いところで一人でしたので、快適でしたかが少し寂しい。。。
PWANightとは？
日々PWAの関心は高まっていますが、いまは主にエンジニア中心に認知が広がっている状況で、
本格的なビジネス活用や消費者への浸透はこれから・・・
そこで、PWANightでは活用方法や事例や技術共有をしながら、広げていこう！！
っと言うコミュニティとなります。
私も大阪の運営をやらせていただいております。
今回のテーマはUI/UXでした。
UI/UXとは？
UI＝ユーザーインタフェース、UX=ユーザーエクスペリエンスの略です。
エクスペリエンス＝Experienceは「体験、経験」を意味し、UI/UXは
ユーザーが操作をしながら、製品やサービス（ここでいうとWebアプリ、スマホアプリ）
を通じて得られる体験を指します。
はっきり言って、どんなすごい機能やシステムを作ってもUI/UXダメだとユーザーはついてきてくれません。
逆にすごくない機能（単機能）でもUI/UXが良いとユーザーはついてきます。
それぐらいUI/UXはシステムの良し悪しを左右するものだと思っています。
その中でも、気になった登壇内容を紹介したいと思います。
さわり心地のよいウェブを考える
登壇資料はこちら
https://speakerdeck.com/mottox2/better-mobile-web
なぜ気になったかと言うと、UI/UXは実際に実装フェーズで考えるイメージはありますが
実はUI/UXは上流工程になります。
設計段階でこのUI/UXを詰めなければ、出来上がった段階でユーザーは
違和感を感じてしまいます。
そこの違和感を埋めるために上流工程でUI/UXを詰めてしまい、下流工程でのコスト増大を防ぐのです。
弊社ではプロトタイプツールを使っていますが、
UI/UXの精度や満足度をもっと上げるにはどうすればいいか？
と言う課題が挙がっていました。
スマホの道具性
PCより、スマホがより生活に身近になることにより、
スマホの道具性という性質が強くなったと言うことです。
・道具の進化形としてのスマホ、PCより直接操作に近づいた。
・PCはマウスで操作、スマホは直接操作である
・スマホは道具としての性質が強い
あまり考えたことは無かったのですが、なるほどと思いました。
スマホを道具として使ってる感が大きいですね。
使いやすい道具とは？
触り心地がよい＝直感的とします。
直感的な道具
・遅延なく、違和感なく
・自分の操作のフィードバックが認知できる
・慣れや類推から動かせる
・メタファーを利用する
こちらで、使いにくいUIが体験できます。
https://bad-ui.netlify.com
たぶんいろんなドツボにはまると思いますよｗ。
遅延なく、違和感なく
もちろん私たちがハサミを使ってて遅延することはありえないですよね？
違和感ない動きとは、物理法則から逸脱しない動き、見た目と連動する（クリック領域）
物理法則から逸脱しない動きってあまり意識してなかったのでなるほどと思いましたね。
例えば「ものが落ちる」動きが遅すぎたり、早すぎたら人は違和感しか抱かないかなと。
自分の操作のフィードバックが認知できる
これは要は操作した手ごたえがあったかどうかですね。
ボタンなら押した感覚やフィードバックや振動を受けられるとか、
押した感触のないボタンは違和感しかない。。。
慣れや類推から動かせる
OSの流儀やある程度パターンがあるのでそれを使うと言うことですね。
違う動作をさせるとユーザーが戸惑って誤操作するというものです。
ただ、Webとネイティブアプリの流儀を混ぜるのは大変だと言うことです。。。
メタファーを利用する
メタファーって何？って思いましたが、
わかりやすく言うと、メタファー＝相手にわかるように間接的なメッセージで伝える手法
紙をめくる動き→電子書籍ビューア、電話やフロッピーの形状＝アイコン
直接ではなく、間接的に表現して何かを伝えて認知させるような動きと言うことです。
UI/UXをあげる為に出来ることとは？
エミュレータではなく実機で確かめる
自分で違和感を感じなければ人に尋ねる
iOS/Androidどっちとも持って置きたい
→この辺はかなり意識してやってますね。
表現力をあげる
アプリ完成度をあげる為の表現力をつける
アニメーションやiOSだけに行くCSSプロパティ
lonicなどのコンポーネント集でやっている事を読むのもよい
→lonicは最近よく聞きますね。
ガイドラインを知る
「Human interfave Guidelines」「Material Design」をちゃんと読む
→ごもっとも。
基本ネイティブアプリのガイドラインなので、取捨選択が必要ですが、
Webのいいところを生かしつつ、ハイブリッドアプリにも生かしたいところです。
まとめ
「良いUI/UXを実現するには、こういうUIにすべき」のような具体的な話かと思っていましたが、
・どう動くと人は遅延なく・違和感なく動くのか？
・どういう風にボタンを押して、どう画面やアクションが起こればいいのか？
といった、とても基本的なところに気づかせてくれた内容でした。
そこから突き詰めないと「作って満足」になってしまう。
いくら表現力を上げる為の技術や手法を学んでも、
この基本的な概念から逸脱してしまうと、人は「違和感」を抱いてしまうので
「使いやすさとは？」一体どういうものなのか、という所から突き詰める必要性があるなと、非常に勉強になりました。
弊社では品質を意識して開発を行っていますから
UI/UXを向上する為に以下のような取り組みをしています。
・上流工程でデザイナーがデザインし表現力をあげる
・プロトタイプを作成し、実装前に使い勝手をイメージし実装後の乖離を防ぐ
・テストはエミュレータではなく実機で確かめる（もちろん、iOS/Androidどちらも）
今後はここで学んだUI/UXの本質を取り入れていきたいですね。
【3D開発エンジニアを募集中】
当社で開発している3D・VR・ARアプリケーションの開発エンジニアを募集中です。
詳しい求人内容はバルテスグループ採用サイトをご覧ください。
画像をクリックいただきますと詳しい求人内容をご覧いただけます。
VMTのInstagramでは社内xR, 3D技術勉強会のコンテンツを配信中です！
是非フォローや「いいね！」をお願いいたします！
公式アカウントはこちら
新着ブログ
