目次
Adobe XDを使ってみて感じたこと
AdobeXDの正式名称は「Adobe Experience Design」。デザインとプロトタイプを作成から共有まで一貫してできる最強ツールです。
弊社でも今まではPhotoshopでWebサイトのワイヤーからデザイン作成までを行なっていましたが、効率アップのためAdobe XDに少しずつ移行をしています。
とりあえず軽い！作業ストレスが全くない！
おそらくどんなデザイナーもAdobeXDの操作の軽さには感動するのではないでしょうか？今まではデザイン作成のためにPhotoshopを立ち上げるにも、立ち上がるまでの時間にイライラ・・・作業途中にも動かなくなったり、動作がいきなり遅くなったりと作業ストレスに悩まれていませんでしたか？
いくつかデザイン作成をしてみましたが、AdobeXDは立ち上がりもスムーズで、作業中に動作が遅くなったり、フリーズしたりすることもありませんでした。
データ保存にもPhotoshopほど時間がかかることがなく、軽さで時間短縮されるだけでも大きなメリットだと感じています。
ややこしい機能がない！
Photoshopを使っていたためか、操作自体に戸惑うことはほぼなく、ショートカットキーなども同じのものが多いので慣れるまで大変だということもありませんでした。
使ってみてわかったのは、良くも悪くもややこしい機能がありません。がっつりデザイン作成をするには機能が足りないので、PhotoshopやIllustratorとの併用をおすすめします。
ややこしい機能がないからこそ、非デザイナーでも使いやすく、難しい操作がないのかもしれません。
Adobe製品なのでCreativeCloudライブラリも使用可能！
XDはAdobe製品なので、もちろんCreativeCloudライブラリも使用することができます。他のアドビアプリケーションで作成されたアセットを取り込むこともできるので、他の製品との互換性があることも嬉しいですね。
Creative Cloudライブラリのサービスは無料のスタータープランでも使用ができるようです。
デザイン作成以外にも使える！
主にWebデザインで使用していますが、サイト制作の提案資料など、今までワードやエクセル、パワーポイントで作っていたような資料作成にも大変便利だと感じました。
提案資料やサイトマップ、ワイヤー、トップデザインと必要な情報を全て1ツールで作ることができます。
LP（ランディングページ）制作には不向き
Webサイト制作にはワイヤーからトップデザインまでAdobeXDで制作してもほぼ問題ないと感じましたが、LPには不向きだと感じています。
LPのようにデザインの作り込みが必要な場合は、PhotoshopやIllustratorで従来通り作成した方がよさそうです。
LPのワイヤー制作程度であれば、XDの方が早く仕上がるとは感じましたが、デザイン作成は結局Photoshopで作成したもものをXDに入れて・・・となってしまうので、二度手間になるかな、と思っています。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
無料のスタータープランで対応できることは？
無料で提供されているスタータープランと有料のサービスでは、対応できる機能に差はほとんどありません。有料のサービスではアクティブな共有プロトタイプ/共有デザインスペックに制限がないことに比べ、無料のスタータープランでは、各1つずつと制限があります。
他には、クラウドストレージの容量が2GBと、有料プランに比べて少ないです。
Adobe XDでWebデザインしてみよう！
実際に簡単な説明ではありますが、どのようにWebデザインをしていくのかを紹介します。
アートボードサイズを選択してデザイン開始
まずは、XDを立ち上げて、作成するデザインのサイズを選択しましょう。後からサイズを変更することもできます。
アートボードの名前もダブルクリックで簡単に変更することができます。
ガイドをひく
Photoshopなどでは必ずデザインをする際に、ガイドをひいて作業をするかと思いますが、AdobeXDでは方眼グリッドかレイアウトグリッドを使います。シェイプなどを利用してガイドを作成することはできないので要注意です。
最初はガイドの使い勝手が違っていたため、戸惑うこともありましたが、グリッドレイアウトで作成する場合には格段にXDの方が使いやすかったです。
グリッドレイアウトグリッドを使用する場合には、Webサイトのインナーサイズの計算などが必要になるので、ある程度パターンを決めておくと時間短縮に繋がります。
添付画像の設定は1,000pxにインナーサイズを設定したときの数値になります。
ロゴや画像の配置、テキストの入れ込み
画像の配置などは、Photoshopでの作業とほとんど同様で画像をドラッグすると配置されます。Photoshopでいうクリッピングマスクをかけたい時などは、該当サイズの長方形を配置し、長方形の上に画像をドラッグすることで切り抜かれるようになっています。
記事部分やlistなどに使えるリピードグリッド
AdobeXDの機能でまず感動するのがこのリピードグリッド機能です。まずは通常通り1記事分のデザインをしましょう。
デザインをしたらグループ化したい要素を選択して、右上の「リピートグリッド」をクリッします。
クリックすると、リピードグリッド化された要素が緑色の点線で囲まれるようになります。点線で囲まれたら、右横や下にある白色の楕円形を引っ張ってみてください。
横にひっぱると、横に繰り返し表示されるようになります。もちろん、余白の調整も可能です。
余白部分を選択すると画像のようにピンク色に変わるので、範囲を広げたり狭めたりして調整しましょう。
リピートグリッドは繰り返し使用される要素のデザイン時間短縮につながり、大変快適に作業することができるのでぜひ使いこなしてみてください。
デザインができたらプロトタイプを作成しよう
デザインができてきたら、複数のアートボードをつなげるプロタタイプを作成しましょう。
上の切り替えで「プロトタイプ」を選択します。
リンク先の設定などが要素ごとにできるので、該当するものをクリックして、遷移する先のアートボードまで線を伸ばしましょう。
設定プロトタイプは右上の再生ボタンでブラウザ上で確認することができます。
作成したプロトタイプを共有しよう
作成したプロトタイプは共有設定をかけて、Web上で他の人と共有することができます。
リンクを作成することで、作成したページを関係者と共有し、コメントのやりとりなども行うことができます。
詳しい使用方法はAdobe公式のホームページで動画でも提供されているのでぜひチェックしてみてください。
コーダーも嬉しいAdobeXDの機能
画像のアセット機能や、使用しているフォントや色などの集約もAdobeXDは大変優秀です。
画像アセットは該当レイヤーの横にあるマークをクリックするだけでできてしまいます。
また、使用しているフォントや色などを確認するには、アセット表示にして、該当項目の「+」を選択し、書き出したい要素をその中に入れていくだけで集約してくれます。
この機能はコーダーにとって大変ありがたく、アセットしたものはデザインと同様共有リンクで共有することも可能なので、構築の時間短縮にも繋がるのではないでしょうか。
Adobe XDを使ってみた感想
実際にAdobe XDでのワイヤーフレーム作成、Webデザイン作成をしてみて、作業時間の短縮に繋がったと思います。細かい作り込みなどはPhotoshopやIllustratorが必要ではありますが、Webサイトのデザイン作成やアプリ画面の作成など、比較的簡易的なデザインにおいては全く不便することはなさそうです。
今後も業務の効率化を図ってどんどんAdobe XDを使っていこうと思います。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
