東京本社 TEL : 03-5728-5580

支社連絡先一覧

mypage

フェローズe-ラーニングログイン

まずはAdobe XDがどんなものなのか、どんな場合に便利なのかをお話しさせていただきます。

■Adobe XDとは?

Adobe XDは正式名称「Adobe Experience Design」と言います。
2016年3月にベータ版として公開、2017年10月に正式版がリリースされたWebサイトやモバイルアプリのUI/UXデザインツールです。
(UI/UXデザインは簡単に言うと、見た目や操作性などユーザーからの使いやすさを重視したデザインのこと。)

19_04_01_01

Adobe XDを一言で説明すると、ワイヤーフレームからデザインカンプまで一通り作成できる上に、プロトタイプまで簡単に実装できる優れもの。
プロトタイプ(prototype)とは、「試作モデル」の意味です。

操作性、バランス、機能などを確認し、ユーザーからの評価を正式リリース前に反映させる開発手法を「プロトタイピング」と言います。
開発途中で確認、修正ができるため、結果、工程数が減り、問題点を早期に発見できるメリットがあります。
これをできるのがXDの1番の利点ではないかと思います。
そしてAdobe XD自体の操作がとても直感的でわかりやすく、動作も軽い!
Webデザイナーあるある、Photoshopがフリーズ!固まってまた1からデータを作り直す…といたこともあまりなさそう。
この点でもかなり使い勝手は良いと思います。

■これまでのやり方だとどうなるの?

これまでは、Webディレクターがパワポやエクセル、手書きなどでワイヤーフレームを作成。

19_04_01_02

それをもとに今度はWebデザイナーがPhotoshopやIllustratorを使用しデザインカンプを作成。

19_04_01_03

さらにそれをもとにコーダーがコーディングするという流れでした。

19_04_01_04

ここまで制作してやっとサイトが実際にどう動くのがわかります。
ここで問題点や修正点が出てくると、もう完成に近い状態まで行ってしまっているので、とてもやっかいだったんですよね。
しかし!
Adobe XDを使えば、実際の動きに近いものをクライアントに確認してもらいながら、どうするか判断してもらえるのです。

■結局Adobe XDを使うとどういう利点があるの?

・操作が簡単で軽い。
・言葉では伝えづらかった動作の仕様もAdobe XDで具現化できる。
・制作過程でクライアントに動作確認をしてもらえるので、あとで修正する手間が減る。
・ワークフローがスムーズになり、時間をとられがちなアイデアを形にするまでが早くなった。
・ディレクターの出来ることが増え、クライアントやデザイナーへ想いを伝えやすくなった。
・結果的にクオリティが高くなり、クライアントの満足度にも繋がる。

こういったメリットがあるように思います。
ワイヤーフレームを作るWebディレクターの段階からAdobe XDを使っていくと、さらに!効率化できるのではないか!!と個人的には思いました。
次回からAdobe XDを実際に使いながら、説明していきたいと思います。