MENU

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

2019 10/20

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

この記事を書いた人

2001年からウェブ業界に携わり、2002年に独立。2006年法人化。
ウェブデザインやコーディング、CMSなどの制作業務から、ウェブ解析、ウェブサイト構築・運用のコンサルテーション、広告運用代行など、ウェブに関する多様な要望に幅広く対応。
また、制作や集客だけではなく、運用・保守など全ての業務を俯瞰した視点での改善提案やアドバイザリーを行っています。

CSS NiteやWordCamp、BAU-YAなどのセミナーやイベントにも、多数登壇。企業研修やマンツーマンレッスン、ブログやSNS、YouTubeでの情報発信など、「ウェブを育てる」知識の教育活動にも意欲的に参加しています。

コメント

コメントする

CAPTCHA