spicato

WEB and GRAPHIC
CREATIVE STUDIO

T.072-424-9827 F.072-424-5923
hello@spicato.com
Ogaito 3-3-2
Kumatori-cho, Osaka, Japan
date
2020.01.07(tue)
views
1456
category
diary

まだPhotoshopを使っているWebデザイナーさんに。Adobe XDへの移行のすすめ。

Adobe XD(アドビ エックスディー:旧 Adobe Experience Design )が正式リリースされたのは2017年10月なので、今から約2年前になります。
それまではPhotoshop(フォトショップ)でWebのデザインを行っていましたが、2017年11月の新規案件から導入しました。使い慣れたアプリのメジャーバージョンアップでさえ、億劫な私ですが、、、(あのボタンどこ行った?とか、なんでこんなフォルダが勝手に生成される?とか追加された新機能が要らないと思うことが多いです…。)XDには、なんというか、どんどんこれに変わっていく感じがしました。
「毎月機能追加のアップデートをします!」ということを正式リリース時に発表されているのですが、めちゃ大変だろうということは何となくわかるので、そういう心意気からも、WEB制作のメインツールにする!というようなXDの開発者さんたちの本気感を感じたのだと思います。

毎月アップデートはさすがに続いてはいませんが、、、それでも追加される機能や修正がいい感じです。下記で最新のリリース情報を確認できます。
XD の最新リリースの新機能

使ってみたら、もうPhotoshopに戻ることができないほど感動し、すぐさま反対していた社内スタッフにも無理やりにすすめ、今はディレクターもデザイナーも全員が使用しています。口を揃えて言うのは、「もうPhotoshopには戻りたくない….」です。PhotoshopでWebデザインをされているデザイナーさんには特におすすめしたいです。

2年使用してみて、自分的にここが良い!と思うことがたくさんありますので、ひとまずデザイナー視点でXDの良いところを4つだけご紹介したいと思います。

とにかくサクサク動く。データが軽い。

Photoshopだと配置した画像や長さによっては、1ファイル1GB以上になることもしばしばありましたが、1サイト分のPC、スマホのデザインデータを1ファイルでまとめて作成して、4、500MBです。
画像はCCライブラリを使うことも多いですが、直に配置しても軽いです。
「結構大きな画像をボンボン配置してるんだけど、なんだろうこの軽さ?」と驚きます。しかも配置した画像を、縮小してからもとに戻しても劣化もしない。もう魔法かと思います。
イラストレーターのように、一定テキスト量を越えると重くなることもないですし、全ページ配置できるので、行き来もラクラク。コンポネント化すれば、同じ修正を全ページに反映するのも簡単。
データが軽い!これだけでもXDを利用する価値があると思います。

デザインも自由自在。画像編集もラクラク!ちょっとだけ不満はあるけど。

Photoshopだと細かいニュアンスができるから…と言う方が多いかもですが、XDだって結構細かいことができます。イラストレーターで紙もののデザインをするのとそんなに変わりません。矩形だけでテンプレっぽくなりすぎるとか、そういくことはありません。
確かに、写真の補正などの画像編集はできないので、その場合はPhotoshopへ移動しての作業になりますが、先日アップデートで、画像を選択して右クリックでphotoshopで開くことができるようになりました。それで明るさとか触れるだけかと思えば、レイヤーも追加できるし、普通にphotoshopの画像編集機能をフルに使えて、作業後に保存すれば、XDでそれがそのまま反映されます。
再び同じ画像をXDで右クリックからphotoshopで開くと、レイヤーはもちろん保持されていますので、何度でも編集可能なのです。(ただし、現状はXDを保存してファイルを閉じてりしまうとPhotoshopで編集したレイヤーが合体されますので注意!)

▼詳しくはこちら(この記事の2つ目)
Adobe XDからPhotoshopを呼び出して画像編集

個人的に不満があるとすれば「テキストの縦書き」と「パスに沿わせる」ことがXDでできないこと。それができたら、めちゃいいのですが….Adobeさんお願いします。

▼一応こんなプラグインがあったりはしますが….
Tategaki for Adobe XD
▼縦書きプラグインについては、この記事なんか詳しく説明してくれています。
【Adobe XD】縦書きしたいときに助けてくれるプラグイン

スマホサイズへ展開しやすい。

弊社もまだPCデザインから起こすことが多いのですが、スマホへの展開って結構大変だったりしますが、画像やブロックを縮める機能が充実しています。自由に変形するのも、比率を保って拡大縮小するのももちろん可能ですし、「レスポンシブサイズ変更」という機能で、いい感じに「ここのアイコンは右付きで、テキストは左右中央配置を保ったままブロックを広げる」なんてこともできてしますのです。

▼レスポンシブサイズ変更、うまく説明できないのでこのページを見てください
レスポンシブサイズ変更とコンストレイント

初期のころから備わっていましたが、「リピートグリッド」という機能も便利です。「リピートグリッド」は作成したブロックパーツを縦横にリピートできるというものです。リピート後にブロック内の各パーツの位置や文字サイズなどを変更すれば、すべて連動して変わるのに、複製されたブロックパーツのテキストの変更は自由に行えるので、かゆいところに手が届く感じになってます。

▼リピートグリッドについて詳しくはこちらの記事へ
繰り返しエレメントの作成

プラグインがどんどん増える。

僕も正直、追いかけ切れていないところではあるのですが、XDはプラグインが豊富にあります。「XD プラグイン」などで検索すれば、【20XX年完全保存版】AdobeXDを使いやすくするプラグイン!みたいな記事がたくさん出てきます。デフォルトでも使いやすいXDですが、探してみると、こんなことが楽にできたら….と思っていることを補うプラグインがあったりします。
僕がおすすめしたいイチオシは「Resize Artboard to fit content」です。
アートボードの高さを揃えるというシンプルなものですが、最後フッターおしりにアートボードの高さを揃えるのが結構面倒で….愛用しています。100pxあけて揃えたいとか、ぴったりにしたいとか設定できるのも嬉しい。複数のアートボードを一括でできるのも良いです。

▼アートボードの高さを揃えるプラグイン
Resize Artboard to fit content

と、まぁAdobe XDのおすすめをご紹介したわけですが、とにかくPhotoshopでゴリゴリ作ってる方には一度体験してみてほしいです。

今掲載しているスピッカートのWebサイトの事例のほとんどはXDでの制作になります。ぜひご覧ください。
spicatoのWebサイト制作事例を見る