
『Adobe XD ユーザーグループ京都 vol.04』に参加してきました!
みなさんこんにちは。イー・オフィスのwebディレクターの本山です。
今日は朝から松本を出て、特急しなの、東海道新幹線ひかりを乗り継ぎ京都へ行ってきました。
目的は初めてのXDユーザーグループに参加すること。実は京都に行くのは高校の修学旅行以来で、まさかXDが目的で再訪するとは思いもよりませんでした(普通に観光で来ると思ってた)。
なぜXDユーザーグループのイベントに参加しようとしたかと言うと、もちろんXDのスキルアップやテクニックの習得というのもありますが、別の目的として長野県にXDユーザーグループを立ち上げるべく、運営方法やイベントの空気を肌で感じたいと思ったからです。
昨年11月に行われた『CSS Nite in Shinshu, vol.4
「令和時代を生きるデザイナーが知っておくべきSNSブランディング&最新アドビツール事情」』で、僕はXDをテーマに話しました。
このセッションを発表した目的として長野県の制作現場でまだまだXDが浸透していない状況を少しずつでも変えたいと思っていたのと、近い将来に長野県にもユーザーグループを立ち上げてユーザー同士の交流、コミュニティを作りたいという裏テーマを掲げていました。
そして機会を伺ってたところ、XDユーザーグループ代表の湯口さん(@risay )を巻き込んだツイートがまぁまぁいろんな方に反応を頂けて、直接Twitter上でやりとりする機会となり、直談判してみました。
XDユーザーがフォローするべき垢
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) January 30, 2020
・えび🍤(@pino_ebiebi )さん
・Keisuke Todoroki(@keisuke322 )さん
・松下絵梨(@matsu_eri )さん
・Risa Yuguchi(@risay )さん
・鈴木慎吾(@shingo2000 )さん
・けんじ(@kenji_clown5 )さん
・Osamu SATO(@OsatoCom )さん
新機能情報はこれでキャッチアップできる
そうしたところ、2/16に京都でユーザーグループがあるからと来ないかと湯口さんからお誘いが!
こんなやりとりがあり、ついに今日に至ることになりました。湯口さん、お誘いいただきありがとうございました。
そして無事に、京都のコワーキングスペース『coto』に到着。
XDUG京都の会場(coto)に着きました〜。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
若干のアウェイ感...#xdug#xdug_kyoto pic.twitter.com/X7h9EsgwCX
では当日のセッションのまとめを例によってTwitterのまとめで振り返りたいと思います!
セッション1 コンポーネントパーフェクト(?)ガイド 〜湯口りささん〜
コンポーネントとは?
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
→ オブジェクトを登録して再利用できる機能
種類は
・ローカルアセット
・リンクされたコンポーネント
の2つある。
手段は
・新規作る
・コピペ
・アセット&リンク
・CCライブラリ
の4つ。#xdug#xdug_kyoto
社内のデザインシステムを統一したいと思っていたから、リンクされたアセットのコンポーネントを活用して展開していけたら良いな。#xdug#xdug_kyoto
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
【ステートの設定】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
・ステートは10でも20でも登録ができるが、その分管理が大変。
・ステートはそれぞれオブジェクトが独立しているので、マスターコンポーネントのテキストを変更してもステートのオブジェクトは変更されない。#xdug#xdug_kyoto
【パディングの設定】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
・パディングはマスターコンポーネントかつ初期設定のステートを選択した時に設定可。
・パディングの便利なところは、例えばカードの画像の大きさを変更すると余白を保ったまま自動で大きさを変更できる。
・注意点は、エリアテキストはそのまま伸びない。#xdug#xdug_kyoto
コンポーネント機能全然使いきれてないなぁ。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
しばらくXDを使う現場から離れているとどんどん置いてかれてしまってる。
勉強をもっとせねば。#xdug#xdug_kyoto
セッション2 デザインシステムについて 〜轟 啓介さん〜
【デザインの一貫性に必要なこと】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
・OSやデバイスの作法を無視しない
・世の中のトレンドを無視しない
・デザインのルールの定義する#xdug#xdug_kyoto
【スタイルガイドの種類】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
・従属型...同じファイル内に作成(自分専用)
・独立型...別ファイルを作成(社内共有用)#xdug#xdug_kyoto
【スタイルガイド作成の注意点】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
・後からマスターコンポーネントをスタイルガイド専用ファイルにコピーすることができない。
・後から共有のためにクラウドファイルにするのは面倒。
基本はクラウドファイルで作った方が安全。#xdug#xdug_kyoto
【スタイルガイド作成時のTips】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
ステートつきのコンポーネントの管理方法として、人間が目視するように、インスタンスをコピーしてステート別に並べる。
そうするとマスターコンポーネントのステートを変更すれば、反映されるし、便利。#xdug#xdug_kyoto
Adobeのデザインシステム『Spectrum』の中にボタンは全部で1180個ある!
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
ここにあるらしいので、間違いない。https://t.co/sfmkQF3Vpe#xdug#xdug_kyoto
【スタイルガイドとメンテナンスの問題】
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
自分の作業用ファイルでデータを作成する前に、スタイルガイドの共有アセットを読み込めば、デザインシステムと乖離したデータを作るのを防げる。#xdug#xdug_kyoto
UIインベントリーとは?https://t.co/iYL9T3xzIQ#xdug#xdug_kyoto
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
セッション3 ゲームについて 〜TIMING DESIGN 北村 崇さん〜
XDで学ぶトリガーとアニメーションの話 〜北村さん〜
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
実務に役立つかどうかわからないが、とっても楽しそう!#xdug#xdug_kyoto
この作り込みは、北村さんもXD芸人に認定だなぁ。#xdug#xdug_kyoto
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
アニメーションのコツは『起点』を理解すること。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
ただXDでは起点をコントロールできないので、Aiを使って起点を別のポイントに持っていくことも可能。#xdug#xdug_kyoto
XDのアニメーションは奥が深いなぁ。
— F.Motoyama / 地方webディレクター・マーケター (@Futoshi0620) February 16, 2020
いろんな操作を試してみればやりたいことはだいたい実現できそうだけど、実際どこで実装するかってゆうw#xdug#xdug_kyoto
懇親会
今回は各地のユーザーグループの長たちが集まっていた様子でいろんな人たちに話を聞けました!
京都開催のイベントに長野からの参加なので1番遠方から来た自信があったのですが、まさか札幌と沖縄のユーザーグループの方たちが来ているとは露知らず、全然距離的に及びませんでした...。
そしてAdobeの轟さんからも機会があれば長野に行きたいというお言葉もいただき、これは長野でXDユーザーグループを立ち上げていつか轟さんをお呼びしなければと思いを決した懇親会でした(他のグループの方たちもいつかお声がけしますので気軽に遊びに来てくださいー!)
まとめ
各地方のユーザーグループの方達からお話を聞いて、近いうちに長野でユーザーグループを立ち上げ、第1回のイベントを開催しようかと思います。(詳細はこのnoteか何かしらのチケットサービスでイベントを立てますので少しお待ち下さい。)
長野県の方々は是非ご参加いただけると幸いです!
先週出席したAll About XDとは違い、イベントの規模も小さいため、参加者と登壇者の距離感が近く、より実務的でテクニックよりの話を聞くことができました。
また登壇者の方々とより密なコミュニケーションができ、非常に有意義な時間を過ごせました。
日帰りの京都への旅でしたが、とても楽しく濃い休日になったと思います。(『麒麟がくる』をリアルタイムで見れなかったのだけ残念。)
以上レポートでした。ご参加されたみなさん、お疲れ様でした!