Human Interface Guidelines

ドラッグアンドドロップ

ドラッグアンドドロップを使用すると、選択範囲をある場所から別の場所にドラッグすることで、選択した写真、テキスト、その他のコンテンツを移動または複製できます。

iOS、iPadOS、および macOS は、タッチスクリーン上のジェスチャ、ポインティングデバイスでの操作、およびフルキーボードアクセスモードによるドラッグアンドドロップをサポートしています。さらに、ユニバーサルコントロールを使用すると、Mac と iPad の間で人々はコンテンツをドラッグできます。Mac では、VoiceOver ユーザーはドラッグアンドドロップも利用できます。

ドラッグアンドドロップを実行するには、人々は ソース と呼ばれる 1 つの場所でコンテンツを選択し、宛先と呼ばれる別の場所にコンテンツをドロップします。これらの場所は、テキストビューのように同じコンテナ内にある場合もあれば、分割ビューの反対側のテキストビューのように異なるコンテナ内にある場合もあり、異なるアプリ内にある場合さえもあります。

さまざまな要因に応じて、ドラッグアンドドロップアクションにより、選択したコンテンツが宛先に移動または コピー される場合があります。ドロップが成功すると、移動されたコンテンツは宛先にのみ存在します。コピーされたコンテンツは両方の場所に存在します。原則として、選択したコンテンツを同じコンテナ内にドロップすると移動しますが、別のコンテナにコンテンツをドロップするとコピーされます。アプリ間でコンテンツをドラッグアンドドロップすると、常にコピーになります。

ベストプラクティス

可能な限り、あなたのアプリ全体でドラッグアンドドロップをサポートして下さい。 ほとんどの人はドラッグアンドドロップに精通しており、どこでも試してみます。テキストフィールドやテキストビューなど、システムが提供するコンポーネントを使用すると、ドラッグアンドドロップの組み込みのサポートが得られます。

ドラッグアンドドロップアクションを実行するための代替方法を提供します。 ドラッグアンドドロップ操作は、時々人々が実行するのに不便または不可能な場合があるため、同じことを行う他の方法を提供することが重要です。たとえば、人々がアイテムをコピーして別の場所に移動するために使用できるメニューコマンドを含めることができます。iOS および iPadOS では、アクセシビリティ API を使用して送信元と宛先を識別できるため、人々は支援テクノロジーを使用してあなたのアプリでドラッグアンドドロップできます (開発者向けガイダンスについては、accessibilityDragSourceDescriptors および accessibilityDropPointDescriptors を参照してください)。

あなたのアプリ内でコンテンツをドラッグアンドドロップすると、移動またはコピーのどちらかが発生するかを決定します。 一般に、移動元と宛先のコンテナが同じである場合 (文書内のある場所から別の場所にテキストをドラッグする場合など)、移動が意味があり、コピーは、イメージをある文書から別の文書にドラッグする場合など、送信元と宛先が異なる場合に意味があります。これらのデフォルトを変更する前に、ほとんどの人が期待する動作を検討し、不満やデータ損失を引き起こす可能性が最も低い動作を優先してください。

意味がある場合は、多項目のドラッグアンドドロップをサポートして下さい。 人々は、各項目を個別にドラッグするのではなく、項目のグループを宛先にドラッグすることの便利さを高く評価します。iOS、iPadOS、および macOS では、人々は多項目を選択してグループとしてドラッグできます。iPadOS では、ドラッグ操作を停止することなく、項目を選択してドラッグを開始し、他の項目をグループに追加できます。

人々がドラッグアンドドロップ操作を取り消せるようにすることをお勧めします。 時々、人々は誤って間違った宛先にコンテンツをドロップするので、アクションを取り消して前の状態に戻すことができることを高く評価します。また、取り消せないドラッグアンドドロップ操作を完了する前に確認を求めることで、人々が間違いを回避することもできます。たとえば、macOS では、フォルダを開いてドロップされた項目を削除できないため、書き込み専用フォルダにファイルをドラッグすると、Finder は確認を求めます。状況によっては、ドラッグアンドドロップの結果を取り消せない場合に、元に戻す方法を提供することが理にかなっています。たとえば、写真では、人々は共有フォトストリームに写真をドロップした後、写真の共有をキャンセルできます。

ドラッグされたコンテンツの複数のバージョンを、忠実度の高いものから低いものの順に提供することを検討してください。 複数の選択肢を提供することにより、宛先は受け入れることができる最高品質のバージョンを選択できます。たとえば、人々があなたのアプリで作成した線画をドラッグできる場合は、PDF ベクトル表現、透明度のあるロスレス PNG イメージ、透明度のない損失のある JPEG イメージの順に提供できます。もう 1 つの例は、チャートなどのリッチで複雑なオブジェクトを使用するアプリです。このアプリは、チャートオブジェクトをサポートしていない宛先に対して、ネイティブチャートオブジェクトの後に、チャートのイメージなどのより単純なバージョンを提供する場合があります。

