余白が明確に定義されないまま上がってくるデザインへの対処：CSS設計社内勉強会

池袋のWeb制作会社、株式会社ぺいじずの島です。

弊社では毎週金曜日に社内勉強会を実施しています。
現在取り組んでいるテーマは「CSS設計」で、書籍『ざっくりつかむ CSS設計』の読書会というかたちで勉強会を行っています。

今回は、先週の会で出たコメントを少し振り返ってみます。

余白に規則性が無いデザインデータ

「デザイナーが悪い」とかそういう話ではないんですが、

「デザイナーがフィーリングで余白つけてくることがある」

といった話題が出てきました。

デザイン上で余白の数値に規則性が無くバラバラになっているケースは確かに発生します。
これは「余白はコーディングでいい感じにしといてください...」といったつもりでデザインが上がってくる場合や、他にも様々な事情、例えば余白の設計書まで手が回らなかったり、あるいはデザインツール上で余白サイズを整理整頓する時間がなかったりといったこともあるかと思います。

コーディングの際に定義しなおす

いずれにせよCSSを書くときは余白を明確に数値で定義しなければならず、コーディング段階で余白について考える必要が出てきます。

例えば、同じモジュールの間隔は余白を共通化したいことが多いと思います。
また、複数ページにある同じモジュールの前後余白とかも、ページ間で共通化したい場合が多いとかと思います。
もし規則性が無い余白をデザインデータに沿って完全再現しようとすると、個別にclassを書いて逐次余白設定しなければならなくなるかもしれません。

もちろん完全再現が求められるケースや、逐次設定のほうが良いケースもあるかと思いますが、弊社ではCMSの案件が多いこともあり、完全再現よりも規則性があるほうが適していると考えられます。

合意形成しつつ進める

とは言えコーディング段階で余白を定義しなおしてコーディングした結果、後々「いやいや、こことここはコンテンツの意味的にもっと近づけて欲しいんです」とか「こういう意図であえてこの余白にしてたんですよね」といったことが発生する可能性があるので、

「コーダー側で余白設計を考える場合は、先方からきたものは「余白設計これでいいですね」と確認しながら進めると後々問題が起こらない」

という話が出ました。

当たり前と言えば当たり前の話なのですが、先方から来たデザインデータをコーディングするときはもちろん、社内でデザインしたデータをコーディングするときも、コミュニケーションをとりながら合意形成しつつ制作を進めていけるのがベストではないかと思います。

デザインの話を少し知っておくと話を進めやすいかも

余談ですが、コーダー/フロントエンドエンジニア、あるいはディレクターの方でも、デザインの原則を知っていると余白の定義を進めやすくなるかと思います。

余白を定義する際に理解しておくと役立ちそうなのは、いわゆるデザインの4つの基本原則の「近接」「整列」「反復」「コントラスト」ではないでしょうか。
情報の意味やまとまりから機能的な余白を設計するのに役立つと思います。

最後盛大に投げっぱなしになりすみませんが、「デザインの4つの基本原則」については『ノンデザイナーズ・デザインブック』という書籍に詳しい解説が載っています。

また、『ノンデザイナーでもわかる UX+理論で作るWebデザイン』という書籍のp126-135にも解説が載っています。

（あと、検索すると他の方がたくさん解説記事を書いてくれています）

弊社では毎週金曜日の業務時間内に、異職種スタッフが集まり社内勉強会を開催しています。

また、現在制作スタッフを募集中です！
弊社に少しでも興味を持っていただいた方、お気軽にご連絡ください。