Webデザイン作成をPhotoshopからAdobeXDに変える9つのメリット

AdobeXDといえば、ワイヤーフレームを使うときに便利とか、Webデザイン制作にはまだ厳しいんじゃないのって思われがちですが、今では全くそんなことはありません。

今回は、「Webデザイン作成をPhotoshopからAdobeXDに変える9つのメリット」をご紹介いたします。

この記事は以下のような悩みの方にオススメです。

Webデザイン作成をPhotoshopからAdobeXDに変える9つのメリット

この項目では、Webデザイン作成をPhotoshopからAdobeXDに変える9つのメリットを紹介していきます。メリット一覧は下記のとおり。

①PhotoshopやIllustratorと比べて動作とデータが軽い

PhotoshopやIllustratorだと、起動して触るまでに時間がかかってストレスが溜まることありませんか？PhotoshopやIllustratoでデザインを行なっている、画像やアートボード、レイヤーが多くなるほど、重くなってPCがフリーズすることもあります。

XDの場合、できることや機能をWebデザイン、UI/UXの作成に限定しているので、動作が軽い点がメリットです。

起動して10秒以内には操作をすることができます。デザイン操作を長時間行なっても、重くなることがないためストレスなくデザインすることができます。

またAdobeXDで配置した画像は、縮小・拡大しても劣化しない点も魅力です。

Illustratorのように、一定テキスト量を越えると重くなることもないので、全ページのデザインをアートボードとして配置できます。

また、パーツをコンポネント化すれば、同じ修正を全ページに反映するのも簡単に対応することが可能です。

②レスポンシブサイズ変更が出来て、スマホデザインが作成しやすい

Webサイトを制作する際、様々な画面サイズを想定してWebデザインを作る必要がありますよね。

スマホファーストでデザインをする事が、多くはなってきていますが自分も僕は、まだまだPCデザインから作成することが多いです。

スマホデザインへの展開って結構大変だったりしませんか？
画面サイズが変わると、画像やオブジェクトの配置も対応させる必要があります。

Photoshopで制作する場合はPC/SPで各サイズのデータを作成し、手動で調整していく必要がありますが、XDの「レスポンシブサイズ変更」には、アートボード内に配置した画像やオブジェクトを画面サイズに合わせて最適なサイズに変更・配置してくれる「自動機能」と手動で幅・高さや、上下左右のマージンの固定をそれぞれ指定できる「手動機能」の切り替えが可能です。

③プラグインが充実していて、毎年さらに増え続けている

XDはプラグインが豊富にあります。むしろ増え続けていて、追いかけ切れないぐらい存在します。

「XD　プラグイン」などで検索すれば、【20XX年完全保存版】AdobeXDを使いやすくするプラグイン！みたいな記事がたくさん出てきます。デフォルトでも十分使いやすいXDですが、機能的にこんなことが出来たらもっといいのに。。という所をプラグインで補うことができます。

例えば「Icons 4 Design」というプラグインを使えば、種類豊富のアイコンを検索ですぐに呼び出す事ができます。僕もこのプラグインは手放せません。

④デザイン→コーディング作業に便利な開発機能

XDには共有機能がありますが、その際「開発者にリンクを共有する」を選択するとコーディングに便利な機能を活用することができます。

要素を選択すれば必要な情報が表示されるので、コーディングの際に計測する必要がそこまで無い点がPhotoshopと比べても便利です。テキスト内容のコピーも一発でできるのでストレス無く、マークアップする事ができます。

個人的には、ボタンなどのパーツのグラデーションや影のCSSがそのままコピーして使える点に感動しました。
Photoshopではレイヤーごとに、グラデーションや影の効果の数値をCSS化する必要がありましたが、XDではその必要すらありません。
デザインに修正があった場合も、デザイナーに修正してもらって更新してもらえばリンクも更新されます。

⑤アセット機能でデザイン管理を明確に

アセット機能はカラー情報、フォント情報を保存したり、コンポーネント機能で共通パーツやボタンなどのオブジェクトを保存することができます。

一度アセットとして保存しておけば、ワンクリックで色やテキストを瞬時にデザインに反映する事が可能です。
デザインデータを引き継ぐ際も、アセット機能を利用してデザインをルール化しておけば伝えるのも非常に楽になります。

またアセット機能には右クリックで、そのアセットを使用している箇所を「ハイライトできる機能」があります。
実際にテキストやカラー、コンポーネントが適用されている箇所を明確にできる点も本当に便利です。

⑥Photoshopには無いプロトタイプ機能

XDは、ページの遷移やボタンのクリックアクションなどもプロトタイプ※機能を使えばデザインすることができます。
UX/UIツールのXDにのみ実装された機能なので、PhotoshopやIllustratorにはない機能です。

アートボード同士をプロトタイプ機能でつなげていく事で画面遷移も確認する事ができます。
さらに、画面遷移の際のアニメーションもデザインする事ができます。Photoshopでは表現する事ができなかったアニメーションのデザインもできる事でデザイナーの意図を伝えやすくなる点もメリットです。

クライアントへのデザイン提案も画面遷移やアニメーションまで表現できるので、実際のサイトデザインのイメージがしやすく、コーディング後に起きるようなアニメーションイメージの認識違いも起こりにくくなります。
またリンク共有機能を使用すれば、スマホでも確認する事が可能です。

