21
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SC(非公式)Advent Calendar 2017

Day 14

Adobe XDを使ってみた話

Last updated at Posted at 2017-12-14

はじめましてこんにちは。
SC AdventCalendar 2017 14日目の投稿です!!

アドベントカレンダーとは何ぞやという感じだったのに参加してしまいました。
初めて投稿するので見づらいところがあるかもしれませんがご了承ください。

#自己紹介
名前:入社2年目SE見習いプログラマです。
職歴:NM(マニュアル改修) ⇒ ZB(Java) ⇒ TC(帳票) ⇒ IA(C#) ⇒ U*N(Java)←イマココ
   Javaやる機会が多いです。
悩み:最近一人飲みに行き過ぎて3キロ太りました(´・ω・`) 最近ハマってるのはガード下のやきとん屋さん。
趣味:イラスト  ↓最近の習作(宝石の国ハマってます)
phos.jpg

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

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

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

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

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

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

###プロトタイピングモード
デザインモードで作成した画面の遷移や動きを設定し、プロトタイプを作成することが出来ます。
image.png
どこをクリックしたらどの画面に遷移するのか、このワイヤみたいなもので設定します。
遷移のアニメーションもつけることが出来ます。

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

#触ってみて思ったこと
SCではあまりデザインとかしないと思うのでエンジニアにとってどうか、という部分に絞ります。
###いいなと思った点
####①軽い
Adobe製品ってすごく起動遅かったりしてイラつくこと多いんですが、すごく起動早いです。
沢山アートボードを設置したりレイヤを重ねたりしてもフリーズしたりせず、
サクサク動いてくれます。
####②学習コストが低い
そう機能も多くないですし、ツールもExcelやペイント等にあるような直感的なものなので
チュートリアルを少しやれば、デザインセンスに自信が無くても誰でも爆速で
リッチでいい感じのモック作れると思います。
UIキットもあるので、わざわざ作らなくていい部品も多いですよ。↓これはiOSのUIキットです。
image.png

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

###残念な点
####①HTML書き出しが出来ない
私の最大の勘違いでSekiPaの皆さんにはご迷惑おかけしたのですがHTML・CSS書き出し出来ません。
UIデザインツールの中には出来るものも多いので、書き出し出来るようになればより作業効率化に
つながりそうです。
####②足りない機能もまだ多い
まだベータ版リリースから時間もそう経っていないためwindows版の機能はmac版に比べて少なめです。
横スクロールが出来ないとか、複数ファイルをタブで開けないとか...地味に困ります。
公式サイトで欲しい機能等をリクエストすることもできますので、今後のアップデートに期待です。
####③買い切りできない
AdobeXDはAdobe Creative Cloudサービスに含まれているのでサブスクリプション契約しかできず
継続的に費用がかかってしまいます。単体プランなら月1,180円です。

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

21
10
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?