SlideShare a Scribd company logo
本当は怖いCSSの話
大規模サイトにおける
Makoto Inoue Talk of CSS fearful in fact
井上 誠
三重県伊勢市出身
金沢美大工芸科卒業
DMM.com Labo勤務
入社8年目
デザイン部チーフ
twitter: @in0in0
facebook: http://www.facebook.com/in0in0
Makoto Inoue Talk of CSS fearful in fact
CSSの何が怖いの?
A thing with what dreadful of CSS?
影響範囲が広い
エラーを吐かない
id,classがサイト中に分散する
小規模だと問題は起こりにくい
規模が大きくなるとトラブルが…
確認する
<p class=”btn check”>
チェックボックス✓
<input type=”checkbox”
class=”check”>
段落です
p span{color:blue;
margin:20px}
<p class=”btn”>
<span>ボタン</span></p>
ボタン
定義済みのid,class名をつけた
要素の再定義で崩れた
ボタン
check!
ボタン
check!
ボタン
check!
hoge.html
fuga.html
moge.html
ボタン
check!
hage.html
ボタン
ボタン
ボタン
.button{
...}
.bt{...}
.botan{
...}
ボタン
.btn{...}
影響範囲が大きく修正しづらい
無計画にコピペされている
共通ボタン 例外ボタン共通ボタン
デバイスの向きを変えられる
ユーザはいつでも、さまざまな理由でiOSデバイスの向きを変えることができます。たとえば、実行
する操作が縦長の向きのほうが自然に感じられる場合もあれば、横長のほうがより多くの情報を表示
できると感じられる場合もあります。デバイスの向きを変える理由が何であれ、アプリケーションの
主要な機能が見やすいままであることをユーザは期待します。
ユーザはホーム(Home)画面からアプリケーションを起動することが多く、そのためすべてのアプリ
ケーションが同じ向きで開始することを期待する傾向があります。iPhoneとiPadではホーム(Home)画
面の表示の仕方が異なるため、このような期待がアプリケーションに与える影響も異なります。
●
直接操作
ユーザは、画面上のオブジェクトを、別のコントロールを通じてではなく直接操作すると、より深く
作業に関わることになり、アクションの結果をより簡単に理解できます。iOSユーザは、Multi-Touch
インターフェイスのおかげで、直接操作の感覚をより高度に感じることができます。ジェスチャを使
用することで、ユーザはマウスなどの手段を用いることなく画面に表示されるオブジェクトにタッチ
することができるため、それらオブジェクトに対してより強い親しみの感覚や制御している感覚を持
ちます。
たとえば、ズームのコントロールをタップする代わりに、ピンチのジェスチャを通じてコンテンツの
領域を直接拡大、または縮小することができます。ゲームでは、プレーヤーが画面上のオブジェクト
を直接動かしたり、対話をしたりします。たとえば、ゲームによっては、回して開くダイヤル錠を表
示するものなどがあります。
iOSアプリケーションでは、以下の場合にユーザが直接操作を体験できます。
● 画面上のオブジェクトに影響を与えるため、デバイスを回転させたり、動かしたりするとき
● ジェスチャを使用して画面上のオブジェクトを操作するとき
● 自身のアクションが目に見える結果を即座にもたらす様子を見ることができるとき
フィードバック
ディスプレイはサイズに関係なくもっとも重要
iOSデバイスのディスプレイは、ユーザ体験の中心的位置を占めています。ユーザはきれいな文字、
グラフィック、メディアを見るだけでなく、(画面を見ることができなくても)Multi-Touch画面と指
で物理的にやり取りして操作を進めます。
iOSデバイスにはさまざまな寸法や解像度のディスプレイがありますが、使い勝手に関する限り、考
え方はいずれも同じです。
● タップ可能なUI要素の快適な最小サイズは44×44ポイントです。
● ユーザは一般に、アプリケーションアートワークの質を敏感に意識します。
● 画面表示が良好であれば、デバイスの違いを意識せず、本来の作業に集中できます。
注意: ピクセルとは、画像編集アプリケーションにおいて、デバイスの画面のサイズや作成
デバイスの向きを変えられる
ユーザはいつでも、さまざまな理由でiOSデバイスの向きを変えることができます。たとえば、実行
する操作が縦長の向きのほうが自然に感じられる場合もあれば、横長のほうがより多くの情報を表示
できると感じられる場合もあります。デバイスの向きを変える理由が何であれ、アプリケーションの
主要な機能が見やすいままであることをユーザは期待します。
ユーザが対話するのは一度に1つのアプリケーション
フォアグラウンドに表示できるのは一度に1つのアプリケーシ
ションから別のアプリケーションに切り替えると、前のアプ
し、そのユーザインターフェイスも表示されなくなります。こ
ユーザが再起動または停止するまで、アプリケーションをバ
ます。
ほとんどのアプリケーションは、バックグラウンドに移行す
状態のアプリケーションはマルチタスクUIに表示されるので、
易に切り替えることができます。マルチタスクUIは画面の一番
ションのUIまたはホーム(Home)画面の下に表示されます(次
リ
ケーションの場合)。
共通化しすぎて最適化できない
レギュレーションが足かせに
全部実際に起こりました
これなら怖くない!
大規模サイトCSS設計の勘所
The vital point of a large-scale site CSS design
指定の衝突、ダメ絶対!1
全体共有のセレクタは明確に
.worklist{...}
場所をなるべく限定する
#list .worklist p
#list p
.d-worklist{...}
例:接頭辞で明確にして衝突を回避する
将来の修正、変更を考える2
id,classの命名は意味的に
.caution{color:red}
.red{color:red}
指定がなくてもclassをつける
<div class=”listbox”>
<div>
組織の要件に合わせた
CSS設計をする
3
ストラクチャタイプ
HTML構造を重視、構造に沿ったCSS指定をしていく
組織の要件に合わせた
CSS設計をする
3
ストラクチャタイプ
HTML構造を重視、構造に沿ったCSS指定をしていく
#page-top #list {…}
#page-top #list .worklist li {…}
<body id="page-top">
  <div id="list">
    <ul class=”worklist”>