バネ仕掛けのロードを有効にすることを検討してください。 バネ仕掛けのロードを使用すると、選択したコンテンツをドラッグすることで、ボタンやセグメントコントロールなどの特定のコントロールをアクティブにできます。たとえば、カレンダーを使用すると、選択したイベントをツールバーの日、週、月、または年のセグメントにドラッグして、イベントを別の日付に移動する便利な方法を利用できます。Magic Trackpad を搭載した Mac では、ボタンまたはセグメントコントロールは、コンテンツを保持し続けているときに人々がボタンやコントロールを強制的にクリックするとアクティブになります。iPad では、これらのコンポーネントは、コンテンツを保持しているときに人々がコンポーネントにカーソルを合わせるとアクティブになります。

フィードバックの提供

ドラッグアンドドロップは動的なプロセスであり、複数の結果をもたらす可能性があります。人々がプロセスをコントロールしていると感じられるようにするには、全体を通して明確で継続的なフィードバックを提供することが重要です。

人々が選択範囲を約 3 ポイントドラッグするとすぐに、ドラッグイメージを表示します。 これは人々がドラッグしているコンテンツの半透明の表現を作成するのに適しています。半透明性は、表現を元のコンテンツから区別するのに役立ち、人々が宛先を通過するときにそれを確認できるようにします。人々がコンテンツをドロップするまでドラッグイメージを表示します。

わかりやすくする場合は、ドラッグアンドドロップ操作の結果を予測できるようにドラッグイメージを変更します。 たとえば、写真を文書にドラッグする場合、ドラッグイメージを展開して、文書内の写真のデフォルトサイズを表示できます。また、ドラッグの群れを使用して、複数のドラッグ項目を視覚的にグループ化し、ドラッグしたい項目を見逃していないことを確認し、ドロップしたときにグループ化を解除することもできます。ドラッグイメージを変更すると貴重なフィードバックが得られますが、ドラッグイメージが絶えず急激に変化するような気が散るような体験を得させることは避けてください。

宛先がドラッグされたコンテンツを受け入れられるかどうかを人々に示します。 たとえば、宛先がドラッグされたアイテムを受け入れられる場合にのみ挿入ポイントを表示したり、含まれているビューを強調表示したり、受け入れられない時に視覚的なフィードバックを表示せずに、circle.slash SF シンボルなどの明示的な「許可されていない」イメージを表示したりすることができます。コンテンツが宛先の上に配置されている間のみ、協調またはその他の視覚的な手がかりを表示し、人々がコンテンツをドラッグし終わったときの視覚的なフィードバックを削除します。可能な宛先が複数ある場合は、一度に 1 つずつ人々が識別できる視覚的な手がかりを提供します。

無効な宛先に項目をドロップした場合、またはドロップに失敗した場合は、視覚的なフィードバックを提供します。 たとえば、項目を現在の場所からソースに戻す (ソースがまだ表示されている場合) か、スケールアップしてフェードアウトし、項目が正常に着陸する代わりに蒸発しているような印象を与えることができます。

ドロップを受け入れる

必要に応じて、宛先のコンテンツをスクロールします。 多くのコンテンツを含むスクロールコンテナ内で項目をドラッグすると、項目をその上に移動すると、コンテンツが自動的にスクロールされます。この動作により、人々が項目をドロップする適切な場所を簡単に見つけることができますが、コンテナの外でドラッグ操作を続けると、自動スクロールはもはや不要になります。システムが提供するテキストビューとテキストフィールドは、デフォルトでこのように動作します。

選択肢がある場合は、あなたのアプリが受け入れられるドロップされたコンテンツの最も豊富なバージョンを選択してください。 たとえば、人々が別のアプリからチャートオブジェクトをドラッグする場合、ドラッグ操作により、リッチなネイティブチャートオブジェクトとその単純なイメージの両方が提供されます。あなたのアプリがチャートをサポートしている場合は、ネイティブチャートオブジェクトを抽出して表示します。そうでない場合は、代わりにイメージを使用します。

必要に応じて、ドロップされたコンテンツの関連部分のみを抽出します。 たとえば、人々が連絡先をメールの受信者フィールドにドラッグすると、メールには連絡先の住所情報ではなく、名前とメールアドレスのみが表示されます。

実際のキーボードが接続されている場合は、ドロップ時にオプションキーを確認してください。 人々がドラッグ中に Option キーを押したままにすると、同じコンテナ内でドラッグアンドドロップ操作を強制的にコピーのように動作させることができます。同じコンテナ内にコンテンツをドロップする前に Option の保持を停止すると、ドラッグ操作によって移動します。

