縁の下のUIデザイン―少しの工夫で大きな改善!

第17回 長押しを使ったデザインの可能性

この記事を読むのに必要な時間:およそ 2 分

ユーザーにわかりやすく使いやすいUIを提供するためには,ガイドラインに従ったり,よくあるルールに沿って作ると,ユーザーの学習コストが低く,何が起こるかの想像もしやすくなります。一方,新しいエッセンスやユニークな体験を取り入れることも大切なことだと思っています。その手段の一つとして,身近な生活の中で経験した快適な体験のエッセンスをうまく置き換えられるか試してみることを,私はやってみることがあります。

今回は,ゲーム機やハードウェアで最近私がよく体験している「ボタンの長押し」をヒントに,Webサービスやアプリでどのような使い方ができるか,どのような特徴があるかを発想してみます。

長押しが使われている身近な事例

長押しが利用されている最も身近なものの一つにはコンピュータの再起動があります。iPhoneやMac の電源ボタンを長押しして再起動した経験がある人は少なくないはずです。それ以外にも,ボタンなどを長押しすることは意外とよくあります。2つの事例を紹介します。

イヤホンのBluetoothペアリング

最近のデジタル機器は,フォルムの美しさが際立ったデザインが多くなってきたように感じます。そのためボタンの数も減り,1つのボタンが複数の役割を果たすような事例も増えているように感じます。

最近私が愛用しているソニーの「WF-1000XM3」というイヤホンでは,右耳用,左耳用イヤホンそれぞれのタップ操作に機能を割り当てられますが,両方を同時に長押しすることでスマートフォンなどの再生機器とペアリングします写真1⁠。この製品以外でも,同じようにペアリングするためにボタンを長押しする経験をしたことが何度かあります。

写真1 イヤホン「WF-1000XM3」の事例

写真1 イヤホン「WF-1000XM3」の事例

この使われ方を一般的な言葉にすると,⁠頻度高く利用するものではないけど,なくてはならない機能を割り当てたパターン」と言えます。

ゲームでのスキップ

コンシューマー向けのゲームでも,ボタンの長押しがよく使われています。⁠熱血硬派くにおくん外伝 River City Girls』注1というゲームでは,シーンのつなぎとなる会話や動画の画面をボタンを長押しすることでスキップできます。ボタンを長押しすると画面の右上の「SKIP」の文字の色が左から右に別の色で塗りつぶされることによって,長押しでスキップできることを示唆しています図1⁠。

図1 ゲーム『熱血硬派くにおくん外伝 River City Girls』の事例

図1 ゲーム『熱血硬派くにおくん外伝 River City Girls』の事例

この使われ方を一般的な言葉にすると,⁠特定のアクションをショートカットするために利用したパターン」と言えます。

注1)
WayForward Technologies,アークシステムワークス開発,2019年発売で,プラットフォームはNintendo Switch,PlayStation 4,Xbox One,Steamです。

アプリやインターネットサービスでの利用

このように,ハードウェアやゲームで長押しを利用することはよくありますが,PCやスマートフォンの操作で使うことはそう多くないように感じます。現時点での利用例としては,テキストの選択や,iPhoneでのアイコン長押しによるメニューを表示などが思いつきます。

ガイドラインでの言及

Googleが提唱しているMaterial Designでは,長押しによる選択モードへの変更事例が言及されています。しかし,長押しすることによってモードが変わることはユーザーにはわかりにくいとも解説されています。Appleが提唱するHuman Interface GuidelinesのGesturesでは標準的なジェスチャを紹介し,これらの利用を推進していますが,入力フォームの長押しで,テキストの選択位置を拡大表示する使い方が取り上げられています

アプリで利用されている事例

TwitterのiOSアプリでは,画面右下の投稿ボタンをタップすると投稿画面に遷移しますが,長押しすると上から,下書き,GIF投稿,画像投稿のショートカットメニューが表示されます図2⁠。

図2 Twitter

図2 Twitter

PinterestのiOSアプリでは,イメージをタップするとイメージの詳細画面に遷移しますが,長押しすると上から,保存,非表示,シェアのショートカットメニューが表示されます図3⁠。押した状態からそれぞれのアイコンに指をずらすと,対応した画面に遷移します注2⁠。

図3 Pinterest

図3 Pinterest

いずれのメニューも通常タップした先の画面からも動線がありますが,長押しすることでショートカットになるのです。このことは気が付いた人しかわかりません。しかし,これらの機能を普段よく使う人が気が付くと,より便利な使い方ができるよう長押しが利用されている事例と言えます。

注2)
TwitterはiOSのみでしたがPinterestはAndroidアプリでも同様の動きをします。

ゲームでの利用方法をスマートフォンで検証

TwitterやPinterestのアプリでの事例を紹介しましたが,いずれもショートカットメニューとしての利用方法でした。そこで,スマートフォンでほかの利用方法が可能か少し検証してみました。図1でスキップの事例を紹介しましたが,これを応用してカートに入れる行為や決済/配送先情報などの入力をスキップしてボタンの長押しで即購入できるというアクションをECサービスで実現すると仮定します。

UIを考えるうえで,⁠このボタンは長押しでアクションが完了する」とユーザーに認識してもらうことを表現しています。

図4(a)はボタンを押し続けていると左から右にボタンの色が変わっていくことで表現しました。図1のゲームのUIでは操作をするコントローラーと長押しであることを伝える表示要素は別々ですが,スマートフォンの場合は画面サイズの制約もありそれが同じになってしまいます。そのため,図4(a)では指でボタンが隠れてしまい,長押ししていることに気が付かないことが考えられ,有用ではありません。

そこで図4(b)のように,ボタンそのものではなく購入する商品写真が徐々に購入完了に近付く案に変えてみました。

図4 長押しで即購入できるボタンの事例

図4 長押しで即購入できるボタンの事例

しかしこの方法では,図2や図3の事例とは違い,ボタンにタップと長押しの2つのジェスチャを割り当てるのは難しく感じます。⁠お年寄りはスマートフォンやタブレットを利用する際,ボタンに触れて離さずに押しつづける光景をたまに見る」といった話を聞いたこともあり,そういう観点では,万人向けの操作には扱いにくいジェスチャかもしれません。

今回はロングタップに注目し,普段と違う操作やアイデアが何か考えられないか検証してみました。何気なく普段操作したり使っている行為も,少し視点を変えてみると新しい発見につながるかもしれません。何かヒントを見つけたら試しに実装してみることも時には大切だと思っています。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.116

2020年4月24日発売
B5判/152ページ
定価(本体1,480円+税)
ISBN978-4-297-11345-2

  • 特集1
    はじめてのトラブルシューティング
  • 特集2
    [実践]AWS CodeDeploy
  • 特集3
    アプリケーションアクセシビリティ

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/