【押して広がるアプリの世界】上級者向け機能「長押しUI」集めてみた
こんにちは。Goodpatch UIデザイナーの菅原です。
皆さんは、スマートフォンアプリなどで「長押し（プレス アンド ホールド）」機能を使ったことはありますか？
例えばiPhoneでは、アプリアイコンを長押しすると、ホーム画面上でアプリ内で頻繁に利用するアクション（App Storeなら検索など）が簡単に操作できたり、ブックアプリでは一覧画面から無料サンプルの読み込みや共有ができます。
長押しは、「より最適化された上級者向けの機能」としての役割を果たしており、代表的なものですと、「クイックアクション」と呼ばれる概念がHuman Interface Guidelinesに記載されています。
今日はアプリに隠されたインタラクション、「長押し」の世界を皆さんにご招待します。楽しんでいただければ幸いです。
目次
長押しUIとは
「長押し」という動作は『あくまでショートカット的位置付け』であり、『代替手段の提供（アクセシビリティの確保）』がデザイン原則的に軸となりそうです。
そのため、頻度の高いアクション数を優先的に表示し、実行すると何が起こるか明確なタイトルをつけるなど、普段の操作よりもユーザビリティの高いものであることが重要になるかと思います。もちろん、それ自体が使えなくても（機能を知らなくても）十分にUIを扱えることがポイントです。
Human Interface Guidelinesでは、「タッチ（またはピンチ）したまま」することで「追加のコントロールまたは機能を表示する」との説明がされています。このあとに紹介する「メニューの表示」や「奥の階層を見せる」などもそれに該当しますね。
ちなみに、かつてiPhoneには「3D Touch」という機能があり、当初は圧力センサーによって指の押し込み具合で駆動するインターフェイスでした。現在は「3D Touch」が廃止され、ただの長押しになってしまったという経緯があります。
では、ここからは各アプリ内での長押しがユーザーの体験向上にどのように寄与しているかを、「コンテンツ」（画像や文章などの情報そのもの）、「操作部分」（タブやボタン）、そして、それらとは別に筆者がときめいた「心踊る表現的な長押し」の3つのテーマでそれぞれ紹介していきます。
コンテンツへの長押し編
コンテンツに対して長押しをすると、どのような挙動が振る舞われるのか見てみましょう。
メニューの表示
クイックアクションの振る舞いは、アプリごとに違います。
Pinterestでは、気になった画像を長押しすると「ピンに保存や共有」ができます。Pinterestはどんどん階層を深掘りして情報を収集する体験設計なので、必然的に回遊時間が長くなります。それを見越してストレスなく保存できるような配慮がされていますね。
Slackでは、メッセージを長押しすると、下からアクションシートが開きます。指の届きやすい部分での操作が可能かつ、メッセージが日々更新されるスレッド内を邪魔しないようメッセージにメニューボタンを一切配置しない潔さも良い長押し設計です。
タスク管理アプリのCraftでは、タスクを長押しすると、入力モードからタスク文章のスタイル変更や並び替えができます。「まずはタスクを入力する」がユーザーの望む体験なので、それより優先度の低い編集系の機能をメニューに格納しているのが分かります。
Mustという映画アプリでは映画を長押しすると「観たい・鑑賞済み・好みではない」のタグを選択することができます。Amazon Primeは詳細画面に入らないと「視聴済」かどうか判断できないのに対してMustでは分かりやすいタグが一覧画面でも表示されます。
奥の階層を見せる
長押しにより、クイックアクションだけでなく、詳細も覗き見できます。
天気アプリのCARROTでは、気温表示部分を長押しすると、体感気温や降水確率などの詳細が覗けます。この機能のおかげで、外出の際に天気の詳細を素早く確認でき、友達や家族と共有も簡単です。
LINEでは、メッセージを長押しすると既読をつけずに詳細を確認できる「ブオン機能」があります。LINEでは左右スワイプで通知の設定も可能ですが、長押しでは「メッセージを開かずに確認してから非表示や既読の操作ができる」という流れがスムーズに行えます。
ちなみにiOSの標準機能として、ドリルダウンスタックである程度潜った辺りで「戻る」ボタンを長押しすると、上位階層の一覧をメニューで展開することができます。あくまで「ショートカット的位置付け」なので、機能を知らなくても十分にUIを扱えることがポイントです。
テキストのコピーや共有
文字情報がメインコンテンツであるアプリでは、コピーや検索などの標準機能以外にさらに特化したアクションがあります。
記事を扱うnoteでは、興味深い文章を自分の記事で引用するケースを踏まえています。また、noteは記事内のコメントで意見交換が行われるより、別プラットフォーム（XやLINEなど）を横断して意見がされることでより真価を発揮すると僕は思ってます。簡単に文章の引用ができる機能があるおかげで「簡単に記事を共有・引用できる→記事記事自体の認知度にも貢献できる」体験になっています。
辞書アプリである大辞林は、さらに知りたい単語のページに飛ぶなど、実際に辞書を使用している時に必要な機能を長押しで可能にしています。また、長押ししている部分を左にズームアップしてくれるのが特徴的です。辞書を虫眼鏡で見ながら探す様子があるように、使うユーザーによっては見づらいケースがあります。そうしたアクセシビリティの面も考慮されています。
作成
予定作成系のUIアプリにおいて、長押しは「作成」の手助けを担うことがあります。
Fantastical Calendarでは特定の日にちを長押しすれば、新規でイベントを作成できます。下のフローティングボタンから作成するのと違い、日にちがタグとして入った状態になるので、タスクのみ入力すればいいのは楽ですね。
1日の流れをカスタムできるKyugoは、時計の延長線上を長押しすることで、趣味や仕事のスケジュールを作成できます。時計を囲んだ3階層ごとに追加できる予定のタイプが違うのも、1日のスケジュールの多様性を加味した設計になっています。また、右下のフローティングボタンからだと階層が深いので「この時間に予定を入れたい」というメンタルモデルに沿っています。
Fantastical Calendar を App Store で見る
削除や解除
ロングプレスで削除を行うこともできます。複数コンテンツが並ぶ状態で、どれかを削除したいケースを踏まえています。
料理レシピを紹介しているクラシルでは、保存したレシピを長押しすることで削除できます。
アプリごとにUI画面をまとめておけるStockeyでは、まとめたフォルダを長押しすることでフォルダの見た目が変化し、削除することができます（画面右上の編集を選択することで同じモードになります）。
また、別ケースですが、miroでは長押しをすることでロックを解除することができます。
miroのような作業系ツールでは、文字や図形をロックしてストレスなく作業したいもの。その際、誤作動でロックが解除されてしまうと、思わぬ作業が増えてしまったりします。
これらの長押しはキーオブジェクトの削除など、「普段は状態が変化して欲しくない」ケースや優先度の低い／避けたいアクションを見えない動線にしまっているように思えます。
再生の補助
動画系のアプリでは、長押しすることで再生の補助的な機能を行うことができます。
YouTubeでは画面右側を長押しすることで、倍速にすることができます。また、再生バーの長押しで再生バーの説明文が表示されます。
Tiktokでも同じように画面端を長押しで2倍速になります。特徴としては下のタブバーが消え、そこに倍速のテキストが表示されてますね。YouTubeと違い一つ一つが短いTiktokでは、再生速度を変えている間に別タブに移動することは少ない（そのまま見終わり、別の動画へ移動する）ことを踏まえているのかもしれません。そのぶん、画面を邪魔しないタブ位置で倍速の表示。
動画コンテンツでは、基本再生バーを駆使して移動したりしますが、そのようなコントロールが必要な操作をしたくないケースの際に長押しは役立ちますね。
操作部分への長押し編
次は、タブやボタンなど操作部分に対して長押しをすると、どのような挙動が振る舞われるのか見てみましょう。
ステータスの切替
ボタンを長押しすることで、一時的にステータスを切り替えることができます。
Amazon Prime Videoは再生ボタンを長押しすると「視聴済みとしてチェックする」という操作が表示されます。これはAmazon Prime外で視聴したことのある映画などに対し、「視聴済」というステータスをつけたいケースを想定しているのかもしれません。
純正のカメラアプリでは、シャッターボタンの長押しが「カメラモード切り替え」の役割を果たします。また、シャッターボタンを長押しすると動画に切り替わるだけでなく、横にスライドすると固定できます。うっかり指を離して動画が切れるのを防げる、ユーザビリティに富んだ長押しです。
曲名検索アプリのShazamでは、アイコンボタンを長押しすると、「Auto Shazam」という、別のAppに移っても周囲で流れている音楽を自動的に認識することができるモードに切り替わります。
Amazon Prime Video を App Store で見る
音声配信に特化したSNSであるClubhouseは、青の録音ボタンを長押しし続けている間に録音、指を離して投稿することができます。長押しだけでなく、指を離す動作にもアクション性を持たせているのが特徴的ですね。
別ケースですが、Kyugoでは時計部分を長押しすることでAMとPMを切り替えることができます。これ自体は頻度が多そうな操作なので、左上の日付ボタンでも切り替え可能ですが、時計を直接タップという直感的なメンタルモデルにも配慮がされているように思えます。
検索欄にフォーカス
タブバーにサーチ（検索）のアイコンがあるときは、ぜひ長押ししてみてください。もしかすると、快適な検索体験ができるかもしれません。
TheasdsやInstagramでは、サーチアイコンを長押しすると自動で検索欄にフォーカスが当たります。
通常操作では「検索タブを選択→サーチバーを選択→キーボード入力」と3ステップありますが、長押しすれば「検索タブを選択→キーボード入力」と1ステップ飛ばして検索できます。
TheasdsとInstagramは、ホームアイコンの長押しで報告ができたりと、長押しUIの宝庫なのでぜひいろいろな部分を長押ししてみてください！
表示の切り替え
特定のアイコンをタブバーで長押しすることで、表示を切り替えることができます。
スケジュール共有カレンダーのTimeTreeでは、予定アイコンを長押しすると「月間・週間・リスト」に簡単に切り替えられます。長期的なスケジュール共有や週ごとの確認が「虫の目」「鳥の目」「魚の目」で可能で、柔軟な表示切替が良いポイントです。また、表示切替をあまり使わないユーザーも考慮され、画面に余分な情報が入り込まないように工夫されています。
WINTICKETでは、タブを長押しすると「競技の切替」ができます。情報のレイアウトがほとんど変わらず、視覚的な負担が少ないのが特徴です。ユーザーによっては、興味のない競技がある可能性があるため、画面が煩雑になりません。また、長押しでの切替ができることで、「ちょっとこっちの競技も気になるかも」とユーザーの興味を引くポイントがあります。
フローティングボタン操作の拡張
ご存知の方も多いと思いますが、Xではフローティングボタンを長押しすることで、アクションの選択を行えます。普通の1タップでは、メインアクションである投稿ができつつ、他のアクションも操作しやすい設計になっています。
ちなみにXは、ホームタブ長押しでアカウント切り替え、検索タブ長押しで検索フィールドにフォーカスが当たった状態にショートカットできたりと、長押しが意外と隠されています。
設定の変更
セクションタイトルを長押しすると、アプリ内の設定を変更できます。
例えば、メールアプリのSpark Mailでは、「重要・サービス通知」などのセクションタイトルのエリアを長押しすると、まとまりの粒度や表示数を調整できます。
これにより、メニューや設定に行かなくてもサッと変更でき、気付かなくても不満なくアプリを使いこなせます。こうしたカスタマイズができる部分に、ナイスな長押しの機能が隠れています。
表現的な長押し編
最後のセクションでは機能的な長押しに加え、より「表現的な長押し」に着目してみようと思います。
1つ目はチャットツールであるTelegram Messenger。メッセージを長押しすると上に絵文字が表示されます。その絵文字を長押しすると、絵文字が拡大し豊かなアニメーションとともにメッセージにリアクションをつけることができます。このようなメッセージに対して絵文字を送るのはLINEにもありますし、Facebookではいいねを長押しすることで「超いいね！」をつけられます。「感情」であることを敏感にキャッチするツールだからこそ、リアクションをただの記号として終わらせない振る舞いがとても素敵です。
2つ目はTo-Do管理アプリのThings 3。なんと右下のフローティングボタンを長押ししたまま画面へ移動させることができ、離すとそのセクションにTo-Doを追加できます。「この位置にTo-Doを入れたい。優先度が変わったから並び替えをしたい」という操作をダイレクトに行える、とても「身体性に沿った設計」のように思えます。
このアプリは独自のルールを持ちながらそのルールにあまり嫌悪感や違和感を感じにくい、一度扱えば理解できる「慣用的なUI」のお手本のようなアプリだなと思いました。有料のアプリですが、ぜひ触ってみることをオススメします！
Goodpatchのこの記事でもThings 3のUIについて言及されています。ぜひ読んでみてください。
最後は、インスタントカメラの仕様を基にしたDispoです。緑色のシャッターボタンを長押しすると、カメラの枠が広がり動画モードに切り替わります。
上記でも触れたカメラアプリでも同じことが言えますが、写真（静止画）を撮る際はシャッターボタンを1タップなのに対し、長押しをすることで「静止画を連続で撮っている」モードに切り替わるのが、非常に物理法則に則ったアクションの振り分けになっているように思えます。
また、写真を撮る際はインスタントカメラの世界観を壊さないようにしつつ、動画を撮る際はより視認性を高めるために画面が広がっています。使い捨てカメラの持つ性質（すぐに撮影した写真が確認できなかったり表示画面が小さい）を保ちつつ、使い捨てカメラができないこと（撮影）に関しては、ユーザビリティを上げる配慮が感じられるのが筆者的にとても好みです。
このようなUIはGoodpatchでは「ハートを揺さぶるデザイン」と表現しています。もしこのようなデザインが気になる方は、ぜひこちらの記事も見てはいかがでしょうか。
Telegram Messenger を App Store で見る
押せば広がるアプリの世界
いかがでしたでしょうか。長押しは始めから気付く機能ではありません。ふと押してみたり教えてもらうことで「使いやすいな。素敵だな」と、よりそのアプリが好きになる要素なのかなと僕は思っています。
始めから他人の趣味や考え方が分かるわけではないように、アプリもボタンを長押ししてみることで新たな一面を見せてくれるものです。
ぜひいろんなアプリを触って、「自分の好きな長押し」を探してみてはいかがでしょうか。皆さんが普段何気なく触るアプリの視点が、一つでも広がれば幸いです！
お知らせ：2023年アドベントカレンダー開催中🎄
この記事は Goodpatch Design Advent Calendar 2023 Day23 の記事です。今年も12月25日までさまざまな記事を公開していきますので、お楽しみに！
エンジニアが中心となって展開する Goodpatch Advent Calendar 2023 もありますので、合わせてご覧ください！
原案・執筆 / 菅原 颯太
校閲・編集 / usagimaru・乗田 拳斗
