WEB制作の現場で耳にすること多くなったツール、Adobeの新しいデザインツールのXDと言うソフト。
Adobe XDとは
新しいツールって、「初めて」って言うだけでなかなか手を出すのに躊躇してしまいがちですよね。なので、このXDに関しても、どうかなー。使わなくてもなんとかならないかなー。と思っていましたが、5月から使っていたAdobeのツールを全てCCに鞍替えしたのもあり、試しに新しい案件から使ってみることにしました。
使い始めて約1週間。この間にXDを使った案件もある程度片付いてきました。
使用感のご報告です。
良き。
うむ。
なかなか良いではないか。
これまで僕のWEBデザインの基本的な制作過程としては、
1) 手書きもしくはPower PointやKey Noteで簡単なワイヤーを書く
▼
2) Photoshopで全ての作業を行い(デザインのパーツによってはIllustratorも使用)、画像を書き出し
▼
3) コーディング
まぁ、ざっくりとこんな感じだったのだけれど、この内の(1)と(2)の工程をほとんどXDで行う感じ。
細かいデザインはXDでは行えないので、細かいパーツの制作はこれまで通りPhotoshopで作って、それをXDに当て込んで行く。と言うね。
ただ、XDでもペンツールで細かいシェイプが描けたり、マスクを掛けられたりするので結構色々できる。
で、XDのUIが凄くシンプルなので、あまり迷わず悩まずに済んだ!沢山ボタンや項目があるだけで、ちょっとウゲッっとなってしまいますよね…。それが無かった!
個人的に凄く便利!こ・・・これは画期的!と思ったポイント↓
画像の書き出しがラク!
Photoshop同様、スライスの様にパーツを指定して、通常の解像度用と高解像度用に複数のパターンで書き出しができます。
※わたしはPhotoshopはCS6を使っていたのでこの機能を知らず、XDで初めて知ることとなりちょっと感動!
クライアントとの共有がラク!
XDで作ったレイアウト・デザインをボタン1つでそのままAdobeのクラウド上にアップして、そのリンクを先方に送るだけでデザインの共有が可能に!
※これにおいても、恐らくわたしはこれまでちょっと古臭い手法で、Photoshopで書き出したデザインをBasic認証をかけたサーバーにUPして、そのURLを先方に伝えていたので、地味ながらもその手間がかなり短縮されたのにも感動!
簡単なページ遷移(リンク)が可能
前述した通り、クラウド上にデザインをアップしているので、例えば「ボタン」の遷移先で別ページであるキャンバスへリンクを紐付けることが可能。
これによって、コーディング後のイメージもより沸きやすくなるし、認識の齟齬も少なくなるはず。
他にも同じ様なコンテンツの複製には「リピート機能」みたいなのがあって、簡単に繰り返しができたりする機能もあるんだけど、一先ず僕が感動したのはこの3点!
そして、あぁ、これは今後制作のベースとなるツールになるなぁ。と身を以て感じました。
まさに、今の時代に合わせた制作ツールの登場!って言う印象。
ベーシックな機能は無料でも使えるし、今後もまだまだバージョンアップされて使い易く・高機能になっていくと思われるので、登場間も無いこのタイミングで、さっさと使用(仕様)に慣れておくのが吉かと思います
いや、本当に便利だと思うので、触れたことの無い人は試しに一度触ってみて!(笑)