MENU

プロトタイピングツールはAdobe Xdを使っていきます

2020 6/11
プロトタイピングツールはAdobe Xdを使っていきます

AdobeのプロトタイピングソフトXd。

ワイヤフレーム作るのに便利かなと思ってました。

PhotoshopでもIllustratorでもできるやんと思って、あんまり触っていませんでしたが、

ただ、うちのスーパーエンジニアが、

「アプリの画面を試しにXdで全部作ってくれ!エンジニアはこの画面をもとにコーディングしていくんや!」

といっていたためXdを触ってます。

目次

Adobe Xdでできること

これが結構たくさんあって。

PhotoshopとかIllustratorで十分かと思ってましたが、全然こちらのほうが優れているものがあります。

個人的に思ったのがWeb共有と画面遷移。

Web共有

デザイナーはPhotoshopとかIllustratorとか持ってて当たり前なんですが、エンジニアさんはアドビ系のものを結構持っていないことが多いので、PDFにしたり、画像はアセットごとに書き出したりと結構な手間なんですね。

ただ、Xdの場合は開発用の共有メニューがあったりします。

この共有はWeb上でURLが発行されたりするので、URLを見れば誰でも閲覧することができるんですね。

なので、URLだけ共有すればエンジニアさんでもその画面を見たり、画像をダウンロードすることが可能です。

画面のイメージを伝えるのにめちゃ便利です。

画面遷移

あとはたくさんページができてきたときなどは画面遷移が非常にややこしくなってきたりします。

Webの場合、内部リンクであったり、アプリの場合ほかのStoryboardへのリンクだったり。

実際にWeb上やスマホのXdのアプリ上でモックのように振る舞って遷移してくれるというのはプレゼンテーションでもかなり役に立つと感じました。

Adobe Xdをどんどん使っていく

個人的にデザイン的なことはIllustratorをメインに使ってまして、それに加えて画像加工にはPhotoshopを使っていました。

なので、Xdは今まで食わず嫌いであまり触らなかったのですが実際にこうやって使ってみると非常に良い面が見えてきます。

Creative Cloudを契約してたのに結構もったいないことしてたなと。

エンジニアさんはレスポンシブ対応のことを詳細に書いてくれと言っていましたが、そういう部分も対応できそうです。

また、スクロールさせたり、ポップアップを表示させたり、画面上で多少の動きを再現することもできそうですし。

これがあればエンジニアさんやデザイナーさん、ディレクターさんも含めてもっともっと仕事がしやすくなるとも思いますし。

今後、プロトタイピングツールとしてXdを積極的に使っていきたいと思います。

この記事を書いた人

古田 健のアバター 古田 健 代表取締役

ウェブサイトつくったり、アプリ作ったりしています。
動画撮影・編集・グラフィックデザインとかもトータルでやってます。

最近Flutterによるアプリ開発をはじめました。
フロントエンド開発のレベルの底上げやってます。

目次
閉じる