“触り心地”がいいUIとはなにか　PWA時代のWebエンジニア／UIデザイナーが思う、直感的な道具に必要な4つの性質

Webエンジニア／UIデザイナーとしてPWAに感じる可能性

竹本雄貴氏（以下、竹本）：今回オンライン開催ということで、PWA Night 14回目のUI/UX回で話させてもらいます、竹本と申します。今YouTube Liveの画面開いてますけど、100名ぐらいの方がオンラインになっていて、けっこう緊張しているし、今までやったことのない取り組みなので、かなり不安のなかやっています。

前回の「PWA Night CONFERENCE」のLT会では「手触りのよいウェブを考える」みたいなLTをやったんですけど、今日はそれの拡大版ということでやらせていただきます。

最初に自己紹介をすると、僕は「もっと（mottox2）」と名乗っているフリーランスのWebエンジニアです。

Webエンジニアというか、エンジニアになってから一応もう8年ぐらいが経とうとしていて、Webエンジニアをやっている時期が一番長いんですけれども、iOSでSwiftを書いてる時期とか、AndroidでJavaを書いてたりして、一応スマホアプリという観点ではちょっと親しみのあるほうなのかなと思いながら、PWAに取り組んでいます。

また、SaaSのUIデザイナーとかアプリのデザイナーを務めてた時期もあって、いわゆる器用貧乏系のWebエンジニアとして何か強みが活かせるんじゃないかなと、PWAに可能性を感じております。

直接操作すると直接反応がある。スマホはハサミのような道具に似ている

今回UI/UXというところに着目する理由として、PWA開発というと、Add to Home Screen、ホーム画面にアイコンが置けるだとか、Web Push、Androidでしか動かないんですけど、Webでもプッシュ通知が送れるみたいな機能面とかに目がいきがちだと思うんですね。でも、スマホアプリのいいところは、ホーム画面があるとかカメラが使えるとか、そういうところの話だけじゃなかったはずで、あらためてスマホのUIに着目したいなということで、今回のテーマを設定しました。

今回、機能要件と非機能要件というのがアプリケーションにはあると思うんですけれども、機能要件は「〜ができる」みたいな話で、非機能要件は「軽快に動作する」とか「使いやすい」とか要件から外して考えられやすいことなので、そこらへんの話をします。

ちょっと話は変わるんですけれども、みなさんが初めてスマートフォンを触ったときのことを思い出してください。初めてスマートフォンを触ったときって、触っていてすごく気持ちいいと思ったと思うんですよ。

今回はそのインターフェース、Web上のインターフェースではなくて、ハードとしてのスマホに着目してほしいと思っています。タッチインターフェースとも呼ばれるんですけど、今回スマホを掘り下げて、触り心地って何だったのかを振り返って、「触り心地のよいUIって何だろう？」といったところをあらためて考えていきたいと思っています。

今回着目するのがスマホの道具的な性質です。PCとスマホって連続的な変化だと思いがちなんですけど、我々Webエンジニアからすると、HTMLを表示してそれが表示されているみたいな感じです。ですけれども、PCとスマホの一番大きな違いだと個人的に考えているのが、直接操作をするか・直接操作しないのか、というところだと思っています。

PCってマウスがあるじゃないですか。マウスを操作すると離れたところにあるディスプレイのカーソルが動いて操作をするんですね。一方、スマホは画面に直接表示された要素を直接操作するので、かなり大きな違いがあると思っています。

直接操作という点で見てみるとこれに似てませんか？　ハサミと紙なんですけど、ハサミってその場のものを直接操作して直接フィードバックがあるじゃないですか。スマホも同じで、直接タッチしたらそこが反応する、そういう点でスマホは道具に近いと言えると思っています。

触り心地のよいものは直感的である

スマホは道具的だという話をしたんですけれども、道具の進化系……道具としてのスマホはやっぱりPCより直接操作に近づいたと。スマホは道具としての性質が強いと念頭に置いてUIを考えていきたいなと思います。

使いやすい道具って何か？　今回は触り心地のよいものは直感的であると言ってもいいんじゃないかなと思っていて。じゃあそうなるとスマホにはより直感的な動作が求められるんじゃないかなと思っています。

直感的な道具に必要な性質として僕は4つ挙げたいんですけれども、1つ目は遅延なく、違和感なく動く。2つ目が自分の操作のフィードバックが認知できる。3つ目が慣れや類推から動かせる。4つ目、最後がメタファーを利用するというところです。

ただ、これだけ言ってもわからないと思うので、使いにくいUIを作ってきたので、ちょっと今回シェアしたいと思います。#pwanightのハッシュタグで「使いにくいUI」とツイートをします。なので、PCで見ている方はスマホでそのURLを開いていただければと思います。ただ、見れない方もいると思うので、こちらでも操作します。

