Adobe Photoshop CCに「デザインスペース」というWebとアプリケーションデザインに特化した機能があることをご存知でしょうか? これは、既存のPhotoshopにおけるデザインワークフローを見直し、Webとアプリケーションデザイナーがより効率的にデザインをするためのワークフローを提供する新しいデザイン環境です。2015年6月にリリースされたPhotoshop CC 2015にて実装され、2015年12月1日のアップデートにより大幅にアップデートされました。本記事では、デザインスペースと標準のワークフローを比較しつつ、その特徴とメリットを紹介していきます。

※2016年11月追記
「デザインスペース」機能は2016年11月2日にリリースされたPhotoshop CC 2017.0で廃止されました。この記事で紹介している内容はPhotoshop CC 2015までの機能となります。

標準版とデザインスペースの比較

既存の機能によるWeb・アプリデザイン作業の不便な点

Photoshopはデザイン制作の場で広く使われているソフトウェアであり、そのユーザー数は数千万人にのぼります(引用『アドビ、「Adobe Photoshop」が25周年を迎えたことを発表(2015年2月19日)』 )。印刷、映画、Webデザイン等あらゆる分野をカバーできる分、その機能は非常に豊富です。

標準のPhotoshop

メニューを開いてみると、その機能の数の多さがわかります。

標準のPhotoshopのメニュー

高機能な分、Webやアプリデザインだけをする上では、以下のような不便な点があります。

  • 使用頻度が低いツールが多く、必要な機能を呼び出すまでに時間がかかる。また、学習コストが高い。
  • 文字を編集するには文字編集パネル、シェイプを編集するには編集パネル等、編集したいオブジェクトに応じてパネルを切り替える必要がある。
  • 多くのパネルを使用すると、その分だけディスプレイのスペースを圧迫する。
  • 効果の設定や位置の入れ替え等、レイヤーの操作には都度レイヤーパネルを使用する必要がある。

新しいワークフローを提供する「デザインスペース」

デザインスペースは、Webやアプリケーションデザインによく使う機能のみを提供する全く新しいデザイン環境です。デザインスペースに切り替えるには、[ウィンドウ]→[デザインスペース(プレビュー)]を選択します(※)。下図を見ると分かる通り、UIが標準のものに比べるとシンプルになっていることがわかります。

※ ウィンドウにデザインスペースが表示されない場合は、[環境設定]→[テクノロジープレビュー]→[デザインスペースを有効にする]にチェックが入っているかをご確認ください。

デザインスペースキャプチャー

メニューも標準のものと比べると少なくなっています。

デザインスペースのメニュー

Webやアプリデザインでデザインスペースを使う場合、下記の様なメリットがあります。

  • 使用頻度が高いツールのみが表示されていて、目的の機能にたどり着くのが早く、学習コストも低い。
  • 文字編集パネルやシェイプ編集パネル等、編集したいオブジェクトに応じてパネルが自動的に切り替わる。
  • パネルが少ない分、ディスプレイを広く使える。
  • 入れ替えやレイヤー効果の設定も、レイヤーパネルではなくプロパティパネル上から行うことができる。

中でも自動的にパネルが切り替わる機能が強力で、デザイナーはどのパネルを操作するかを意識することなく、デザイン作業に集中できます。

次ページでは、デザインスペースによりワークフローがどのように変わるかを見てみます。