CSS Nite LP64「Coder's High 2019」フォローアップ（4）鹿野 壮さん、松下 絵梨さん

2019年10月19日に大崎ブライトコアホールで開催したCSS Nite LP64「Coder's High 2019」のフォローアップとして、鹿野 壮さん（ICS）、松下 絵梨さん（ツキアカリ）の『デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作』セッションのスライドなどを公開します。

• スライド（PDF）
• デモファイル
• 動画

フォローアップ

2019年10月19日開催のCSS Nite LP64で「デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作」セッションを担当した松下・鹿野です。今回はご参加ありがとうございました！

アンケートでは「XDの便利な使い方を知れてよかった」「ダークモード対応について初めて知った」「デザインとコーディングの連携部分を知れてよかった」などの声をいただき嬉しく思います。

デザイナー、コーダーを始め、チームのメンバーは、「エンドユーザーに良いコンテンツを届ける」という同じ目標に向かって歩む仲間です。ぞれぞれの長所を活かし、短所をカバーしあって、よりハッピーな制作をしましょう。

フォローアップでは、発表での補足とお寄せいただいた質問をいくつかピックアップして回答します。

アンケートでいただいたご意見、ご質問について

XDでのデザインで、Photoshopから移行する際にやりきれないなどありますか

色調補正、高度なマスク、レイヤースタイルなどはXDにはありませんので、それらが必要な時は、Photoshopで作業してからXDに素材を持ってくる、というようなワークフローになります。
参考）
Photoshop ファイルを XD で開くときにサポートされる機能
https://helpx.adobe.com/jp/xd/kb/open-photoshop-files-in-xd.html

PhotoshopやIllustratorとの連携
https://helpx.adobe.com/jp/xd/help/working-with-external-assets.html

XDで表現できないアニメーションは、どうフロントエンドエンジニアに伝えているか教えてほしい

XDでは表現できないイージングは、下記のようなサイトを使って伝えています。

Easing Functions Cheat Sheet
https://easings.net/

タイムラインが必要なような複雑なアニメーションの場合は、After EffectsやAnimateを使った方が良いかもしれません。

XDでのコメントはどのような記法ですか？マークダウン？

残念ながらマークダウンは使えず単なるプレーンテキストです。
画像の添付もできないので、「スクリーンショットを貼りたい！」という時などは別途Dropboxなどに画像をUPしてそのURLを貼る、というような運用になります。

XDの書き出しは、どのようにされていますか？

基本はXDから書き出しますが、XDはビットマップ画像の扱いにあまり特化していないので、配置する前にPhotoshopで色調補正やレタッチを行うことが多いです。その場合、Photoshopから書き出したPNG（XDに配置する前のPNG）をそのままコーディングに使うこともあります。

デザイン素材の書き出し
https://helpx.adobe.com/jp/xd/help/export-design-assets.html

また、XDからSVGを書き出すという事については、松田直樹さん（まぼろし）のセッションが参考になりますので、ぜひアーカイブ動画をご覧ください。
「#XDUFes2019」東京編（松田さんのお話は2:55:00あたりから）
https://blogs.adobe.com/japan/cc-ccdojo-adobe-xd-user-fes-2019/

XDでカンプを渡す際、カンプに取り入れる画像は別にわたす感じでしょうか？

background-size:cover;などで背景画像として扱う場合は、おっしゃる通り、XDに配置する前の、上下左右がマスクされていない状態の画像が必要になるので、別で渡します。

XDのおすすめプラグインはありますか？

おすすめのプラグインやTIPSは、下記にまとめています。
Adobe XD Tips
https://twitter.com/i/moments/1107995267297468418

CSS GridのIE11対応方法は？

CSS GridはIE11では使えないと思われがちですが、いくつかの手順を踏めばIE11でも動作させることが可能です。昨年のCSS Niteにて詳しく解説しましたので、参照くださいませ。

CSS Nite LP58フォローアップ（8）鹿野 壮 | CSS Nite公式サイト
https://cssnite.jp/archives/post_3023.html

昨年発表した内容からの更新情報としては、AutoprefixerによるIE11向けの自動変換対応（一部）です。たとえば、2行4列の行列を作り、左上から子要素を順番に並べるには次のようにCSSを記述します。

/* autoprefixer grid: autoplace */.container {grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(4, 1fr);}

これをAutoprefixerで変換すると、IE11でも自動配置されるコードが出力されます。詳しくは次のドキュメントを参照ください。

https://github.com/postcss/autoprefixer/blob/master/README.md#grid-autoplacement-support-in-ie

CSS変数の対応ブラウザは？

CSS変数（英語ではCSS Variables）は、IE11を除く全モダンブラウザで使用可能です。

https://caniuse.com/#feat=css-variables

CSS変数を用いたコードを、IE11向けに変換するためのツールもいくつかあります。

• MadLittleMods/postcss-css-variables: PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation
• jhildenbiddle/css-vars-ponyfill

prefers-color-scheme の対応ブラウザは？

今回のセッションで、ユーザーがダークモードを設定していることを検知するメディアクエリ prefers-color-scheme を紹介しました。prefers-color-scheme は、IE11を除く全モダンブラウザで使用可能です。

https://caniuse.com/#feat=prefers-color-scheme

IE11についてはダークモード設定をブラウザ側で検知する手段はありませんので、IE11でのダークモード対応は諦めたほうが無難でしょう。

ちなみに、弊社のオウンドメディア ICS MEDIAではCSS変数とprefers-color-schemeを用いたダークモード対応を行っていますが、IE11でも最低限の見栄えが担保されるようにしています（プログレッシブ・エンハンスメントの考え方）。

さいごに

松下・鹿野は、次のような媒体でも情報を発信しています。ぜひご覧くださいませ。

松下
- Twitter
- Facebook

鹿野
- ICS MEDIA
- Qiita
- Twitter

Facebookに申請してくださる時は、「Coder's Highでお会いした」など、一言メッセージをそえていただけると助かります。