※プロトタイプ＝実際にWeb制作を行う前にモックアップ。コーディング実装前の完成イメージ。

⑦アップデートで追加されたコンポーネントのステート機能

XDのコンポーネント機能は、同じものが使われている箇所を一度に修正する事ができ、何度も作り直すような無駄を省いてデザインの一貫性を維持する便利な機能です。

XDのアップデートでコンポーネントのステート機能が追加されました。
ステート機能の例として、デザインモードでボタンのコンポーネントに新規の「ホバー」ステートを追加することで、プロトタイプモードでアクションの移動先にその「ホバー」ステートを指定することができます。
Photoshopで、「ホバー」レイヤーや「アクティブ」レイヤーに分けて作成していたデザインをXDではステート機能を使えばもっと分かりやすく表現する事が可能です。

プレビュー機能ではボタンをマウスオーバーすると「ホバー」ステートが適用されるので、本来のサイトのような動きを確認する事ができます。

⑧デザインの共有機能、コメント機能が便利

XDには便利なデザイン共有機能があります。
公開リンクを作成することで、クライアントとのデザイン共有のやりとりもスムーズにできます。
セキュリティについてもパスワードを設定できるので安心です。

XDのプロトタイプ機能を活用していれば、Photoshopでは伝わりづらい画面遷移やアニメーションの共有も可能です。
固定ヘッダーやナビの開閉のイメージまで共有することができます。

上記の「デザイン→コーディング作業に便利な開発機能」にも書きましたが、開発共有機能を使えばコーディング開発者の作業もスムーズに行えます。アセット機能でカラーや文字のスタイルの確認も容易です。

コメント機能があり、共有されたデザインの画面上にコメントを入れることができます。
今までデザインの修正があった場合は、メールやパワーポイント、PDFを使用して指示をしていたところを、
プロトタイプの閲覧ページでコメント機能を活用することで工数を削減することができます。

⑨WebデザインのUIキットが豊富

AdobeXDには豊富なUIキットが存在しています。UIキットを使うメリットとして、

• XDのアセットの作り方の参考になる
• 初制作の業種サイトのUIを利用すれば、大体のデザインの雰囲気を掴める
• いつも作成しているデザインのマンネリ化からの脱却

といったデザインのインスピレーションを獲れる点が大きなメリットです。

WebデザインにAdobeXDを使うデメリット

次にWebデザインにAdobeXDを使うデメリットを紹介いたします。
デメリットは以下のとおり。一つづつ説明していきます。

①XDファイルをPSDやAIファイルとして書き出しができない

PhotoshopのデザインをAdobeXDに取り込む事は可能です。（読み込みや機能制限あり）ですが、XDファイルをPSDやAIファイルとしてそのまま書き出すことはできません。

一度PDF化して再読み込みさせたり、別途Webサービスを使用してPSDファイルに変換させる必要があります。

②レイヤー効果や画像補正はできないので素材作成には向かない

影や光彩の細かい作り込みや、ベベルやエンボスのレイヤー効果はXDではつけれないません。
リッチデザインやバナー制作などの素材の作り込みはPhosohopを利用した方が便利です。

Photoshopで素材を作成、加工してUI/UXをXDで作成するといった使い分けが必要になります。

③デザインデータ形式の指定がある場合は使えない

クライアントから、デザインデータ形式の指定がある場合は、当然ですがXDは使用する事ができません。
仕事上、デザインデータの要望がある場合、PSDファイルである事が多いと思うので、Photoshopでデザイン作成も可能な環境は用意しておく必要はあります。

AdobeXDを学ぶ3つの方法

その①：分かりやすいAdobeXDの本を読む

AdobeXDを学ぶにはまず1冊本を読む事がおすすめです。
ここでは、AdobeXDの勉強にオススメの本をご紹介します。

Ａｄｏｂｅ　ＸＤではじめるＷｅｂデザイン＆プロトタイピング 一歩先行く現場のスキル /翔泳社/松下絵梨

posted with カエレバ

楽天市場

Amazon

技術本でありがちな、アップデートがあると本の内容が古くて使えないといったことがありますよね。
このオススメ本は、なんと著者のサポートページが用意されています。
更新度も高く、「作成デモの補足動画」や「アップデート後の変化にも対応した記事」も用意されています。

著者 松下 絵梨さんのサポートページは以下からご覧いただけます。

その②：AdobeXDのチュートリアルを活用する

Adobe XDには非常に充実したチュートリアルがあります。

以下、Adobe XDのチュートリアルの一覧です。全般10分程度で完了できるチュートリアルが多いので、Adobe XDを学びたい方はまずチュートリアルをやってみるのもオススメです。

その③：UIキットをダウンロードしてみる

メリットでも紹介しましたが、XDには豊富なUIキットが存在します。デザインのクオリティも高く、見るだけでも勉強になります。UI/UXスキルを磨くのに最適です。

まとめ

今回は、「Webデザイン作成をPhotoshopからAdobeXDに変える9つのメリット」についてご紹介いたしました。

今回の記事のまとめは以下のとおり。