XDをおすすめする理由こんにちは!みう(@miu0512)です。XDがいよいよ本格的にWebデザイン制作に使えるようになってきました。XDでWebデザインを作るようになりました。IllustratorとPhotoshopの中間くらいなのがFireworksだった昔使っていたFireworksは、IllustratorとPhotoshopの中間くらいの使い勝手で、ベクターデータも使えたのでとても便利でした。逆に私はPhotoshopを20歳越えるまで使っていなかったので、ちょっと操作感に慣れるまで時間がかかりました。最近はデザインクオリティを求められる方も多いのですが、それでも昔みたいなリッチデザインが少なくなってきたことから、Photoshopじゃなくても充分対応できます。1つのファイルで管理できるとにかく起動が速いし、サクサク動くのが一番。Photoshopは開くまで時間がかかっていたこともあり、ストレスになっていました。それに加えて、アートボードを複数設置して1つのファイルで下層ページまで管理できるから、とても楽です。ガイドも引けるようになって、ますますWebデザインがしやすくなった少し前までなかった機能、ガイド。ガイドがあることによって、よりきちんとピクセルを合わせて作れるようになりました。今まではわざわざ四角形を作って中央配置、それに合わせて端を決めるようにしていたのですが、ガイドがあることでその必要もなくなりました。CSSを吐き出してくれるプラグインもありますとにかくプラグインが秀逸。CSSをはきだすプラグインは活用できていないですが、最近一番よく使ってるのはアートボードの自動リサイズですね!ショートカットを使うだけで、下に長く伸ばしたアートボードをキュッと縮めてくれるのはとても便利です。スライスがとにかく楽。ショートカットも便利アセット機能はPhotoshopやIllustratorにもありますが、グループ化して名前付けて、選択した部分を⌘Eで書き出してくれるのは、とても効率がいいです。ちなみに今まではアプリ『Slicy』を使って書き出していました。SVGで書き出せるところも良いですね!最近のトレンドに合わせたデザインがしやすいグラデーションももちろん対応可能。最近は写真メインのサイトも増えたし、マテリアルデザインが増えてきたので、非常に作りやすいです。多角形を作る機能も増えたので、ますます便利になりました。何よりも一番、指示がしやすいプロトタイプ機能を使うことによって、どこから遷移するか、どうアニメーションするかを実際に作ることができます。社内にはマークアップエンジニアがいるので、デザインデータを渡すだけでしっかりコーディングしてくれるのも良いところ。XDではできないこともたくさんもちろん、まだまだPhotoshopの時代。XDはワイヤーフレームやアプリのUI設計をするツールとして知られてきました。そのため、Photoshopにしかできないことや、Illustratorでしかできないことがまだまだあります。XDは縦書きができないわけではありません。改行を入れながら作ることも可能です。すると、伸ばし棒などに支障が出ます。早く縦書き対応してほしいものです。画像加工ができないトーンや画像補正ができません。これはPhotoshopに任せてしまいます。一度Photoshopで加工をして、その画像を使うというのが現在の私のフロー。写真に強いのはやはりPhotoshopなのです。汗パス上に文字を乗せることができないIllustratorのように、パス上に文字を乗せることができないので、動きのある文字を作ることができません。1文字ずつ動かしながら作るしかないので、円文字にしたりアーチ状にしたりすることができれば、最高です。髪の毛など、細部まで細かいクリッピングマスクが難しい難しいと書いた理由は、不可能ではないからです。一度画像を表示させ、パスどりして領域を作る。そこに画像をはめ込めば綺麗なクリッピングマスクができるからです。Photoshopのような境界線の選択や自動選択がないからちょっと手間がかかりますね。これからますます発展していくのではないかと思われます。機能やプラグインが増えることを期待したいのと、まだまだ使いこなせていない感じがするので、しっかり習得して行かなくちゃ。こんな使い方もあるよ!というのがありましたら是非教えてください。(@miu0512)フリーランス4年を経て起業。ホームページ制作やLP制作を企画からマーケティングまですべて請けているため、「Webコーディネーター」として活動中。