狠狠撸

狠狠撸Share a Scribd company logo
1
のつかいかた
2
putchom
2013年4月paperboy&co.に新卒で入社
2014年1月よりカラーミーショップに
3
Panorama
Bit
カラーミーキット
4
カラーミーキット
ってなに?
5
CSSフレームワーク
6
いつも同じCSSを
書いていませんか?
7
長い!
8
効率化したい
9
例えばボタンだと
通常のボタン
フレームワークのボ
タン
10
classを当てるだけ
11
最初からある程度
整ったデザインに
12
13
ショップデザインに最適
化させて
作りました
14
対象ユーザー
15
フリーの
デザイナー
16
制作会社
17
今後の展開
18
様々なカラムのHTMLテ
ンプレートを配布する
19
デザイン用
サンプルソースを
用意する
20
1. カラーミーキットを触ってみよう
2. 実践カスタマイズ
今日やること
21
1. カラーミーキットを
触ってみよう
22
テンプレート追加
23
HTML編集
24
エディター紹介
25
sublimetext2
26
休憩です
27
実際に書きながら
覚えていきましょう
28
レスポンシブグリッド
29
n/12
30
Breakpoint Tester
31
ViewPort Resizer
32
visible
hidden
33
タイポグラフィー
34
リスト
35
unstyled
inline
36
table
37
ボタン
38
btn-xlg
39
アイコン
40
Icon-b icon-phone
41
2. 実践カスタマイズ
42
カラーミーキットは
カスタマイズ前提
43
実際のデザインは
上書きで
44
実践
ボタンを
カスタマイズ
45
ありがとう
ございました
Ad

Recommended

プロジェクト見える化計画 Web
プロジェクト見える化計画 Web
minamo
?
颁骋技术を魔法に喩えて分かりやすく!
颁骋技术を魔法に喩えて分かりやすく!
mamo20
?
カラーミーショップカスタマイズスクール?商品ヘ?ーシ?编
カラーミーショップカスタマイズスクール?商品ヘ?ーシ?编
ec-campus
?
奥别产テ?サ?イナー必见!『カラーミーショッフ?』カスタマイス?スクール~上级编~
奥别产テ?サ?イナー必见!『カラーミーショッフ?』カスタマイス?スクール~上级编~
ec-campus
?
【写真补正计画】序「コンハ?クトテ?シ?カメ编」
【写真补正计画】序「コンハ?クトテ?シ?カメ编」
ec-campus
?
【実践编】転换率の上か?る!商品ヘ?ーシ?の作り方
【実践编】転换率の上か?る!商品ヘ?ーシ?の作り方
ec-campus
?
キ?フトラッヒ?ンク?おすすめサイト
キ?フトラッヒ?ンク?おすすめサイト
ec-campus
?
ネットショッフ?开店スクールカリキュラム
ネットショッフ?开店スクールカリキュラム
ec-campus
?
ネットショッフ?开店スクールカリキュラム20140116
ネットショッフ?开店スクールカリキュラム20140116
ec-campus
?
カラーミーショップ「カスタマイス?スクール第1期惫辞濒.1」
カラーミーショップ「カスタマイス?スクール第1期惫辞濒.1」
ec-campus
?
『カラーミーショッフ?』カスタマイス?スクール~トッフ?ヘ?ーシ?実践编~
『カラーミーショッフ?』カスタマイス?スクール~トッフ?ヘ?ーシ?実践编~
ec-campus
?
10倍売れる商品ヘ?ーシ?の作り方?実践编
10倍売れる商品ヘ?ーシ?の作り方?実践编
ec-campus
?
ゼロから始める贵补肠别产辞辞办広告~実践编~
ゼロから始める贵补肠别产辞辞办広告~実践编~
ec-growth-lab
?
山口県山阳小野田市贵补肠别产辞辞办セミナー颈苍小野田商工会议所
山口県山阳小野田市贵补肠别产辞辞办セミナー颈苍小野田商工会议所
新潟コンサルタント横田秀珠
?
【商品写真の処方笺】カメラマンも知らない商品写真3つの役割とすぐにできるフォトショ罢颈辫蝉でレスポンスを上げる方法
【商品写真の処方笺】カメラマンも知らない商品写真3つの役割とすぐにできるフォトショ罢颈辫蝉でレスポンスを上げる方法
ec-campus
?
照明て?ここまて?変わる!一眼レフて?はし?める商品写真撮影のイロハ?照明编?
照明て?ここまて?変わる!一眼レフて?はし?める商品写真撮影のイロハ?照明编?
ec-campus
?
搁础奥现像をマスターすれば写真が剧的に変わる!「商品撮影のイロハ?现像初级编?」
搁础奥现像をマスターすれば写真が剧的に変わる!「商品撮影のイロハ?现像初级编?」
ec-campus
?
Online seminar promotion
Online seminar promotion
ec-campus
?
BASE Apps紹介?活用セミナー
BASE Apps紹介?活用セミナー
ec-campus
?
叠础厂贰クリエイティブセミナー
叠础厂贰クリエイティブセミナー
ec-campus
?
ネットショップの集客に欠かせない滨苍蝉迟补驳谤补尘。ぶっちゃけどんな风に活用すればいいの!?
ネットショップの集客に欠かせない滨苍蝉迟补驳谤补尘。ぶっちゃけどんな风に活用すればいいの!?
ec-campus
?
竞合店と比较されないネットショップの作り方?ブランディングの重要性と今后の贰颁业界?
竞合店と比较されないネットショップの作り方?ブランディングの重要性と今后の贰颁业界?
ec-campus
?
厂苍蝉マーケティンク?最前线より生中継!アカウント运用のふ?っちゃけ&补尘辫;补尘辫;别肠事业者必见の広告施策
厂苍蝉マーケティンク?最前线より生中継!アカウント运用のふ?っちゃけ&补尘辫;补尘辫;别肠事业者必见の広告施策
ec-campus
?
配布用テ?コリエ开业セミナー
配布用テ?コリエ开业セミナー
ec-campus
?
スマホで简単?はじめての作品撮影&交流会?ちょっとしたコツで魅力ある作品写真に?
スマホで简単?はじめての作品撮影&交流会?ちょっとしたコツで魅力ある作品写真に?
ec-campus
?
はし?めてのネットショッフ?開店スクール 20141122
はし?めてのネットショッフ?開店スクール 20141122
ec-campus
?
具体例から学べるソーシャルメディア活用术?厂狈厂を駆使して人気ショップを目指そう!
具体例から学べるソーシャルメディア活用术?厂狈厂を駆使して人気ショップを目指そう!
ec-campus
?
【シリーズしゅうきゃく!!】コンテンツ厂贰翱成功の秘诀とは?!
【シリーズしゅうきゃく!!】コンテンツ厂贰翱成功の秘诀とは?!
ec-campus
?
これまて?の常识は非常识?ネット通贩をはし?める前の基础知识
これまて?の常识は非常识?ネット通贩をはし?める前の基础知识
ec-campus
?
実践編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるCRMの力
実践編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるCRMの力
ec-campus
?

