デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか...
TRANSCRIPT
![Page 1: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/1.jpg)
株式会社リブセンス デザイン制作部 デザイナー
古沢彩
F r am ewo r k D e s i g n
13年11月21日木曜日
![Page 2: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/2.jpg)
デザインデータと実装の間でギャップが起こる事があるから、
いまさらだけどピクセルパーフェクトとか
そこら辺のことについて調べてみたよ
13年11月21日木曜日
![Page 3: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/3.jpg)
自己紹介
★古沢 彩
★ DTP歴3年 Web歴5年
★マイブームはイスラエル
★ 2013年から転職会議担当デザイナー
★転職会議はPCとSmartphoneサイト公開
13年11月21日木曜日
![Page 4: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/4.jpg)
転職会議 Smartphone website
★ 2012年 ローンチ
★早い実装と検証が課題
★ Framework化を進行中
★実装時間を減らしたい!
★デザイン制作時間の短縮
★デザインテイスト統一
★アクセスの早さ→売上げ・PV
13年11月21日木曜日
![Page 5: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/5.jpg)
サービス紹介
転職する(したい)!
社名+評判で検索
元/現社員クチコミ
クチコミ+応募(今年から)
13年11月21日木曜日
![Page 6: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/6.jpg)
デザインデータと実装の間で
ギャップが起こる事があるから、
で、今日ですが
意図したジャイアン↑ ↑意図しないジャイアン
13年11月21日木曜日
![Page 7: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/7.jpg)
デザインデータと実装の間で
ギャップが起こる事があるから、
いまさらだけど
ピクセルパーフェクトとか
で、今日ですが
そこら辺のこと
について調べてみたよ↑正
↑誤
デザインの意図
ウェブの基本用語
13年11月21日木曜日
![Page 8: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/8.jpg)
デザインを改善しつつ
サービス改善施策も同時に実装
現場ではこうだけど、
もっと良くするために
基本を見つめ直したくなった
13年11月21日木曜日
![Page 9: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/9.jpg)
ウェブ用語を集めてみる
13年11月21日木曜日
![Page 10: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/10.jpg)
ウェブ用語集めてみました
Web標準
レスポンシブWebデザイン
フラット・デザイン
Webページ
ユーザー・インターフェース
ユーザー・エクスペリエンス
ユーザビリティ
インフォメーションアーキテクトアクセシビリティオーサリンググローバルCSSファイルコーディングコンテンツ仕様書、スペックセマンティック構造デバイスピクセルパーフェクトデザイン
解像度dpippidipビジュアルデザイン
デザイン・カンプ
色彩
配色計画
タイポグラフィ
Webフォント
フォント
CI
VI
ユーザーインターフェイスデザイン
インタラクティブデザイン
ブラウザwebkitピクセル最適化プログラミングホスティングマークアップ言語ユーザエージェントCSS⦆(Cascading Style Sheets)ExtensibleHTML (HyperText Mark-up Language)XHTML (eXtensible HyperText Markup Language)AI Adobe illustratorPSD Adobe photoshopPNG Adobe fireworksもちろんもっとあります...
13年11月21日木曜日
![Page 11: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/11.jpg)
一般的に実装に関係あるのは?
Web標準
レスポンシブWebデザイン
フラット・デザイン
Webページ
ユーザー・インターフェース
ユーザー・エクスペリエンス
ユーザビリティ
インフォメーションアーキテクトアクセシビリティオーサリンググローバルCSSファイルコーディングコンテンツ仕様書、スペックセマンティック構造デバイスピクセルパーフェクトデザイン
解像度dpippidipビジュアルデザイン
デザイン・カンプ
色彩
配色計画
タイポグラフィ
Webフォント
フォント
CI
VI
ユーザーインターフェイスデザイン
インタラクティブデザイン
ブラウザwebkitピクセル最適化プログラミングホスティングマークアップ言語ユーザエージェントCSS⦆(Cascading Style Sheets)ExtensibleHTML (HyperText Mark-up Language)XHTML (eXtensible HyperText Markup Language)AI Adobe illustratorPSD Adobe photoshopPNG Adobe fireworks
もちろんもっとあります...
13年11月21日木曜日
![Page 12: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/12.jpg)
関係をあらわすと
コーディング
デバイス
ピクセルパーフェクトデザイン
解像度dpippidip
ビジュアルデザイン (デザイン・カンプ)
色彩タイポグラフィ
Webフォント フォント
ピクセル最適化
CSS⦆(Cascading Style Sheets)
AI Adobe illustrator
PSD Adobe photoshop
PNG Adobe fireworks
(ピクセルパーフェクト)
13年11月21日木曜日
![Page 13: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/13.jpg)
デザインデータ作成
パーツの徹底した統一化
Viを基調に色彩選択
デザインのガイドライン化
グラデーションの統一
HTML文書構造を意識した構成
ビジュアルデザイン(デザイン・カンプ)色彩タイポグラフィ
コーディングフォントCSS⦆(Cascading Style Sheets)
13年11月21日木曜日
![Page 14: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/14.jpg)
デザインデータ作成
アイコン等はAiで作成、Fireworksやphotoshopに貼り付けて使う →後で高解像度に対応可能 →Vi統一のために →Webフォント対応も検討中
デバイス解像度
ビジュアルデザイン
タイポグラフィWebフォント
AI Adobe illustrator
13年11月21日木曜日
![Page 15: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/15.jpg)
デザインデータ作成
1. ピクセルに最適化されていない2. シンボルがない3. オブジェクトを直接選択できない4. シェイプの大きさや位置を数値で指定できない5. 角丸の大きさを後から変更できない6. 「線」が使えない7. 色やフォントの検索・置換ができない8. 複雑なパスの操作ができない9. カスタムアンチエイリアスがない10.レイヤースタイルのコピーができない11.スライスがめんどくさい12.ページ機能やステート機能がない
http://www.ngi-d.net/fireworks_to_photoshop/
ビジュアルデザイン
ピクセル最適化
PSD Adobe photoshop
13年11月21日木曜日
![Page 16: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/16.jpg)
実装時におこりやすいギャップ
★アイコン画像などが実機で確認すると ピクセル最適化されてなくてぶれている
★Retinaで見ると汚い
★ボタンのグラデが思ってたのとちがう
★タイトルやリストが実機で見たら気持ちいい高さでない
13年11月21日木曜日
![Page 17: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/17.jpg)
実装時におこりやすいギャップ
★アイコン画像などが実機で確認するとピクセル最適化されてなくてぶれている
13年11月21日木曜日
![Page 18: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/18.jpg)
アイコン画像などが実機で確認すると
ピクセル最適化されてなくてぶれている
→パスデータをコピペする等でずれる
コーディング
ピクセル最適化PNG Adobe fireworks
13年11月21日木曜日
![Page 19: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/19.jpg)
Command + kか幅or高さにカーソル+enter*2で解決
コーディング
ピクセル最適化PNG Adobe fireworks
13年11月21日木曜日
![Page 20: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/20.jpg)
実装時におこりやすいギャップ
★Retinaで見ると汚い
13年11月21日木曜日
![Page 21: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/21.jpg)
devicePixelRatio
devicePixelRatioは、デバイス上の物理的なピクセルとデバイス非依存ピクセル(Dip)との比
png 画像ファイルデバイス上の物理的なピクセル
72dpi
1px
○KB
1px
スマホパネルの解像度・高
比:2デバイス解像度 dpi dip CSS
×?するかを確認する
13年11月21日木曜日
![Page 22: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/22.jpg)
dpi dipのちがい(蛇足)
ldpi Mdpi
1dp(物理的)
hdpi xhdpi
0.75 1 1.5 2 2
retina
デバイス
ピクセル比
デバイス解像度 dpi dip CSS※ppi/dpiは似た意味なので割愛
Dip(dp)
dots per inch Density-independent Pixel
ちがう
13年11月21日木曜日
![Page 23: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/23.jpg)
does devicePixelRatio
is really useful?
320pxのデザインデータは×2
新規では640pxで作成
高解像度液晶の 普及であたりまえに
320px
640px
&
デバイス解像度 dpi dip CSS
※なるべく画像をつかわないデザイン
13年11月21日木曜日
![Page 24: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/24.jpg)
実装時におこりやすいギャップ
★ボタンのグラデが思ってたのとちがう
★タイトルやリストが実機で見たら気持ちいい高さでない
ピクセルパーフェクトデザイン
13年11月21日木曜日
![Page 25: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/25.jpg)
ギャップの解消
★ボタンのグラデが思ってたのとちがう
★実機複数で見てみて再度調整、色指定等してみる
★タイトルやリストが実機で見たら気持ちいい高さでない
★ 10pxのマージンはもの足りない場合が
★できればボタンは44px以上(320pxの場合)
ピクセルパーフェクトデザインデザインカンプに固執すると効率的でない→
13年11月21日木曜日
![Page 26: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/26.jpg)
検証端末Xperia SX SO-05D docomo
ARROWS X LTE F-05D docomo
iPhone 4s 64GB MD258J/A
Android 4.0.4
Android 2.3.5
iOS 6.1.3
AQUOS PHONE st (SH-07D)
SAMSUNG Nexus S
XPERIA VL SOL21
XPERIA SO-03D
GALAXY S3 SC-06D
Android 4.0.4
Android 4.1.2
Android 4.1.2
Android 2.3.7
Android 4.0.4
iPod touch
iPhone 3GS
iPod touch
iPod touch
iOS 6.0.1
iOS 4.3
-
iOS 6.1.3
+4.4と4.2、iOS7新規追加予定
13年11月21日木曜日
![Page 27: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/27.jpg)
ギャップを埋める
13年11月21日木曜日
![Page 28: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/28.jpg)
コミュニケーションが必要
★Android、iOSのギャップ★ ついつい馴れているものだけで確認しがち(ごめんなさい)
★ タップできる範囲は適切か?タイトルの幅は実機で違和感ない?
★デザイン設計とHTML/CSSのギャップ★ 文書構造とデザイン成果物のおかしい所
★ イメージした仕上がりでなかった時
★ CSSでpx調整、実機で確認
13年11月21日木曜日
![Page 29: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/29.jpg)
まとめ
13年11月21日木曜日
![Page 30: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/30.jpg)
ギャップを埋める+実機に合わせる
★width640pxでデザイン作成
★Iconはイラレで作る→後で楽
★ピクセル最適化は必ず!
★Devicepixelratioは2で対応
★ボタン等グラデはfireworksでCSS3書き出す→ 実機で確認
最終アウトプットは実機で見た状態。
フロントエンドエンジニアと一緒に最適な実装を!
13年11月21日木曜日
![Page 31: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/31.jpg)
ご静聴ありがとうございました。
本日はお越し頂きありがとうございます。
デザイナー エンジニア
絶賛募集中!
13年11月21日木曜日
![Page 32: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/32.jpg)
13年11月21日木曜日
![Page 33: デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか そこら辺のことについて調べてみたよ@転職会議frameworkDesign](https://reader036.vdocuments.pub/reader036/viewer/2022062313/558cf5aad8b42a7c0f8b473c/html5/thumbnails/33.jpg)
http://tatete.blogspot.jp/2012/03/android-dp.html
http://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays
http://www.mdn.co.jp/di/articles/2434/?page=7
http://stackoverflow.com/questions/12798608/does-devicepixelratio-is-really-useful
http://ika-ring.net/blog/illustrator%EF%BC%9A%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%80%8C%E3%83%94/
http://blog.webcreativepark.net/2011/01/25-173502.HTML
http://07design.net/blog/?p=596
http://developer.android.com/guide/webapps/targeting.HTML
http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.HTML
http://design-spice.com/2012/09/05/resolutio/
出典
iPhone+Android スマートフォンサイト制作入門
たにぐちまこと (著)
デザイナーのためのiPhoneアプリUI/UX設計
大橋学 (著), 段霞 (著), 野澤紘子 (著), 堀内孝彦 (著), 真鍋和久 (著)
13年11月21日木曜日