はい、なんか「Bad UIs」というサイト。今回、これ今日の2時ぐらいに思いついて作り始めたのでかなり手抜きなんですけれども、これを触って思ったことをツイートするなりしてもらいたいなと思うので、1分ぐらい時間をとります。ツイートにある使いにくいUIを触ってみてください。Sli.doのほうにも投稿しますね。これけっこうSli.doよりTwitterのほうが流速が早いって感じですね。

じゃあちょっと見ていきましょう。この画面をキャプチャーするやつで直接の操作が見れるようになっているので、やっていきます。

表示の仕方ひとつで使いにくいUIができてしまう

例えばこれは最初の画面なんですけれども、きっとたぶんここをタップしたと思うんですけれども、実は文字だけ見てみると「始める」というのがあって、実はそっちが本物のリンクでした。タップするとハイライトがつくので、こっちがリンクってことですね。

ということで、見た目の罠があって、押せる要素っぽいけど押せないとか、押せないように見えて押せちゃう要素ってけっこうあると思っています。これをサービス利用上で必須なページでやられるとつらいよねというオチでした。

ということで、次2つ目。次は動きのところでボトムシートです。この下から出てくる最近ネイティブとかでよく見るUIなんですけれども、表示のされ方によって気持ちよさとか、出てきたって認知できるかが全然違うよねという話です。

パターン1は直接出てくるやつで、ボタンを押したけど、すぐ画面が切り替わっちゃって何が起こったかよくわからないってことあると思うんですよ。これは基本、スマホってアニメーションがあると思っていて、ホーム画面に戻るときとかやるときって、常に大きな画面遷移の変化があるはずで、そのアニメーションがないことによって、画面が変わったって認知が弱くなってしまうんですね。

ただ、アニメーションがあればいいかというと、それはまたちょっと違います。例えばこのパターン2とか、線形のアニメーションでやっているんですけど、なんか違和感あると思うんですね。

パターン3がスイッて出てくるんですけれども、アニメーションのイージングというのですが、イージングの仕方によってもこの自然な動きだとか不自然な動きが出てしまいます。

次に行ってみましょう、といったところで、ここ押しちゃった方いますか？　このADのところ。これけっこうあると思います。意図しないタイミングで要素が表示されてしまって余計に押せてしまったとか、押そうとしたボタンがズレちゃったことがあると思っています。

「ユーザーがタップしない限り基本的に画面は動かない」という原則を守っていれば、基本はいいはずなんですけれども、例えば広告の非同期読み込みで広告だけ後で読み込む、画像の高さと幅を指定しなかったのでレンダリングするときにズレてしまったとかいうのはよくあることで、そういうときにこういったレイアウトのズレが起こってしまうんですね。

以上、3例見てもらったんですけれども、こういった罠というか使いにくいUIはわりとできてしまうところがあるので、こういったところを頭に入れた上で、さっきの直感的な道具にしたいときの4要素を見てもらいたいなと思います。

操作と結果の違和感のなさが道具には大切

遅延なく違和感のない動きは、僕らハサミとか持つんですけれども、そのときに遅延することなんてありえないし、そのままフィードバックが出てくる感じなんですね。違和感のない動きという面でも、物理法則から逸脱した動き、さっきの線形にスイ〜って出てくるやつがよくない動きで、アニメーション、イージングの仕方によって自然な動きが出ます。

あとは、さっき0→1で一気に下の要素が出現してしまったときとかもあったんですけれども、基本的に0→1で飛び越えて物が出現することはありません。iOSであると、例えばbounceがないscrollとか、勝手にscrollを自前で実装した結果iOSっぽくないscrollになってしまったとか、そういうときって違和感のある動きになって触り心地が悪くなってしまうんですね。

1つ目「見た目と連動すること」というところ。さっき言った最初のクリック領域は、みんな間違えたと思うんですよ。テキストで書いてあってもみんなパターンで認識しているので、テキストを読まずにこれだろうというものを押してしまうところが、UIとして罠です。

あと、これはUIの話じゃないんですけれども、Webが遅いのは実装をがんばりましょうというところで、がんばってほしいなと思ってます。

2つ目「自分の操作のフィードバックが認知できる」というところです。自分の操作した結果が認知できるかはけっこう重要です。

物理ボタンとか物理のデバイスであったら、押した感覚とか、例えばiOSのホームボタンとか押したらカチッといって、絶対押せたなって感覚があったと思うんですけれども、最近はそういうボタンとかも減ってきて、それ以外のフィードバックをうまく活用できないと何が起こったかわからないことも多くなっています。

とくにスマホだと、小さな画面に対して指で画面の一部が隠れてしまうので、小さなフィードバックだと気づかれにくいんですね。現にOS標準の画面遷移ってけっこう派手に動いて、画面全体が動くとかで何やったかすごくわかりやすくなっていると思うので、そのへんを参考にしてもらえればなと思ってます。

