レコメンド&レポート

【 イベントレポート 】CSS Nite LP67「ALL ABOUT XD update 2020」

March 12, 2020

  • このエントリーをはてなブックマークに追加

こんにちは!新潟オフィスの宮尾です。
気温もだんだんと暖かくなり、春が近づいているそんな予感がしますね〜
さて今回は、2月上旬に参加してきた「ALL ABOUT XD」というXDのイベントのレポートブログです。

ALL ABOUT XD update 2020 とは

タイトルにもある通り、adobe XDをテーマとしたセミナーイベントです。
プロジェクト内でのXDの役割についてや事例紹介、
アニメーションなどのテクニック、さらには今後のアップデート情報など、
様々な観点からXDというテーマでセッションを行いました。
全部で9セッションというボリュームでしたが、
とても内容が濃くあっという間に感じました。
私はほぼ毎日といっていいほどXDを使用しているのですが、
新たに得る情報がとても多かったので、
いくつかピックアップをして紹介していきたいなと思います。

【 まぼろし 益子さん 】ワークフロー全体から考えるAdobe XDの役割と活かし方

以前より、XDをどうワークフローに絡めて進行しているか気になっていたので、
とても興味深いセッションでした。

まず、XDで成果物を幅広く作ろうというお話。
従来のツール(ExcelやPhotoshopなど)は優れている点もあるが、
WEB制作において学習コストが高かったり、不得意な点もあります。
(たしかにExcelではデザインは作れないし、フォトショップにはドキュメント作成は向いていない、、、)
そこで、XDを使ってはどうだろうかという内容でした。
例えば、企画書や提案書などのドキュメント作成やプレゼンなどのスライド作成、
ワイヤーフレームやデザインといったクリエイティブワークから、ドキュメントワークもXDでは行えます。
大きく言うと、様々なツールを行き来しなくてもシームレスに案件を進行できる、
それがXDという内容です。
(すごいぞXD、、、!)

そんなXDの可能性を知りつつ、
次にワークフローとXDについてのお話でした。
企画 → 設計 → 制作・開発 → 公開・運用というワークフロー内でデザインまで
ほぼXDで行っているとのことでした。(すごいぞXD、、2回目)
テキストのやりとりもXD、ワイヤーフレームの設計からデザイン作成もXD、
エンジニアさんへのデザインスペック共有もXD。。。
XDデータで進行されていくフローはとてもスムーズで良いなと感じました。

【 コンセント 江辺さん 】XDをプラットフォームとして使う

江辺さんのお話で一番活用したい!と思った点は、
サイトマップをインデックス化してデザインレビューをできるようにしているということでした。
これはクライアントへのデザイン共有の際に、とてもわかりやすそう。

あとは、XD内にスケジュールやアクションアイテムを貼り付けるという方法。
スケジュールはExcelとかで別で作成し、画像を貼り付けているそうでした。
確かに、XD内で色々完結できるのでかなり便利。。。

もちろんXDを導入した際の苦労点もあり、
実際に困った点をいくつか聞くこともできました。
XDのプロトタイプをテストサイトと勘違いするお客さんへの説明という内容については、とても共感。。。
(XDではないですが、Marvelというツールを使用した際に、わたしも何度か言われたことがあります)
その際に、デザインデータ内に確認ポイントや説明を明記する方法を紹介いただいたので、
デザイン共有の際は私も明記するようにしたいと思いました。

【 SONY 池原さん 】Adobe XDで「読む」ガイドラインから「使う」ガイドラインへ

使うガイドラインは、XDのガイドラインデータに少しの工夫をすることで、
ルールを完璧に理解しなくても使用できるというお話でした。

たとえば、ロゴデザインにあるアイソレーションゾーン。
使用時に上下左右に必ず指定の余白を空けるようにしなければいけないのですが、
XD上でその領域分の見えないboxを作る→ ロゴとグループ化をすることで、
使用ルールを完璧に理解しなくても使用が可能に。
応用も効きそうですし、私も早速試したいと思います!

【 ヤプリ 佐藤さん 】プロトタイピングを制するためのAdobe XDテクニック

XDを使用したアニメーションは私も最近力を入れていたことなので、
とても興味深い内容でした。
タイマートランディションを使用して、
ランダム結果を表示させるというアニメーション。

XDの可能性を改めて知るセッションだったと思います。
佐藤さんが以前noteで紹介されていた、
作り方の解説があったのでURLを貼っておきます。
タイマートランジション 解説

あと、リピートグリットを1STEPで拡大できる方法について、
会場は「お〜っ!」の嵐。
1 リピートグリッドを作成する
2 グループ化する
3 斜めにドラックする
実践しましたが、かなり簡単にできました!

【 したたか企画 中野さん 】プラグインとカスタマイズで作ろう!自分だけの最速XD

2秒を0.3秒に縮める効率化について、
おすすめプラグインやショートカットの設定についてお話いただきました。
XDのプラグインはたくさんありますが、
以前より使用していたプラグイン「Sprit Rows」を
中野さんが開発されていたことにとても驚きです。。
( 2行以上あるテキストフレームを行ごとに分解してくれる拡張機能 )

ショートカットの設定について、中野さんの解説記事があったので、
こちらも共有したいと思います。

【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(1)
【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(2)
【まとめ】プラグインとカスタマイズで作ろう!自分だけの最速XD(3)

【 Creative Edge School Books 境さん】Adobe XDと連携できる優れたWebサービスの選び方と活用方法

プラグインも大事ですが、
XDと一緒に使うサービスも重要だということを感じたお話でした。

たとえば、XDと連携できるプロジェクト管理ツール「Jira software」。
スケージュールやタスク管理はもちろん、
最新のデザインやスペックも共有できるようで、
メンバー全員に最新情報を漏れることなく共有できるのが良い点だなと感じました!

また「PC・タブレット・スマホ」の3つのデータを作成し、
AIが勝手にコードを生成してくれる「Quest AI」も
気になったプラグインの1つでした。
無料プランがあるサービスが多いので、

プロッジェクトや自分にあったサービスを利用し、
より効率よく仕事ができればと感じたセッションでした。

Jira公式サイト Jira Software
QuestAi公式サイト Quest AI

参加してみての感想

今回参加してみて感じたのは、
XDって幅広く活用できるんだなと改めて感じました。
まだまだXDの機能について知らなければですし、
自分なりのスタイルやプロジェクト内での活用方法を作れたらなと思います。

  • このエントリーをはてなブックマークに追加

ライター紹介

MIYAO.N

デザイナー

--

お気軽にお問い合わせください。
ご質問やご相談を承ります。どうぞ、お気軽にお問い合わせください。

お問い合わせ

メールマガジン登録
バックナンバーへ

最新の制作事例や季節のトピックス、デザイナーのつぶやきなど、das.ならではの情報をお届けします。
なお、メールアドレス入力前に「個人情報の取り扱いについて」をご覧ください。
ここでご入力いただきましたeメールアドレスは、メールマガジン配信のためだけに使用いたします。

follow us