宮野 聡美
Adobe XDデザインを見てCSS設計を決めるときに考えていること
Web制作では、Adobe XDのデザインデータを受け取ったあと、すぐコーディングを始めたくなることがあります。私も以前はそうしていました。
ただ、途中でCSSが増えたりレスポンシブ対応で調整が増えたりして、「最初に少し整理しておけばよかった」と感じることが多くありました。
今はCSSを書き始める前に、XDデザインを見ながらいくつか確認するようにしています。
普段なんとなく考えているポイントをまとめました。
まず全体構造を見る
最初に見るのはボタンや文字サイズではなく、ページ全体の構造です。
- コンテンツ幅は固定か
- セクションの区切り方
- 背景の切り替わり
- 共通レイアウトがありそうか
ここでは「どう作るか」より、「どんな構造か」を把握することを意識しています。
先に全体を理解しておくと、後からレイアウト調整が増えにくくなります。
繰り返し使われているUIを探す
次に、何度も登場しているパーツを探します。
- カードレイアウト
- ボタン
- 見出しデザイン
- アイコン付きテキスト
完全に同じでなくても、構造が似ていれば共通化できないか考えます。
最初から厳密に分けるというより、「再利用できそうかも」くらいの感覚です。
余白のルールを見る
XDでは余白のリズムも確認します。
数値を全部覚えるのではなく、
- セクション間は広い
- 要素間は一定
- テキスト周りはやや狭い
といった傾向があるかを見ています。
同じ間隔が多ければ、個別指定ではなくルールとして扱うようにしています。
スマホ表示を少し想像する
PCデザインしかない場合でも、レスポンシブ時の崩れ方を軽く想像します。
- 横並びの数
- テキスト量
- 画像サイズ
この段階でflexかgridかをなんとなく決めておくと、後から作り直すことが減りました。
クラス名は最後に考える
以前は最初にクラス名を決めていましたが、今は構造を理解してから付けています。
先に名前を決めるより、全体を見てからのほうが自然に整理できることが多いと感じています。
簡単なメモを作る
コーディング前に、軽く構造メモを書いています。
l-wrapper
p-service
c-card ×3数分で終わりますが、不要なdivやCSSが増えるのを防ぎやすくなりました。
XDのグループをそのまま使わない
XDのグループは見た目整理のためのものなので、HTML構造とは別に考えるようにしています。
レイヤー通りに実装すると要素が増えがちです。
まとめ
CSS設計といっても難しいことをしているわけではなく、コーディング前に少し立ち止まって「構造」を見るようにしているだけです。
- まず全体レイアウトを見る
- 再利用できそうなパーツを探す
- 余白のルールを読む
- レスポンシブを少し想像する
この流れを意識するようになってから、後戻りの修正が少し減った気がしています。
もしXDを受け取ったらすぐコーディングを始めてしまう、という方がいれば、最初の数分だけ設計を考える時間を作ってみるのもおすすめです。
MIYANO SATOMI Front-end Engineer / 宮野 聡美
Our Signature Products, Born from Insight.
提案から生まれた、
MARBLEの代表プロダクト
お客様の課題を起点に、MARBLEが自ら構想し、
仕組みからデザイン、開発、運用まで一貫してつくり上げたプロダクト群です。
業務改善、運営効率化、新たな顧客体験の創出など、
企業の事業成長に直結する“実装された解決策”を形にしています。
-
01 入退場システム
Entry System
全国15店舗、会員数50万人以上のこども向けパークで稼働する入退場・決済・顧客管理システム。
受付の効率化と回転率の向上を実現し、運営データの一元管理を可能にしています。 -
02 自動配送システム
Delivery Routing
50台のトラック、年間350日の配送を最適化する自動ルート生成システム。
紙のFAXで届く約500件の配送情報をデジタル化し、最適ルートを自動で算出することで、大幅な業務効率化を実現しました。 -
03 会話型コマース連携
Auto Routing
ライブチャットでの接客からEC購入までを一つの導線でつなぐ会話型コマースシステム。
リアルタイムの対話で顧客の購買意欲を高め、高いコンバージョン率につながる仕組みを構築しています。