SlideShare una empresa de Scribd logo
1 de 44
Descargar para leer sin conexión
F u k u s h i m a I T S u m m i t 2 0 1 4 ( 7. 1 2 )
北 村 崇
イ マ ド キ W e b デ ザ イ ン
Fa c e b o o k : t a k a s h i . k i t a m u r a . 9 9
Tw i t t e r : @ t a h _ t i m i n g
T I M I N G D e s i g n   北 村 崇
C h a r a c t e rL o g o m a r k
G r a p h i c D e s i g n
F l y e r P o s t e r G o o d s
W e b s i t e
C S M
W r i t e r
S p e a k e r
プロが選ぶ
WordPress優良プラグイン事典
現場でかならず使われている
WordPressデザインのメソッド
ビジネスサイト制作で学ぶ
WordPress「テーマカスタマイズ」
徹底攻略
h t t p : // t i m i n g - d e s i g n . j p /
デ ザイ ン 勉 強 会 @ 赤 羽
毎 月 第 三 金 曜 日
Wo r d C o m m u n i t y C h a n n e l / ス ク ー
h t t p : //s c h o o . j p /
Wo rd P r e s s の 技 術 や コ ミ ュニティ の 紹 介
h t t p s : //s to r e . l i n e . m e /s t i c k e r s h o p / p ro d u c t /1 0 0 4 8 5 6 / j a
L I N E ス タ ン プ を 作 っ て み ま し た
F u k u s h i m a I T S u m m i t 2 0 1 4 ( 7. 1 2 )
イ マ ド キ W e b デ ザ イ ン
多 す ぎ る
自 由 す ぎ る
解 決 す る た め に
そ の 1
多 す ぎ る
イマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumi
i O S
i O S
i P h o n e ・ i P a d
2 倍
解 像 度
の サ イ ズ の 画 像 を 用 意 す る
2 倍
イマドキWEBデザイン/140712fsumi
A n d r o i d
デバ イ ス の 断 片 化
A n d r o i d
1 1 , 8 6 8 ( 2 0 1 3 )
A n d r o i d
多 す ぎ る
2 倍 3 倍
1 . 5 倍1 . 3 3 倍
A n d r o i d
解 像 度
の サ イ ズ の 画 像 を 用 意 す る
1 . 3 3 倍 / 1 . 5 倍
2 倍 / 3 倍
無 理
な ん と か し な い と い け な い
そ の 2
自 由 す ぎ る
イマドキWEBデザイン/140712fsumi
イマドキWEBデザイン/140712fsumi
ス ク リ ーン サ イ ズ 多 す ぎ
レス ポ ン シ ブ W e b デ ザ イ ン ?
レス ポ ン シ ブ デ ザ イ ン の 問 題 点
B r e a k P o i n t
M o b i l e ? 4 8 0 p x
Ta b l e t ? 7 6 8 p x
P C ? 1 0 2 4 p x
6 0 0 p x
9 6 0 p x
3 2 0 p x
4 0 0 p x
5 0 0 p x
8 0 0 p x
1 0 0 0 p x
1 2 0 0 p x
1 3 0 0 p x
9 0 0 p x
1 0 1 0 p x
7 9 0 p x
5 5 0 p x
4 5 0 p x
3 5 0 p x
1 1 0 0 p x
7 0 0 p x
9 2 0 p x
4 9 0 p x
5 6 0 p x
4 6 0 p x
7 5 0 p x
9 9 0 p x
6 5 0 p x
1 1 5 0 p x
自 由 す ぎ る
b r e a k p o i n t s
o n G o o g l e D o c s
h t t p s : // d o c s . g o o g l e . c o m / s p r e a d s h e e t / c c c ?
k e y = 0 A q _ w z 8 S j 9 S t 2 d H Q 2 d E d R N G N v Z n Z B T 2 p l R 2 R B bW F v U H c # g i d = 0
ブ レ イク ポ イ ン ト ご と に
デ ザ イ ン を
作 って あ げよ う
無 理
な ん と か し な い と い け な い
そ の 3
解 決 し よ う
S V G や
W e b f o n t を 使 お う
C S S を 使 お う
フ レ ー ムワ ー ク
や
グ リ ッ ド シス テム
を 使 お う
イ ン ブ ラ ウ
ザ デ ザ イ ン
し よ う
D E M O
F u k u s h i m a I T S u m m i t 2 0 1 4 ( 7. 1 2 )
北 村 崇
ご 清 聴 あ り が と う ご ざ い ま し た