<li>...</li>
</ul>
CSS
HTML
・ページごとに最適化が可能
・デザイン修正のみならCSSだけで対応できる
メリット
・パーツを使いまわしにくい
・記述が冗長で開発、修正に時間がかかる
デメリット
デザイン、最適化重視の要件
sassで
解決
ストラクチャタイプ
HTML構造を重視、構造に沿ったCSS指定をしていく
組織の要件に合わせた
CSS設計をする
3
モジュールタイプ
可搬性のあるパーツ単位でHTMLとCSSを作成する
モジュールタイプ
可搬性のあるパーツ単位でHTMLとCSSを作成する
ul.worklist li {…}
ul.favoritelist li {…}
<ul class="worklist">
  <li>...
</ul>
<ul class="favoritelist">
  <li>...
</ul>
CSS
HTML
スピード、保守コスト重視の要件
モジュールタイプ
可搬性のあるパーツ単位でHTMLとCSSを作成する
・パーツ一覧からコピペで開発ができる
・デザイン統一がしやすい
メリット
・パーツ修正の検証範囲が広い
・ページ単位のデザイン最適化がしにくい
デメリット
組織の要件に合わせた
CSS設計をする
3
オブジェクトタイプ
class指定の組み合わせでパーツの見た目を定義する
オブジェクトタイプ
class指定の組み合わせでパーツの見た目を定義する
.headline{font-size:18px}
.caution{color:red; font-weight:bold}
.center{text-align:center}
<p class="headline caution center">...
<div class="caution center">...
CSS
HTML
フレームワーク重視の要件
オブジェクトタイプ
class指定の組み合わせでパーツの見た目を定義する
・CSSファイルを触らずに開発ができる
・コピペで開発ができる
メリット
・CSS設計にスキルを要する
・CSS修正による影響予測が困難
デメリット
組み合わせて使用してOK
単一ページ:「ストラクチャタイプ」
サイト全体:「モジュールタイプ」
未使用 :「オブジェクトタイプ」
うちの要件には合わなかった
DMMでは…
まとめ
・大規模サイトでは運用を考慮する
・CSS指定の衝突は絶対避ける
・組織の要件に合わせて設計する
ご清聴ありがとうございました
Makoto Inoue Talk of CSS fearful in fact

More Related Content

