XDUG東京 vol.30 勝手にフォローアップ
7月24日に Adobe XD ユーザーグループ東京 vol.30 [オンライン] でライブデモをさせていただきました。ご視聴いただいた方ありがとうございました！
限られた時間の中でずいぶん詰め込んでしまったので、今回「勝手にフォローアップ」としてセッション内で使ったデモファイル等を共有します。
アーカイブも残っていますので、もし復習したい部分などがあれば合わせて活用していただけると嬉しいです。
ダウンロード・アーカイブ動画
▼デモファイル・素材のダウンロードはこちらから
※ 写真素材は Beautiful Free Images & Pictures | Unsplash に帰属しています。
※ フォントは主に「游ゴシック体」「貂明朝」「Times New Roman」を使用しています。（操作方法をメインにしているので今回この辺りはあまり考慮していないのです…。フォントがない場合は申し訳ないですが他のもので代替をおねがいします。）
いただいたご質問・ご意見リプライ
せっかくの機会なので、セッション中や懇親会・イベントアンケートなどいただいたご質問について簡単にまとめてみます。
【Q】43:26～ リピートグリッドで途中まで見えているものを、キーボード操作で表示していましたが、これはどのような操作をしているのでしょうか？（プラグインなどご利用でしょうか）
はい、プラグインを使っていました！「Trimit（トリミット）」というものです。
リピートグリッドやテキストエリアを選択した状態で【alt + command + T】をすると、選択エリアがコンテンツに合わせてピタッとリサイズされます。
個人的には、同じようにショートカットでアートボードをリサイズする「Risize Artboard to fit Content」と合わせて2大イチオシプラグインです。無駄な手動作業がかなり削減されるので、よろしければインストールしてみてください…！
【Q】開発モードって画像とかcssも吐き出してくれるのか？
はい、画像とCSS、そして最新のXDではデザイントークンも吐き出してくれます。
CSSは選択行でコピーができるので、全てとは言わずとも微妙な角度の数値やグラデーションを含む部分などには便利です。
画像のダウンロード形式は「PNG」と「PDF」から選べます。（←この問題XD検定にも出てましたね…。）書き出す画像の指定はXDのデザインモードでチェックマークを打って指定していく形です。
【Q】アートボード1280pxなのかー
サイズ設定は一度リニューアル案件で自爆したことがあるので、それ以降は事前にアナリティクスなどでなるべく期待されるユーザーに一番近い環境を調べようと心に決めました…。
今回は1280pxで作成しましたが、このあたりは案件によってマチマチです。
【Q】大文字小文字はtext-transformプロパティで変更できるので、コーダー的には小文字で入ったデータをいただければオッケーです。（あまりないけど）飾りではなく読ませるための文字だったら、アクセシビリティ上はむしろ小文字のほうがいいカモ
コーダーさん目線からのご意見！基本的には流し込む英語データは小文字で作った方が良いのですね。ありがとうございます！参考にしますー！
【Q】ああー、アコーディオンはこうやればいいのかー！
今回ご紹介したのは私が考えられる設計の中で一番手軽なものだったので、こだわれば自動アニメーションやステートを使って本物っぽく動かすこともできます。
どのパーツを、どの機能を使って設計・管理するかは作り手のアイデアで未知数なんですよね。ここがXDの面白いところだと思ってます。
【Q】リネームされてないコンポーネントって、負の遺産にならない？
いやもう本当に。コンポーネント名は書き出し時や共有リンク発行後にダウンロード素材の名前にもなるので、ご指摘の通りリネームしない理由はないのです。
この部分はセッション2の深沢さんが素晴らしく模範だと思うので、私も参考にさせていただきます…！！
【Q】たまーにレイヤー整理だけお願いされる案件ってあるんですよ…
確かに需要はあるけど実際案件になるとなんだか生々しいですね…。
【Q】パーツ用とレイアウト用のXDデータ分けて制作を進める利点はどこなのでしょうか
今回は「お客さんにはお客さんに一番求められる情報を」「開発チームには開発チームに一番わかりやすい情報を」といったように、アセットを共通で持ちつつチーム内で共有する情報を完全に分けれらたことが一番メリットになりました。
また大規模になればなるほどデザインシステムの徹底管理が必要になると思うのですが、制作した本人以外のメンバーが介入したとしてもそのレギュレーションが崩れにくくなるのかなと。
ただ、今後アップデートで1つのファイルで回遊ルートの違う複数の共有リンクを持つことができるようになったらこれもまた変わるかもしれません。
【Q】大規模であればあれほどプロトタイピングに時間を割くべきでは？
プロトタイプをどこまで本物に近づけるかもよく議題に上がる問題ですよね。「本物と同じ回遊ルートにしなきゃ体験の意味がない」という意見もあれば、「単純化してそれぞれのページの進捗管理も確認できるように工夫してる」というところもあるようです。
私個人としては、予定しているルートについては全てパターンとして用意しつつ、繰り返し同じ動きが起こる部分は場面に応じて共有に最適化してもいいのではないかなと思っています。
また案件自体の様々な条件も関係してきそうです。実は今回ご紹介した事例については「開発しているCMSを使って、納品後もナビゲーション他様々な部分でお客様によるカスタマイズを可能にする」という条件のもとで制作をしたので、あまりXD上でプロトタイプを作り込んでもリターンが少なかったというところがあります。説明不足だったところもありますが、やはり少し特殊だったかもしれません。
最後に
実はお声がけいただいてから当日までずっとうっすら緊張しておりました…。今回このような貴重な機会をいただき、私自身もとても勉強になりました。つたない説明でしたが、視聴者の方からたくさんのリアクションをいただけてとても嬉しかったです！ありがとうございました！
今は情勢を汲んでXDUG名古屋の方はお休みしていますが、（休日のウェビナーに結構な家族の協力が必要なんです…(汗)）またリアルイベントができるようになったら各地のユーザー同士でまた色々な知見を共有していきけたらと思います。今回ご視聴いただいた方にも実際にお会いできると嬉しいです！私自身とても楽しみにしてます。
それでは、今後のXDUGの動向もぜひご期待くださいませー！