Más contenido relacionado

Similar a イマドキWEBデザイン/140712fsumi

バグなんて見逃しちゃえ
バグなんて見逃しちゃえバグなんて見逃しちゃえ
バグなんて見逃しちゃえssuser0be501
 
第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」Takashi Kitamura
 
ハイエンドゲーム開発におけるエフェクト制作の課題
ハイエンドゲーム開発におけるエフェクト制作の課題ハイエンドゲーム開発におけるエフェクト制作の課題
ハイエンドゲーム開発におけるエフェクト制作の課題t h
 
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25Tomonori Watanabe
 
GPU on OpenStack - GPUインターナルクラウドのベストプラクティス - OpenStack最新情報セミナー 2017年7月
GPU on OpenStack - GPUインターナルクラウドのベストプラクティス - OpenStack最新情報セミナー 2017年7月GPU on OpenStack - GPUインターナルクラウドのベストプラクティス - OpenStack最新情報セミナー 2017年7月
GPU on OpenStack - GPUインターナルクラウドのベストプラクティス - OpenStack最新情報セミナー 2017年7月VirtualTech Japan Inc.
 
20150417デザイン勉強会33
20150417デザイン勉強会3320150417デザイン勉強会33
20150417デザイン勉強会33Takashi Kitamura
 
Javaプログラミングをスッキリ学ぶ10のコツ
Javaプログラミングをスッキリ学ぶ10のコツJavaプログラミングをスッキリ学ぶ10のコツ
Javaプログラミングをスッキリ学ぶ10のコツKiyotaka NAKAYAMA
 
20150903 サーベイアカデミー2015仙台 raw
20150903 サーベイアカデミー2015仙台 raw20150903 サーベイアカデミー2015仙台 raw
20150903 サーベイアカデミー2015仙台 rawTaichi Furuhashi
 
CODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato Kinugawa
CODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato KinugawaCODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato Kinugawa
CODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato KinugawaCODE BLUE
 
20180208_shibuya30_final_children
20180208_shibuya30_final_children20180208_shibuya30_final_children
20180208_shibuya30_final_childrenshibuya30
 
Zマイスターとの新たな価値探求 Rational
Zマイスターとの新たな価値探求 RationalZマイスターとの新たな価値探求 Rational
Zマイスターとの新たな価値探求 RationalIBMソリューション
 
超簡単! Strawberry PerlをWindowsにインストール
超簡単! Strawberry PerlをWindowsにインストール超簡単! Strawberry PerlをWindowsにインストール
超簡単! Strawberry PerlをWindowsにインストールShin Tanigawa
 
素晴らしきメガデモの世界
素晴らしきメガデモの世界素晴らしきメガデモの世界
素晴らしきメガデモの世界eagle0wl
 
KDDI Business ID におけるアジャイル開発と検証フロー
KDDI Business ID におけるアジャイル開発と検証フローKDDI Business ID におけるアジャイル開発と検証フロー
KDDI Business ID におけるアジャイル開発と検証フローques_staff
 
html5nagoya #11 デザインツールのあれこれ
html5nagoya #11 デザインツールのあれこれhtml5nagoya #11 デザインツールのあれこれ
html5nagoya #11 デザインツールのあれこれTakashi Ishihara
 
変革のためのスタートアップ思考 (2) / スタートアップの考え方を新規事業創出とスタートアップ連携に活かす
変革のためのスタートアップ思考 (2) / スタートアップの考え方を新規事業創出とスタートアップ連携に活かす変革のためのスタートアップ思考 (2) / スタートアップの考え方を新規事業創出とスタートアップ連携に活かす
変革のためのスタートアップ思考 (2) / スタートアップの考え方を新規事業創出とスタートアップ連携に活かすTakaaki Umada
 
Php unit extensions_selenium2_testcaseによる結合試験でらくらくテスト♪
Php unit extensions_selenium2_testcaseによる結合試験でらくらくテスト♪Php unit extensions_selenium2_testcaseによる結合試験でらくらくテスト♪
Php unit extensions_selenium2_testcaseによる結合試験でらくらくテスト♪Tsutomu Chikuba
 
編集へ向けてOpenStreetMap
編集へ向けてOpenStreetMap編集へ向けてOpenStreetMap
編集へ向けてOpenStreetMapNoriko Takiguchi
 
Eレセプションマネージャー管理者マニュアル
Eレセプションマネージャー管理者マニュアルEレセプションマネージャー管理者マニュアル
Eレセプションマネージャー管理者マニュアルe-sales-support
 

Similar a イマドキWEBデザイン/140712fsumi (20)

バグなんて見逃しちゃえ
バグなんて見逃しちゃえバグなんて見逃しちゃえ
バグなんて見逃しちゃえ
 
第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」第32回デザイン勉強会 「web制作のプロトタイピングツール」
第32回デザイン勉強会 「web制作のプロトタイピングツール」
 
ハイエンドゲーム開発におけるエフェクト制作の課題
ハイエンドゲーム開発におけるエフェクト制作の課題ハイエンドゲーム開発におけるエフェクト制作の課題
ハイエンドゲーム開発におけるエフェクト制作の課題
 
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25
 
GPU on OpenStack - GPUインターナルクラウドのベストプラクティス - OpenStack最新情報セミナー 2017年7月
GPU on OpenStack - GPUインターナルクラウドのベストプラクティス - OpenStack最新情報セミナー 2017年7月GPU on OpenStack - GPUインターナルクラウドのベストプラクティス - OpenStack最新情報セミナー 2017年7月
GPU on OpenStack - GPUインターナルクラウドのベストプラクティス - OpenStack最新情報セミナー 2017年7月
 
20150417デザイン勉強会33
20150417デザイン勉強会3320150417デザイン勉強会33
20150417デザイン勉強会33
 
Javaプログラミングをスッキリ学ぶ10のコツ
Javaプログラミングをスッキリ学ぶ10のコツJavaプログラミングをスッキリ学ぶ10のコツ
Javaプログラミングをスッキリ学ぶ10のコツ
 
20150903 サーベイアカデミー2015仙台 raw
20150903 サーベイアカデミー2015仙台 raw20150903 サーベイアカデミー2015仙台 raw
20150903 サーベイアカデミー2015仙台 raw
 
CODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato Kinugawa
CODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato KinugawaCODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato Kinugawa
CODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato Kinugawa
 
20180208_shibuya30_final_children
20180208_shibuya30_final_children20180208_shibuya30_final_children
20180208_shibuya30_final_children
 
Zマイスターとの新たな価値探求 Rational
Zマイスターとの新たな価値探求 RationalZマイスターとの新たな価値探求 Rational
Zマイスターとの新たな価値探求 Rational
 
超簡単! Strawberry PerlをWindowsにインストール
超簡単! Strawberry PerlをWindowsにインストール超簡単! Strawberry PerlをWindowsにインストール
超簡単! Strawberry PerlをWindowsにインストール
 
素晴らしきメガデモの世界
素晴らしきメガデモの世界素晴らしきメガデモの世界
素晴らしきメガデモの世界
 
