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

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

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

経緯

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

  • 一度作ったlittleBitsモジュールは使いまわしたい
  • あるていど端折ってキレイに作りたい
  • WEBに反映しても崩れにくいもの(例:SVG)にしたい
  • スライドに出しやすい素材感

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

  • Googleスライド

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

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

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

描いてみた

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

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

比較をしてみます。

  • Googleスライド

  • Adobe XD

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

すばやい作業をフォローしてくれる配慮たち

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

スポイトツール

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

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

吸着とガイド

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

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

角丸

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

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

スライドぽいものも作ってしまおう

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

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

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

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

遷移をつなぎます。

このプロトタイプを公開

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

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

→ littleBits2

SVGの書き出し

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

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

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

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

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

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