BLOG
ブログ

チルチルミチルからのお知らせ・日々の出来事・
アウトプットの場所として日々更新しております。
時々地元クリエイターとのコラボブログもやってます!

2018.08.18

web制作の現場で使える!adobe「XD」入門

1

web制作の現場では欠かせないデザインツールと言えば
AdobeのPhotoshopやIllustratorですよね。
それに加えて、近年は「XD」が注目されています。
今年の6月に初めてXDの専門書が発売され、現場でバリバリ使っているwebデザイナーさんも増えてきているようです。
今回はそんなAdobeのニューフェイス、XDの魅力に迫ります♪

 

Adobe XDってなに?

XDとはExperience Design(エクスペリエンス デザイン )の略で
Adobeが2017年10月にリリース(日本語)した、新しいUXデザインツールです。
個人的には、IllustratorとPhotoshopのwebデザインに特化した機能をいいとこ取りしたのがXDといった印象です。

Adobe XDの魅力

①webデザインに特化していて機能が少ないので直感的で簡単!
IllustratorやPhotoshopと比べたらすぐに覚えられます。

②毎月アップデートを繰り返してどんどん使いやすくなっている!
ユーザーの声を積極的に取り入れて新機能を追加したり、既存の機能を改良したり進化し続けています。

③モバイル版のwebデザインにピッタリ!
AdobeXDのモバイル版のアプリをデザイン時に使うことで、モバイル版のデザインを素早く効率的に確認・作業することができます。

④URLのみでデザインの確認ができる!
Photoshopで作成したデザインをクライアント様や社内で共有するには画像に書き出す必要がありますが、XDを使えばURLひとつで即時共有ができます。
またXDデータ内のリンクも有効で、より本物に近い形で確認ができます。

 

Adobe XDの代表的なテクニック

①リピートグリッド(デザインモード)
選択したデザインの要素を上下左右のドラッグで直感的に繰り返すことができます。(緑の枠の部分)
さらに、余白(ピンクの部分)の広さもドラッグ操作で連動して感覚的に調整することができます。
リピートグリッドのキャプチャー画像

 

②簡単遷移設定(プロトタイプモード)
要素をクリックすると右矢印が表示されます。
それをドラックして他の要素につなげると簡単にリンクを設定することができます。
またテンプレートを複製した場合にも遷移設定は引き継がれるので大規模案件にも◎。
簡単遷移設定のキャプチャー画像

 

今回、実際に作成したXDのリンクがこちらになります。
https://xd.adobe.com/view/c248e0b8-f9bc-4e68-7f86-8527048e574d-b479/

 

いかがだったでしょうか。
他にもXDにはデザイナーはもちろん、クライアント様やディレクター、コーダーにとっても嬉しい機能がたくさんあります。
どんどん進化するXD、まだまだ私も勉強中ですが積極的に活用していきたいです。

ヨカね!

この記事が面白かったらポチッってください!

関連記事

Contact