2018年8月11日（土）UMEDAI 大阪梅田 会議室で開催したCSS Nite in Osaka, vol.45「All About XD」 w/YATのblog のフォローアップとして、松下 絵梨さん（ツキアカリ）の『Adobe XD、最初の一歩』セッションのスライドなどを公開します。
フォローアップ
ご参加ありがとうございました。他の講師陣のお話も全て興味深く、私自身とても勉強になるXD漬けの一日でした。
私のセッションについて、「もっと勉強したくなった」「実際に操作している所を見て一緒に操作できて理解が深まった」など、温かいコメントをいただき、お役に立てたようでとても嬉しいです。
「ちょっと早い」「もっと内容を絞ってほしかった」いう方もいらっしゃいました。たくさんのことをお伝えしたいがために、詰め込みすぎてしまったようです。
配布しているサンプルファイル内のStep01?03.xdに操作手順を書いていますので、素材フォルダ・動画と合わせて、ぜひ復習に活用していただけたら幸いです。
分からないことがあればご遠慮なく、FacebookやTwitterで質問してください。
セッション中にご紹介したURL
ご質問と回答
（質問）XDでデザインする際に、ワイヤーフレームを作成しながら、写真などデザインするより、ワイヤーフレームを全て作成したほうが効率が良いですか？
今回のデモでは、進行の都合上、ワイヤフレーム→デザイン→プロトタイプという順で進めたのですが、ワイヤーフレームの時点でプロトタイプを作成し、チーム内やクライアントさんと共有すると、より効率が良くなるのでおすすめです。
実際に利用するデバイスで、ページ単体でなくWebサイト全体を俯瞰した検討が可能になり、「このページが抜けていた」「このコンテンツが重複していた」など従来の「動かないワイヤーフレーム」では気づけなかったことに早い段階で気づき、結果、手戻り作業を防げるからです。
（質問）複雑なデザインにはどこまで対応できるのでしょうか？
XDの良いところの一つは「軽さ」のため複雑なデザインに必要な機能はあまり多く用意されておらず、PhotoshopやIllustratorと連携させるでことで表現力がUPします。
具体的には、写真のレタッチや色調補正、選択範囲や不透明度を利用したマスク、（グラデーションやドロップシャドウ以外の）レイヤースタイルなどの表現が必要なときはPhotoshopが必要です。
また、パスファインダーや点線・破線が使えるので、XDでも簡単なデザイン地図程度なら作れますが、印刷物でも利用するという観点から従来通りIllustratorで制作した方がよいと思います。
基本はXDメインで制作を進め、必要な箇所でPhotoshopやIllustratorの力を借りるイメージです。
ただし、特に画面遷移を必要としないリッチな表現が重要なランディングページのような案件ですと、今のところXDを使うメリットはあまりなくPhotoshopメインでデザインした方がよいかもしれません。
（質問）テキストドロップが少し分かりにくかったです。
準備として、Macのテキストエディット（「フォーマット」メニューから「標準テキストにする」を選びプレーンテキストに変更可能）やWindowsのメモ帳などで、拡張子が .txt のプレーンテキストのファイルを作成します。
このテキストファイルのアイコンをXDの画面にドラッグ& ドロップすると、自動的にエリア内テキストとして読み込まれます。
改行で区切られた複数行のテキストファイルをリピートグリッド内のテキストにドラッグ&ドロップすると、改行されているテキストは別の項目として処理されるため、例えば4行だった場合、テキストオブジェクト4つごとに、テキストファイル内に記述されていた内容が1行ずつ繰り返し配置されます。
リピートグリッドへのテキストの読み込みについてはこちらの記事も参考にしてみてください。
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
