仮置き場を作る

人とコンピュータの関係を考えると、二者間には常にインタフェースが存在します。本連載では人とコンピュータを介在するインタフェースに着目し、インタフェースとそれらを世に生み出すプロダクト開発について議論します。初学者の方からプロフェッショナルの方まで、何らかのプロダクト開発のヒントを持って帰っていただけるような連載を目指しています。

こんにちは、Helpfeelの開発部に所属しているkuonと申します。プロダクトデザイナーとして、HelpfeelのプロダクトのUIデザインを主に担当しています。

さて、日常生活を振り返ると、家事の最中に「とりあえずここに置いておきたい」という"仮置き場"があるととても便利だと感じる場面が多々あります。たとえば乾燥後の洗濯物をとりあえず椅子において後からたたむ、食器を洗った後に一時的に水切りかごに置く、といった具合に、本来の定位置ではないけれども「ちょっとだけ退避させたい」「後でまとめて片づけたい」ときのためのスペースが必要になることがあります。この"仮置き場"があるおかげで、作業の流れを大きく途切れさせずに進められるのです。

実は、この考え方はデジタルプロダクトにおいても同様に重要です。UI設計をする際、ユーザーが一時的に情報やオブジェクトを退避できる場所があると、操作は格段にスムーズになります。ファイルの移動やコピーを行うとき、すべてを一度に完璧な場所へ整理できるとは限りません。

特に複数のウィンドウやツールを行き来しながら作業する場合、すぐには最終的な格納先が決まらず、とりあえずどこかに置いておきたいシーンは意外と多いものです。そのときに"仮置き場"を提供するUIは、ユーザーの作業効率やストレスレベルに大きく影響します。

Yoinkの例

その"一時保管"のコンセプトをわかりやすく実装している例として、Mac向けのアプリケーション「Yoink」が挙げられます。Yoinkは画像やテキストなどのファイルをドラッグ・アンド・ドロップする際に、一時的に保管できる仮想スペースを提供してくれるツールです。

• 

  出典：Yoink

通常、ファイルを移動するには「ドラッグをしながら、行き先のウィンドウが見える位置までカーソルを持っていかなければならない」など、ウィンドウ操作が煩わしくなることが少なくありません。

ところがYoinkを使うと、まずはファイルや画像をいったんYoinkにドラッグしておき、その後でゆっくりと最適なフォルダへ持っていけます。一時的にテーブルに置いておき、後でちゃんと仕分けする感覚で使えるため、作業フローをスムーズにつなげられるのです。

Adobe製品の例

別の例として、Adobe Illustratorでは、アートボードの外側でもオブジェクトを配置しておけます。作品として最終的に出力されるのはアートボードの範囲内ですが、外側に一時的にオブジェクトを退避しておくことで、要素の再配置や検討をやりやすくしているのです。

• 

  出典：Adobe Illustrator

一方、Adobe Photoshopでは、基本的にアートボード外にオブジェクトを置くという発想が前提にはなっていません。

• 

  出典：Adobe Photoshop

Photoshopでもレイヤーを使いこなすことで同様の作業は可能ですが、Illustratorほど「ちょっと置いておくスペースを活用する」という考え方は強調されていません。

両者の違いはソフトの設計思想に根差しているのでしょう。Illustratorは画像やその他の要素を総合的にレイアウトする用途で使われることが多く、Photoshopは一つの画像を細かく調整していく用途で使われることが多いです。ユーザーが「一時的に何かを置いておくスペースを求めるかどうか」によって、操作感が大きく変わる好例です。

Gitの例

Git stashも開発者に"仮置き場"を用意してくれる好例です。Gitで作業をしていると、まだコミットするには早いけれども、現状の変更内容をいったん退避して別の作業に切り替えたいケースがしばしば出てきます。たとえば急にバグ修正の依頼が入り、作業中のコードを途中のまま残してブランチを切り替えたいときなどが典型例でしょう。そんなときに便利なのがGit stash機能です。

簡単に言うと、stashは「まだコミットしたくない変更を一時的にGit上で保管しておく」操作で、stashへ保存した内容はいつでも取り出して再開できます。これによって、「とりあえず今の差分は捨てたくないけど、一度手を離して別タスクを片付けなきゃいけない」という状況をスムーズに切り抜けられるのです。

わざわざブランチを切ったり、他のフォルダにファイルをコピーしたりといった手間をかけずに、ワンコマンドで"作業途中の状態を仮置き"しておけるのは非常に大きなメリットと言えます。

こちらも明快なUIがあるわけではありませんが、「ちょっと置いておきたい」「まだ最終的には整理しきれない」というニーズを捉えている点は先の事例と同様です。このような"仮置き場"の存在があることで、必要な作業をそのときどきで素早く切り替えられるようになり、開発の効率化につながります。まさにGitならではの「必要なときにすぐ引き戻せる」仕組みと言えるでしょう。

おわりに

UIにおける"仮置き場"は、ユーザーの作業をぐっと効率的にしてくれる大切な仕組みです。慌ただしい状況で最適な整理ができないときでも、一時的に情報やオブジェクトを退避できる場があることで、ユーザーは気持ちにゆとりを持って作業を進められます。安心して放置できるスペースがあるからこそ、高い集中力を保ちつつ柔軟に作業を進められるのです。

一時的な置き場所や退避スペースをうまく用意できると、ユーザー体験の向上に役立つでしょう。

文：kuon