1
/
5

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


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

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

ざっくりつかむ CSS設計
Amazonで高津戸 壮のざっくりつかむ CSS設計。アマゾンならポイント還元本が多数。高津戸 壮作品ほか、お急ぎ便対象商品は当日お届けも可能。またざっくりつかむ CSS設計もアマゾン配送商品なら通常配送無料。
https://amzn.asia/d/fIXMB2e

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

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

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

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

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

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

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

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

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

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

合意形成しつつ進める

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

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

という話が出ました。

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

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

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

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

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

ノンデザイナーズ・デザインブック [第4版]
AmazonでRobin Williams, 米谷 テツヤ, 小原 司, 吉川 典秀, 米谷 テツヤ, 小原 司のノンデザイナーズ・デザインブック [第4版]。アマゾンならポイント還元本が多数。Robin Williams, 米谷 テツヤ, 小原 司, 吉川 典秀, 米谷 テツヤ, 小原 司作品ほか、お急ぎ便対象商品は当日お届けも可能。またノンデザイナーズ・デザインブック [第4版]もアマゾン配送商品なら通常配送無料。
https://amzn.asia/d/07FUOEj

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

ノンデザイナーでもわかる UX+理論で作るWebデザイン
Amazonで川合 俊輔, 大本 あかね, 菊池 崇のノンデザイナーでもわかる UX+理論で作るWebデザイン。アマゾンならポイント還元本が多数。川合 俊輔, 大本 あかね, 菊池 崇作品ほか、お急ぎ便対象商品は当日お届けも可能。またノンデザイナーでもわかる UX+理論で作るWebデザインもアマゾン配送商品なら通常配送無料。
https://amzn.asia/d/78YrJGN

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

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

「社内勉強会」 でスタッフの共通認識を形成する | 株式会社ぺいじず
弊社では週1回30分、業務時間内に社内勉強会を開催しています。 テーマごとに読書会形式で進めることで、職種を超えてメンバー全員が考え、認識をすり合わせる場となっています。 単に「新しいことを学ぶ...
https://www.wantedly.com/companies/company_4282877/post_articles/509657

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

株式会社ぺいじず's job postings

Weekly ranking

Show other rankings
Like kakeru shima's Story
Let kakeru shima's company know you're interested in their content