PhotoShopはデザイナーなら誰もが一度は使った事があるデザインツールだと思います。
webのデザイン作成をPhotoShopで行うwebデザイナーも多いですよね。
そこで皆さん、Adobe XDというデザインツールをご存じでしょうか？
XDとは
Adobe XDは、共同作業を促進するパワフルで使いやすいプラットフォームで、簡単にUI/UXデザインを作成する事が出来ます。
操作が簡単で、初心者の方でも感覚的に操作出来るのも魅力です。
とても便利で動作が軽いので、近年XDを使用するデザイナーが増えています。
また、2019年の新機能である共同編集もXDの利用者が増えている要因なのではないでしょうか。
もっと詳しく知りたい方は是非AdobeXDの公式サイトを見てみてください。
1.XDとPSの違い
ずばりXDとPhotoShopの大きな違いは、XDはUI/UXデザイン・効率重視でPhotoShopは画像・デザインの幅広さ重視という事でしょうか。
XDでは簡単に操作ができる分、PhotoShopで使えてXDでは使えない機能があるのでその機能があるかどうかで作れるかどうかが変わってきます。
しかし、PhotoShopで試作モデルを作成する事も出来ないのでそこの違いが大きいように感じます。
そこでXDでは何が出来て、PhotoShopでは何が出来るのか細かく説明していきます。
XDにしか出来ないこと
XDならではの機能を5つ紹介します。
1.プロトタイピング
まずは先ほどの大きな違いで出てきたプロトタイピングについてです。
このプロトタイピングとは試作モデルの検証のことを指します。
試作モデル(プロトタイプ)とは、使用者がサイトを開いた時にどのような動きをするのかなどの実際の動作を確認する事の出来る物のことです。
プロトタイプを作成すればホバーやスクロールアニメなどの動的なデザインをエンジニアと簡単に共有することが出来、認識の違いなどを起こすこともなくスムーズにサイトを制作する事が出来る様になります。
2.チーム内での共同作業が可能になる
XDでは作成したデザインをクラウドドキュメントとして保存すれば他のデザイナーやエンジニアなどの共同作業者とすぐに共有して、同じ原物を使用する事が可能になります。
リアルタイムでチーム全員が同時に同じドキュメントを使用して一緒に作業を進められる為、作業の重複を避ける事が出来ます。
自分の作業中でも、他の人がどの部分を作業しているかが明確に分かるのでトラブルも減る事でしょう。
PhotoShopでも相手に送ったり、同じネットワーク上で管理したりして原物を共有する事は出来ます。
ただ、編集する度にデータを送らないといけなかったり、そのデータを同時に編集したりする事は出来無いのでチームで作業する場合はXDを使った方が共有が楽に出来ます。
3.チーム内での面倒な業務連絡が不用になる
これもチームでの共有の話になりますが、メモ帳やメッセージなどを使わなくても、XD上でコメントを残し、共同作業者に自分の考えを伝える事が出来ます。
XD上でコメントをする事でメモも含めて1つのデータで管理が出来るので、メモしたデータがどこかに行ってしまった…などのトラブルを防ぐ事が出来ます。
さらに共同作業者からもコメントする事が出来るので、修正指示なども簡単に共有でき、不必要な業務連絡のやり取りを減らす事が出来ます。
4.illustratorのようなパスや結合機能を使ったオブジェクト作成
さらにXDを使用する事で、illustratorのような複雑な形のオブジェクトの作成も可能になります。
わざわざillustratorを開かなくても良いので作業が楽になるだけでなく、デザインの幅も今まで以上に広がります。
webサイトでは矢印やアイコンが使われる事が多いのでそこもXD内で作成する事が出来るので良いと思います。
5.リピートグリットなどによる効率化
そして、XDをオススメする上で1番便利で良いなと思ったのがリピートグリット機能です。
これは同じ要素を複製して並べる機能です。
使用方法もとても簡単です。
上記の作業のみで、これまで面倒だった複製、整列が終わります。
XDは効率や感覚で作業が出来る様に単純化された操作方法によってPhotoShopよりも作業時間を短縮する事が出来ます。
【ここでお知らせです】
※Designers-Proからのご提案
ここまで読んで頂きありがとうございます！
ここで我々デザプロからご案内をさせて頂きます。
僕や、既にwebデザイナーとして活躍している先輩達と一緒に学びませんか？
※詳細は上記バナーをClick
夢と希望に溢れる皆さんのご参加をお待ちしております。
Photoshopにしか出来ない事
1.写真の編集
PhotoShopはそもそも、画像編集ソフトなので写真を加工するのに必要な機能が充実しています。
XDはあくまでデザインツールなので写真の編集はできません。
しかし、webサイトは写真が乗っているサイトがほとんどなので、XDでデザインの作成をしていてもかなりの確率でPhotoShopを開く必要があります。
2.レイヤー効果
PhotoShopにはレイヤー効果と呼ばれるドロップシャドウや、ベベルなどの視覚効果をレイヤー上のオブジェクトに適用する機能があります。
ですがXDでは、レイヤー効果を使えません。
シャドウやグラデーションなどのレイヤー効果と同じ役割をしている機能はありますが、ベベルとエンボスやシャドウ(内側)などの使えない機能もあります。
3.ヒストリー機能
ヒストリーとはデータを開いた所から現在までの自分が行った作業を1つずつ遡ることができる機能です。
とても便利でよく使う事があるのですが、現在の所XDにはない機能です。
クラウドドキュメントに保存してあれば、保存ごとに遡る事が出来るので「前回保存した所まで戻りたい」と思った時などはXDのほうが便利かもしれませんね。
終わりに
XDを使ってみた感想はとにかく便利です。ただ画面上に操作ボタンが少なくショートカットが分かっていないと慣れるまでは少し大変かもしれません。
そしてXDは、PhotoShopで作る事の出来るデザインは大抵作る事が出来てまし。UI/UXデザインまで作成する事が可能です。
しかし、それぞれ出来る事が変わって来るのでXDでワイヤーフレームやデザインカンプ・プロトタイプを作成し、PhotoShopで写真の編集や最終的なデザインの完成を行ったり、デザインによって使い分けたりするとより効率よく、レベルの高いデザインを作成する事も出来ます。
さらに費用面で言えば、今Adobe Creative Cloudを契約している方ならほぼ費用がかかりません。アプリをDLするだけで利用可能です。
しかもMacでもWindowsでも利用出来る上に、日本語対応もバッチリですしアップデートも早く、どんどん使いやすくなっているというのもポイントが高いですね。
これから使うという方も、現在の業務形態に合わせて無理なく取り入れていけば良いと思います。
今すぐに使う機会がなくても、触るのに慣れておけばこの先のアップデートの内容によって、「これなら使える！」というタイミングですぐに使い始められるのではないでしょうか。
今なら、デザプロ公式LINEで、
・WEBデザイナーで稼ぐうえで絶対に覚えておくべきこと
・全くの初心者から始めて在宅で仕事を獲得する方法
・高単価のWEBデザイナーだけが知っている収益化のコツ
などの情報を配信中です。
さらに！今なら期間限定で
LINE登録で無料で貰える３大特典付き🎁
是非、LINE登録してくださいね！
コメント