CSS Nite LP57「All About XD」再演版フォローアップ(2)濱野 将さん

2018年6月30日(土)大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、濱野 将さん(IMAKE)の『>今日から使えるようになる!Adobe XDの基本的な利用方法』セッションのスライドなどを公開します。

フォローアップメッセージは、イベント開催直後(2018年6月)の時点のものです。

フォローアップ

皆様、先日はご足労いただきありがとうございました。
「今日から使えるようになる!Adobe XDの基本的な利用方法。」でXDの使い方を開設させていただきました濱野です。

貴重な休日にもかかわらず、お話を聞いてくださり大変感謝しております。
参加いただいた皆様からのアンケートをすべて拝見させていただきました。
「勉強になった」「役に立った」「使ったことがあるけど知らなかった機能もあってためになった」などのお声も頂戴し、熱心かつ真剣に聞いていただけていたことが感じられ、登壇者として冥利に尽きる思いです。

実演で行ったXDのサンプルファイルと、素材として使用した画像とテキストは「sample.zip」に格納いたしましたので一度ご覧ください。

また、多くのご質問もいただいておりましたので、下記に記載させていただきました。

質問

クラウドで共有できないときどうするのか?

PhotoshopやIllustratorで作成した画像やパーツなどを、クラウド間で共有できない場合は、作成したそれぞれのツールでpngなどに書き出して、素材フォルダなどに格納してそれをドラッグ&ドロップで配置しています。

プロトタイプはXDを持っていない人でも共有可能ですか?

ワークスペース画面右上の共有ボタンから「プロトタイプを公開」や「デザインスペックを公開」で共有可能です。なお、Adobeのアカウントを持っていない方でも、ゲストとして閲覧することができます。

Photoshopとの便利な連携法

Photoshopと同じくらい複雑なデザインができるのか気になりました。また、Photoshopで作って、XDに互換性があるのかが気になりました。

Photoshopと同じ複雑なデザインができるかというと、XDは操作性の軽さや起動時の速さを重視しておりますので、多角的にいろいろできる機能は備わっておりません。

ですので、得意な分野は得意なツールに任せて補完し、CCライブラリで共有したり、Photoshop連携をするとより効率的に作業が進みます。

以前、CC道場という番組に出演させていただいた際にPhotoshop連携について解説させていただいた動画がございますのでこちらをご覧ください。

XDからコーディングの時同じ動作になるようなcss/jsの設定が簡単になる方法はありませんか?

XDからのCSSやHTMLの書き出し機能はまだ備わっておりません。
現在の対応策としては、Macのみの機能ですが、サードパーティ製のZeplin・Avocode・Sympli・ProtoPie・Kite Compositorなど、デザイン処理ツールと連携してデータ転送をすることで制作したものを活かすようにすることも可能です。

使用される機会がございましたら、是非お試しください。

UIキット、コピペ以外の使い方ってあります?

本来であれば、他ツールとからパーツを持ってくるときと同じように、CCライブラリでパーツ共有ができるの理想なのですが、XDからCCライブラリへ登録できる機能がXDでは備わっていません。

ただコピー&ペーストに問題あり、コピーしたものがシンボル化されていると、複数回に分けてコピー&ペーストをすると同じシンボルも複製され、アセット内に同じシンボルがいくつもできてしまうという問題があります。

現在はUserVoiceでも指摘があるので、バージョンアップで今後使いやすくなるようになるといいですね。

カーニングでいつも困るのですがよい方法は?

たしかにそうですね。カーニングができる機能は備わっておりませんので、Illustratorで持ってきたsvgやpngファイルをCCライブラリやドラッグ&ドロップで持ってくる方法しかありませんね。

余談ですが、縦書きにする機能もないので、その場合は上記の方法で補完して行うこともありました。

「ここが使いずらいのよ~」というのがあれば知りたい

質疑応答であったリピートグリッドのマージンを数値入力できない点もそうですが、使用したいフォントが一覧でサンプル表示できないのが使いづらさを感じますね。

XDのプロトタイプ共有が安全性(情報漏洩)の問題でまだ社内で許可されていません。業務でどのようにクリアしていますか?

幸い弊社クライアント様との取引ではまだそのような事例が発生していないのですが、もしそのようになった場合には共有にある「プロトタイプを公開」の「パスワードを設定」でベーシック認証を設けるか、ベータ版ですが「プロトタイプを公開」内の下部にある「非公開プロトタイプ」を一度進めてみるのはいかがでしょうか?

最新バージョンで追加された機能になりますので、詳しくはこちらを参照ください。

他ユーザー(個人アカウント)との共有は可能か?

個人アカウント間でのやり取りは、こちらも上記の「非公開プロトタイプ」内にある「招待」からメールアドレスで招待することで共有可能になります。よりセキュアな形で共有ができるかと思います。

プレビュー時の文字テキストのデバイス化と、リンク(外部)の埋め込みはできないのでしょうか?

プレビュー時は表示されているパーツがすべて画像になってしまうので、リンクの埋め込みはできません。

テキストに関しては、文面をクリップボードにコピーすることは可能です。共有内にある「デザインスペックを公開」から該当の文面があるアートボードに進み、その文面をクリックすると右側にスペック一覧が表示されるので、そこにあるテキストをクリックするだけで一括でコピーすることが可能です。

ご質問は以上となります。ありがとうございました!

誰でもかんたんに学べるAdobe XD入門講座

配布させていただいておりましたUdemy講座の「誰でもかんたんに学べるAdobe XD入門講座」はこちらのリンクよりアクセスいただけると、チラシと同じく特別割引(1,200円)で受講できますので、もっと詳しく自分のペースで学びたい方はこちらもご覧ください。

他にも何かわからないことなどがありましたら、遠慮なくメッセージなどでご連絡いただけたらと思っております。

濱野 将のFacebook

https://www.facebook.com/2yanko

また皆様とお会いできることを楽しみにしております!
CSS Nite LP57「All About XD」にご参加いただき、誠にありがとうございました!

毎年年末に開催している「Shift」シリーズの第12弾として、2018年のWeb制作シーンを振り返ります。