自己紹介

名前：入社2年目SE見習いプログラマです。
職歴：N*M(マニュアル改修) ⇒ Z*B(Java) ⇒ T*C(帳票) ⇒ I*A(C#) ⇒ U*N(Java)←ｲﾏｺｺ
　　　Javaやる機会が多いです。
悩み：最近一人飲みに行き過ぎて3キロ太りました(´･ω･｀)　最近ハマってるのはガード下のやきとん屋さん。
趣味：イラスト　 ↓最近の習作（宝石の国ハマってます）

最近趣味が高じて(?)社内アプリのデザインとフロント開発をやらせて頂く機会がありました。
その名もSekiPa。奇妙な椅子のあいつを描いたのは私です。

モックアップを作成する際に最近windowsに対応したAdobeXDを使いました。
あまり業務で使う方はいらっしゃらないと思うので使ってみた所感を共有しようと思い、投稿に至りました。

AdobeXDとは

AdobeXDの正式名称はAdobe Experience Designでその名の通りUXのデザインツールです。
初めはMac限定で日本語版が配信されていたのですが
昨年12月よりwindows10版が配信され、続々とアップデートされています。

主な機能

AdobeXDには主に2つのモードがあります。デザインモードとプロトタイピングモードです。

デザインモード

まあそのまんまなんですが画面のデザインが出来ます。

アートボードを作成してその上に画面のデザインを作成していきます。
アートボードのサイズはプリセットから選ぶことが出来、スマホ・タブレット・web用に
いろんなサイズが用意されています。もちろんカスタムも可能です。

これはチュートリアルなんですが長くするとスクロールできます。
こんな感じで複数画面を配置して、デザインしていきます。

プロトタイピングモード

デザインモードで作成した画面の遷移や動きを設定し、プロトタイプを作成することが出来ます。

どこをクリックしたらどの画面に遷移するのか、このワイヤみたいなもので設定します。
遷移のアニメーションもつけることが出来ます。

以上が主な2つの機能です。

触ってみて思ったこと

SCではあまりデザインとかしないと思うのでエンジニアにとってどうか、という部分に絞ります。

いいなと思った点

①軽い

Adobe製品ってすごく起動遅かったりしてイラつくこと多いんですが、すごく起動早いです。
沢山アートボードを設置したりレイヤを重ねたりしてもフリーズしたりせず、
サクサク動いてくれます。

②学習コストが低い

そう機能も多くないですし、ツールもExcelやペイント等にあるような直感的なものなので
チュートリアルを少しやれば、デザインセンスに自信が無くても誰でも爆速で
リッチでいい感じのモック作れると思います。
UIキットもあるので、わざわざ作らなくていい部品も多いですよ。↓これはiOSのUIキットです。

③共有が簡単

ちゃちゃっとリンクを作成しオンラインでプロトタイプを共有することができます。
離れた場所にいても見た目と動きのイメージ共有しやすいですし、
共有⇒指摘⇒修正⇒共有⇒合意の時間が短縮できると思います。
ちなみに⇒SekiPaで作ったモック

残念な点

①HTML書き出しが出来ない

私の最大の勘違いでSekiPaの皆さんにはご迷惑おかけしたのですがHTML・CSS書き出し出来ません。
UIデザインツールの中には出来るものも多いので、書き出し出来るようになればより作業効率化に
つながりそうです。

②足りない機能もまだ多い

まだベータ版リリースから時間もそう経っていないためwindows版の機能はmac版に比べて少なめです。
横スクロールが出来ないとか、複数ファイルをタブで開けないとか...地味に困ります。
公式サイトで欲しい機能等をリクエストすることもできますので、今後のアップデートに期待です。

③買い切りできない

AdobeXDはAdobe Creative Cloudサービスに含まれているのでサブスクリプション契約しかできず
継続的に費用がかかってしまいます。単体プランなら月1,180円です。

最後に

折角最新のツールを使わせて頂いたので少しでもAdobeXDがどういうものか共有できていたら幸いです。
先ほども書きましたが、SCではあまりUI/UXのデザインをする機会はないかもしれませんが
いざというときの選択肢の一つになればよいなあと思います。
AdobeID(登録無料)があれば7日間体験版を使用することが出来ますので、
興味を持った方はぜひ、チュートリアル等体験してみてはいかがでしょうか！

Adobe XDを使ってみた話