PDF
HTML5, きちんと。
PDF
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
PDF
CSS Dasar #7 : Selector
PDF
카카오스토리 웹팀의 코드리뷰 경험
PDF
생산성을 높여주는 iOS 개발 방법들.pdf
PDF
ReactorKit으로 단방향 반응형 앱 만들기
PPTX
MVC, MVVM, ReactorKit, VIPER를 거쳐 RIB 정착기
PDF
SQLアンチパターン読書会 4章 キーレスエンエントリ(外部キー嫌い)
HTML5, きちんと。
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
CSS Dasar #7 : Selector
카카오스토리 웹팀의 코드리뷰 경험
생산성을 높여주는 iOS 개발 방법들.pdf
ReactorKit으로 단방향 반응형 앱 만들기
MVC, MVVM, ReactorKit, VIPER를 거쳐 RIB 정착기
SQLアンチパターン読書会 4章 キーレスエンエントリ(外部キー嫌い)

What's hot (20)

PDF
Acessibilidade Web: Primeiros passos
PPT
Html & Css presentation
PDF
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
PDF
HTML Dasar : #7 Hyperlink
PPT
WordPress Complete Tutorial
PPTX
Git basic
PDF
AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20
PPTX
Introduction to Tailwind CSS - Berkenalan dengan Tailwind CSS.pptx
PPTX
4. 대용량 아키텍쳐 설계 패턴
PDF
CSS Dasar #2 : Anatomy CSS
PPTX
SMACSS入門
PDF
Lab#5 style and selector
PDF
Understanding Branching and Merging in Git
PPTX
Html5 and-css3-overview
PDF
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
PDF
HTML Dasar : #4 Paragraf
PDF
날고 있는 여러 비행기 넘나 들며 정비하기
PDF
CSS Dasar #4 : Font Styling
PDF
HTML Dasar : #6 List
PDF
Datadog을 활용한 Elastic Kubernetes Service(EKS)에서의 마이크로서비스 통합 가시성 - 정영석 시니어 세일즈 ...
Acessibilidade Web: Primeiros passos
Html & Css presentation
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...
HTML Dasar : #7 Hyperlink
WordPress Complete Tutorial
Git basic
AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20
Introduction to Tailwind CSS - Berkenalan dengan Tailwind CSS.pptx
4. 대용량 아키텍쳐 설계 패턴
CSS Dasar #2 : Anatomy CSS
SMACSS入門
Lab#5 style and selector
Understanding Branching and Merging in Git
Html5 and-css3-overview
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
HTML Dasar : #4 Paragraf
날고 있는 여러 비행기 넘나 들며 정비하기
CSS Dasar #4 : Font Styling
HTML Dasar : #6 List
Datadog을 활용한 Elastic Kubernetes Service(EKS)에서의 마이크로서비스 통합 가시성 - 정영석 시니어 세일즈 ...
Ad

Viewers also liked (20)

PDF
なんでCSSすぐ死んでしまうん
PDF
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
PDF
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
PPTX
2016年版 フロントエンド開発フォーマット
PDF
メンテナブルでありつづけるためのCSS設計
PDF
CSS の歩き方
PDF
ブラウザにやさしいHTML/CSS
PDF
今必要なCSSアーキテクチャ
PDF
モダンなCSS設計パターンを考える
PDF
Thinking about CSS Architecture
PDF
今からハジメるHTML5マークアップ
PDF
プログラマがデザインをがんばってみた
PDF
Web design
PDF
ノンデザイナーのためのWebデザイン講座
PDF
プログラマがWebデザインについて考えてみた
PDF
Webデザインのトーン&マナーを導き出す手法
PDF
デザインのためのデザイン
PDF
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
PDF
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
PDF
Webデザインのセオリーを学ぼう
なんでCSSすぐ死んでしまうん
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
2016年版 フロントエンド開発フォーマット
メンテナブルでありつづけるためのCSS設計
CSS の歩き方
ブラウザにやさしいHTML/CSS
今必要なCSSアーキテクチャ
モダンなCSS設計パターンを考える
Thinking about CSS Architecture
今からハジメるHTML5マークアップ
プログラマがデザインをがんばってみた
Web design
ノンデザイナーのためのWebデザイン講座
プログラマがWebデザインについて考えてみた
Webデザインのトーン&マナーを導き出す手法
デザインのためのデザイン
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Webデザインのセオリーを学ぼう
Ad

大規模サイトにおける本当は怖いCSSの話