Developer's Blog

タッチ操作に適したドラッグ

Touch and Drag

画面上に並んだものを並べ替えたりするときには、ドラッグアンドドロップはとても理解しやすい操作方法です。特に、指で操作対象を直接扱える iOS はドラッグと相性がよいといえます。しかしその反面、”画面が指で隠れる” という制約も強く受けることを気に留めておく必要があります。今回は、iOS アプリで使いやすいドラッグを実現するためのポイントをいくつか挙げてみます。

操作対象を指より上に出す

Drag in Sleipnir Mobileドラッグ開始時、操作対象は指が置かれる領域なので、指の真下にいるはずです。しかし、ドラッグ中は何を掴んでいるのかをユーザーに明示できたほうが親切です。そこで、ドラッグ中は指で隠れないように操作対象を少し上に表示させます。ドロップ位置がユーザーの指しているポイントからずれないように、あくまで表示のみを動かします。Sleipnir Mobile などでは、この手法で操作対象を見やすくしています。

操作対象を半透明で表示する

Drag in Home上述のようにドラッグ中の操作対象を充分に見えるようにすると、今度はドロップ位置を覆うことになります。ドラッグの目的は “ある位置への移動” ですから、肝心のドロップがしづらいのも考えものです。操作対象を半透明にすることでこの問題を解消できます。小さな画面では要素が密集していることも多いので、この工夫による効果はなかなかのものです。ホーム画面の編集がこの好例といえるでしょう。

操作対象を指先サイズで表現する

Drag in FlickAddress通常はテーブルの並べ替えのように、操作対象をそのまま動かして結果を即反映させるのが最良の方法です。しかし、操作対象を別の小さな領域にドロップするような場合には、ドラッグ中のものを一時的に指先サイズのアイコンなどで表現するほうがいいときがあります。FlickAddress では、テーブルセルがそのまま下の矢印のところに入るようには見えないため、カードアイコンにして無理なく放り込める外観を与えています。

ドラッグ以外の操作方法を検討する

デスクトップのアプリケーションと違い、タッチ操作ではドラッグ自体が難しかったり面倒なこともあり得ます。デバイスの持ち方や姿勢に影響されるためです。何でもドラッグするのではなく、ドラッグする甲斐があるときにだけドラッグを使うようにしましょう。提供したい機能が本当にドラッグに適しているかどうか、よく吟味することが大切です。

iOS アプリに最適なドラッグアンドドロップで、ユーザー体験をもう一歩よいものにしましょう。

Mac でもタッチ操作をつくり込んでいますSleipnir for Mac をダウンロード

Copyright © 2019 Fenrir Inc. All rights reserved.