この記事はAdobe XD Advent Calendar 2016の12日目の記事です。

Adobe XDでlittleBitsの図表を作ったメモです。

経緯

最近littleBitsのハンズオンやIoTネタの登壇をするためにスライドの図表を作るのですが、

といった理由でGoogleスライドを利用していました。

これでも、ある程度は使いやすいのですが、なんというか、フォントなど細かくできなかったり及第点だが微妙なニュアンスがちょっとむずかしいなーと思っていたところでした。

さらに言うと、一昔前ならば、Fireworkに全部寄せてしまって使いまわすことも、やぶさかではなタイプの図表でして、そこで白羽の矢が立ったのがAdobe XDでした。

ということで、説明はそこそこに図表を描いてみます。

描いてみた

実際に経緯をつぶさに書こうと思ったのですが、思いの外あっさりできてしまって拍子抜けです。所要20分くらいでしょうか。

ペンツール・移動ツール・四角ツールという最低限の機能が適切に揃っている印象ですぐに同様のものを描くことができました。

比較をしてみます。

なんといっても、Adobe製品なので、フォントや線が繊細に出ますね。1pxできっちり出て欲しい！といった気持ちにすぐ答えてくれます。Google スライドは、しいていえばPowerPointに近い使用感なので、級数の小さいフォントなど突っ込みづらいところがあります。

Adobe XDはすばやい作業をフォローしてくれる配慮がいろいろありました。

おなじみのスポイトツール。あえてPhotoShopのようにスポイトツールをツールパレットに置かずカラー調整の方においているのがシンプルな使い勝手を目指していて好感持てます。

また常時虫眼鏡的なズームが働くのもGOOD！

つづいて、随所に出てくる、吸着とガイドも、個人的にはEdge Animateを彷彿とさせる、さまざまなフォローが行き届いて「あー中央に寄せたいなー」「こことここは揃ってるだろうか？」といったところに、スルッとサポートが出ます。

このあたりは、Googleスライドでもやってくれるんですが、あくまで補助でして、最終的には1px移動で目視が勝つという悲しさがあり、Adobe XDはさすがのAdobe製品の蓄積で、わたしの先を容易く越えていってくれます。

ボタンモジュールの土台は角丸を表現されていましたが、これもまた「やりたいことは近くにおいてある」作り。

22と書いてあるあたりを何気なく角丸かなっていじってみるとあっさり作れました。

本来30分程度の作業を見込んでいたのですが、余ってしまったので、スライドぽいものも作ってしまいます。

プロトタイプ全体をクリックしてコピーします。

どかどかと4つコピーします。

今回はlittleBitsのつなぎ方想定で、ひとつずつつながっていく様を制作します。

遷移をつなぎます。

これで出来上がります。リンクを書き出します。

というわけで、出来上がったリンクがこちらです。

試しにWEB素材と使えたら良いなということで書き出してみました。

フォーマットにSVGを選べます。

SVGをSafariブラウザで表示してもバッチリ。

WIndows Chromeだとちょっとフォントが怪しいですが、このあたりはもうじきWindows版も出るという噂なの改善されるのを願っています！

ということで、Adobe XDでlittleBitsの図表を作った結果としては、申し分なく、素材づくりの枠を超えて、スライドも作っちゃえそうかも！というところで、Adobe XDのポテンシャルを楽しく知ることができました！

それでは、よき Adobe XD & littleBits Life を！