手触りのよいウェブを考える / better-mobile-web

297a42b94a1bda236982ec1cd81089b6?s=47 mottox2
March 18, 2020

手触りのよいウェブを考える / better-mobile-web

PWA Night vol.14で発表に使った資料です。
使いにくいWeb: https://bad-ui.netlify.com/
それのソースコード: https://github.com/mottox2/bad-ui

297a42b94a1bda236982ec1cd81089b6?s=128

mottox2

March 18, 2020
Tweet

Transcript

  1. 2020.03.18 PWA Night vol.14 / @mottox2 ⼿触りのよい ウェブを考える

  2. アプリケーションエンジニア Gatsby, Gridsome, Next.js, etc 技術書典 新刊出せませんでした お仕事 Watching mottox2

    @ ؿٔ٦ٓٝأ8FCؒٝآص، ⾃⼰紹介 ひとこと Webエンジニア 約5年 iOS/Androidアプリエンジニア 各約半年 SaaSのUIデザイナー/アプリデザイナー 計1.5年
  3. #pwanight なぜPWA開発で『UI/UX』に着⽬するのか? ‣ PWA開発の⽂脈では機能⾯に⽬が⾏きがち。 ‣ しかし、スマホアプリのいいところは機能⾯だけでないはず。 ‣ 改めて、スマホのUIに着⽬しよう。 機能要件 ⾮機能要件

    〇〇ができる ホーム画⾯に置ける 軽快に動作する 使いやすい
  4. #pwanight 始めてのスマートフォン ‣ 触ってて気持ちよいと思いませんでしたか? ‣ 今回はインターフェースとしてのスマホに着⽬したい ‣ タッチインターフェースとも ‣ 今回はスマホを掘り下げ、触り⼼地とはなんだったのか?を振り返り、触り⼼地のよい

    UIについて考えていきます
  5. #pwanight スマホの道具的な性質

  6. #pwanight PCとスマホ

  7. #pwanight 道具とスマホ

  8. #pwanight スマホの道具性 ‣ 道具の進化系としてのスマホ、PCより直接操作に近づいた ‣ PCはマウスという媒体を通して操作していたが、スマホは直接操作である ‣ スマホは道具としての性質が強い

  9. #pwanight 使いやすい道具とは何か?

  10. #pwanight スマホの道具性 ‣ 触り⼼地のよい=直感的とします ‣ より直感的な動作が求められるようになる。 ‣ 直感的な道具 ‣ 1.

    遅延なく、違和感なく動く。 ‣ 2. ⾃分の操作のフィードバックが認知できる。 ‣ 3. 慣れや類推から動かせる。 ‣ 4. メタファーを利⽤する。
  11. #pwanight 使いにくいUIを作ってきました ‣ https://bad-ui.netlify.com ‣ GitHub: mottox2/bad-ui ‣ 推奨ブラウザは、iOS Safariです。

  12. #pwanight 1. 遅延なく違和感のない動き ‣ もちろん、僕らがハサミを使っていて、遅延することはありえない。 ‣ 違和感のない動き ‣ 物理法則から逸脱しない動き ‣

    0=>1でものが出現することはない。 ‣ iOSであれば bounceがないScrollも法則から外れている ‣ ⾒た⽬と連動すること ‣ クリック領域 ‣ なかなか反応しない ‣ 実装で頑張れるところは頑張る
  13. #pwanight 2. ⾃分の操作のフィードバックが認知できる ‣ ⾃分の操作をした結果が認知できるか。 ‣ 物理ボタンであれば、押した感覚があった。 ‣ アニメーションや振動でフィードバックが受けられる。 ‣

    指で画⾯の⼀部が隠れるので、⼩さなフィードバックは⾒逃されるかも。 ‣ 基本的にユーザーのインタラクションによって変化させる ‣ 重要度の⾼いもの(通知、⻑い⾮同期処理)は別
  14. #pwanight 3. 慣れや類推から動かせる ‣ 現実世界の道具であっても慣れが重要。 ‣ OSの流儀を守っていればある程度動かせる。 ‣ よくあるパターンを踏襲する。 ‣

    よくあるパターンとは違う動作すると、誤操作を誘発する。 ‣ Webとネイティブアプリの流儀を混ぜるのが結構たいへん。
  15. #pwanight 4. メタファーを利⽤する ‣ 紙をめくる動き→電⼦書籍ビューアー ‣ 左右に分類する動き→Tinderのような出会い系アプリ ‣ ラジオのボタン→ラジオボタン ‣

    電話やフロッピーの形状→アイコン
  16. #pwanight 僕らにできること

  17. #pwanight 実機で確かめる ‣ エミュレータではなく、スマホ実機でちゃんと試すこと ‣ ⾃分で違和感が感じなければ⼈に尋ねる ‣ インターン⽣やパートさんでも操作できるか調べること ‣ iOS/Androidどっちとも持っておきたい

    ‣ Androidのバックボタン、iOSのエッジスワイプなど抑えておきたいポイントが…
  18. #pwanight 表現⼒を上げる ‣ アプリの完成度を上げるための表現⼒をつける。 ‣ アニメーションや、iOSだけに効くCSSプロパティ。 ‣ Ionicなどのコンポーネント集でやっていることを読むのもよい。

  19. #pwanight ガイドラインを知る ‣ モバイルアプリ開発の知⾒があるので、ちゃんと読む。 ‣ 「Human Interface Guidelines 」「Material Design」

    ‣ Material Designは、実装だけじゃなくて原理のガイドラインもある
  20. #pwanight ガイドラインを知る ‣ iOSのDesign Principles(デザイン原則)には次のものが含まれている ‣ Direct Manipulation(直接操作) ‣ Feedback(フィードバック)

    ‣ Metaphors(メタファー) ‣ User Control(ユーザーコントロール) Human Interface Guidelines
  21. #pwanight ガイドラインを知る ‣ Web系の⼈間からはComponent集としてのイメージが強い ‣ ガイドラインもあって、原理原則について細かく書いてある。 ‣ Motion, Gesture, Soundといった⾒えない要素についても取り上げている。

    Material Design
  22. #pwanight ガイドラインを知る ‣ ネイティブアプリを対象としているので、取捨選択が重要 ‣ PWAで「アプリのUIをWebで再現する」のではなく、Webのいいところを活かしたい 注意

  23. #pwanight まとめ

  24. #pwanight まとめ ‣ 僕らのWebアプリはユーザーの道具になりえているか? ‣ 触って違和感を感じてるけど⾒逃してないだろうか? ‣ スマホアプリの横に並んで違和感はないだろうか? ‣ アプリ開発の資産を利⽤できているだろうか?

  25. #pwanight 参考書籍・サイト ‣ 渡邊恵太(2015)『融けるデザイン』ビー・エヌ・エヌ新社 ‣ Apple『Human Interface Guidelines』 ‣ https://developer.apple.com/design/human-interface-guidelines/

    ‣ Google『Material Design』 ‣ https://material.io/
  26. #pwanight Thank you! ご清聴ありがとうございました! mottox2 @ ؿٔ٦ٓٝأ8FCؒٝآص،