KDDI Business ID におけるアジャイル開発と検証フロー
KDDI Business ID におけるアジャイル開発と検証フローKDDI Business ID におけるアジャイル開発と検証フロー
KDDI Business ID におけるアジャイル開発と検証フロー
 
Rstudio事始め
Rstudio事始めRstudio事始め
Rstudio事始め
 
html5nagoya #11 デザインツールのあれこれ
html5nagoya #11 デザインツールのあれこれhtml5nagoya #11 デザインツールのあれこれ
html5nagoya #11 デザインツールのあれこれ
 
変革のためのスタートアップ思考 (2) / スタートアップの考え方を新規事業創出とスタートアップ連携に活かす
変革のためのスタートアップ思考 (2) / スタートアップの考え方を新規事業創出とスタートアップ連携に活かす変革のためのスタートアップ思考 (2) / スタートアップの考え方を新規事業創出とスタートアップ連携に活かす
変革のためのスタートアップ思考 (2) / スタートアップの考え方を新規事業創出とスタートアップ連携に活かす
 
Php unit extensions_selenium2_testcaseによる結合試験でらくらくテスト♪
Php unit extensions_selenium2_testcaseによる結合試験でらくらくテスト♪Php unit extensions_selenium2_testcaseによる結合試験でらくらくテスト♪
Php unit extensions_selenium2_testcaseによる結合試験でらくらくテスト♪
 
編集へ向けてOpenStreetMap
編集へ向けてOpenStreetMap編集へ向けてOpenStreetMap
編集へ向けてOpenStreetMap
 
Eレセプションマネージャー管理者マニュアル
Eレセプションマネージャー管理者マニュアルEレセプションマネージャー管理者マニュアル
Eレセプションマネージャー管理者マニュアル
 

Más de Takashi Kitamura

38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」Takashi Kitamura
 
「人にやさしいデザイン(はモテる)」
「人にやさしいデザイン(はモテる)」「人にやさしいデザイン(はモテる)」
「人にやさしいデザイン(はモテる)」Takashi Kitamura
 
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」Takashi Kitamura
 
WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)Takashi Kitamura
 
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」Takashi Kitamura
 
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahWP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahTakashi Kitamura
 
2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYO2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYOTakashi Kitamura
 
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMOTakashi Kitamura
 

Más de Takashi Kitamura (10)

38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
38回/デザイン勉強会@赤羽「これからはじめるWebデザイン〜Webデザイナーに必要なもの〜」
 
「人にやさしいデザイン(はモテる)」
「人にやさしいデザイン(はモテる)」「人にやさしいデザイン(はモテる)」
「人にやさしいデザイン(はモテる)」
 
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
大分クリエイターズ 2015/11/14 北村崇「デザインをはじめる 前に知っておきたい 本当のデザイン」
 
WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)WordCamp Tokyo2015 (Lt kitamura)
WordCamp Tokyo2015 (Lt kitamura)
 
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
20150619デザイン勉強会34「本のリ・デザイン アイデアソン」
 
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura TahWP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura Tah
 
2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYO2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYO
 
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
2014/02/01 WP-D Fes #01(sat) Megane Fes in GMO
 
W ctokyo2012 timing
W ctokyo2012 timingW ctokyo2012 timing
W ctokyo2012 timing
 
Osc2012tokyo timing
Osc2012tokyo timingOsc2012tokyo timing
Osc2012tokyo timing
 

