Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

UIデザインにおけるドラッグ&ドロップの正しい使い方とは?

Weeblyというサービスをご存知でしょうか。

Weeblyは、Webサイトを簡単に作成できるサービスで、サイトを構築するための様々な要素をドラッグ&ドロップで配置していくことができます。

今回は、そのWeeblyを題材に、『UIデザインにおけるドラッグ&ドロップの正しい使い方』について見ていきたいと思います。

ドラッグ&ドロップの事例

次のスクリーンショットをご覧ください。

こちらはサイト構築の画面なのですが、画面左側にアイコンが描かれた四角形が並んでいるのが見えます。

f:id:tamusan100:20160122205657p:plain

各アイコンは、それぞれ「テキスト」や「画像」、「見出し」など、サイトの要素を表しています。

これを画面のプレビューエリアにドラッグすることで、要素を配置できる…というわけです。

サイトのカラム数や配色などは、おおよそのデザインは最初に選ぶテンプレートによって決まっています。

なので、だいたいのビジュアルはテンプレートに任せておいて、ユーザーはサイトを構成する要素だけをどんどん放り込んでいけば、美しいサイトを制作することができるというわけです。

このように、Weeblyはドラッグ&ドロップを有効に活用して、使いやすいUIを実現しているのです。 

ドラッグ&ドロップを発明したのは誰?

余談ですが、そんなドラッグ&ドロップを最初に生み出したのは、あの「Apple」です。

元々、Macintoshのチームが、デスクトップ上のファイルを簡単に移動したりコピーできるようにするための手法として、ドラッグ&ドロップを発明したのです。

ドラッグ&ドロップの使い所とは?

ドラッグ&ドロップが最も役に立つ場面は、やはり「オブジェクトを好きな場所に直接配置したい」という時でしょう。

通常のWebアプリケーションであれば、ドラッグ&ドロップというUIはそこまで多用されません。

しかし、このWeeblyのサイト構築のように、ユーザに「オブジェクトを組み合わせて何かを構築させたい」という時には、絶大な効果を発揮するのです。

ただし、オブジェクトを「ある程度、選択肢が決まりきった特定の場所に移動させたい」という場合には、ドラッグ&ドロップが適切ではない場合もあります。

ドラッグ&ドロップの注意点

先に述べた通り、ドラッグ&ドロップは「ユーザが操作して好きな場所に直接配置できる」ことが得意な手法です。

ところが、ある程度オブジェクトの移動先が決まりきっているのに、いちいちドラッグ&ドロップで移動させなければならないのであれば、それはユーザに無駄なルーティンワークを課してしまうことになります。 

そうした場合には、ドラッグ&ドロップではなく、選択したオブジェクトに対してボタン等のアクションで、素早く目的の動作が行えるように設計してあげると良いでしょう。

まとめ

このように、ドラッグ&ドロップは楽しくて自由度の高い操作を実現する一方で、下手な使い方をするとアンチパターンにもなりかねません。

ドラッグ&ドロップの使い所がよく分からない…という方は、ぜひ上記のWeeblyを体験してみてください。

www.weebly.com

参考になる書籍

また、ドラッグ&ドロップのデザインパターンについては、下記の書籍が参考になります。

Webサービスのデザインなどをされている方は、ぜひご購入されることをおすすめします。

デザイニング・ウェブインターフェース ―リッチなウェブアプリケーションを実現する原則とパターン

デザイニング・ウェブインターフェース ―リッチなウェブアプリケーションを実現する原則とパターン

  • 作者: Bill Scott,Theresa Neil,浅野紀予(監訳),高橋信夫
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2009/12/28
  • メディア: 大型本
  • 購入: 3人 クリック: 109回
  • この商品を含むブログ (14件) を見る
 

おすすめ記事セレクション