プラカンブログSTAFF BLOG

2019.05.20

Adobe XDとPhotoshop、今後のWEBデザイン作業はどうする?

冒頭の挨拶に何も書くことがなくなりました。どうも、KIKUCHIです。

ふと、巷で便利だと噂のXDに思いを馳せるある日のこと。
普段何気なく使っているPhotoshopより、もしかしてXDの方が良かったりする?早く作業できちゃったりする?と一度考えだしたら止まらなくなり居ても立ってもいられなくなったので、今回の記事でXDとPhotoshopの比較をし、今後のデザイン作業について再考したいと思います!
やると決めたらやる!私はそういう女ダーーーー!ダダッダダッダダッ!

どっちの方が早く作業できる?

作業内容は、プラカンホームページのトップページを「模写する」です。横にブラウザを配置しそれを見ながらXDとPhotoshopでデザインを模写していきます。使い心地や作業時間を比較しやすいよう、同じデザインを作ってみることで検証してみます!
※アイコン部分はめんどくさかったので省略しました。へへへ

Adobe Photoshop CC 2019

作業時間 75分
使い心地
  • 普段使用している通り
  • スポイトツールでブラウザ上の色を取得出来るのが便利

WEBページを模写するって、実は初めてやったのでデザインの勉強にもなるし面白いですね。思ったより時間がかかってしまったのが残念。。

 

Adobe XD

作業時間 60分
使い心地
  • 操作性はPhotoshopとほとんど変わらないため扱いやすい
  • グリッド機能のおかげでレイアウトがきっちり決まって1pxのズレを気にしがちな私大歓喜
  • とにかくサクサク動く!軽い!

まさかのPhotoshopより慣れていないXDの方が早く出来ました!
慣れていないとはいえ、基本的にはPhotoshopと同じショートカットが使えたり、グリッド機能のおかげでオブジェクトの位置に悩むことなくパキッとキレイにレイアウト出来たこと、XDの機能の中でもトップレベルに便利なリピートグリッドのおかげで時短出来たのかなと思います!

ブラウザで並べて比較…。初めての模写にしてはまぁまぁ一致している…?微妙っすかそうですか…。

 

XDを使ってみて良かった点

先程も述べたように「リピートグリッド」がとっっっっっても便利でした!直感的に使えるのも嬉しいポイント!

  1. まずリピートしたい要素を選択。
  2. 右側メニューにある「リピートグリッド」を押す。(Ctrl + R)
  3. リピートグリッド化した要素にハンドルマークがつくので、横、縦、と伸ばしたい方向にハンドルをドラッグ。
  4. 要素と要素の間にマウスホバーするとピンク色に表示されドラッグして間隔を調整できる。
    ドラッグ中に数値が表示されるので調整しやすい!

また、Photoshopだと画像を配置するのに一つずつ操作しなければいけないところ、
XDでは配置したい画像一式をドラッグ&ドロップで出来るのがとても楽でした!

 

Photoshopとどうやって使い分ける…?

XDは便利とはいえ、画像の加工(人物切り抜いたり、色調補正をしたり)はPhotoshopよりまだ出来ないことが多いです。
その点はやはりPhotoshopにゆだね、以下の流れで作業を行うのが今よりスピーディーにデザイン作業が出来るのかなと思ったので記録しておきます。

  1. XD:まずはXDでレイアウトを決めたり原稿を流し込んだり、デザインをする
     
  2. Photoshop:画像部分はPhotoshopで作成し、CCライブラリに同期
    →これによりAdobeの各アプリケーション間でデータが共有される
  3. XD:メニューから「CCライブラリを開く」を選択(Shift + Ctrl + L)、同期した画像を配置
  4. Photoshop:画像に修正が入った場合、CCライブラリから修正したい画像を選択し、修正して保存するとXD側にも自動で修正が反映される。(若干時差あり)
    Photoshopでいうところのスマートオブジェクトのようなものですね!
     
  5. XD:コーディング用の画像書き出し

最後に

今後のWEBデザイン制作の現場では、もしかしたらPhotoshopよりXDが上回るのでは!?と思うほど使いやすく、頻繁によりよい機能を加えてアップデートされている面も含めて推せるツールだなと感じました。XDについての知識はまだまだ浅いですが、使いながら慣れていくスタイルで今後のデザイン制作に活かしていきたいと思います。
次回、私が一番始めにXDを使うきっかけになったとてつもなく便利な「共有」機能をサラッとご紹介!(予定)

+dc(菊)

この記事は、KIKUCHI が書きました。