・Adobe XDでWebデザインすることのメリットを知りたい。
・今後はPhotoshopとXDのどちらでデザインする方がオススメか知りたい。
こういった疑問にお答えします。
この記事を書いている私は、
- 都内のデザイン制作会社に勤務している現役デザイナー
- グラフィックデザイン歴約17年
- Webデザイン歴は約12年
そんな私が、実務を通じて得た経験を交えて、以下のことについて解説します。
結論：PhotoshopとXDどちらでデザインする方がいいの？
私は断然XDを推奨します。
日々忙しくタスクに追われる中で
「慣れていてスピーディーに作業出来るツールから一旦離れて、これから新しいアプリ覚えるのもなぁ・・・」
という抵抗がある方も多いと思いますし、私自身もそうでした。
しかし、実際に変えてみたら大正解で、今では逆にPhotoshopでのWebデザインに戻れません。
そう感じる特に大きなメリットを解説します。
はじめに：Adobe XDとは？
webサイトやモバイルアプリのデザインを効率的に作成する事に特化した「UI / UXデザインツール」と呼ばれるアプリケーションです。
デザイン・共同編集・プロトタイプの作成・デザイン共有・修正などのフィードバックまで、このアプリ１つで完結できる素晴らしいアプリです。
Adobe XDでデザインするメリットは？
Webデザインの作業をPhotoshopでしている方が多いと思いますので、Photoshopと比較してのメリットを解説します。
また、メリットとは少し違いますが、Photoshopとショートカットなどの操作感がほぼ同じなので、違和感なくすぐに馴染めると思います。
メリット1：オブジェクトを繰り返し複製してレイアウトする作業が圧倒的にラク
Adobe XDには「リピートグリッド」という素晴らしい機能があります。
Photoshopでオブジェクトをグリッド状に並べる場合は、
オブジェクト選択 → Optionキー＋ドラッグ
を繰り返して整列させます。
Adobe XDの場合は
オブジェクト選択 → ⌘R（Mac） → ドラッグ&ドロップ
するだけです。
メリット2：リピートグリッド内のサムネイルを一括変換出来る機能は神
上記で作成したリピートグリッドのエレメントに、それぞれ画像を反映させるときは、デスクトップで対象ファイルを選択して、エレメントの画像を反映したい場所にドロップするだけでOKという神機能です。
ちなみに、改行で区切った「.txt」形式のファイルをドラッグすると、各エレメントのテキスト情報も同様に一発変更できます。
メリット３：アセット機能でカラーの統一や変更がしやすい
Illustratorで言うところの「スウォッチ」のような機能です。
サイトのキーカラーを「アセット」として登録しておくことで、使い回しや、カラーの一括変更を簡単にすることができます。
Photoshopでも「スマートオブジェクト」機能をうまく活用すれば、オブジェクトのカラーを一括変更することもできますが、どれをスマートオブジェクトとして登録するか、などの細かいことを考えなくてよいので圧倒的にラクです。
メリット４：プロトタイプがとても簡単に作成出来る。
「このボタンをクリックしたらページＢに遷移する」とかボタンのホバーアクションとか、画像スライダーなども再現したプロトタイプをとても簡単に、もちろんノンコードで作成する事が出来ます。
この様なアクションだけでなく、ヘッダーの固定なんかも当然できます。
Photoshopだけでは出来なかったこの辺の作り込みまで出来るのは、クライアントにも具体的なイメージを見せられるので物凄く便利です。
メリット５：プラグインの追加でさらに使いやすく
例えば、指定値で等間隔に並べる機能や、コンテンツの内容に合わせてアードボードのサイズを自動調整してくれる機能など、Photoshopには無い便利な機能がプラグインによって追加出来るのはとても大きなメリットです。
【Spacer】・・・オブジェクト同士の間隔を数値指定で整列させるプラグイン
【Resize Artboard to Fit Content】・・・コンテンツにあわせてアートボード サイズを自動調整
Adobe XDのデメリットは？
デメリット１：画像編集の機能が弱い
画像の彩度や明るさ調整、レイヤースタイルの適用などが出来ないので、メインビジュアルやバナーなど、細部まで作り込みたい作業には向いていません。
それらの作り込みはPhotoshopで行って、XDに読み込ませる必要があります。
デメリット２：字詰めや縦書きが出来ない
タイトル文字などの目立つ部分では、文字と文字の間を個別に調整する「字詰め（カーニング）」が必要ですが、XDにはその機能がありません。
必要な場合はIllustratorで作成したファイルを読み込みましょう。
【注意】
個別ではなく「全体的な文字間隔（トラッキング）」や行間の調整はできます。
私が感じているデメリットはこの位でしょうか。
まとめ：私ならXDでのデザインをオススメします
冒頭の繰り返しになりますが、仲間や友人に「PhotoshopとXDどっちでデザインするのがいいと思う？」と聞かれたら、私は断然XDでの作業をオススメします。
習得コストがかかったとしても、楽勝で回収できるだけの作業効率の改善ががあり、アップデートも頻繁にあるので、今後も今以上に使い勝手が改善し、さらなる効率化が図られていくはずだからです。
今回は以上です。
XDに切り替えるかどうか、迷っている方の参考に少しでもなれたら嬉しいです。
それでは。