新しいもの嫌いなわたしがAdobe XDを触ってみた感想。

わたしの在籍しているWEB制作会社でも
注目を浴びている(が、実務運用はまだされていない)

Adobe XD。

Photoshop好きで使用感も満足しているし、
真新しいツールたくさん増やさなくてもいいかなーと思って
傍観していたのですが

わが社のデザインチームを指揮しているトップデザイナーさんが
「これからはXDが主流になってくる!」と激しく称賛していて
(しかし、導入はしていない=今使えるようになったら先取りできる!)
単純に気になったのと

ちょうどよく
WEB制作のご依頼を受注してワイヤーフレームを作る必要があったので
ためしにインストールして使ってみました。


Adobe製品の固定概念を破るスペック

使ってみてまずびっくりしたのが

とにかく軽い!

Adobe製品って高機能な代わりに
重たいのはもう仕方ないものだと思っていたし

それでもグラボ搭載パソコンを買って
かなり動作が改善されたから満足していました。


早速XDを立ち上げると
なにやらPDFプレビューのようなシンプルな画面が出てきた。

XDのチュートリアル

インストールした直後だしAdobe製品だから
立ち上がるのに5分くらいかかるんだろうなー
そのためのプレビュー画面か説明の画面がでてきたのか、と思ったら

それが作業画面でした。

え、もう立ち上がったの?
はやっ。

しかもこれがワークスぺ―ス?
シンプルすぎない??


イラストレーターやフォトショップで
たくさんのツールがずらっと並んだパネルに見慣れていたので拍子抜けして

こんなシンプルなツールでデザインやワイヤー設計ができるのか
疑わしくしかありませんでした。笑



アイデアを直感的に落とし込めるUI

実際の作業画面は↓こちら。
すっきりしていますよね。

※適当に作ったサンプルサイトです


PDFの画面みたいじゃないですか?
はたまた、Powerpointにも似ている。

操作性も、Powerpointを思わせる直感性があって

丸や四角の描画、テキストの入力がワンクリックでできて
手数が少なくストレスフリー!

デザインを作りこむ用ではないので
色んな細かいオプションがない分
描画に要するクリックの数が少なくて済むので快適。

画像を挿入してクリッピングマスクすることもできますし
ワンクリックで色や不透明度も変えられます。


なんといっても、動作が軽くて
一つのオブジェクトを作るのに少ない手数で描画ができるのは

些細なアイデアの火が消えてしまう前に形に落とし込めるので
アイデアが命のクリエイターにとっては
言葉にしきれないほどの価値があります。



イラレとフォトショのいいとこ取り

そしてご覧の通り、
あらゆるデバイスサイズのアートボードが作れますし

現在存在するデバイスサイズが選択できるようになっているので
(iPhone、iPad、パソコン、Andoroid などなど)
レスポンシブのイメージ確認にもとても便利。

これはPhotoshopのアートボード機能にも似ているかもしれませんね。


加えて、イラレで頻出のパスファインダーもある。
いいとこどりです。

どちらかというと、オブジェクトを直接つかんで操作する点では
イラレに近いかもしれません。


よくありませんか?

フォトショで作業していて
あーーー、この図形だけ、ちょっとイラレで描画したい!!

イラレで作っていて
あーーー、この画像はフォトショで加工したい!!!

って、同時立ち上げして画面切り替えて
ファイル2つになって、コピペして…
っていう面倒くささ。

衝撃

そういう、ちょっとお隣のソフトを使いたい!
でも、同時立ち上げはめんどくさい!

というむずがゆさを解消してくれます!!


繰り返しのコンポーネントをラクラク作れる
リピートグリッド

加えて、噂のリピートグリッドを使ってみました!!

これ、めちゃめちゃ爽快です(笑)



にゅるるん、って
同じオブジェクトを繰り返してくれて

要素間のマージンも、なんと
ドラッグするだけで調整してくれます。

↑テキストも繰り返ししてくれるので
ナビゲーションをリピートして作ってみました。


不便を感じたこと

既存のショートカットやマウス操作が使えないことも

まず最初に困ったのが

ワークスペース(作業画面全体)を横スクロールできない!!
ということ。


拡大すると、
端の部分がスケールアウトしてしまいますよね。


そこで、横スクロールを使おうと思ったら
Ctrl+マウスホイール(横スクロール)が効かない。
というか、もっと拡大されるし。

XDのチュートリアル

えーーーなにこれ!!
同じ部分しか拡大できないの?!!

このままじゃ↑チュートリアル小さすぎて見れないし!


調べてもなかなかヒットしないし
もしかして、
マウスで横スクロールできるMacユーザーしか使えないソフトなの?!

と思ったところで、色々試してみたら
Shift+マウスホイールで横移動できました♪

Windowsユーザーの方はおためしあれ。

けど、当分、イラレとかフォトショのショートカットキーの
Ctrl押しちゃうだろうなぁ。



あとは、フォントサイズを変えるときに
(↑↓キーで変更ができるのですが)
マウスをぐるぐるして数値を変えることができないのも
もどかしかったくらいかな。


結論:今後も使う。むしろ超便利。

わたしは自分のサイトを作るくらいの
確認の要らないサクッとしたコーディングであれば
デザインカンプを作っていませんでした。

わざわざPhotoshopで作りこまなくても
最終的にはコードに落とし込むし、コード書きながら変えていけばいいや、くらいで

手書きでラフを書いて、なんとなくで画像サイズ決めて
コードを打ちながらレイアウトを修正していました。


けど、XDの操作性はディレクションツールとしての価値は大いにあるし
かなりの時短にもなるな、と感じました。

お客様側にとっても見やすいですしね。



チームで分業するにしても、一人で一貫して作業するにしても
XDは、別々の作業になっていた
設計→デザイン→コーディングの垣根をぐっと縮めてくれそうですね。

まだまだ知らない機能がたくさんあるので
もっとつかいこなしてみますー!

デザイン・ホームページの受注制作を受け付けています

ロジックに基づく、「仕掛けのあるデザイン」
あなたのビジョンを格上げ。

デザインコンサルで、単価アップや
売上アップを一緒に目指しましょう★

デザインバナー

↑ 詳細メニューはこちらから