イマドキWEBデザイン/140712fsumi

  • 1. F u k u s h i m a I T S u m m i t 2 0 1 4 ( 7. 1 2 ) 北 村 崇 イ マ ド キ W e b デ ザ イ ン
  • 2. Fa c e b o o k : t a k a s h i . k i t a m u r a . 9 9 Tw i t t e r : @ t a h _ t i m i n g T I M I N G D e s i g n   北 村 崇
  • 3. C h a r a c t e rL o g o m a r k G r a p h i c D e s i g n F l y e r P o s t e r G o o d s W e b s i t e C S M W r i t e r S p e a k e r
  • 5. h t t p : // t i m i n g - d e s i g n . j p / デ ザイ ン 勉 強 会 @ 赤 羽 毎 月 第 三 金 曜 日 Wo r d C o m m u n i t y C h a n n e l / ス ク ー h t t p : //s c h o o . j p / Wo rd P r e s s の 技 術 や コ ミ ュニティ の 紹 介
  • 6. h t t p s : //s to r e . l i n e . m e /s t i c k e r s h o p / p ro d u c t /1 0 0 4 8 5 6 / j a L I N E ス タ ン プ を 作 っ て み ま し た
  • 7. F u k u s h i m a I T S u m m i t 2 0 1 4 ( 7. 1 2 ) イ マ ド キ W e b デ ザ イ ン 多 す ぎ る 自 由 す ぎ る 解 決 す る た め に
  • 8. そ の 1 多 す ぎ る
  • 12. i O S
  • 13. i O S
  • 14. i P h o n e ・ i P a d 2 倍 解 像 度
  • 15. の サ イ ズ の 画 像 を 用 意 す る 2 倍
  • 17. A n d r o i d
  • 18. デバ イ ス の 断 片 化
  • 19. A n d r o i d 1 1 , 8 6 8 ( 2 0 1 3 )
  • 20. A n d r o i d
  • 21. 多 す ぎ
  • 22. 2 倍 3 倍 1 . 5 倍1 . 3 3 倍 A n d r o i d 解 像 度
  • 23. の サ イ ズ の 画 像 を 用 意 す る 1 . 3 3 倍 / 1 . 5 倍 2 倍 / 3 倍
  • 25. な ん と か し な い と い け な い
  • 26. そ の 2 自 由 す ぎ る
  • 29. ス ク リ ーン サ イ ズ 多 す ぎ
  • 30. レス ポ ン シ ブ W e b デ ザ イ ン ?
  • 31. レス ポ ン シ ブ デ ザ イ ン の 問 題 点
  • 32. B r e a k P o i n t M o b i l e ? 4 8 0 p x Ta b l e t ? 7 6 8 p x P C ? 1 0 2 4 p x 6 0 0 p x 9 6 0 p x 3 2 0 p x 4 0 0 p x 5 0 0 p x 8 0 0 p x 1 0 0 0 p x 1 2 0 0 p x 1 3 0 0 p x 9 0 0 p x 1 0 1 0 p x 7 9 0 p x 5 5 0 p x 4 5 0 p x 3 5 0 p x 1 1 0 0 p x 7 0 0 p x 9 2 0 p x 4 9 0 p x 5 6 0 p x 4 6 0 p x 7 5 0 p x 9 9 0 p x 6 5 0 p x 1 1 5 0 p x
  • 33. 自 由 す ぎ る
  • 34. b r e a k p o i n t s o n G o o g l e D o c s h t t p s : // d o c s . g o o g l e . c o m / s p r e a d s h e e t / c c c ? k e y = 0 A q _ w z 8 S j 9 S t 2 d H Q 2 d E d R N G N v Z n Z B T 2 p l R 2 R B bW F v U H c # g i d = 0
  • 35. ブ レ イク ポ イ ン ト ご と に デ ザ イ ン を 作 って あ げよ う
  • 37. な ん と か し な い と い け な い
  • 38. そ の 3 解 決 し よ う
  • 39. S V G や W e b f o n t を 使 お う
  • 40. C S S を 使 お う
  • 41. フ レ ー ムワ ー ク や グ リ ッ ド シス テム を 使 お う
  • 42. イ ン ブ ラ ウ ザ デ ザ イ ン し よ う
  • 43. D E M O
  • 44. F u k u s h i m a I T S u m m i t 2 0 1 4 ( 7. 1 2 ) 北 村 崇 ご 清 聴 あ り が と う ご ざ い ま し た