SlideShare a Scribd company logo
1 of 78
Download to read offline
Documenting

Design Rules

While Coding




!
!






✤
✤
✤ 



❖
❖
❖
❖
- Agenda -
- Step1 -




✤
✤
‣
✤ 

✤
✤
✤


Design

Rules








✤
✤
✤
✤


✤
✤
✤
✤
✤
✤
✤
✤
“
”
“
”








永あ Aa




‣
✤
✤
✤
✤
‣ 

- Step2 -
!
!
!
!
!


✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤
✤




あ
う
A
d
y
G
4
3
永
E
7
H
z
ら
漢
永あ
Aa
✤
✤
✤


永あ Aa








永あ Aa




- Step3 -
✤
✤
✤












!
!
"
! ! !
"
! ! !
"
! ! !








- HOW TO STUDY -


✤
✤
✤

 

✤
✤
✤
✤

 













#
- Result -










コーディングしながらデザインルールをドキュメント化してみた

More Related Content

More from Kasumi Morita

エンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニックエンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニックKasumi Morita
 
数が増えてもこわくない!Quantity Queries の紹介
数が増えてもこわくない!Quantity Queries の紹介数が増えてもこわくない!Quantity Queries の紹介
数が増えてもこわくない!Quantity Queries の紹介Kasumi Morita
 
とってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りましたとってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りましたKasumi Morita
 
1から始めるAMP対応
1から始めるAMP対応1から始めるAMP対応
1から始めるAMP対応Kasumi Morita
 
Sassを使いこなそう
Sassを使いこなそうSassを使いこなそう
Sassを使いこなそうKasumi Morita
 
マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方Kasumi Morita
 
a-blog cms でAMPに対応する
a-blog cms でAMPに対応するa-blog cms でAMPに対応する
a-blog cms でAMPに対応するKasumi Morita
 
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
マークアップって重要なの?あなたへ伝えたいマークアップの大切さマークアップって重要なの?あなたへ伝えたいマークアップの大切さ
マークアップって重要なの?あなたへ伝えたいマークアップの大切さKasumi Morita
 
マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法Kasumi Morita
 
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズもっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズKasumi Morita
 
a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?Kasumi Morita
 
絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところ絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところKasumi Morita
 
a-blog cms の2016年版新テーマについて
a-blog cms の2016年版新テーマについてa-blog cms の2016年版新テーマについて
a-blog cms の2016年版新テーマについてKasumi Morita
 
実装のしかたと運用方法から選ぶ a-blog cms の紹介
実装のしかたと運用方法から選ぶ a-blog cms の紹介実装のしかたと運用方法から選ぶ a-blog cms の紹介
実装のしかたと運用方法から選ぶ a-blog cms の紹介Kasumi Morita
 
ユニットリストのおすすめの使い方
ユニットリストのおすすめの使い方ユニットリストのおすすめの使い方
ユニットリストのおすすめの使い方Kasumi Morita
 
a-blog cms の基本 Ver.Kochi
a-blog cms の基本 Ver.Kochia-blog cms の基本 Ver.Kochi
a-blog cms の基本 Ver.KochiKasumi Morita
 
CSSできる SVGアニメーション
CSSできる SVGアニメーションCSSできる SVGアニメーション
CSSできる SVGアニメーションKasumi Morita
 
a-blog cms の基本 福岡版
a-blog cms の基本 福岡版a-blog cms の基本 福岡版
a-blog cms の基本 福岡版Kasumi Morita
 
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイントa-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイントKasumi Morita
 
a-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいこと
a-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいことa-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいこと
a-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいことKasumi Morita
 

More from Kasumi Morita (20)

エンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニックエンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニック
 
数が増えてもこわくない!Quantity Queries の紹介
数が増えてもこわくない!Quantity Queries の紹介数が増えてもこわくない!Quantity Queries の紹介
数が増えてもこわくない!Quantity Queries の紹介
 
とってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りましたとってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りました
 
1から始めるAMP対応
1から始めるAMP対応1から始めるAMP対応
1から始めるAMP対応
 
Sassを使いこなそう
Sassを使いこなそうSassを使いこなそう
Sassを使いこなそう
 
マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方
 
a-blog cms でAMPに対応する
a-blog cms でAMPに対応するa-blog cms でAMPに対応する
a-blog cms でAMPに対応する
 
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
マークアップって重要なの?あなたへ伝えたいマークアップの大切さマークアップって重要なの?あなたへ伝えたいマークアップの大切さ
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
 
マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法マークアップの最適解を
見つけ出す方法
マークアップの最適解を
見つけ出す方法
 
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズもっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
 
a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?
 
絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところ絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところ
 
a-blog cms の2016年版新テーマについて
a-blog cms の2016年版新テーマについてa-blog cms の2016年版新テーマについて
a-blog cms の2016年版新テーマについて
 
実装のしかたと運用方法から選ぶ a-blog cms の紹介
実装のしかたと運用方法から選ぶ a-blog cms の紹介実装のしかたと運用方法から選ぶ a-blog cms の紹介
実装のしかたと運用方法から選ぶ a-blog cms の紹介
 
ユニットリストのおすすめの使い方
ユニットリストのおすすめの使い方ユニットリストのおすすめの使い方
ユニットリストのおすすめの使い方
 
a-blog cms の基本 Ver.Kochi
a-blog cms の基本 Ver.Kochia-blog cms の基本 Ver.Kochi
a-blog cms の基本 Ver.Kochi
 
CSSできる SVGアニメーション
CSSできる SVGアニメーションCSSできる SVGアニメーション
CSSできる SVGアニメーション
 
a-blog cms の基本 福岡版
a-blog cms の基本 福岡版a-blog cms の基本 福岡版
a-blog cms の基本 福岡版
 
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイントa-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
 
a-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいこと
a-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいことa-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいこと
a-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいこと