CSS Nite LP57「All About XD」フォローアップ（2）濱野 将さん

2018年9月11日（火）

2018年4月28日（土）浅草橋ヒューリックホールで開催したCSS Nite LP57「All About XD」のフォローアップとして、濱野 将（IMAKE）の『今日から使えるようになる！Adobe XDの基本的な利用方法』セッションのスライドなどを公開します。

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

フォローアップ

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

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

  • 「作業前の状態で保存」の有効活用法が知りたいです。。。

    • こちらのお話させていただいた際に説明不足だったのですが、XD上での正式な機能名は「保存時の状態に戻す」というもので、PhotoshopやIllustratorで使われている「復帰」と同じ機能となっております。一度保存した後に作業をした際、保存前の時点に作業を戻したい時などに有効です。

  • 可能であれば、今回使われていたプロトタイプを共有していただきたいです。

  • 三角形の作り方、日本語たてがきの仕方、ページ内リンクのプロトタイプの仕方を知りたい。

    • 三角形の作り方：パスツールと方眼グリッドを使用して作ることができます。下記に簡単ではありますがデモをご用意しましたのでご覧ください。 三角形の作り方デモ動画 日本語たてがき：こちらはまだ対応しておりません。。画像扱いにはなってしまいますが、Illustratorで作成したテキストをXDにコピーするという方法もございます。ページ内リンクのプロトタイプの仕方：こちらも現状機能としてはございませんが、今後のバージョンアップで実装される可能性がありますので、暫くお待ちいただけたらと思います。

  • フォントも全部英字表記でわかりずらい、サンプル表示欲しい…自動保存機能ないか…

    • そうなんです。。まだこちらは実装されておらず、まだWindowsは不安定なせいか、フォント入力を暫くやっているとバックアップが取られない状態で強制終了することもしばしばあります。。こちらに関しては、今後の改善や機能追加に期待したいところですね。

  • 触ったことがあるので、基本の復習って感じでした。ちなみに画像は全部リンク？なんでしょうか。スマートオブジェクトやラスタライズ的な機能はあるんでしょうか？ショートカットを早く編集できるようになったらいいのに～

    • 画像はリンクされません。ドラック＆ドロップすると、全てビットマップという扱いになります。スマートオブジェクトに似た機能としてCCライブラリのグラフィックを用いることで同じような機能として使用することができます。また、CCライブラリのグラフィックデータにリンクされているので、対象のオブジェクトを一括に編集したり、リンク解除を行うことも可能です。ショートカット、編集で割り当てられたらいいですよね。現在は設定変更できないので、もしよろしければお配りしたチラシのチートシートを活用いただけると幸いです！

  • XDでもいろいろなパーツは作れるようだがIllustratorとの使い分けは？XDでパーツを作るデメリットは？

    • 使い分けとしてはPhotoshopやIllustratorで細部にこだわったデザインを作成し、XDでは簡単なワイヤーだけを作成するといった使い方ができると思います。また、他ツールで作成したデザインはCCライブラリで共有連携することをお勧めします。デメリットとしては、XDで作成したアイコンなどを他ツールに持っていっても編集が出来ない部分もあり、SVG書き出しだとまだ不完全な点もある上、細かいデザインが苦手なので強いて言えばその点でしょうか。

  • プロトタイプは基本的にクリックによる画面遷移しか作れないので、スワイプとかのインタラクションをつけたいというニーズは無いのか。

    • 私もその機能があったらうれしいです。よりプロトタイプとしての精度が上がるので、個人的には欲しい機能ですね。

  • リピートグリッドが大変便利だと感動しました。XDはMuseとしての機能はないのでしょうか。マークアップ？

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

  • よくXDがフリーズして保存できなくなります。どうすればよい？

    • 実をいうと、私もその様な現象は多々ございます。。現在は自動リカバリ機能がないので、予め定期的に保存をしていくしかなさそうですね。。

  • XDのテキスト設定で初期でメイリオ16pxとかにカスタマイズできる方法はありますか？

  • 使いやすいXDですが、グリッドに沿ったレイアウトをワイヤーで作るとき、Bootstrapの１２グリッドのようなガイドを敷きたいとき、リピートグリッドで当りを作って一番上のレイヤーに置きつつ配置していく以外に何かスマートな方法あるでしょうか？

  • リピートグリッドで矩形をそれぞれで色を変えるのはできないですか？

    • XDでは「矩形」ではなく「長方形」ですね。予めそれぞれの長方形をいくつか作ってシンボル化しておき、それぞれをリピートグリッドでグループ化することでそれぞれを変更すると別々にカラー変更は可能ですが、それだと決められた箇所しか変わらないので現状は難しいかと思います。

  • 今度、どんな機能が出て欲しいと思いますか？

    • 個人的ではありますが、最後の話にもありました「リピートグリッドの間隔を数値入力」できたら嬉しいですね。他にも、ページ内リンクの設定や、CSSなどの書き出し機能、レスポンシブデザイン機能なども出くると、更に実用的になっていくので、その辺りが欲しいところです。

  • 「リピートグリッドの画像挿入した際の反映される順番」

    • Windowsは「エクスプローラーの並び順」、Macは「Finderの並び順」で反映されます（選択順ではありませんので、お詫びと訂正まで）。
    • 詳しくは湯口さんが書かれているこちらの記事をご参照ください。
      Adobe XDデータを使いこなそう

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

使われたことがないという方々は、是非この機会に一度触ってみて下さい。
XDの「軽快さ」「学習コストの低さ」「機能の充実さ」そして「楽しさ」を実感できると思います。

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

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

https://www.udemy.com/adobexd/?couponCode=IMAKEXD_CSSNITELP57

ショートカットのチートシートのpdf版も添付させていただきましたので、こちらもご活用いただけると幸いに存じます。

Adobe XDショートカットチートシート

https://www.dropbox.com/s/8egn63eknpaowkm/cheatsheet180428.pdf?dl=0

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

濱野 将のFacebook

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

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

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。

2010年から2019年のベスト・セッション