こんにちは！デザイナーの石井です。
皆さん、日頃の業務ではどんなツールを使っていますか？
デザイナーの私はもちろんおなじみのIllustratorとPhotoshop…と、思いきや、最近メインで使用しているのは別のツールなんです。
Webデザイナー歓喜のツール、AdobeXD（アドビ エックスディ）です！
Webや開発に関するお仕事をしている方以外は初めて聞くツールかもしれませんが、今となってはWeb制作には欠かせない便利ツール。私達制作者だけでなく、Web制作のご依頼をくださるお客様側にも嬉しい要素がたくさんあるAdobeXD。今回はその魅力をご紹介していきたいと思います！
【目次】
1.AdobeXDとは？
2.AdobeXDのココが便利
・ページ遷移を設定できる！
・実機で確認できる！
・お打合せ中でも簡単に調整ができる！
・コメントができる！
3.まとめ
1.AdobeXDとは？
Photoshopは写真の加工、Illustratorはロゴ等の画像データ作成を得意とするのに対し、
AdobeXDは「プロトタイピング」に特化したデザインツールです。近頃ティファナでは、画面設計の作成～デザインの作成までをAdobeXDで行っています。
プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。 その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。
引用元：プロトタイピング – Wikipedia
今まではPowerPointや Excelで画面設計を進めることが多く、いざデザインやhtmlが出来上がってみると「思っていたのと少し違ったからもっとこうしたい」というアイデアが出てくることが度々ありました。ですが、XDを使用した場合は、画面設計の時点で実際のサイトに近い形（プロトタイプ）でお見せすることができるので、Webサイトの画面設計・デザインの制作がかなりスムーズになりました。
2．Adobeのココがすごい！
それでは、前置きはこの程度にしてAdobeXDの嬉しい機能をご紹介していきたいと思います！
制作者サイドに嬉しい機能も山程ありますが、今回はお客様にちょっとうれしい機能をピックアップしました。
１）画面遷移を設定できる！
XDでは画面の遷移を設定できます。
大型のサイトや、込み入ったシステムが組まれた案件だと特に「このボタンを押したらどのページに遷移するんだっけ。」「この条件の時にボタンを押したらどの画面が表示されるんだっけ。」等を思い出す事に時間がかかり、サイトをより良くする為のご要望を出すのが難しいことも度々あります。
ですが、画面設計・デザインの段階から画面遷移の流れを確認できるので、イメージも付きやすいですし、社内の方への共有も非常に簡単なんです。
2）実機（PC/スマートフォン）で確認できる！
XDで作成したデータは画像書き出しだけではなく、確認用URLを発行することもできます。
PCはもちろん、スマートフォンからでも実物サイズの画面設計・デザインが確認できます。
実機だからこそ、下記のような実物を見なければ気づかないような観点で画面設計やデザインを見ることができますね。
- 原稿が長すぎて画面が文字だらけになっていないか
- 見せたい要素（お申込みボタンや、訴求したい情報等）がちゃんと目立っているか
- 追従要素（ヘッダーやページトップへ戻るボタン、追従表示させるバナー）がコンテンツの邪魔になっていない
- ナビゲーションやボタンは操作しやすいか
AdobeXDを使い始める前は、印刷した資料をお渡ししていましたが、総計100ページ超の資料をめくりながらお打合せするより、実際の端末でスクロールしながら確認する方がお手軽ですね。打合せ後に資料をシュレッダーにかける手間もいりません。
3）お打合せ中でも簡単に調整ができる！
Photoshopと比べると圧倒的にツールが軽いので、ちょっとしたバランス調整やデザイン変更なら打ち合わせ中に簡単に修正できます。
「ここ、もう少し位置をずらせないかな？」
「もう少しボタンの色を明るくしたいんだよね」
等の細かな位置・サイズ・色の調整がその場でできると、スムーズにイメージ通りの構成案・デザインが出来上がるので大助かりです。
更に！前述の通り、確認用URLを発行できるので、一瞬で最新データが全員の手元に届きます。
「…では、今頂いたご意見の通り調整したデータを明日送付するので、イメージに相違ないかご確認下さい」なんてやり取りをするよりずっと効率的で、間違いが無いですね。
4）コメント機能が便利！
AdobeXDはコメント機能も充実しています。修正要望や、仕様に関する備忘録を簡単に残せます。
「TOPページの選ばれる理由の箇所のボタンの色が少しイメージと違うんですが、もっとこんな風に変えてくれませんか？」
のように、丁寧に文章を書いていたら意外と時間がかかってしまった…なんて経験はありませんか？
コメントがどこを指しているかをマークする「ピン」を立てることもできるので…
このようにして頂けると、説明の手間いらずで一瞬です。
認識の差異もできませんし、誰でも見られる場所に記録が残るのでとても便利ですね。
3.まとめ
いかがだったでしょうか？
お客様と二人三脚でWeb制作を進める私達にとって、重要なのは「いかに正確にイメージを共有し、理想通りのサイトを作るお力添えができるか」です。
AdobeXDは2017年10月にリリースされたばかりのツールですが、今でも毎月新機能がリリースされています。
どんどん便利になるWeb制作の強い味方、AdobeXDから今後も目が離せません！