ドロップされたコンテンツの転送に時間が必要な場合は、フィードバックを提供してください。 たとえば、進行状況インジケータを表示して、転送にかかる時間を人々に見積もることができます。コレクション、リスト、およびテーブルでは、ドロップ位置にプレースホルダーを表示して、コンテンツの転送が完了した後にコンテンツがどこにあるかを人々が知ることができるようにもできます。アプリ間で時間のかかる転送が発生した場合、システムはアラートを表示できます。

ドロップされたコンテンツがタスクまたはアクションを開始したときにフィードバックを提供します。 印刷などのタスクを開始するコントロールにコンテンツをドロップした場合は、タスクが開始されたことを人々に示し、進行状況を知らせ続けます。

ドロップされたテキストに適切なスタイルを適用します。 ソースと宛先の両方が同じテキストスタイルをサポートしている場合、ドロップされたテキストが元のフォント、書体、サイズ、およびその他の属性を維持していることを確認してください。それ以外の場合は、宛先のスタイルをドロップされたテキストに適用します。

ドロップした後、宛先でコンテンツの選択状態を維持し、必要に応じてソースでコンテンツを更新します。 人々は、ドロップしたコンテンツが選択されたままになり、すぐに行動できることを期待しています。ソースと宛先が同じコンテナの場合、ドラッグ操作で移動すると、コンテンツは元の場所から消えます。同じコンテナ内でドラッグ操作を実行してコピーをする場合は、元の場所に残っているコンテンツから選択状態を削除します。選択したコンテンツを別のコンテナにドラッグする場合は、ソースのコンテンツの選択を解除します。

プラットフォームの考慮事項

tvOS または watchOS ではサポートされていません。

iOS、iPad

人々に複数の同時ドラッグアクティビティを実行させます。 iPadOS では、人々は進行中のドラッグセッションに項目を順番に追加して、指で処理できる数の項目を収集できます。たとえば、ホームスクリーンでアプリアイコンを選択してドラッグを開始し、追加のアプリアイコンを選択してから、すべてを別のホームスクリーンまたはフォルダにドロップできます。この操作をサポートするには、人々がドラッグ中に項目を追加して、群れを通して視覚的なフィードバックを提供し、複数の同時ドロップを受け入れるようにする必要があります。

macOS

あなたのアプリから Finder にコンテンツを人々がドラッグできるようにすることを検討してください。 これをサポートするときは、あなたのアプリが後で開くことができる形式でコンテンツを提示するようにしてください。たとえば、Calendar を使用すると、イベントを .ics ファイルとして Finder にドラッグできます。人々はこのファイルを他の人と共有したり、カレンダーにドラッグして開いたりすることができます。必要に応じて、ドラッグされたコンテンツを保存するための一時的なコンテナである クリッピング にドラッグされたコンテンツを出力できます。たとえば、ほとんどのシステムアプリでは、人々にテキストを Finder にドラッグさせて、クリッピングとして表示することができます。後で、人々はクリッピングをテキストフィールドまたはテキストを受け入れる他の場所にドラッグすることができます。ドラッグアンドドロップクリッピングはクリップボードとは関係がないことに注意してください。

最初にウィンドウをアクティブにすることなく、人々が選択したコンテンツをアクティブでないウィンドウからドラッグできるようにします。 アクティブでないウィンドウで選択されたコンテンツは 背景での選択 と呼ばれ、アクティブなウィンドウで選択されたコンテンツとは外観が異なります。一般に、人々は、アクティブでないウィンドウを景に出さずに、背景での選択をアクティブなウィンドウにドラッグすることを期待しています。

可能であれば、既存の背景での選択に影響を与えることなく、アクティブでないウィンドウから個々の項目をドラッグできるようにします。 たとえば、人々はウィンドウで選択されているファイルの選択を解除せずに、選択されていないファイルをアクティブでない Finder ウィンドウからドラッグできます。

多項目のドラッグ操作中にバッジを表示することを検討してください。 バッジは、人々がドラッグしている項目の数を示すために使用できる、数を含む小さな塗りつぶされた楕円です。宛先がドラッグされた項目のサブセットのみを受け入れることができる場合は、バッジを更新して新しい数を表示します。

ポインタの外観を変更して、人々がコンテンツをドロップしたときに何が起こるかを示すことを検討してください。 状況によっては、コピー ポインタの使用に加えて、ドラッグリンク、アイテムの非表示、および 操作が許可されていない ポインタを使用することもできます。ガイダンスについては、ポインタを参照してください。

可能な限り、人々が 1 回の操作でコンテンツを選択してドラッグできるようにします。 人々が多項目を選択している場合を除いて、選択してからドラッグ操作を開始するまでの間に一時停止する必要がない場合は、それを高く評価します。