Web業界に入社して、職業訓練校でも学んでいたAdobeXDについて、実際に実務でふれるようになり、使い心地などをまとめてみようと思いました。
まだまだ見習いですが、Web系職種を志す方の参考になりましたら幸いです。
UIの改善を求められたけど、デザインの引き出しが全然無い😭
見るだけでなく、自分で作って動かすってのを再開しないとな…
と思いつつ動けてないので、ロードマップを考えなければならない。
— ふらんぶ🌿@UXデザイナもどき (@dayantler) May 27, 2021
・デザイナーの役割をもっと知りたい
・Web系職種ってどんな業務をしているんだろう
・XDは実務でどのくらい使うんだろう
そういった方向けに書いています。
ちなみに、筆者はこんな仕事してます。
AdobeXDとは
Webデザイナーを志す人ならば一度は聞いたことがあるツールだと思います。
簡単にいうと、効率的にワイヤーフレームやデザインが制作できるツールです。
むしろ、なんでもできちゃいます。
一番の利点は「共同作業」ができることです。
共同作業ができるツールといえば、Microsoft SharePointですが、そのデザインツール版といったものです。
どんなときに使うの？
実務でもっとも多く使うシーンは、ワイヤーフレームの作成です。
ワイヤーフレームは「ここにこんなものをおいてこんなかんじのレイアウト」とイメージを図示することです。
簡単にいえば、設計図です。
デザインラフと呼ぶ職場もあるそうです。
一方で、デザインカンプという言葉がありますが、こちらは完成見本のことを示します。
ワイヤーフレーム(デザインラフ)➡デザインカンプと進めていくわけですが、その制作にAdobeXDは便利です。
ほかのツールでもいいのでは？
IT業界ともなってくると、Excelでワイヤーフレーム(デザインラフ)を作る人もいます。
Microsoft SharePointがあれば簡単に共同作業や共有ができますし。
普段、パワーポイントを使っている人にとってはExcelのほうが使いやすいと思います。
筆者は両方使っていますが、どちらも一長一短といえます。
ディレクションメインの人はExcelのほうがやりやすいと思いますし、デザインメインの人はAdobeXDのほうがやりやすいと思います。
AdobeXDの優れているところ
AdobeXDはExcelと違い、優れているところがあります。
それは、下記機能です。
リピートグリッド
要素(図形など)を繰り返し配置できる機能です。
Excelだとコピペ連続ですが、AdobeXDなら簡単に配置&調整ができます。
実際やってみたときは感動しました笑
コンポーネント
同じようなページを作るときに非常に重宝します。
カスタマイズ可能なので、Excelのコピペ地獄と比較しても楽です。
プロトタイプ
実際に動きを作れるこの点が一番の利点です。
このページがここに遷移してと言葉や文字でなく、伝えられることは相手の理解を早められます。
Excelに注釈をごちゃごちゃ書くとそれだけで見にくいものになってしまいます。
自分で押してみてページを回遊して操作感を知れるプロトタイプ機能は便利この上ないです。
AdobeXDを使わないシーン
ただメリットばかりではありません。
下記のようなシーンではExcelのほうがいいかもしれません。
・デザイン部門だけでなく、他の部門にも共有する場合
・しっかりと作りこまれたワイヤーフレームを作る必要が無い場合（ページ階層が浅い）
正直、相手もAdobeXDを使える前提でないと共同作業はできません。
また、ページ階層の浅いサイトを作る場合はAdobeXDでなくてもExcelで事足ります。
意外と無料プランで事足りる？
AdobeXDはスタータープランという無料で使えるプランがあり、ローカル保存しないや共有数(担当案件数)が少ないといった環境ならば有料版は不要です。
だいたい1案件依頼して終わったら、非アクティブになるからです。
フォント数が少ないという点もありますが、ディレクションメインの人の場合は不要です。
デザイナーさんで複数案件を抱えている人は有料版必須です。
AdobeXDを勉強するのにおすすめの本
とても便利なツールです。使いこなせるようになるために学習が必要です。
正直、筆者自身もプラグイン周りはついていけていません笑
書籍はあまり多く販売されていないですが、読みやすくて、業務でも使える本は下記でした。
さいごに
職業訓練校ではWebデザインを勉強しており、そのときの知識が今でも活きています。
筆者は、職業訓練校卒で、「職業訓練校体験記」を書いています。
より詳細に、職業訓練校の雰囲気がつかめるのではないかと思います！
職業訓練校ってどんなところなんだろうと思っている方、ぜひご一読ください！
職業訓練校体験記（Monthly版）のスタートはこちら
職業訓練校体験記（Weekly版）はこちら
筆者の就職活動の体験記はこちら
・コンポーネント
・プロトタイプ