こんにちは。デザイナーの岡本です。
今回は、webデザイン製作にAdobe XDを導入して、ここは便利と感じた事について書いていこうと思います。
導入に思い立ったきっかけ
今までは、webのデザイン製作はAdobe Illustratorを使用して、デザインを行っていました。今でもIllustrator、Photoshopでデザイン制作することは主流だと思う方が多いと思います。私の学生の頃はまだXDはリリースされておらず、XDの存在自体知ったのも、他のデザイナーの方のブログを読んだときでした。
XDを導入しようと思ったきっかけは、外部の方にコーディングを頼むかもしれない、という話がでてきた時です。今までは、社内のコーダーの方に、その度直接確認したりするので、あまり不便に感じることは少なかったです。指示書のようなキッチリとしたものを制作してなくても、ある程度話し合いで済んだり、コーダーの方にお任せしていたことも多かったので。
ですが、外部の方となると、そういう訳にもいかず、今まで外部の方との連携した仕事の経験も無いので、確認をとるのに、どうしてもロスが発生し、業務もスムーズになかなか進められないのではと考えました。そこで、以前から気になっていたAdobe XDを導入してみようと、このタイミングで踏み切りました。
一番の利点は共有のしやすさ
先程のコーディングの方との連携のお話を踏まえて、私がXDで一番注目した機能は、いちいち指示書を製作したりしなくても、XDにはコーディングしやすいように開発の表示機能が備わっているところです！ ここがデザイナーとコーダーの方、双方が制作しやすい一番の特徴とも言えるでしょう。
コーダーの方がAdobeのソフトを持っていなくても、リンクを共有することで、ブラウザ上でデザインを表示できる機能があるので、だれでもどこでも簡単にデザインの確認が行えます。
またコメント機能もあるので、ここはこうして欲しい！という指示も簡単にメモとして書き込めます。とにかく視覚的に見やすいので、なにかあっても指示がしやすく、変更も簡単なので便利です。
こちらの共有機能ですが、コーディングする際に限った話ではなく、デザインだけを確認する方とも共有しやすいんです。
共有にはいくつか選択肢があります。デザインを確認したり、コメントが出来る「デザインプレビュー」、コーディングの為の「開発」、デザインを見せながら相手に解説する際に便利な「プレゼンテーション」、実際のwebデザインのように操作しながらテストする「ユーザーテスト」と、利用する事によって表示の項目を選べる「カスタム」の５つの種類からリンクの制作が可能です。
XDのファイルに変更があっても、一度制作したリンクを更新するだけで、すぐに反映されるので、スムーズに対応できます。
また、共有のリンクは、公開範囲のレベルも設定できるので、セキュリティの面でも安心してデータのやり取りが行えます。
実際にこちらの機能を使ってみて、デザインを制作していく上でも、変更を伝えるうえでも、とても便利でした。この機能のお陰で、指示書の制作などの工程が必要なくなり、かなり作業効率が上がったと思います。
とにかく動きが軽い
ここからはデザインを制作してみての感想です。まず、動きが軽くて落ちにくいのがいいですね。どうしてもサイト内のコンテンツが増えると、IllustratorやPhotoshopのファイルも重くなってしまい、急に落ちてしまう事もよくありました。かと言って、ファイルを複数分けるのも管理が大変ですよね。
また、最近はほとんどの方がレスポンシブ前提のサイトデザインを考えると思います。PC用、タブレット用、スマホ用と複数制作しないといけないですが、レスポンシブのデザインも1つのファイル内で制作できるので、ファイルの管理も楽です。ただ、いくら軽いと言ってもそこそこのデータ量になると、開くときと保存の時に時間がかかってしまうのは仕方のないと思いつつも多少不便に感じました。
視覚的なデザインを再現できる
ボタンをクリック、画像の表示などの動きを簡単に再現できるんです。こちらは「プロトタイプ」という項目で、設定を行っていきます。
例えば、”リンクボタンをクリックしたら、別のページに移行する”という動きを再現する際、リンクボタンと移行先の表示したいページのデザインをしたアートボードをコネクタという機能で繋ぎます。そうすると、共有で制作したリンクの画面上で、実際にボタンをクリックするとページ移動の動きを表現できます。いちいち文字で、ここのボタンはこのページリンクすると書かなくても、実際に操作できるので、手間が省けます。
リンクだけでなく、画像や文字の表示の仕方やハンバーガーメニューを押したときの表示など、いろいろな動きを再現できるので、コーディングする方にも自分が表現したい動きを視覚的に説明できます。
ただ、結構プロトタイプの項目は操作が難しくて、私は正直全然使いこなせてません…… 他の方のブログを見てると、こんな動きまで再現できるんだと驚くことも多いです。まだまだ勉強の甲斐がありそうな箇所です。
書き出しが簡単
IllustratorやPhotoshopも最近はアセットや一括の書き出しの機能が搭載されて、だいぶ楽になったと思います。ただ、XDはもっと簡単で、いちいちなにか設定をしなくても、グループ化したものやオブジェクトを選択しただけで、書き出しが可能なんです。
書き出しのパターンもレスポンシブに対応していて、2倍の書き出しも項目を選択すると自動でしてくれたりするので、助かりました。
最後に
今回は、おおまかなXDを使用した際の良かった点をいくつかあげましたが、まだ使いこなせるには勉強が必要だなと思いました。
webだけでなく、DTP関係も制作してるとIllustratorとPhotoshopさえあれば基本デザインはなんでもできますよね。しかし、XDを使い始めると、流石web製作の為に特化したソフト！ いろいろな箇所で使いやすいと感じることが多いです。ソフトの操作自体も、普段IllustratorやPhotoshopを使用している方なら、感覚的にどなたでもすぐに慣れると思いますので、導入しようか迷われている方は是非とも試していただきたいです。