さっきも言ったように、ユーザーのインタラクション、ユーザーのタップだとかボタンを押しただとか、そういったインタラクションによって変化させましょうということです。例外として、重要度の高い通知とか長い非同期処理は別ですが、基本的にユーザーの意図しないタイミングで動かさないといったところも念頭に置いておくといいと思います。

次に「慣れや類推から動かせる」ってところです。現実世界の道具でいっても慣れが重要で、例えばリモコンを見たらこれがリモコンだって認識できるし、だいたいパターンがあって、そういったところでユーザーへの学習を済ませてもらっているパターンもあります。OSの流儀を守っていればある程度動かせます。このへんは後ほどやります。

「メタファーを利用してください」というのは、これもちょっと時間が差し迫ってきたので飛ばします。

実機で確かめることが重要

最後、「僕らにできること」です。よくないUIとか見てもらったんですけれども、「僕らにできること」というのがたぶん一番重要なのでちょっと話します。

これ1つ目が「実機で確かめる」ってところです。Web開発者って自分でPCを使っているからChrome Dev Toolsでスマホのデバッグってやってしまうと思うんですけれども、スマホの実機でちゃんと確かめましょうというところがけっこう重要です。

自分で違和感が感じられないとか、けっこう開発していると気づきにくくなってしまうので、そういったときは人に尋ねましょう。会社であれば、インターン生とかパートさんとかだと、けっこう意外な発見があったり、なにも頭も入れないまま操作してくれるので、いいフィードバックがもらえると思います。

あと、PWAをやるにおいて、AndroidとiOS、ちゃんとどちらも持って操作しておくのはけっこう重要です。よくあるのが、Androidでバックボタンを押したけど、全然意図しない動作になることが多くて。とくにAndroidのバックボタン、戻るボタンですね、と、iOSのエッジスワイプ、左からスライドする動きで戻るんですけれども、押さえておきたいポイントとかがあるので、どちらとも慣れておくことで違和感の少ないUIが作れると思います。

「表現力を上げましょう」というところで、今ちょっとUIを見てもらったんですけれども、アプリの完成度を上げるための表現力をつけましょうということです。最近はSPAとかでデータの受け取りだとか管理だとかそういうところに着目される方が多いんですけれども、Webアプリケーションエンジニアなので、JSでデータを動かすんじゃなくて、CSSでどうやって装飾をするのかみたいなところも勉強しておくといいと思います。

Ionicとかコンポーネント集がけっこういっぱいあるので、そこらへんの実装を読んでどういうことをやっているのかを知っておくと、かなりいろいろ応用が利くと思います。GitHubを見れば中身を読めるはずです。

ガイドラインには開発の知見が詰まっている

最後「ガイドラインを知る」というところで、僕らはWeb開発をやっていてネイティブアプリ開発はあんまり知らないんですけれども、こういった知見はもうまとまってます。

モバイル開発の知見は、Appleであれば「Human Interface Guidelines」のところに「どういったものがあるのか？」「どういったところに気をつけるのか？」みたいなところとか、「Material Design」のところに、例えば「色はどうするのか？」だとか「タイポグラフィはどうするんだ？」とか、けっこうまとまってます。

Material DesignってWeb開発者からすると実装のコンポーネント集に見えるんですけれども、実はコンポーネントのほかにデザインというのがあって、そこにコンポーネントより前の段階の原則みたいなところがかなり分厚く書かれているので、ぜひ読んでみてください。

ガイドラインのところでさっきいろいろ紹介したんですけれども、iOSのDesign Principles（デザイン原則）には、直接操作だとかフィードバックだとかメタファーだとかユーザーコントロールだとか、さっき言った要素がけっこう詰まってたりします。

Material Designは、コンポーネントだけじゃなくてモーション、どういったアニメーションをさせればいいのかとか、ジェスチャーで気をつけることとか、音という見えない要素についても研究されているので、かなりよいです。しかも簡潔な英語で書かれているので非常に読みやすいです。

ただ、これはネイティブアプリを対象としているので取捨選択が重要で、PWAではアプリのUIをWebで再現するのではなくて、Webのいいところを活かしつつアプリのいいところも取り入れていってほしいと思います。

といったところで、問い直してほしいのが、「僕らのWebアプリはユーザーの道具になりえているのか？」「触って違和感があって見逃していないだろうか？」とか、「スマホアプリの横に並んで違和感はないだろうか？」「アプリ開発の資産をちゃんと利用できているのか？」とか、そういったところに目を向けていってほしいなと思います。

以上になります。ご清聴というか、（リモートなので）全然聞こえないんですけど、ご清聴ありがとうございました。以上です。