初心者におすすめ？Photoshopのデザインスペースを試してみた
くれまとさくらのWebデザイナーは今日も行く
はじめに
前回は、くれま先生から「イラレでWebデザインってほんとにできるの？」をレクチャーいただきましたが、今回はどちらかというとWebデザインならPhotoshop派のわたくし、さくらから、2015年11月リリースのPhotoshop CCの新機能「デザインスペース」についてご紹介します。
Photoshopの「デザインスペース」って知ってる？
浅野：くれまさん、『デザインの学校 これからはじめる Illustrator & Photoshopの本』の出版おめでとうございまーす！
黒野：ありがとうございます！
浅野：実はわたしのほうも、『神速Photoshop[グラフィックデザイン編]』と『Webデザイン必携。 プロにまなぶ現場の制作ルール84』が3月発売になりました！
黒野：おお、2冊も。おめでとうございます！
浅野：そんな私たちですがw、くれまさんは書籍で「デザインスペース」って取り上げましたか？
黒野：取り上げてないですねー、さくらさんは？
浅野：プレビュー版ということで、「デザインスペース」については私も書籍では取り上げなかったんですが、実際に触ってみて、PhotoshopのWeb向けの機能としては皆さんにぜひ知ってもらいたいと思いました！ 前回はIllustrator編ということでくれまさんに使い方を教わったので、今回はPhotoshop派の私から、新UIの「デザインスペース」について紹介させてください。
黒野：おお、楽しみ！
浅野：早速ですが、くれまさんは「デザインスペース」触ってみました？
黒野：実はお恥ずかしいのですが、メインで使っているマシンのOSが最近までMarvericksだったので、デザインスペースに対応していなかったんですよね。サブのマシンがYosemiteなので、ちょっと触ったのですが。さくらさんは、もうEl Capitanにしてます？
浅野：私はメインマシンのOSがYosemiteで、サブがEl Capitanです。
黒野：ということで、デザインスペースの話は、さくらさんに習っていきたいと思いますw「デザインスペース」を簡単に言い表すと、Photoshopの新しいユーザーインターフェイス（以下UI）で、MacだとYosemite以上、WindowsだとWindows 8.1 64-bit OS以上の環境で使える、という認識でいいんですよね？
浅野：そうですね。2015年11月30日でアップデートされた、Photoshop CC 2015に内包されているUIです。現状はまだプレビュー版ということで、実際に触る前までちょっと誤解していたんですが、Webやアプリ系のクリエイティブに向けて機能を絞ったUIであって、ファイル形式も同じPSDだし、普通のUIとの行き来も簡単なんですよね。「デザインスペース専用の拡張子でもあるのか！？」と思ったら、そんなことはなくて。
黒野：なるほどー。つまり、同じPhotoshopなんだけれど、「Webデザインにあまり使わない機能は隠されている状態」という感じなんですかね？
浅野：思えばPhotoshopって、なんでも「できすぎる」じゃないですか。
黒野：異常に戦闘力高いアプリケーションですからね……w
浅野：ですよね。イラストレーターさんが絵を描くのにも使えるし、レタッチャーさんが写真補正するのもできるし、Webデザインもできちゃう。機能が多すぎてわけわからん！というのはあるかもしれませんよね。
黒野：パネルを自分好みにカスタマイズする機能も追加されましたけど、やはり普通の状態だと、作業に集中しづらい印象はあるのかも？
浅野：これからWebデザインを始めたい！とか、直感でさくさく操作したい、っていう人にはデザインスペースから入ってもらうのもいいかなと思いました。
「デザインスペース」を使ってみよう！
黒野：では、Photoshop CC 2015の最新版にアップデートしたとして、デザインスペースに切り替えるには、実際どうすればいいんでしょう。
デザインスペースへの切り替え
浅野：［ウィンドウ］メニュー→［デザインスペース（プレビュー）］で切り替えられますよ。
黒野：あ、デザインスペースに切り替わると、メニューの数やツールの数が少なくなってすっきりしたUIになりますね。
通常UIへの切り替え
浅野：デザインスペースの［ウィンドウ］メニュー→［標準のPhotoshopに戻る］を選択するか、右下のPsアイコンをクリックすれば元のUIに戻れます。また、Macの場合は［Cmd］+［Ctrl］+［’］、Windowsの場合は［Alt］+［Ctrl］+［’］のショートカットでもOKです。
浅野：もし、対応しているOSなのに［デザインスペース（プレビュー）］が表示されていない場合は、［環境設定］のテクノロジー設定のチェックを確認してみてください。
黒野：私の環境はMarvericksなので、「デザインスペースを有効にする」の部分が、こんな感じにグレーアウトしちゃってますね……。
対象外の場合は「テクノロジープレビュー」のデザインスペースの設定がグレーアウトする
浅野：本当だ！ ということで、「デザインスペース使えないんだけど！」って方は、まずPhotoshopとOS両方のバージョンを確認してみてください。
黒野： さくらさん、デザインスペースへの切替が無事完了しました！ さて、一部では「Fireworksユーザーにはとても馴染みやすい」という評判も聞かれましたが、直接オブジェクトを選択できたりするんですか？
浅野：はい、かなり直感的かと。違いを示すために動画を撮ったので見てみてください。まずは文字の選択なんですが、違いがわかりやすいように、この2つの動画ではどちらもショートカットを使わずに操作しています。まずは通常のPhotoshopのUIから。
通常UIでは移動ツールと文字ツールを持ち換える。
浅野：通常のUIではこのように、「ツールの持ち替え」を意識して作業していたと思うんです。たとえば、テキストの編集をするには［移動］ツールをシングル・ダブルクリックしても、［文字］ツールを選択している時にしかテキストの編集ができないので、［移動］ツールと［文字］ツールの間を行き来して操作をするのが当たり前ですよね。
デザインスペースでは、選択時にダブルクリックで文字ツールに切り替わる。
浅野：一方で、デザインスペース上であれば［移動］ツールのシングルクリックでオブジェクトの移動、ダブルクリックすれば自動的に［文字］ツールに切り替わるので、ツールを手動で持ち替えなくても文字の編集ができます。ショートカットに慣れていない初心者の方には嬉しい機能ですね。
黒野：ほほー、それは直感的。シェイプのオブジェクトなどを選択する時は、どんな感覚ですか？
浅野：基本的にはスムーズですが、Photoshopに慣れたユーザーにとっては、シェイプの絡んだマスク周りの動作は機能が制限されているせいか少し慣れが必要かなと思いました。でも、Photoshopは初心者の方からするとマスクの種類が多いですよね。クイックマスクレイヤーマスクベクトルマスククリッピングマスクと言われても、私だって正直何がなんやらですw その点、こうして機能が限定されているのは嬉しいかも。
黒野：あはは、私、全部使いこなせている自信が無い！w 確かに、初心者には機能が制限されているほうが取っつきやすいですよね。デザインスペースでつかえるマスクは、どれに限定されているんですか？
浅野：デザインスペースで作ったマスクは「ベクトルマスク」に該当します。Webとかアプリの簡単なデザインだったらこれだけで十分だと思います。
デザインスペースでのマスク（ベクトルマスク）の作り方
黒野： Webデザイン上のエレメントをマスクするときは、そんなに複雑な選択範囲からマスクすることはないですものね。CSSで再現できる範囲内のことができていれば良い、って感じですよね。複雑な選択範囲で細かく写真を補正したいときは、通常のUIに戻せばいいってことですね。
浅野：そうそう。だから初心者の方にももちろんおすすめなんですが、コーディングを前提としたデザインツールとしては合理的だと思いました。そういう意味でも、Fireworksに似ているのかもしれませんね。写真の補正とWebデザインを切り分けられるし、シンプルな構造。
黒野：でも一方で、デザインスペースのマスクって、ベクトルマスクなので、写真を配置したあとから追加するしかないので、数値計算して配置したシェイプに、後から写真をあてはめたいときはちょっと不便ですよね……。
通常UIのクリッピングマスク
浅野：うーん、確かに。Webデザインは数値管理が大事ですから、直感的に作業ができる反面、シェイプを使ってあらかじめしっかり数値管理してからクリッピングマスクで画像をマスクしようと考えると、従来のUIがいいのかもしれません。今後クリッピングマスクもサポートされるそうなので、そこに期待しましょう！
黒野：それ以外に気になった点はあります？
浅野：もっと直感的にUIを切り替えたいなぁという希望はありますね。
黒野：ツールパネルの下の方とかに、分かりやすいボタンを置いてもらったりすると、いいかもw
黒野：［スクリーンモードを切り替え］ボタンのところあたりにw
浅野：そう、そのへんwデザインスペースから通常UIへの切り替えは、右下にアイコンがあるんですが、逆は無いので、一方通行感があります。今後の改善に期待ですね。
デザインスペースのみでWebデザインも可能
デザインスペースの「書き出し」パネル
浅野：あ、そうそう。画像の書き出しもデザインスペースからできるんですよね。
黒野：このUIは、通常UIでレイヤーパネルから書き出すときと、共通な感じですね。
浅野：アセットの書き出しルールは基本的には同じですが、設定がプルダウンで選べたりするのは便利です。私は、CC 2014にあった、「アセットを抽出」ってどこいっちゃったんでしょうか…と思っているのですが……。このデザインスペースの書き出しは、その「アセットを抽出」パネルに近いのかなと思いました。
黒野： 確かに。CC 2015でも［ファイル］→［生成］→［画像アセット］にチェックを入れるのはあるんだけど、これにチェックを入れると、どういう挙動になるのかしら？
浅野：通常UIの方で［画像アセット］にチェックが入っていると、そちらが優先されて書き出しできないようですね。「あれ？動かない」という時は通常UIの方をチェックしてみましょう。まだプレビュー版ということで、今後が楽しみな「デザインスペース」です。
Illustrator派にもPhotoshop派も。「Creative Cloud Libraries」で素材の同期
浅野：話は変わりますが、「Creative Cloud Libraries」（ライブラリ）によってPhotoshopとIllustratorの素材の連携がしやすくなりましたよね。
黒野：Dreamweaverでも、素材が連携されるようになりましたしね。
Photoshopで作って登録した写真やパーツなどのスマートオブジェクトをIllustratorのカンバスへドラッグするだけで流用できる。（IllustratorからPhotoshopも同様）
Dreamweaverでは［ウィンドウ］→［CC Librarys］パネルでライブラリを呼び出せる。
浅野：PhotoshopのデザインスペースのUIの中でも、［ライブラリ］パネルは重要な位置に配置されているので、活用していきたいな、と。特に色やフォントの管理には便利ですね。
「デザインスペース」でもライブラリを活用可能。文字スタイルやボタンなど、モジュール化できるコンポーネントを登録しておく。
黒野：ですねー。なので、制作中のサイトにまつわる基本情報は、最初に「Creative Cloud Libraries」に入れておくといいと思うんですよね。
浅野：入れておきたい要素としては、色やフォント、コンポーネントなどの基本になるパーツ類ですよね。
黒野： もうちょっと細かく書くと、
- （１）カラースキーム（メインカラー、サブカラーとか）
- （２）フォントの種類、サイズ、行送りなどを、見出しや本文など必要な分だけ
- （３）よく使いそうなメニューやカード（見出し＋写真＋説明文的なセット）、ボタンなどのコンポーネント
- （４）共通で利用するロゴマーク、イラスト、写真
黒野：……この4つの要素ですね。
浅野：私は最近使い出したばかりなので、参考にします！ くれまさんは実務でも活用されていますか？
黒野： 割と使ってます。あと、最近気に入っているのは、Adobe Captureというモバイルアプリで作成した「配色」「ベクターデータ」「カスタムブラシ」を「Creative Cloud Libraries」に保存して、すぐにPhotoshopやIllustratorの［ライブラリ］パネルから引っ張り出して使うやり方ですねー。
Adobe CaptureとIllustratorの連携
浅野：それについてはじっくり伺いたいですが、記事が長くなりすぎるので、別の機会にw私は、アタリのダミー画像をAdobe Stockからライブラリに保存して入れてますね。アドビのアプリケーションの中で、Adobe Stockの画像が検索できて、購入すればすぐに差し替えられるんですよね。初めて見たときはびっくりしました。金額も安いですし、品質もよくて便利なので私も何かと使っています。この記事の野菜の画像もAdobe Stockです。
黒野： Adobe Stockは、私も実務でかなり使っていますね。意外と使える感じの写真が揃っている気がしてw。Adobe StockやiOSアプリも含め、最近のCreative Cloudでは、「アプリ間のデータ連係」「モバイルとデスクトップのデータ連係」がどんどんシームレスになってきて、実際のワークフローに変化が起きている感覚があります。
浅野：モバイルアプリについてはかなり気になっているので、別記事で掘り下げましょう！
まとめ
くれまのまとめ
「このサイトに書いている記事なので」ということを差し引いても、最近のアドビのiOSアプリ群は面白いものばかりで、私は本当に注目しています。近々に別記事にできれば。
デザインスペースに関しては、わたし個人としてはいままで散々使ってきた「従来のPhotoshopのUI」からの意識切替が必要なので、これを機にしっかり学習して行きたいと考えておりますーw
さくらのまとめ
今回紹介した新しい「デザインスペース」はアドビさんのPhotoshopに対する思想が見えるようで、個人的には注目したいUIです。写真補正などの機能ではなく、「デザイナー向け」に提供されているというのが見所ですね。プレビュー版とのことで今後が楽しみです。ほかにも、ライブラリやアプリなど、まだまだ紹介しきれなかった新しい機能も満載なので、また次回をお楽しみに！