これまではWebサイトのデザインにはPhotoshopが使われることが主流でしたが、最近ではデザインやプロトタイプを作成できる「Adobe XD」が大変便利で、使用するWebデザイナーも増えてきています。
今回は、「Adobe XD」の基本的な使い方についてご紹介いたします。もくじ
◆Adobe XDとは
Adobe XDとは、Adobeが提供しているデザインオールインワンツールです。
オフライン作業も可能で動作が軽く、日本語にも対応しています。
ワイヤーフレームの作成やビジュアルデザイン、インタラクションデザイン、プロトタイプ化してプレビュー、共有することができWebサイトや、モバイルアプリなどのデザインに適しています。
デザインスペックを公開することもできるのでCSSにスタイルを反映させたり、デザイン内のテキストデータをワンクリックでコピーしたり、カラーコードもコピーできるので、デザイナー以外でもエンジニアにとっても大変便利なツールです。
以前、アップデートされたことでPhotoshopとの連携がより簡単になり、Sketchファイルも扱えるようになりました。
Photoshopなどと同様にAdobe Creative Cloudを契約していれば、すぐに導入し使用できます。
最近では誰でも使える無料プランも提供されています。
◆Adobe XDでできること
■ワイヤーフレームやデザインカンプの作成
・デザイン編集全般
パス操作、クリッピングマスク、透過、テキスト入力などデザインで必要な大体のことができます。
・リピートグリッド
Adobe XDの大きな特徴として、ドラッグひとつで要素の繰り返しを行う事ができます。
記事一覧など、繰り返しの多いレイアウトで役立つ機能です。
・シンボルの作成
オブジェクトをアセットに追加してシンボルに登録できます。シンボルはドラッグするだけでアートボードに配置することができ、シンボルを編集すればそのシンボルを流用した全てに反映されます。
■プロトタイプ作成
・遷移時のアクション設定
どのボタンやページからどこのページへ遷移するかを、アニメーションで設定することができます。
プロトタイプはURLで共有することができ、パスワード設定もできるのでリリース前の情報が外部に漏れる心配もありません。
・実機確認
WindowsやMacなどのPCで作成したAdobe XDのデータをスマートフォンやタブレットで確認することができます。
・Photoshopと連携
PSDデータをAdobe XDに取り込むことができます。Photoshopでデザインを作成してAdobe XDでプロトタイプ化することが可能です。
■デザインの共有やレビュー
共有したデザインやプロトタイプに対して、コメントを残すことがきます。
コメントしたい箇所にピンをつけられるので修正箇所などがわかりやすく、またコメントに返信することもできます。
社内確認やクライアントへの確認の際に大変役に立ちます。
◆Adobe XDの活用
Webサイトのワイヤーフレーム作成には、Adobe XDが大変便利です。
以前は複数人で同じファイルを作業することができませんでしたが、アップデートされたことで共同編集が可能になりました。
同じプロジェクトのメンバーとの確認やタスクの共有にも役立ちます。
また、会議やプレゼン資料作成にもURL一つで共有が可能なAdobe XDが役立ちます。
◆まとめ
専門的な知識も不要で直感的に扱えるAdobe XDは、デザイナー以外の方でも簡単に使うことができます。
機能面も充実で、Photoshopとショートカット操作が一緒なので、Photoshopを今まで使っていた方であれば戸惑うことなく初められると思います。
PhotoshopやIllustratorと作業によって使い分けるのもおすすめです。
無料のトライアルも用意されているので、まずはお試しで使ってみてはいかがでしょうか。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