[M]私がWebデザイン制作にAdobe XDをおすすめする理由

こんにちは！みう(@miu0512）です。XDがいよいよ本格的にWebデザイン制作に使えるようになってきました。昔私はFireworksを使っていたこともあり、Photoshopよりも使い勝手の良いAdobe XDでWebデザインを作るようになりました。

IllustratorとPhotoshopの中間くらいなのがFireworksだった

昔使っていたFireworksは、IllustratorとPhotoshopの中間くらいの使い勝手で、ベクターデータも使えたのでとても便利でした。逆に私はPhotoshopを20歳越えるまで使っていなかったので、ちょっと操作感に慣れるまで時間がかかりました。

私がAdobe XDに魅力を感じた理由

私は最近ほとんどのWebデザインをAdobe XDで行っています。最近はデザインクオリティを求められる方も多いのですが、それでも昔みたいなリッチデザインが少なくなってきたことから、Photoshopじゃなくても充分対応できます。

軽快。そして1つのファイルで管理できる

とにかく起動が速いし、サクサク動くのが一番。Photoshopは開くまで時間がかかっていたこともあり、ストレスになっていました。それに加えて、アートボードを複数設置して1つのファイルで下層ページまで管理できるから、とても楽です。

ガイドも引けるようになって、ますますWebデザインがしやすくなった

少し前までなかった機能、ガイド。ガイドがあることによって、よりきちんとピクセルを合わせて作れるようになりました。今まではわざわざ四角形を作って中央配置、それに合わせて端を決めるようにしていたのですが、ガイドがあることでその必要もなくなりました。

プラグインが豊富。CSSを吐き出してくれるプラグインもあります

とにかくプラグインが秀逸。まだCSSをはきだすプラグインは活用できていないですが、最近一番よく使ってるのはアートボードの自動リサイズですね！ショートカットを使うだけで、下に長く伸ばしたアートボードをキュッと縮めてくれるのはとても便利です。

スライスがとにかく楽。ショートカットも便利

アセット機能はPhotoshopやIllustratorにもありますが、グループ化して名前付けて、選択した部分を⌘Eで書き出してくれるのは、とても効率がいいです。ちなみに今まではアプリ『Slicy』を使って書き出していました。SVGで書き出せるところも良いですね！

最近のトレンドに合わせたデザインがしやすい

グラデーションももちろん対応可能。でも、最近は写真メインのサイトも増えたし、マテリアルデザインが増えてきたので、非常に作りやすいです。多角形を作る機能も増えたので、ますます便利になりました。

何よりも一番、指示がしやすい

プロトタイプ機能を使うことによって、どこから遷移するか、どうアニメーションするかを実際に作ることができます。社内にはマークアップエンジニアがいるので、デザインデータを渡すだけでしっかりコーディングしてくれるのも良いところ。

今のAdobe XDではできないこともたくさん

もちろん、まだまだPhotoshopの時代。特にAdobe XDはワイヤーフレームやアプリのUI設計をするツールとして知られてきました。そのため、Photoshopにしかできないことや、Illustratorでしかできないことがまだまだあります。

縦書きが難しい（2019.06時点）

Adobe XDは縦書きができないわけではありません。無理やり改行を入れながら作ることも可能です。すると、伸ばし棒などに支障が出ます。早く縦書き対応してほしいものです。

画像加工ができない

トーンや画像補正ができません。これはPhotoshopに任せてしまいます。一度Photoshopで加工をして、その画像を使うというのが現在の私のフロー。写真に強いのはやはりPhotoshopなのです。逆にここまでできたらPhotoshopいらずになってしまいますね 汗

パス上に文字を乗せることができない

Illustratorのように、パス上に文字を乗せることができないので、動きのある文字を作ることができません。1文字ずつ動かしながら作るしかないので、円文字にしたりアーチ状にしたりすることができれば、最高です。

髪の毛など、細部まで細かいクリッピングマスクが難しい

難しいと書いた理由は、不可能ではないからです。一度画像を表示させ、パスどりして領域を作る。そこに画像をはめ込めば綺麗なクリッピングマスクができるからです。ただし、Photoshopのような境界線の選択や自動選択がないからちょっと手間がかかりますね。

これからもっと活躍できるAdobe XD

デザイナーにとっても、コーダーにとっても、ディレクターにとっても使い勝手がいいAdobe XD。これからますます発展していくのではないかと思われます。

さいごに・・・

私はWebデザインの9割はAdobe XDで行っています。もっと機能やプラグインが増えることを期待したいのと、まだまだ使いこなせていない感じがするので、しっかり習得して行かなくちゃ。こんな使い方もあるよ！というのがありましたら是非教えてください。

最後までお付き合いいだだきありがとうございます！

これからも、みう(@miu0512)を応援していただけたら嬉しいです！