ツキアカリ松下 絵梨さん、株式会社ICS鹿野 壮さんによる、Adobe XDを使ったウェブ制作についてのセッション。
Adobe XDは、プロトタイプを作れるツールですが、動くプロトタイプも作れるようになっています。
ただ、デザイナーとコーダーがコミュニケーションロスを起こすことも。
デザイナーとコーダーのコミュニケーションが大事。それにはXDが役立ちます。
セッションではいろんなレイアウトのXDでのデザイン、コーディングのデモが行われました。
グリッド
グリッドをレイアウトするには、リピートグリッドをつかいますが、素材がトドていないときなどには、懐かしのspacer.gifを利用。
開発用に共有をすると、余白も確認可能です。
コーディング時は、CSS Gridを利用。grid templateプロパティを利用し、行数、列数を指定。gapプロパティでグリッドの隙間を指定、縦と横は別の数値で指定可能です。
行数列数の変更も、grid templateプロパティですぐに変更可能になります。
アニメーション
XDでアニメーションするにはアートボードが必要。大きさや位置を変更して、プロトタイプモードで自動アニメーションに設定、イージング、時間を設定します。
ボタンのグラーデーションするアニメーションを作る場合、マスクでも可能ですが、リピートグリッドとして、グラデーションを入れて作成可能。
デザインスペックを見ると、XD側でCSSが表示されるので、グラデーションのCSSはコピペでOK。
動きを再現するにはtransformプロパティで指定していきます。（詳細略）
レスポンシブ
XDにはレスポンシブ変更という機能があるので、便利ですが、うまく行かないところは、手動に切り替えると、固定のところと、可変のところを指定可能になります。
スマホとPCだけでなく、簡単にタブレット版も作成できます。
ダークモード
OSがダークモードを指定した場合、ウェブコンテンツが白背景だと明るすぎる場合がでてきます。
XDではアセットカラーという機能を使うと、色の編集が便利に行えます。
通常版のデザインをダークモード用に複製し、アセットパネルで色をそれぞれ変えていくと、一気にデザインの色変更が可能。
ウェブコンテンツで設定するには、メディアクエリでユーザーがダークモードかどうか判別し、ダークテーマ用の設定が可能です。（prefers-color-scheme:dark）
CSS変数を定義すると、ベースカラー、テキストカラーなど、変更が可能。（詳細は後ほどリライトします）
デザイナー側でも、それぞれのモードでのベースのカラーを設定しておくと便利です。
コミュニケーション
XDでは任意の場所を指定してコメントできるので、デザイナーにとっても、コーダーにとっても便利です。
まとめ
デザイナーさんはプロトタイプを作ったらコーダーさんに確認するのが大切。チームメートなので、XDで円滑にコミュニケーションを取ってスムーズに制作していくのが重要です。
コメント