新卒でweb制作会社のディレクターとして入社し、8ヶ月でwebデザイナーへ転職。
webデザイナー歴2年目
- 最近XDでwebデザインをするというのを聞くけど、実際はどうなの？
- Photoshopと比べるとできないことが多いんじゃないの？
- 未経験なんだけど、webデザイナーになるためにXDの勉強は必要なの？
こんなお悩みにお答えしようと思います。
最近、デザインツールとしてXDを推奨する人が出てきました。
「こんな便利なツールを使わないなんてもったいない！」「Photoshopは時代遅れ」
みたいなことをいう人もいます。
僕も以前はPhotoshopをメインにデザインをしていましたが、半年前からXDをメインにデザインを制作するようになりました。
やっぱりみんなXDを使っているんだ...
と思ったPhotoshopユーザーのあなた。
webデザイナーはXDを使いこなせなきゃいけないのかと言われると、そうではありません。
僕の会社でXDを使っていたのは僕だけで、他の社員はみなPhotoshopでした。
なーんだ、じゃあ使わなくていいのか！と思いたいところですが、実際XDはかなり便利です。
必ずしも使いこなせる必要はないけど、Photoshopと使い分けるとかなり便利だよ！
というのが僕の意見です。
今すぐじゃないけど、将来的にXDを学ぼうと思っている方は、ぜひ読んでみてください。
本記事では、まずXDの概要についてさらっと解説し、
次にPhotoshopユーザーの僕が実務でXDを使ってみて、XDに向いている作業、向いていない作業をしらみ潰しに紹介していこうと思います。
記事の後半には、前半の紹介をもとに実務におけるXDとPhotoshopの使い分け方、
最後には、今webデザイナーを目指している方々がXDを勉強すべきかについて、個人的な会見を述べていますのでよければご覧ください。
そもそもXDとは？
adobeではどのように定義されているでしょうか。
Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。
こういわれると、Photoshopより有能でなんでもできる感じに聞こえますね笑
ではPhotoshopはどうでしょう。
”浮かんだアイデアをすべて実現できます。Photoshop は世界最高峰の画像編集とグラフィックデザインのアプリケーションです。写真やイラストの作成と合成、Webサイトやモバイルアプリケーションのデザイン、ビデオ編集、描画のシミュレーションなど、幅広い作業に対応します。どこにいても必要なものはすべてそろっています。思いついたらその場で作品制作を始めましょう。”
僕の解釈で両者を簡単に比較すると、
XD＝Web制作に特化した画面作成ツール
Photoshop＝画像加工に特化したグラフィックツール
であると考えます。
WebデザインといえばPhotoshop！というイメージですが、公式ではPhotoshop＝Web制作に特化したツールではないようです。
Web制作に特化した＝webデザインに特化？
「Web制作に特化した」？
じゃあ尚更、PhotoshopよりXDでデザインすべきじゃん、と思ったでしょう。
ただし、僕がXDを使った感覚では、
Web制作に特化した＝web制作全体の作業効率化という意味で、webデザインのクオリティを担保するというものではないと考えます。
作業効率化の例をいうと、ブラウザ上でクライアントにデザインを確認してもらう場合で、Photoshopでデザインを作った時の流れと、XDでデザインを作った時の流れを比較してみましょう。
Photoshopの場合
XDの場合
こんなに作業効率が変わります。
会社としてはサーバーも使わなくて言い訳ですから、時間だけでなくお金もかかりません。
XDには、このようにweb制作の作業効率を上げる機能がたくさんあります。
ただ、だからといってXDでクオリティの高いデザインを作れるかというと、PhotoshopではできてXDではできないこともたくさんあります。つまり、
Photoshop＝質の高いデザインの制作
XD＝デザインの作業効率化
と考えていいでしょう。しかし、XDのデザイン機能が徐々に高まってきたために、デザインツールとしても認識されてきたのは事実です。ここで我々webデザイナーが考えるべきは、
- Photoshopと同じクオリティで効率をあげられる作業＝XDに向いている作業
- XDでは効率化を測れない作業＝XDに向いていない作業
として、両者をうまく使い分けることでしょう。
前置きが長くなりましたが、次の章で具体的にXDに向いている作業、XDに向いていない作業をみていきましょう。
XDに向いている作業
Photoshopと同じクオリティで効率をあげられる作業を紹介していきます。
XDの作業とPhotoshopの作業を一つ一つ比較していくので、効率化できそうな作業はチェックしておきましょう！
数百〜数千ページにおよぶwebサイトデザイン
Photoshopの作業
Photoshopは動作が重いので、基本的に1ページに対し1ファイル。流用画面が多くても最低でも10~20ファイル作る必要があります。
ファイル数が多いほど管理が大変なのは、webデザイナーならわかるはずです。
XDの作業
XDは超軽いので、デザインにもよりますがファイル1つで100ページは作成可能です。
数百ページのWebサイトもファイル1つで完結できます。
共通パーツの使い回し
TOPや下層で共通のボタンを50個使っており、ボタンのデザインを後から修正する必要が出た場合のそれぞれの作業を考えてみましょう。
Photoshopの作業
解決策①：スマートオブジェクト化しておく
スマートオブジェクト化することで、同じPSD内であれば一括編集可能です。
しかし「数百〜数千ページにおよぶwebサイトデザイン」でも言ったように、psdデータ一つで完結する案件はほとんどないので、結局ファイル別に修正する必要があります。
また、スマートオブジェクトでは、複製したどのレイヤーからも一括編集ができますが、逆に言えば、共通パーツの部分的なカスタマイズはスマートオブジェクトでは対応できません。
例えば、共通のデザインのボタンでも、ボタン内のテキストは使う場所によって変えたいですよね？
これがスマートオブジェクトではできないわけです。
解決策②：リンクオブジェクト
使いまわすパーツ別にPSDデータを作成し、このPSDとレイアウトデザイン用のPSDをリンクで連携させることでファイル別でも一括編集が可能になります。
しかし、パーツ別にPSDを作るのも、いちいちリンクを設置するのもかなりめんどくさいので、実務では使ったことないです。
XDの作業
XD特有の「コンポーネント機能」を使います。
コンポーネントの詳しい説明については今回省略させていただきますが、Photoshopのスマートオブジェクトが個別にカスタマイズができ、かつカスタマイズされていない共通部分のみ一括編集できる機能と思っていただければ伝わるかと思います。
ボタンを例にすると、デザインだけ一括で編集できて、ボタン内テキストは個別に変更できる、といった感じです。
別ファイル問題については、「数百〜数千ページにおよぶwebサイトデザイン」でも言ったように、XDでは数百ページのWebサイトもファイル1つで完結できますので、問題ないでしょう。
コンポーネントについて知りたいよ！って方は、今後詳しく記事にしようと思ってますが、今すぐ知りたい方は以下の記事がわかりやすいです。
等間隔に同じ要素を配置する
サービス一覧やブログカードやのような同じようなブロックを等間隔で並べるときを考えてみましょう。
Photoshopの作業
解決策：要素の数だけ複製し、一つ一つ並べる
スマートオブジェクト化して複製、一つ一つマージンを確認しながら均等に並べます。
各ブロックを個別でカスタマイズする場合は、スマートオブジェクトにはできないのでグループレイヤーをコピーして複製する必要があります。
XDの作業
解決策：リピートグリッドを使う
リピートグリッドも、コンポーネントと同様XDにしかない機能です。
実際に見てもらった方が早いと思うので、動画をご覧ください。
いかがでしょう。テキストでまとめるとこんな感じです。
- ドラッグするだけで等間隔にブロックを配置できる
- ブロック間のマージンは一括で調整可能
- リピートグリッドで量産した各ブロックは個別に編集できる
- コンポーネント機能とくみあわせれば、共通部分のみ一括置換もできる
最強ですね。
またこのリピートグリッドを使えば、簡単なパターンまで作成できますよ。
簡単なパターンの作成
Photoshopの作業
Photoshopでパターンを定義するには以下の手順が必要になります。
- メインのPSDとは別に新しくファイルを作成
- パターンの一マスをを作成し、パターンを定義」で名前をつけて登録
- メインのPSDに戻り、属性パネルやレイヤースタイルから作成したパターンを呼び出す
正直webサイトのデザインではあまり使わないので、何度もやらないと忘れてしまうくらいです。
XDの作業
同一ファイル上でパターンの一マスをを作成し、リピートグリッドをクリックしてドラッグするだけです。こちらも動画でご覧ください。
中身の要素によって可変するボックス
例えば、以下のボタン内テキストを変更する場合を考えてみましょう。
Photoshopの作業
Photoshopでは意外とこれだけの作業量が発生します。
- テキストから枠までの距離を計算
- テキスト変更
- 変更したテキストの幅まで枠を伸ばす
- 枠の幅に先ほど計算した距離を足す
XDの作業
XD特有の「パディング機能」を使います。
オブジェクトをグループ化して「パディング」をクリックすれば、テキストを変更してもボタンの幅を調整してくれます。
ロックの解除
Photoshopの作業
ロックされているオブジェクトをアートボード上で選択できないので、レイヤーパネルから探す必要があります。
ロックされているレイヤーが多い場合は、レイヤーパネルの「属性」→「ロック済み」を選択すると、レイヤーパネルにロックされているレイヤーだけが表示されますが、その中から特定のレイヤーを探すのもややめんどうです。
XDの作業
ロックされているレイヤー、オブジェクトは、アートボード上でクリックするとオブジェクトの左上に鍵マークが表示されます。
ロックを解除したい場合は、鍵マークをクリックするか、ロックされているレイヤーを選択した状態で「command + L」で解除できます。
ドラッグで選択・選択解除と組み合わせれば、ロック・ロック解除のスピードが爆上がりです。
段落テキスト・ポイントテキストの切り替え
Photoshopの作業
レイヤーパネルから切り替えたいテキストレイヤーを選択し右クリック、「ポイントテキスト変換」または「段落テキストに変換」を指定します。
そんなにめんどくさくなさそうですが、複数のテキストを切り替えたい場合は結構大変です。レイヤーパネルから複数選択したレイヤーを探すのって意外とストレスかかるんですよね。
XDの作業
切り替えたいテキストを選択し（複数選択OK）、プロパティインスペクターにある「ポイントテキスト」または「段落テキスト」ボタンをクリックするだけです。
右クリックしなくてもいつでも見えるところにボタンがあるので、レイヤーパネルから探す必要もないし、一括で変更もできます。
このワンクリックの有無は大きいですよ。
テキストのコピー＆ペースト
ペースト先の形式に合わせてテキストを貼り付けたい場合を考えてみましょう。
Photoshopの作業
ペーストする前に右クリックし、「書式なしでペースト」を選択します。
XDの作業
「ctrl + v」だけで書式なしでペーストが可能です。
テキストデータのみをコピーして貼り付ける時は、形式は張り付け先と同じにしたい場合が多いと思うので、XDのメリットとして入れてもよいでしょう。
ドラッグで選択解除をする
Photoshopの作業
Photoshopでは、ドラッグで選択は可能ですが、選択解除はできません。
ドラッグで選択したあと、一個一個選択解除する必要があります。
XDの作業
Illustratorを使っている人はわかると思いますが、選択したオブジェクトをcommand(winの場合alt) + ドラッグで解除できます。
むしろなんでPhotoshopで何でできないんだろう...
角丸が視覚的に操作できる
Photoshopの作業
Photoshopでは、属性パネルの数値指定でしか角丸を編集できません。
XDの作業
こちらもIllustratorと同様、アートボード上でオブジェクトの角丸を編集できます。
数値の統一のために、アートボード上で編集するのはあまりよくないですが、デザインを制作中の段階で試行錯誤する際には、非常に使いやすいです。
ガイド線の補助表示
1366pxのアートボードの両端に、40pxの余白用ガイドを引く場合を考えてみましょう。
Photoshopの作業
Photoshopのガイドではアートボードの右端からの距離は教えてくれません。
左側の余白は40pxと表示されるので簡単ですが、右側の余白は1366px-40px=1326pxと、アートボードの幅から余白を引いた分の距離を計算した上で、ガイドを引く必要があります。
XDの作業
XDのガイドは、アートボードの左端からまでの距離だけでなく、右端からの距離も表示してくれます。
アートボードの両端に同じ距離のガイド線が多くなれば多くなるほど、右端からの距離表示は便利になります。
また、ガイド線だけでなく、オブジェクト間の距離も表示してくれるので、Photoshopよりも速く正確に余白の調整ができます。
複数のオブジェクトのサイズを一括編集する
異なるパーツでも、高さや幅を統一させたい時ってありますよね。
Photoshopの作業
地道に一つ一つ修正していくかありません。
Photoshopでは、オブジェクトを複数選択した際、情報パネルに表示される幅や高さは、選択された左端のオブジェクトから右端のオブジェクトまでの幅、上端のオブジェクトから下端のオブジェクトまでの高さになります。
ここで個別にサイズ調整ができたらなあと思いません？
XDの作業
なんとそれがXDではできるのです。
XDでは、オブジェクトを複数選択した時に情報パネルが表す幅や高さは、個々のオブジェクトの幅、高さになります。
選択した複数のオブジェクトがそれぞれ異なるサイズの場合は、情報パネルには「-」と表示されます。
ここに数値を記入すると選択した個々のオブジェクトにその数値が適応されます。
XDに向いてない作業
英字の大文字・小文字切り替え
Photoshopの作業
文字パネルから右上の詳細メニューをクリックし、「オールキャップス」または「スモールキャップス」を指定するだけで選択したテキストの大文字・小文字の切り替えができます。
XDの作業
XDでは、初期設定時はこの設定ができません。
しかし、「Change Case」というプラグインで代替可能になります！
このプラグインをインストールするだけでOKです。
クリップ元・マスクを編集する
Photoshopの作業
クリップ元のレイヤー情報は維持されます。
例えば、クリップされた画像を透過することで、クリップ元のカラーに色調を合わせることが可能です。
また、Photoshopでマスクをかけると、マスクのみにグラデーションをかけたり、選択範囲を細かく指定できるので、画像加工の表現の幅がかなり広いです。
XDの作業
XDでは、クリッピングという言葉ではなく、「シェイプでマスク」という機能で、クリッピングのような表現ができます。
このとき、マスク元のレイヤー情報はマスクされたオブジェクトと結合されてしまいます。
マスク元の形に切り取られた1枚のレイヤーのように扱われてしまうというイメージです。
マスク元の情報を操作できるのは、パスの移動くらいで、
- 塗り、境界線の変更
- グラデーション
- シャドウ
などはできません。
つまり、画像加工の表現の幅がかなり狭いということです。
画像の色味を合わせたい場合は、妥協策として合わせたい色のシェイプを画像の上や下に置く、などしてなんとか対処できますが、マスクにグラデーションをかけるなどの加工に関してはお手上げ状態です。
ひとつのレイヤーに複数のオブジェクトをクリッピングする
Photoshopの作業
一つのレイヤーに対し、複数のオブジェクトをクリッピングができます。
XDの作業
「クリップ元・マスクを編集する」で話したように、マスク元のレイヤー情報はマスクされたオブジェクトと結合されてしまいますので、同じレイヤーに複数のオブジェクトをマスクしても、一番最後にマスクされたオブジェクトの情報しか残りません。
テキストに画像やオブジェクトをクリッピング
Photoshopの作業
オブジェクトのクリッピングと同じ容量でクリッピングが可能です。
クリップした後でもテキストデータは維持されるので、フォントの変更や文言修正も可能です。
XDの作業
「クリップ元・マスクを編集する」で話したように、XDでは、クリッピングではなく「シェイプでマスク」と呼びますが、「シェイプでマスク」の名の通り、シェイプ以外でマスクはできません。
つまりテキストデータをマスク元にはできません。
テキストを一度パス化させることでマスクさせることは可能ですが、パス化するとフォントや文言修正ができなくなってしまいます。
レイヤーグループにシャドウをかける
Photoshopの作業
レイヤーグループにレイヤースタイルの「ドロップシャドウ」をかけるだけです。
グループ全体の後ろにシャドウがかかるため、グループの中に余白がある場合は、以下のようにグループ内のレイヤー順序に関わりなく、きれいにシャドウがかかります。
XDの作業
レイヤーグループにシャドウがかけれません。
オブジェクトをグループ化すると、プロパティにシャドウ項目がなくなってしまうのです。
先ほどの3BOXをXDで再現しようとすると、グループ化せずにオブジェクト個別にシャドウをかけることになります。
しかし、レイヤーの前後関係で後ろのオブジェクトに前のオブジェクトのシャドウがかかるため、オブジェクト間の距離が近い場合などは顕著に見えてしまいます。
様々なフォントを適応してみる
Photoshopの作業
アートボードのテキストを選択した状態で、フォントパネルのプルダウンの項目をホバーするだけで、選択しているテキストにそのフォントがプレビューのように変更され確認ができます。
フォント選びでいろいろ試してみることができます。
XDの作業
XDではフォントのプレビューができません。
プルダウンから選択するまでフォントが確認できないので、試したいフォントを選ぶのが非常にめんどくさいです。
字間を調整する
Photoshopの作業
テキスト選択後、command(winの場合alt) + 矢印キーで文字間の変更が視覚的に可能です。
XDの作業
Photoshopのようなショートカットはありませんので、数値指定で調整します。アートボードからプロパティへ目を行き来させるのが地味にめんどくさいです。
バナーデザインやタイポグラフィーには向いていないかもしれません。
その他にも、PhotoshopでできてXDでできないことは山ほどあります。
今回は、webデザイナーがよく使う、基本的な技術に焦点を当てているので、より複雑な加工を行う場合は、もっと不便に感じるでしょう。
webデザインはXDとPhotoshopの使い分けが大切
XDに向いている作業と向いてない作業、いかがでしたでしょうか？
細かすぎてわからん！どうでもええわ！って思ったところもあったでしょう。
ですが、たったワンクリックの有無が作業効率に大きく影響します。
というわけで、XDを触ってみた結果、XDで行っている作業とPhotoshopで行っている作業を僕なりにめちゃくちゃ簡単にまとめると、
XDとPhotoshopの使い分け
・XDで行うべき作業→要素の統一、繰り返し
・Photoshopで行うべき作業→画像加工(マスク、グラデーション、シャドウ、クリッピング)
こんな感じで使い分けています。
実務では、メインビジュアルや背景画像など、元のデータを結構いじらないといけない画像をPhotoshopで制作し、そのほかは全てXDで制作しています。
結局これだけかよ、って感じですがまあこんな感じです笑
僕もまだまだXD初学者なので、これからよりよい使い分けを考えていきます。
未経験者はXDを覚える必要があるのか
僕の意見で恐縮ですが、結論から言うと、「絶対に覚える必要はない」です。
というかむしろ、覚えるべきではないです。
未経験者はXDよりも先にPhotoshopでデザイン制作をすることに時間をかけてほしい。
理由は、ツールの制限がアイデアを制限してしまうということです。
マスク機能が弱いと、脳が勝手にできるだけマスクを使わないようなデザインを考えてしまう。
XDの機能の範囲でデザインをしようとしてしまう。
僕も実際にXDを使ってみて、PhotoshopでデザインするよりもXDのみでデザインしたときの方がシンプル、短調になりがちだなと感じました。(シンプルが悪いということではありません)
ベテランのデザイナーは様々なツールを使いこなし、引き出しもたくさんあるのでツールに左右されることはないと思いますが、僕のような歴の浅いWebデザイナーは、ツールに思考を制限されてしまうのは致し方ないのではないでしょうか。
ですので、デザイナー歴の浅い初心者の方や、未経験でこれからWebデザイナーを目指す方は、スピードよりもまずはPhotoshopでできるだけ思考を広げてデザインをつくるのに時間をかけるべきかもしれません。
会社に入りたてであれば、作業効率をいきなり求められることはないでしょう。
引き出しがある程度増えてきたら、PhotoshopとXD、両方を使い分けて、クオリティと作業効率を両立させることを目標にしてもいいのではないでしょうか。
