デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作 CSS Nite LP64 Coder’s High

ツキアカリ松下 絵梨さん、株式会社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で円滑にコミュニケーションを取ってスムーズに制作していくのが重要です。

お問い合せはこちらから
無料メルマガ登録

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA