レイヤーパネルを閉じたままデザイン作業できるPhotoshopの新しいワークスペース「デザインスペース」のベータ版まもなく登場
今年6月のPhotoshopのアップデートの際に、テクノロジープレビューとして新規追加された「デザインスペース」をご存知でしょうか？デザインスペースは、Webデザイナーやアプリケーションデザイナーのワークフローを念頭に、ゼロから設計・開発された、Photoshopの新しいデザイン環境です。
今年の6月に初公開されたデザインスペースは、限られた機能が実装されただけのコンセプト紹介用といった印象でしたが、この秋のPhotoshopアップデートのタイミングでは、実装したい最低限の機能はほぼ実装できたというベータ版に更新される予定です。
この記事では、Adobe MAX 2015のセッションから、デザインスペースのベータ版の機能を紹介します。バグ修正やパフォーマンス最適化はまだだそうで、MAXのセッション中もPhotoshopを再起動する場面が何回か見られましたが、ワークスペースの使い方は十分にイメージできるレベルの仕上がりでした。
（注：公開までに更に開発が進められるため、実際に利用できる機能の詳細は本記事と異なる可能性があります）
デザインスペースの設計思想
既に大勢のデザイナーに支持されているPhotoshop。どうして新しい作業環境を作ることになったのでしょうか？セッションでは大きく4つの理由が語られていたように思います。
1. カンバス上で完結するシンプルな操作性
Photoshopといえば、レイヤーパネルやダイアログボックスを駆使して作業するイメージですが、デザインスペースでは多くの作業がカンバス上で完結します。例えば、修正したいアイテムを選択する場合、単純にカンバス上でマウスをクリックすればカーソルの下のオブジェクトが選ばれます。グループ化されたオブジェクトは、ダブルクリックすると1階層下のアイテムを選択できます。
https://blog.adobe.com/media_ecdef43dced35cf3d4a3267d25e82d1d1fbbf33e.gif
アートボードが選択された状態（上）から、テキストをダブルクリックして選択した（下）
この一連の動作にレイヤーパネルは不要です。また、選択モードや選択対象の種類を気にかける必要はありません。
階層が深い場合には、Cmdキーを押しながらクリックすれば、複数の階層を飛び越えてカーソルの下のオブジェクトを一気に選択できます。Escキーを押すと、1階層ずつ上に戻れます。
2. コンテキストに応じて変化するプロパティパネル
デザインスペースの画面右にはプロパティパネルが表示されます。このプロパティパネルは、選択されているツールに応じて表示される項目が変わります。シェイプツールのときはシェイプ用の、テキストツールのときはテキスト用のプロパティパネルに変化するわけです。
プロパティパネルの上2つのブロックは各ツールに共通です。最初のブロックは配置や大きさの情報が、その下のブロックはアピアランス関連の情報が配置されます。
https://blog.adobe.com/media_66c4572041f77591d33995a4e6ae53219d276174.gif
矩形ツール使用時のプロパティパネル（左）と、文字ツール使用時のプロパティパネル（右）
お陰で、文字色の変更はここで、矩形の塗り色の変更はここで、と使い分ける必要がなくなりました。ようやく、PSDファイルの編集時に、「カンバスでオブジェクトを選択して、プロパティパネルで属性値を変更」という操作が可能になります。
https://blog.adobe.com/media_4cd5d537e0f66971cd82b901eb34d42f007843e9.gif
カンバスで選択した矩形の塗りを、プロパティパネル内で変更できる
3. 必要最低限のツールだけ提供する
Photoshopには沢山のツールが装備されています。ところがベータ版とはいえデザインスペースが提供するツールは、矩形、円、ペン、文字、サンプルの5つだけです。これだけだとデザインできないのでは？という声も聞こえそうなスペックですが、今後積極的に増やす予定は無いようです。
アドビの調査によると、Photoshopユーザーがデザイン作業に費やす時間の約9割はこれら5つのツールを使用していたそうです。加えて、デザインスペースはPhotoshopのワークスペースの1つです。切り替えの手間はかかりますが、他のワークスペースと行き来しながらデザイン作業を進めることが可能です。例えばブラシが使いたくなったら、従来のワークスペースに移動すれば良い訳です。
https://blog.adobe.com/media_8a8f65b85572bb1fb314d64906534e51481daf24.gif
Photoshop初期設定のツールパネル（左）と、デザインスペースのツールパネル（右）
デザインスペースは、作業の90%をすっきりとした使いやすい環境で行いつつ、残り10%が必要なときにはショートカットキーひとつで高機能な環境に切り替えられるデザイン環境として構想されているようです。
4. アートボードをデザインの基本単位に
デザインスペースを使うときは、アートボードに対してデザインするのが基本です。カンバス上に、スマートフォン、タブレット、PC用の異なる画面サイズのアートボード、あるいは複数ページのアートボードを並べた状態でのデザイン作業を想定したつくりになっています。
既存のワークフローに途中からアートボードが追加された他のワークスペースと比べ、より踏み込んだ操作性が提供されており、例えば、起動時には、画面に表示されるテンプレート一覧から選択すれば、新規アートボードが直ちに作成できます。配置済みのアートボードのコピーには、アートボードを選択すると周囲に専用のボタンが表示されます。カンバス上のドラッグ&ドロップ操作でアートボード間のオブジェクトの移動もできます。
https://blog.adobe.com/media_1da5edd061212cd4f8741f89cf02402b0d9e5ac1.gif
カンバスに並べられたアートボード。右下のアートボードの周囲にはコピー用のボタンが2つ表示されている
アートボード自体がまだ新しい機能ですが、これからのデザイン機能はアートボードを中心に充実してくることになりそうです。
デザインスペースの便利機能
それでは、デザインスペースの使い方を3つ具体的にご紹介します。いずれも既存のワークスペースよりも少ない手順で作業できるように考えられています。
1. サンプル（スポイト）ツール
デザインスペースのサンプルツールは強力です。カラーピッカーの機能はもちろん、カーソルの下にあるオブジェクトの種類を識別して、色以外にも外観に関する様々な情報を取得します。フォント情報をコピーしたり、背景画像のコピー&ペーストにも使えます。
オブジェクトから色以外のスタイルをコピーしたい場合は、カーソルを対象の上に移動してからスペースキーを押下します。すると、選択可能なオプションを提示するHUDがオブジェクトの周囲に表示されます。テキストの場合は、色、フォントの種類、効果の3つから選択できます。HUDを使わずにフォント情報だけを取得するショートカット（Shift+クリック）も用意されています。
https://blog.adobe.com/media_88bffe3b86d3ce68f8f182889ab0f74ae0c5f2a8.gif
サンプルツールをテキスト上に移動してスペースキーを押したところ。色、フォント、効果から選択してスタイルをコピーできる
2. マスク
カンバス上のオブジェクトを選択してMキーを押下するとマスクモードになります。この状態でオブジェクト上に矩形ツールやペンツールを使って図形を描くと、マスクになります。マスクモードの間、図形は自由に編集できます。
この機能は、デモの数日前に実装されたばかりとのことでした。ベクトルマスクだけでなくレイヤーマスクやクリッピングマスクもサポートされるそうです。
https://blog.adobe.com/media_b011eda201444b5ed14ac585e5546e59cd30c2e0.gif
マスクモードで画像の上に矩形を描画（左）と、ペンツールで図形を編集中（右）
3. 検索バー
Cmd+Fキーで表示される検索バーでは、編集中の全ドキュメント内のレイヤーの一覧表示や検索ができます。テキストレイヤーやスマートオブジェクトなどレイヤーの種類でフィルタリングすることもできます。他のドキュメントのレイヤーを見つけてそのまま配置できるのは、なかなか便利そうでした。デザインスペースではレイヤーパネルよりも検索バーを多用することになるかもしれません。
レイヤー以外にも、ライブラリ内のアセットを検索して取り込んだり、最近開いたファイルを検索して開いたり、更にはメニューコマンドを検索して実行することも可能です。
https://blog.adobe.com/media_687bff4375e6661d4132de9fa0609f64b90913dc.gif
カンバス中央に表示された検索バー。レイヤーだけでなく、ライブラリやメニューコマンドも検索できる
終わりに
筆者は今でもFireworksを日々愛用しています。PhotoshopがFireworksより機能豊富であることは理解しているのですが、Photoshopではごく簡単な作業をするのにも要求される手順が多かったり、そもそも大抵の作業はFireworksでできてしまうこともあり、完全にPhotoshopに移行するよりはFireworksを併用する方が効率が良いと感じているためです。デザインスペースは、こうしたPhotoshop特有の使い勝手を気にして他のツールを使用しているユーザーにも応えるデザイン環境として期待が持てそうです。
Webテクノロジーでつくられたオープンソースのプロジェクトであり、自分好みにカスタマイズできる余地が多そうなのもポイントです。ソースコードはGithubに公開されています。