SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Downloaden Sie, um offline zu lesen
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(テンプレート)
⑤ Pages(ページ)
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 パターン
⑧ Body パターン
①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

Weitere ähnliche Inhalte

Was ist angesagt?

デキるプログラマだけが知っているコードレビュー7つの秘訣
デキるプログラマだけが知っているコードレビュー7つの秘訣デキるプログラマだけが知っているコードレビュー7つの秘訣
デキるプログラマだけが知っているコードレビュー7つの秘訣Masahiro Nishimi
 
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方増田 亨
 
Unityでオニオンアーキテクチャ
UnityでオニオンアーキテクチャUnityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャtorisoup
 
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話Yoshitaka Kawashima
 
C# 8.0 非同期ストリーム
C# 8.0 非同期ストリームC# 8.0 非同期ストリーム
C# 8.0 非同期ストリーム信之 岩永
 
ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?Yoshitaka Kawashima
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織Takafumi ONAKA
 
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】dcubeio
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさYoshiki Hayama
 
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来についてshinjiigarashi
 
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~Masahito Zembutsu
 
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方増田 亨
 
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~torisoup
 
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発Takafumi ONAKA
 
オブジェクト指向プログラミングの現在・過去・未来
オブジェクト指向プログラミングの現在・過去・未来オブジェクト指向プログラミングの現在・過去・未来
オブジェクト指向プログラミングの現在・過去・未来増田 亨
 
UI 開発をアジャイルに行うための Atomic Design
UI 開発をアジャイルに行うための Atomic DesignUI 開発をアジャイルに行うための Atomic Design
UI 開発をアジャイルに行うための Atomic DesignYusuke Goto
 
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門増田 亨
 
ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門増田 亨
 
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチYoshiki Hayama
 
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jpテストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jpkyon mm
 

Was ist angesagt? (20)

デキるプログラマだけが知っているコードレビュー7つの秘訣
デキるプログラマだけが知っているコードレビュー7つの秘訣デキるプログラマだけが知っているコードレビュー7つの秘訣
デキるプログラマだけが知っているコードレビュー7つの秘訣
 
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
 
Unityでオニオンアーキテクチャ
UnityでオニオンアーキテクチャUnityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャ
 
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
 
C# 8.0 非同期ストリーム
C# 8.0 非同期ストリームC# 8.0 非同期ストリーム
C# 8.0 非同期ストリーム
 
ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
 
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
 
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
 
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
 
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方
 
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
 
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
 
オブジェクト指向プログラミングの現在・過去・未来
オブジェクト指向プログラミングの現在・過去・未来オブジェクト指向プログラミングの現在・過去・未来
オブジェクト指向プログラミングの現在・過去・未来
 
UI 開発をアジャイルに行うための Atomic Design
UI 開発をアジャイルに行うための Atomic DesignUI 開発をアジャイルに行うための Atomic Design
UI 開発をアジャイルに行うための Atomic Design
 
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
 
ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門
 
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
 
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jpテストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
 

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

お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~典子 松本
 
IA2010 - アジャイル時代のWeb解析事例
IA2010 -  アジャイル時代のWeb解析事例IA2010 -  アジャイル時代のWeb解析事例
IA2010 - アジャイル時代のWeb解析事例Makoto Shimizu
 
グローバルなCSSコンポーネントを避ける
グローバルなCSSコンポーネントを避けるグローバルなCSSコンポーネントを避ける
グローバルなCSSコンポーネントを避けるManabu Yasuda
 
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャマークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ力也 伊原
 
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術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 TokyoTC x IA "UX Design" Technical Communication Symposium 2012 Tokyo
TC x IA "UX Design" Technical Communication Symposium 2012 TokyoTakashi 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...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人で考える、理想的なサイトマップの形と標準書式」第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」WebSig24/7
 
古くて新しいアプリケーション分割の話
古くて新しいアプリケーション分割の話古くて新しいアプリケーション分割の話
古くて新しいアプリケーション分割の話tadashi hashimoto
 
Swiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考えるSwiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考えるTakuya Kitamura
 
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】Tomoharu ASAMI
 
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)Koichiro Matsuoka
 
これって、ドメイン駆動設計?
これって、ドメイン駆動設計?これって、ドメイン駆動設計?
これって、ドメイン駆動設計?Michitaka Yumoto
 
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離Manabu Yasuda
 
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法日本マイクロソフト株式会社
 

Ähnlich wie コンポーネント指向と余白の設計 (16)

お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
 
IA2010 - アジャイル時代のWeb解析事例
IA2010 -  アジャイル時代のWeb解析事例IA2010 -  アジャイル時代のWeb解析事例
IA2010 - アジャイル時代のWeb解析事例
 
グローバルなCSSコンポーネントを避ける
グローバルなCSSコンポーネントを避けるグローバルなCSSコンポーネントを避ける
グローバルなCSSコンポーネントを避ける
 
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャマークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
 
a-blog cms 導入サイトのためのデザインカンプ制作術
a-blog cms 導入サイトのためのデザインカンプ制作術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 TokyoTC 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...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人で考える、理想的なサイトマップの形と標準書式」第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」
 
古くて新しいアプリケーション分割の話
古くて新しいアプリケーション分割の話古くて新しいアプリケーション分割の話
古くて新しいアプリケーション分割の話
 
Swiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考えるSwiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考える
 
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
設計/コンポーネント設計(3) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第22回】
 
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
 
これって、ドメイン駆動設計?
これって、ドメイン駆動設計?これって、ドメイン駆動設計?
これって、ドメイン駆動設計?
 
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
 
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
【de:code 2020】 IT インフラをモダナイズ?今、検討すべきクラウドの活用方法
 

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