久しぶりにAdobe XDを使ってみたら痒いところに手が届かなかった話
前提
普段はSketch + Prott or invisionを使用。
ちょこっと作るときにXDだけで完結するかなーと思って使ってみたら、あれ？これできないんだっけ？というところがちらほら…。
この機能なかったんかいと思ったもの
- スワイプの設定できなかった（タップのみ）
- リンクバック（前の画面に戻る）設定がなかった（モーダル閉じた時とかの遷移どうしよう）
- オーバーレイできなかった（モーダルの表現が難しい）
- リンクのスクロール位置を固定できない（上からになってしまう）
- 描画モードなどなかった
- Photoshopとの互換性（ビットマップになってしまう）
Photoshopとの互換性がないのが意外でした。
こうなってくるとわざわざXD使うほどでも…？と思ってしまいました。
やはりグラフィックの作り込みなどはまだまだPhotoshopがメインなので、データがリンク配置できたら最強。
Adobe XDの好きな点
- なんといってもリピートグリッドが便利
- デザインとプロトタイプが1つのソフトで済むのはイイね
- カラー選択でカラーコード1文字いれるだけでいいので楽（例：9→#999999 / f0→#f0f0f0）
- Sketchからsvgで書き出すとレイヤー階層なども維持したままペーストできる（なんか使えそう！）
XDにはシンボルのオーバーライドができるようになったり、最近ではデザインスペック（invisionのインスペクトモードみたいな）が追加されたり少しづつ機能が追加され、より使いやすいようにと改良されてきています。
ベータ版の時から比べると大分いろいろなことができるようになりました。
今後も様々なアップデートが予定されていますので、この機能なかったんかいが減ってさらに使いやすくなることを楽しみにしています！
ブラウザで動くUIデザインツールfigmaを使ってみた【インストール不要】
つい先日Adobe xdの日本語版がリリースされましたね。
SketchやAdobe xdといったUIデザイン作成ツールは色々とありますが、今回はweb上で動いて、かつコメント機能もついたfigmaを使ってみました。
こちらのfigmaはブラウザ上でデザインの作成ができます。
さらになんとGoogleスプレッドシートのように共同で編集作業が行えるようです！（残念ながら今回は試せませんでした。ロンリー...）
使うにはまずこちらのサイトでサインインをして、メールアドレスを登録。
するとウェイティングリストに追加されたよーというメールが届きまして、正式にサービスログインできるようになるまで１週間ほどかかりました。(5月くらいの話です)
操作感としてはSketchに近いです。
上部にあるタブで、編集モードかコメントモードかの切り替えができます。XDと似てますね。タブで機能切り替えが流行り？
もちろん画像の書き出しもできます。
jpg、png、svgに対応しています。ありがたいことに@2x@3xなどretina用の一括書き出しにも対応しています。
また、クリッピングマスクやシェイプ結合、ドロップシャドウやブラーの効果などUI作成にあたって必要そうな機能は一通りそろっています。
さらにデザイン作成ツールだけでなく、コメント機能もついています。
この辺りはprottに近いかんじ。slackとの連携もできます。
いいところ
自動保存（ずぼらの味方）
共有が簡単。urlを送ればログインしなくても画面が確認できます。書き出し不要！
ショートカットも結構使える！なんとなくレイヤー上下したり、長方形ツールを出したりが、PhotoshopやSketchといった有名アプリと一緒です。
レイヤー効果もたくさん！乗算やオーバーレイ、スクリーンetc..かなりの数がそろっていました。
気になったとこ
やはりweb上のアプリケーションなのでちょっともたついたるするところが気になりました。マシンスペックや使うブラウザによって変わるとは思うのですが...。
あとはデザインを共同編集するというのが、自分にはあまりピンときませんでした。自分が作業してる画面で勝手にアートボードが増えたり、テキスト増えたりしたら気が散るのではないかと。
まとめ
とにかくこんな素敵なサービスが無料で、しかもweb上で動くなんてすごい！
figmaは大規模な資金調達もし、Adobeの対抗馬になるのではといわれていますが、今後も楽しみです。
おまけ
404ページがかわいかった。
【知らなかった！】人気のモリサワ書体がAdobe Creative CloudのTypekitで利用できる！
し、知らなかったー！
モリサワ＆タイプバンクフォントがTypekitで提供開始したようです。
利用できる書体は全20書体。
■提供書体 （*はタイプバンク書体）
リュウミン L-KL
太ミンA101
見出ミンMA31
中ゴシックBBB
太ゴB101
見出ゴMB31
じゅん101
TB シネマ丸ゴシック *
TB ちび丸ゴシックPlusK R *
篠-M *
日活正楷書体 *
ぶらっしゅ *
サン-M *
TB カリグラゴシック E *
漢字タイポス415 R *
UD 新ゴ L
UD 黎ミン L
UD 新丸ゴ L
TB 新聞明朝 L *
TB 新聞ゴシック M *
ウェイトの種類は限られているが、いや、十分です！
人気のUD新ゴとか、タイポス（ちょっとフォークに似てる）も入っていて太っ腹。
Creative Cloudのサブスクリプションを購入するとTypekitが使えるんですけど、プランによって無料版と完全版にわかれているみたいです。（無料プランだと使えるフォントが限定されている）
今回のモリサワフォントを使うにあたっては、Typekitは完全版（adobeのサイトでは完全なライブラリと呼ばれている）が必要。
ここのページをみると、利用可能なプランは以下のように書いてあります。
以下のプランには、Web での使用および同期用の完全なライブラリが含まれています。
- 月間または年間の Creative Cloud All Apps プランの有料サブスクリプション
- Creative Cloud チームサブスクリプションの各シート
- ポートフォリオ、パフォーマンスまたはビジネスの各 Typekit 単体プラン
- 単体アプリケーションの Creative Cloud プラン（Adobe Acrobat を除く）
ふむふむ、コンプリートプランや、単体プランを使用してれば大丈夫っぽい。
早速Photoshopにいれてみよう！
・・・おや？
なんと！フォトグラフィプラン（Photoshopが月額980円で使える）では、Typekitが無料プランになんですって！！
なので当然今回のモリサワフォントを入れることはできません。
（入れたければ単体プラン購入orコンプリートプランにするor Typekitをポートフォリオプランにアップグレードする必要あり）
しかしがっかりしないでください。
無料プランでも、たくさんのAdobe厳選フォントが利用できますよ。
たくさんのフォントの図
１度に同期できるフォントの数が20個などの制限がありますが、それでも十分使えます。
フォトグラフィープランなんざじゃなくて、コンプリートしてるぜっていう人はレッツ モリサワ！
