Soumettre la recherche
Mettre en ligne
コンポーネント指向と余白の設計
•
34 j'aime
•
24,347 vues
Manabu Yasuda
Suivre
CSS Talk Vol.2の資料です。
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 43
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
ソフトウェア開発のやり方の改善
ソフトウェア開発のやり方の改善
増田 亨
概念モデリング再入門 + DDD
概念モデリング再入門 + DDD
Hiroshima JUG
ドメイン駆動で開発する ラフスケッチから実装まで
ドメイン駆動で開発する ラフスケッチから実装まで
増田 亨
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
Recommandé
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
ソフトウェア開発のやり方の改善
ソフトウェア開発のやり方の改善
増田 亨
概念モデリング再入門 + DDD
概念モデリング再入門 + DDD
Hiroshima JUG
ドメイン駆動で開発する ラフスケッチから実装まで
ドメイン駆動で開発する ラフスケッチから実装まで
増田 亨
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
世界最強のソフトウェアアーキテクト
世界最強のソフトウェアアーキテクト
Yahoo!デベロッパーネットワーク
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
マイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチ
増田 亨
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
Atsushi Nakamura
ソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考える
増田 亨
ドメイン駆動設計という仕事の流儀
ドメイン駆動設計という仕事の流儀
増田 亨
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
Yoshitaka Kawashima
ドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解する
増田 亨
PostgreSQLアンチパターン
PostgreSQLアンチパターン
Soudai Sone
Product ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについて
Noritaka Shinohara
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
増田 亨
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Takuto Wada
Web開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor App
TomomitsuKusaba
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
典子 松本
IA2010 - アジャイル時代のWeb解析事例
IA2010 - アジャイル時代のWeb解析事例
Makoto Shimizu
Contenu connexe
Tendances
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
世界最強のソフトウェアアーキテクト
世界最強のソフトウェアアーキテクト
Yahoo!デベロッパーネットワーク
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
マイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチ
増田 亨
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
Atsushi Nakamura
ソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考える
増田 亨
ドメイン駆動設計という仕事の流儀
ドメイン駆動設計という仕事の流儀
増田 亨
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
Yoshitaka Kawashima
ドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解する
増田 亨
PostgreSQLアンチパターン
PostgreSQLアンチパターン
Soudai Sone
Product ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについて
Noritaka Shinohara
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
増田 亨
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Takuto Wada
Web開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor App
TomomitsuKusaba
Tendances
(20)
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
世界最強のソフトウェアアーキテクト
世界最強のソフトウェアアーキテクト
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
マイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチ
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
ソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考える
ドメイン駆動設計という仕事の流儀
ドメイン駆動設計という仕事の流儀
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
ドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解する
PostgreSQLアンチパターン
PostgreSQLアンチパターン
Product ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについて
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
SQLアンチパターン - 開発者を待ち受ける25の落とし穴 (拡大版)
Web開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor App
Similaire à コンポーネント指向と余白の設計
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
典子 松本
IA2010 - アジャイル時代のWeb解析事例
IA2010 - アジャイル時代のWeb解析事例
Makoto Shimizu
グローバルなCSSコンポーネントを避ける
グローバルなCSSコンポーネントを避ける
Manabu Yasuda
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
Risako Imai
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
Takashi Sakamoto
Frameworks We Live By: Design by day-to-day framework development: Multi-para...
Frameworks We Live By: Design by day-to-day framework development: Multi-para...
Atsuhiro Kubo
ドメイン駆動設計とは何か 【入門編】
ドメイン駆動設計とは何か 【入門編】
増田 亨
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」
WebSig24/7
古くて新しいアプリケーション分割の話
古くて新しいアプリケーション分割の話
tadashi hashimoto
Swiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考える
Takuya Kitamura
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
Tomoharu ASAMI
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
Koichiro Matsuoka
これって、ドメイン駆動設計?
これって、ドメイン駆動設計?
Michitaka Yumoto
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
Manabu Yasuda
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
日本マイクロソフト株式会社
Similaire à コンポーネント指向と余白の設計
(16)
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
IA2010 - アジャイル時代のWeb解析事例
IA2010 - アジャイル時代のWeb解析事例
グローバルなCSSコンポーネントを避ける
グローバルなCSSコンポーネントを避ける
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
TC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
Frameworks We Live By: Design by day-to-day framework development: Multi-para...
Frameworks We Live By: Design by day-to-day framework development: Multi-para...
ドメイン駆動設計とは何か 【入門編】
ドメイン駆動設計とは何か 【入門編】
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」
古くて新しいアプリケーション分割の話
古くて新しいアプリケーション分割の話
Swiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考える
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
これって、ドメイン駆動設計?
これって、ドメイン駆動設計?
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
コンポーネント指向と余白の設計
1.
CSS Talk vol.02
Manabu Yasuda コンポーネント指向と 余白の設計
2.
INTRODUCTION 自己紹介
3.
安田 学 (Yasuda
Manabu) 株式会社 TAM マークアップエンジニア https://github.com/manabuyasuda @ Gaku0318
4.
01. コンポーネント指向とはなにか 02. コンポーネントの粒度を整理する 03.
コンポーネント同士をレイアウトする 04. 余白設計のパターンを考える アジェンダ
5.
コンポーネント指向とはなにか 01
6.
コンポーネント指向とはなにか ・コンポーネント = UI
を部品化した状態 ・コンポーネントの組み合わせ = ページ
7.
コンポーネントのイメージ
8.
コンポーネントのイメージ
9.
コーディング面でのメリット ・小さな単位でコードを考えることができる ・理解しやすく保守しやすいコードになる Component Oriented and
Margin Design 08
10.
デザイン面でのメリット ・デザインの再利用ができる ・デザインの手離れがはやい
11.
コンポーネントの粒度を整理する 02
12.
コンポーネントの粒度の指針 Atomic Design(アトミックデザイン) ① Atoms(アトム・原子) ②
Molecules(モルキュール・分子) ③ Organisms(オルガニズム・生物) ④ Templates(テンプレート) ⑤ Pages(ページ)
13.
Atomic Design(アトミックデザイン) 機能的にこれ以上分割できないコンポーネント ❶ Atoms (アトム・原子)
14.
Atomic Design(アトミックデザイン) 入力フィールドとボタン Search
15.
Atomic Design(アトミックデザイン) Atoms を組み合わせた比較的シンプルなコンポーネント ❷
Molecules (モルキュール・分子)
16.
Atomic Design(アトミックデザイン) Search 検索フォーム
17.
Atomic Design(アトミックデザイン) AtomsやMoleculesを組み合わせた比較的複雑な コンポーネント ❸ Organisms (オルガニズム・生物)
18.
Atomic Design(アトミックデザイン) グローバルヘッダー(左からサイトロゴ、ナビゲーション、検索フォーム) Search LOGO Menu Item
About Us Works
19.
Atomic Designを導入するメリット ・コンポーネントの大きさを基準にするという コンセプトが分りやすい ・コンポーネントは具体的な見た目を持っている ・コンポーネントの粒度が適度に細かい
20.
コンポーネント同士をレイアウトする 03
21.
コンポーネントは、 内包するコンポーネントに影響を与えられる ・Atomsは内包するコンポーネントを持たない ・MoleculesはAtomsを上書きできる ・OrganismsはMoleculesとAtomsを上書きできる
22.
コンポーネント同士は Templates(テンプレート)でレイアウトする
23.
Atomic Design(アトミックデザイン) ページレベルのオブジェクトで、 コンポーネント(Atoms・Molecules・Organisms)を配置して ページの構成を整理する ❹ Templates (テンプレート)
24.
Atomic Design(アトミックデザイン) ワイヤーフレームのような レイアウト header footer
25.
余白設計のパターンを考える 04
26.
余白設計のパターンを考える ① margin-bottom パターン ②
last-child パターン ③ Global パターン ④ Section パターン ⑤ Inset パターン ⑥ Grid パターン ⑦ Component パターン ⑧ Body パターン
27.
①margin-bottomパターン - 余白設計の考え方 ・マージンの相殺をできるだけ避けるため 上下両方の余白は避ける ・ページは上から下の方向で読むのが自然なので 下方向に余白をつけたほうが理解しやすい
28.
① margin-bottom パターン
- 余白設計の考え方 margin marginmargin margin
29.
② last-childパターン -
余白設計の考え方 ・コンポーネントには必ずラップ要素を用意する ・ラップ要素の直下にある最後の要素の margin-bottomを0 にする
30.
② last-child パターン
- 余白設計の考え方 直下にある最後の要素の マージンを確実に0にできるlast-child margin-bottom: 0; margin .parent > *:last-child wrap
31.
③ Global パターン
- 余白設計の考え方 ・ヘッダーやフッター、コンテンツといった 共通部分のレイアウトは基本的に変わらない ・確定しているところから組み立てる
32.
③ Global パターン
- 余白設計の考え方 Globalパターンは ワイヤーフレームのような 大きなレイアウトパターン header footer
33.
④ Section パターン
- 余白設計の考え方 ・sectionを目安に余白を設計する ・自然にマシンリーダブルになる
34.
④ Section パターン
- 余白設計の考え方 sectionとsectionの間に 大きい余白が入る <section> <section> margin margin
35.
⑤ Inset パターン
- 余白設計の考え方 ・marginではなくpadding で余白をとる ・背景色をともなうことが多い
36.
⑤ Inset パターン
- 余白設計の考え方 それぞれの sectionごとに paddingで上下左右の余白を つける padding
37.
⑥ Gridパターン -
余白設計の考え方 ・コンポーネントのパターン化 ・レスポンシブ対応
38.
⑥ Gridパターン -
余白設計の考え方 margin margin m a r g i n marginmargin
39.
⑦ Componentパターン -
余白設計の考え方 ・汎用的なGrid パターンは適材適所 ・コンポーネントごとに 専用の余白を持たせることも検討する
40.
⑧ Bodyパターン -
余白設計の考え方 ・必ず必要な要素(body)を基準に考える ・必ずしも必要ではない要素(head,foot)に 余白をつける
41.
⑧ Bodyパターン -
余白設計の考え方 body head部分 foot部分 head margin-bottom body foot margin-top
42.
・UIを部品化(コンポーネント化)する ・コンポーネントを組み合わせてページを作る ・Atomic Designでコンポーネントの粒度を明確にする ・8つの余白パターンをベースに余白設計を考える まとめ
43.
ありがとうございました。 slide writing :
yasuda manabu slide design : nakajima eri
Télécharger maintenant