デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか...
-
Upload
aya-furusawa -
Category
Design
-
view
2.455 -
download
7
Transcript of デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか...
株式会社リブセンス デザイン制作部 デザイナー
古沢彩
F r am ewo r k D e s i g n
13年11月21日木曜日
デザインデータと実装の間でギャップが起こる事があるから、
いまさらだけどピクセルパーフェクトとか
そこら辺のことについて調べてみたよ
13年11月21日木曜日
自己紹介
★古沢 彩
★ DTP歴3年 Web歴5年
★マイブームはイスラエル
★ 2013年から転職会議担当デザイナー
★転職会議はPCとSmartphoneサイト公開
13年11月21日木曜日
転職会議 Smartphone website
★ 2012年 ローンチ
★早い実装と検証が課題
★ Framework化を進行中
★実装時間を減らしたい!
★デザイン制作時間の短縮
★デザインテイスト統一
★アクセスの早さ→売上げ・PV
13年11月21日木曜日
サービス紹介
転職する(したい)!
社名+評判で検索
元/現社員クチコミ
クチコミ+応募(今年から)
13年11月21日木曜日
デザインデータと実装の間で
ギャップが起こる事があるから、
で、今日ですが
意図したジャイアン↑ ↑意図しないジャイアン
13年11月21日木曜日
デザインデータと実装の間で
ギャップが起こる事があるから、
いまさらだけど
ピクセルパーフェクトとか
で、今日ですが
そこら辺のこと
について調べてみたよ↑正
↑誤
デザインの意図
ウェブの基本用語
13年11月21日木曜日
デザインを改善しつつ
サービス改善施策も同時に実装
現場ではこうだけど、
もっと良くするために
基本を見つめ直したくなった
13年11月21日木曜日
ウェブ用語を集めてみる
13年11月21日木曜日
ウェブ用語集めてみました
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日木曜日
一般的に実装に関係あるのは?
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日木曜日
関係をあらわすと
コーディング
デバイス
ピクセルパーフェクトデザイン
解像度dpippidip
ビジュアルデザイン (デザイン・カンプ)
色彩タイポグラフィ
Webフォント フォント
ピクセル最適化
CSS⦆(Cascading Style Sheets)
AI Adobe illustrator
PSD Adobe photoshop
PNG Adobe fireworks
(ピクセルパーフェクト)
13年11月21日木曜日
デザインデータ作成
パーツの徹底した統一化
Viを基調に色彩選択
デザインのガイドライン化
グラデーションの統一
HTML文書構造を意識した構成
ビジュアルデザイン(デザイン・カンプ)色彩タイポグラフィ
コーディングフォントCSS⦆(Cascading Style Sheets)
13年11月21日木曜日
デザインデータ作成
アイコン等はAiで作成、Fireworksやphotoshopに貼り付けて使う →後で高解像度に対応可能 →Vi統一のために →Webフォント対応も検討中
デバイス解像度
ビジュアルデザイン
タイポグラフィWebフォント
AI Adobe illustrator
13年11月21日木曜日
デザインデータ作成
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日木曜日
実装時におこりやすいギャップ
★アイコン画像などが実機で確認すると ピクセル最適化されてなくてぶれている
★Retinaで見ると汚い
★ボタンのグラデが思ってたのとちがう
★タイトルやリストが実機で見たら気持ちいい高さでない
13年11月21日木曜日
実装時におこりやすいギャップ
★アイコン画像などが実機で確認するとピクセル最適化されてなくてぶれている
13年11月21日木曜日
アイコン画像などが実機で確認すると
ピクセル最適化されてなくてぶれている
→パスデータをコピペする等でずれる
コーディング
ピクセル最適化PNG Adobe fireworks
13年11月21日木曜日
Command + kか幅or高さにカーソル+enter*2で解決
コーディング
ピクセル最適化PNG Adobe fireworks
13年11月21日木曜日
実装時におこりやすいギャップ
★Retinaで見ると汚い
13年11月21日木曜日
devicePixelRatio
devicePixelRatioは、デバイス上の物理的なピクセルとデバイス非依存ピクセル(Dip)との比
png 画像ファイルデバイス上の物理的なピクセル
72dpi
1px
○KB
1px
スマホパネルの解像度・高
比:2デバイス解像度 dpi dip CSS
×?するかを確認する
13年11月21日木曜日
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日木曜日
does devicePixelRatio
is really useful?
320pxのデザインデータは×2
新規では640pxで作成
高解像度液晶の 普及であたりまえに
320px
640px
&
デバイス解像度 dpi dip CSS
※なるべく画像をつかわないデザイン
13年11月21日木曜日
実装時におこりやすいギャップ
★ボタンのグラデが思ってたのとちがう
★タイトルやリストが実機で見たら気持ちいい高さでない
ピクセルパーフェクトデザイン
13年11月21日木曜日
ギャップの解消
★ボタンのグラデが思ってたのとちがう
★実機複数で見てみて再度調整、色指定等してみる
★タイトルやリストが実機で見たら気持ちいい高さでない
★ 10pxのマージンはもの足りない場合が
★できればボタンは44px以上(320pxの場合)
ピクセルパーフェクトデザインデザインカンプに固執すると効率的でない→
13年11月21日木曜日
検証端末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日木曜日
ギャップを埋める
13年11月21日木曜日
コミュニケーションが必要
★Android、iOSのギャップ★ ついつい馴れているものだけで確認しがち(ごめんなさい)
★ タップできる範囲は適切か?タイトルの幅は実機で違和感ない?
★デザイン設計とHTML/CSSのギャップ★ 文書構造とデザイン成果物のおかしい所
★ イメージした仕上がりでなかった時
★ CSSでpx調整、実機で確認
13年11月21日木曜日
まとめ
13年11月21日木曜日
ギャップを埋める+実機に合わせる
★width640pxでデザイン作成
★Iconはイラレで作る→後で楽
★ピクセル最適化は必ず!
★Devicepixelratioは2で対応
★ボタン等グラデはfireworksでCSS3書き出す→ 実機で確認
最終アウトプットは実機で見た状態。
フロントエンドエンジニアと一緒に最適な実装を!
13年11月21日木曜日
ご静聴ありがとうございました。
本日はお越し頂きありがとうございます。
デザイナー エンジニア
絶賛募集中!
13年11月21日木曜日
13年11月21日木曜日
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日木曜日