デザインデータと実装の間でギャップが起こる事があるから、いまさらだけどピクセルパーフェクトとか...

株式会社リブセンス　デザイン制作部　デザイナー

古沢彩

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日木曜日