More Related Content

Viewers also liked (9)

ネットショッフ?开店スクールカリキュラム20140116
ネットショッフ?开店スクールカリキュラム20140116
ec-campus
?
カラーミーショップ「カスタマイス?スクール第1期惫辞濒.1」
カラーミーショップ「カスタマイス?スクール第1期惫辞濒.1」
ec-campus
?
『カラーミーショッフ?』カスタマイス?スクール~トッフ?ヘ?ーシ?実践编~
『カラーミーショッフ?』カスタマイス?スクール~トッフ?ヘ?ーシ?実践编~
ec-campus
?
10倍売れる商品ヘ?ーシ?の作り方?実践编
10倍売れる商品ヘ?ーシ?の作り方?実践编
ec-campus
?
ゼロから始める贵补肠别产辞辞办広告~実践编~
ゼロから始める贵补肠别产辞辞办広告~実践编~
ec-growth-lab
?
山口県山阳小野田市贵补肠别产辞辞办セミナー颈苍小野田商工会议所
山口県山阳小野田市贵补肠别产辞辞办セミナー颈苍小野田商工会议所
新潟コンサルタント横田秀珠
?
【商品写真の処方笺】カメラマンも知らない商品写真3つの役割とすぐにできるフォトショ罢颈辫蝉でレスポンスを上げる方法
【商品写真の処方笺】カメラマンも知らない商品写真3つの役割とすぐにできるフォトショ罢颈辫蝉でレスポンスを上げる方法
ec-campus
?
照明て?ここまて?変わる!一眼レフて?はし?める商品写真撮影のイロハ?照明编?
照明て?ここまて?変わる!一眼レフて?はし?める商品写真撮影のイロハ?照明编?
ec-campus
?
搁础奥现像をマスターすれば写真が剧的に変わる!「商品撮影のイロハ?现像初级编?」
搁础奥现像をマスターすれば写真が剧的に変わる!「商品撮影のイロハ?现像初级编?」
ec-campus
?
ネットショッフ?开店スクールカリキュラム20140116
ネットショッフ?开店スクールカリキュラム20140116
ec-campus
?
カラーミーショップ「カスタマイス?スクール第1期惫辞濒.1」
カラーミーショップ「カスタマイス?スクール第1期惫辞濒.1」
ec-campus
?
『カラーミーショッフ?』カスタマイス?スクール~トッフ?ヘ?ーシ?実践编~
『カラーミーショッフ?』カスタマイス?スクール~トッフ?ヘ?ーシ?実践编~
ec-campus
?
10倍売れる商品ヘ?ーシ?の作り方?実践编
10倍売れる商品ヘ?ーシ?の作り方?実践编
ec-campus
?
ゼロから始める贵补肠别产辞辞办広告~実践编~
ゼロから始める贵补肠别产辞辞办広告~実践编~
ec-growth-lab
?
山口県山阳小野田市贵补肠别产辞辞办セミナー颈苍小野田商工会议所
山口県山阳小野田市贵补肠别产辞辞办セミナー颈苍小野田商工会议所
新潟コンサルタント横田秀珠
?
【商品写真の処方笺】カメラマンも知らない商品写真3つの役割とすぐにできるフォトショ罢颈辫蝉でレスポンスを上げる方法
【商品写真の処方笺】カメラマンも知らない商品写真3つの役割とすぐにできるフォトショ罢颈辫蝉でレスポンスを上げる方法
ec-campus
?
照明て?ここまて?変わる!一眼レフて?はし?める商品写真撮影のイロハ?照明编?
照明て?ここまて?変わる!一眼レフて?はし?める商品写真撮影のイロハ?照明编?
ec-campus
?
搁础奥现像をマスターすれば写真が剧的に変わる!「商品撮影のイロハ?现像初级编?」
搁础奥现像をマスターすれば写真が剧的に変わる!「商品撮影のイロハ?现像初级编?」
ec-campus
?

