Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS Talk vol.02 Manabu Yasuda
コンポーネント指向と
余白の設計
INTRODUCTION
自己紹介
安田 学 (Yasuda Manabu)
株式会社 TAM
マークアップエンジニア
https://github.com/manabuyasuda
@ Gaku0318
01. コンポーネント指向とはなにか
02. コンポーネントの粒度を整理する
03. コンポーネント同士をレイアウトする
04. 余白設計のパターンを考える
アジェンダ
コンポーネント指向とはなにか
01
コンポーネント指向とはなにか
・コンポーネント = UI を部品化した状態
・コンポーネントの組み合わせ = ページ
コンポーネントのイメージ
コンポーネントのイメージ
コーディング面でのメリット
・小さな単位でコードを考えることができる
・理解しやすく保守しやすいコードになる
Component Oriented and Margin Design 08
デザイン面でのメリット
・デザインの再利用ができる
・デザインの手離れがはやい
コンポーネントの粒度を整理する
02
コンポーネントの粒度の指針
Atomic Design(アトミックデザイン)
① Atoms(アトム・原子)
② Molecules(モルキュール・分子)
③ Organisms(オルガニズム・生物)
④ Templates(テンプレート)
⑤...
Atomic Design(アトミックデザイン)
機能的にこれ以上分割できないコンポーネント
❶ Atoms
(アトム・原子)
Atomic Design(アトミックデザイン)
入力フィールドとボタン
Search
Atomic Design(アトミックデザイン)
Atoms を組み合わせた比較的シンプルなコンポーネント
❷ Molecules
(モルキュール・分子)
Atomic Design(アトミックデザイン)
Search
検索フォーム
Atomic Design(アトミックデザイン)
AtomsやMoleculesを組み合わせた比較的複雑な
コンポーネント
❸ Organisms
(オルガニズム・生物)
Atomic Design(アトミックデザイン)
グローバルヘッダー(左からサイトロゴ、ナビゲーション、検索フォーム)
Search
LOGO
Menu Item About Us Works
Atomic Designを導入するメリット
・コンポーネントの大きさを基準にするという
コンセプトが分りやすい
・コンポーネントは具体的な見た目を持っている
・コンポーネントの粒度が適度に細かい
コンポーネント同士をレイアウトする
03
コンポーネントは、
内包するコンポーネントに影響を与えられる
・Atomsは内包するコンポーネントを持たない
・MoleculesはAtomsを上書きできる
・OrganismsはMoleculesとAtomsを上書きできる
コンポーネント同士は
Templates(テンプレート)でレイアウトする
Atomic Design(アトミックデザイン)
ページレベルのオブジェクトで、
コンポーネント(Atoms・Molecules・Organisms)を配置して
ページの構成を整理する
❹ Templates
(テンプレート)
Atomic Design(アトミックデザイン)
ワイヤーフレームのような
レイアウト
header
footer
余白設計のパターンを考える
04
余白設計のパターンを考える
① margin-bottom パターン
② last-child パターン
③ Global パターン
④ Section パターン
⑤ Inset パターン
⑥ Grid パターン
⑦ Component パター...
①margin-bottomパターン - 余白設計の考え方
・マージンの相殺をできるだけ避けるため
上下両方の余白は避ける
・ページは上から下の方向で読むのが自然なので
下方向に余白をつけたほうが理解しやすい
① margin-bottom パターン - 余白設計の考え方
margin
marginmargin
margin
② last-childパターン - 余白設計の考え方
・コンポーネントには必ずラップ要素を用意する
・ラップ要素の直下にある最後の要素の
margin-bottomを0 にする
② last-child パターン - 余白設計の考え方
直下にある最後の要素の
マージンを確実に0にできるlast-child
margin-bottom: 0;
margin
.parent > *:last-child
wrap
③ Global パターン - 余白設計の考え方
・ヘッダーやフッター、コンテンツといった
共通部分のレイアウトは基本的に変わらない
・確定しているところから組み立てる
③ Global パターン - 余白設計の考え方
Globalパターンは
ワイヤーフレームのような
大きなレイアウトパターン
header
footer
④ Section パターン - 余白設計の考え方
・sectionを目安に余白を設計する
・自然にマシンリーダブルになる
④ Section パターン - 余白設計の考え方
sectionとsectionの間に
大きい余白が入る
<section>
<section>
margin
margin
⑤ Inset パターン - 余白設計の考え方
・marginではなくpadding で余白をとる
・背景色をともなうことが多い
⑤ Inset パターン - 余白設計の考え方
それぞれの sectionごとに
paddingで上下左右の余白を
つける
padding
⑥ Gridパターン - 余白設計の考え方
・コンポーネントのパターン化
・レスポンシブ対応
⑥ Gridパターン - 余白設計の考え方
margin
margin
m
a
r
g
i
n
marginmargin
⑦ Componentパターン - 余白設計の考え方
・汎用的なGrid パターンは適材適所
・コンポーネントごとに
専用の余白を持たせることも検討する
⑧ Bodyパターン - 余白設計の考え方
・必ず必要な要素(body)を基準に考える
・必ずしも必要ではない要素(head,foot)に
余白をつける
⑧ Bodyパターン - 余白設計の考え方
body
head部分
foot部分
head
margin-bottom
body
foot
margin-top
・UIを部品化(コンポーネント化)する
・コンポーネントを組み合わせてページを作る
・Atomic Designでコンポーネントの粒度を明確にする
・8つの余白パターンをベースに余白設計を考える
まとめ
ありがとうございました。
slide writing : yasuda manabu
slide design : nakajima eri
Upcoming SlideShare
Loading in …5
×

コンポーネント指向と余白の設計

10,940 views

Published on

CSS Talk Vol.2の資料です。

Published in: Design
  • Be the first to comment

コンポーネント指向と余白の設計

  1. 1. CSS Talk vol.02 Manabu Yasuda コンポーネント指向と 余白の設計
  2. 2. INTRODUCTION 自己紹介
  3. 3. 安田 学 (Yasuda Manabu) 株式会社 TAM マークアップエンジニア https://github.com/manabuyasuda @ Gaku0318
  4. 4. 01. コンポーネント指向とはなにか 02. コンポーネントの粒度を整理する 03. コンポーネント同士をレイアウトする 04. 余白設計のパターンを考える アジェンダ
  5. 5. コンポーネント指向とはなにか 01
  6. 6. コンポーネント指向とはなにか ・コンポーネント = UI を部品化した状態 ・コンポーネントの組み合わせ = ページ
  7. 7. コンポーネントのイメージ
  8. 8. コンポーネントのイメージ
  9. 9. コーディング面でのメリット ・小さな単位でコードを考えることができる ・理解しやすく保守しやすいコードになる Component Oriented and Margin Design 08
  10. 10. デザイン面でのメリット ・デザインの再利用ができる ・デザインの手離れがはやい
  11. 11. コンポーネントの粒度を整理する 02
  12. 12. コンポーネントの粒度の指針 Atomic Design(アトミックデザイン) ① Atoms(アトム・原子) ② Molecules(モルキュール・分子) ③ Organisms(オルガニズム・生物) ④ Templates(テンプレート) ⑤ Pages(ページ)
  13. 13. Atomic Design(アトミックデザイン) 機能的にこれ以上分割できないコンポーネント ❶ Atoms (アトム・原子)
  14. 14. Atomic Design(アトミックデザイン) 入力フィールドとボタン Search
  15. 15. Atomic Design(アトミックデザイン) Atoms を組み合わせた比較的シンプルなコンポーネント ❷ Molecules (モルキュール・分子)
  16. 16. Atomic Design(アトミックデザイン) Search 検索フォーム
  17. 17. Atomic Design(アトミックデザイン) AtomsやMoleculesを組み合わせた比較的複雑な コンポーネント ❸ Organisms (オルガニズム・生物)
  18. 18. Atomic Design(アトミックデザイン) グローバルヘッダー(左からサイトロゴ、ナビゲーション、検索フォーム) Search LOGO Menu Item About Us Works
  19. 19. Atomic Designを導入するメリット ・コンポーネントの大きさを基準にするという コンセプトが分りやすい ・コンポーネントは具体的な見た目を持っている ・コンポーネントの粒度が適度に細かい
  20. 20. コンポーネント同士をレイアウトする 03
  21. 21. コンポーネントは、 内包するコンポーネントに影響を与えられる ・Atomsは内包するコンポーネントを持たない ・MoleculesはAtomsを上書きできる ・OrganismsはMoleculesとAtomsを上書きできる
  22. 22. コンポーネント同士は Templates(テンプレート)でレイアウトする
  23. 23. Atomic Design(アトミックデザイン) ページレベルのオブジェクトで、 コンポーネント(Atoms・Molecules・Organisms)を配置して ページの構成を整理する ❹ Templates (テンプレート)
  24. 24. Atomic Design(アトミックデザイン) ワイヤーフレームのような レイアウト header footer
  25. 25. 余白設計のパターンを考える 04
  26. 26. 余白設計のパターンを考える ① margin-bottom パターン ② last-child パターン ③ Global パターン ④ Section パターン ⑤ Inset パターン ⑥ Grid パターン ⑦ Component パターン ⑧ Body パターン
  27. 27. ①margin-bottomパターン - 余白設計の考え方 ・マージンの相殺をできるだけ避けるため 上下両方の余白は避ける ・ページは上から下の方向で読むのが自然なので 下方向に余白をつけたほうが理解しやすい
  28. 28. ① margin-bottom パターン - 余白設計の考え方 margin marginmargin margin
  29. 29. ② last-childパターン - 余白設計の考え方 ・コンポーネントには必ずラップ要素を用意する ・ラップ要素の直下にある最後の要素の margin-bottomを0 にする
  30. 30. ② last-child パターン - 余白設計の考え方 直下にある最後の要素の マージンを確実に0にできるlast-child margin-bottom: 0; margin .parent > *:last-child wrap
  31. 31. ③ Global パターン - 余白設計の考え方 ・ヘッダーやフッター、コンテンツといった 共通部分のレイアウトは基本的に変わらない ・確定しているところから組み立てる
  32. 32. ③ Global パターン - 余白設計の考え方 Globalパターンは ワイヤーフレームのような 大きなレイアウトパターン header footer
  33. 33. ④ Section パターン - 余白設計の考え方 ・sectionを目安に余白を設計する ・自然にマシンリーダブルになる
  34. 34. ④ Section パターン - 余白設計の考え方 sectionとsectionの間に 大きい余白が入る <section> <section> margin margin
  35. 35. ⑤ Inset パターン - 余白設計の考え方 ・marginではなくpadding で余白をとる ・背景色をともなうことが多い
  36. 36. ⑤ Inset パターン - 余白設計の考え方 それぞれの sectionごとに paddingで上下左右の余白を つける padding
  37. 37. ⑥ Gridパターン - 余白設計の考え方 ・コンポーネントのパターン化 ・レスポンシブ対応
  38. 38. ⑥ Gridパターン - 余白設計の考え方 margin margin m a r g i n marginmargin
  39. 39. ⑦ Componentパターン - 余白設計の考え方 ・汎用的なGrid パターンは適材適所 ・コンポーネントごとに 専用の余白を持たせることも検討する
  40. 40. ⑧ Bodyパターン - 余白設計の考え方 ・必ず必要な要素(body)を基準に考える ・必ずしも必要ではない要素(head,foot)に 余白をつける
  41. 41. ⑧ Bodyパターン - 余白設計の考え方 body head部分 foot部分 head margin-bottom body foot margin-top
  42. 42. ・UIを部品化(コンポーネント化)する ・コンポーネントを組み合わせてページを作る ・Atomic Designでコンポーネントの粒度を明確にする ・8つの余白パターンをベースに余白設計を考える まとめ
  43. 43. ありがとうございました。 slide writing : yasuda manabu slide design : nakajima eri

×