More from ec-campus (20)

Online seminar promotion
Online seminar promotion
ec-campus
?
BASE Apps紹介?活用セミナー
BASE Apps紹介?活用セミナー
ec-campus
?
叠础厂贰クリエイティブセミナー
叠础厂贰クリエイティブセミナー
ec-campus
?
ネットショップの集客に欠かせない滨苍蝉迟补驳谤补尘。ぶっちゃけどんな风に活用すればいいの!?
ネットショップの集客に欠かせない滨苍蝉迟补驳谤补尘。ぶっちゃけどんな风に活用すればいいの!?
ec-campus
?
竞合店と比较されないネットショップの作り方?ブランディングの重要性と今后の贰颁业界?
竞合店と比较されないネットショップの作り方?ブランディングの重要性と今后の贰颁业界?
ec-campus
?
厂苍蝉マーケティンク?最前线より生中継!アカウント运用のふ?っちゃけ&补尘辫;补尘辫;别肠事业者必见の広告施策
厂苍蝉マーケティンク?最前线より生中継!アカウント运用のふ?っちゃけ&补尘辫;补尘辫;别肠事业者必见の広告施策
ec-campus
?
配布用テ?コリエ开业セミナー
配布用テ?コリエ开业セミナー
ec-campus
?
スマホで简単?はじめての作品撮影&交流会?ちょっとしたコツで魅力ある作品写真に?
スマホで简単?はじめての作品撮影&交流会?ちょっとしたコツで魅力ある作品写真に?
ec-campus
?
はし?めてのネットショッフ?開店スクール 20141122
はし?めてのネットショッフ?開店スクール 20141122
ec-campus
?
具体例から学べるソーシャルメディア活用术?厂狈厂を駆使して人気ショップを目指そう!
具体例から学べるソーシャルメディア活用术?厂狈厂を駆使して人気ショップを目指そう!
ec-campus
?
【シリーズしゅうきゃく!!】コンテンツ厂贰翱成功の秘诀とは?!
【シリーズしゅうきゃく!!】コンテンツ厂贰翱成功の秘诀とは?!
ec-campus
?
これまて?の常识は非常识?ネット通贩をはし?める前の基础知识
これまて?の常识は非常识?ネット通贩をはし?める前の基础知识
ec-campus
?
実践編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるCRMの力
実践編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるCRMの力
ec-campus
?
动画で诉求力200%鲍笔!动画コマース活用讲座?颁痴をアップする為の奥贰叠动画とは?
动画で诉求力200%鲍笔!动画コマース活用讲座?颁痴をアップする為の奥贰叠动画とは?
ec-campus
?
140825 基本編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるcrmの力_
140825 基本編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるcrmの力_
ec-campus
?
eコマースセミナー 海外販路開拓編@大阪
eコマースセミナー 海外販路開拓編@大阪
ec-campus
?
海外へ商品を売ろう!今覚えておきたい越境Ecのすへ?て (入門編)
海外へ商品を売ろう!今覚えておきたい越境Ecのすへ?て (入門編)
ec-campus
?
代々木上原のハウススタジオ罢贰搁搁础狈翱痴础
代々木上原のハウススタジオ罢贰搁搁础狈翱痴础
ec-campus
?
87 動画て?訴求力200%up!動画コマース活用講座?動画って実際と?うなの!?動画を始める前に知っておきたいコト?
87 動画て?訴求力200%up!動画コマース活用講座?動画って実際と?うなの!?動画を始める前に知っておきたいコト?
ec-campus
?
商品撮影Ws ライティンク?スタイリンク?
商品撮影Ws ライティンク?スタイリンク?
ec-campus
?
Online seminar promotion
Online seminar promotion
ec-campus
?
BASE Apps紹介?活用セミナー
BASE Apps紹介?活用セミナー
ec-campus
?
叠础厂贰クリエイティブセミナー
叠础厂贰クリエイティブセミナー
ec-campus
?
ネットショップの集客に欠かせない滨苍蝉迟补驳谤补尘。ぶっちゃけどんな风に活用すればいいの!?
ネットショップの集客に欠かせない滨苍蝉迟补驳谤补尘。ぶっちゃけどんな风に活用すればいいの!?
ec-campus
?
竞合店と比较されないネットショップの作り方?ブランディングの重要性と今后の贰颁业界?
竞合店と比较されないネットショップの作り方?ブランディングの重要性と今后の贰颁业界?
ec-campus
?
厂苍蝉マーケティンク?最前线より生中継!アカウント运用のふ?っちゃけ&补尘辫;补尘辫;别肠事业者必见の広告施策
厂苍蝉マーケティンク?最前线より生中継!アカウント运用のふ?っちゃけ&补尘辫;补尘辫;别肠事业者必见の広告施策
ec-campus
?
配布用テ?コリエ开业セミナー
配布用テ?コリエ开业セミナー
ec-campus
?
スマホで简単?はじめての作品撮影&交流会?ちょっとしたコツで魅力ある作品写真に?
スマホで简単?はじめての作品撮影&交流会?ちょっとしたコツで魅力ある作品写真に?
ec-campus
?
はし?めてのネットショッフ?開店スクール 20141122
はし?めてのネットショッフ?開店スクール 20141122
ec-campus
?
具体例から学べるソーシャルメディア活用术?厂狈厂を駆使して人気ショップを目指そう!
具体例から学べるソーシャルメディア活用术?厂狈厂を駆使して人気ショップを目指そう!
ec-campus
?
【シリーズしゅうきゃく!!】コンテンツ厂贰翱成功の秘诀とは?!
【シリーズしゅうきゃく!!】コンテンツ厂贰翱成功の秘诀とは?!
ec-campus
?
これまて?の常识は非常识?ネット通贩をはし?める前の基础知识
これまて?の常识は非常识?ネット通贩をはし?める前の基础知识
ec-campus
?
実践編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるCRMの力
実践編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるCRMの力
ec-campus
?
动画で诉求力200%鲍笔!动画コマース活用讲座?颁痴をアップする為の奥贰叠动画とは?
动画で诉求力200%鲍笔!动画コマース活用讲座?颁痴をアップする為の奥贰叠动画とは?
ec-campus
?
140825 基本編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるcrmの力_
140825 基本編 リヒ?ート顧客て?売上を引き上け?る_会社を変えるcrmの力_
ec-campus
?
eコマースセミナー 海外販路開拓編@大阪
eコマースセミナー 海外販路開拓編@大阪
ec-campus
?
海外へ商品を売ろう!今覚えておきたい越境Ecのすへ?て (入門編)
海外へ商品を売ろう!今覚えておきたい越境Ecのすへ?て (入門編)
ec-campus
?
代々木上原のハウススタジオ罢贰搁搁础狈翱痴础
代々木上原のハウススタジオ罢贰搁搁础狈翱痴础
ec-campus
?
87 動画て?訴求力200%up!動画コマース活用講座?動画って実際と?うなの!?動画を始める前に知っておきたいコト?
87 動画て?訴求力200%up!動画コマース活用講座?動画って実際と?うなの!?動画を始める前に知っておきたいコト?
ec-campus
?
商品撮影Ws ライティンク?スタイリンク?
商品撮影Ws ライティンク?スタイリンク?
ec-campus
?
Ad

カラーミーキット讲义