Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HiDPI 時代の

Fireworks
松田直樹
Flickr : ebayink
松田直樹
2月
発売
What’s

HiDPI ?
代表的なものが、Apple製品の

Retina Display
(iPhone 326 ppi)
(iPad 264 ppi)

デバイスの高解像度化
HiDPI

= =

高ピクセル密度
高 device-pixel-ratio
device-pixel-ratio ?
device-pixel-ratio
HTMLコンテンツの1pxを
実際のデバイス上で
何倍のpxで
描画するかを示す数値
は
え、なんて?

Flickr : Tsahi Levent-Levi
device-pixel-ratio = 2
device-pixel-ratio = 2

@1x Resolution
(4dpx)

@2x Resolution
(16dpx)
device-pixel-ratio = 2
<img src="xxx.png" width="320">
device-pixel-ratio
iPhone 4∼

2

Android

1.5
が多い

326 ppi

250 ppi
device-pixel-ratio

3
HTC J
butterfly

Xperia Z

INFOBAR
A02

440 ppi
進み続ける、
デバイスの HiDPI 化

Flickr : Jeffrey
WORKFLOW
for
HIDPI
iOSアプリデザインのRetina対応
ワークフローが話題にもなりました

http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
バシャログ - Retina対応用にページを
分けるFireworksコマンド

http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
画像をRetina対応で書き出しする
Fireworksの拡張機能作ったよ。

http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
株式会社まぼろし
まつだなおきさん の場合
カンバスは、基本的に w 640px
ビットマップはまずシンボル化
@2x の画像だけ書き出し
@1x の画像は一括で半分にリサイズ
CSS3, SVG, Web Fonts を活用
カンバスは 横幅 640px
カンバスは 横幅 640px
640px
メリット

•

多くのスマホの
ブラウザが、横幅
320px なため

•

そのまま書き出せば、
Retina 対応可

•

コーダーが別の場合
でも、失敗することが
ない
カンバスは 横幅 640px
640px
デメリット

•

すべてのパーツ、
テキストのサイズを
2倍に計算する必要が
ある

•

実機の実寸との差異が
あり、サイズ感が
つかみにくい
カンバスが
カンバスは 横幅 640px だと...
320px
320px
デメリット

•

あとから @2x 画像が
作りにくい

•

ビットマップを
拡大すると劣化する

•

テキストのフォント
サイズがおかしくなる

•
•

9...
カンバスは 横幅 640px

実機でのサイズ感が
分かりにくければ...
作ったカンプに、
共通ライブラリの
「iPhone → Hardware」を
重ねてみましょう
画面内が 640px になっています
カンバスは 横幅 640px

それでもまだ、
実機でのサイズ感が
分かりにくければ...

LiveView
https://itunes.apple.com/jp/app/liveview/id301069270?mt=8
カンバスは 横幅 640px

640px の大きいサイズで
作っておけば、
小さいサイズはどうとでもなる!
2倍で作るコツ
2倍で作るコツ

高さ、幅、border 幅、
すべてを偶数値で作る

Why ?
50%に縮小した際、エッジが
ボケるため

_参考
Workflow OptimizationDesign Cutting Edge iOS Apps With...
2倍で作るコツ

Photoshop ライブ
エフェクトは使わない

Why ?
拡大縮小した際、比例して
リサイズされないため

_参考
Workflow OptimizationDesign Cutting Edge iOS Apps Wi...
2倍で作るコツ

角丸は、なるべく
CSS3 で実装する

Why ?
縮小した際、つぶれてしまう
ことがあるため

_参考
Workflow OptimizationDesign Cutting Edge iOS Apps With Adob...
2倍で作るコツ

標準のテクスチャは
使わない

Why ?
テクスチャは2倍サイズがなく、
リサイズもできないため

_参考
Workflow OptimizationDesign Cutting Edge iOS Apps With Ado...
2倍で作るコツ

Subtle
Patterns
Why ?

_参考
Subtle Patterns
http://subtlepatterns.com

高品質なテクスチャを
@2x, @1x のセットで
配布している
2倍で作るコツ

In general, bitmaps are your
enemy when designing iOS apps.
Ivo Mynttinen

ざっくりいえば、iOSアプリを
デザインする上でビットマップは
君の敵、って...
ビットマップはシンボル化
ビットマップはシンボル化しておく
カンバスは 横幅 640px

グラフィック
シンボル

非破壊編集
ビットマップはシンボル化しておく
カンバスは 横幅 640px
グラフィックシンボル

ビットマップを
拡大・縮小・回転

非破壊編集

保持

回転やゆがみを
加えても、元画像の状態
はそのまま

•

シンボルを
拡大・縮小・回転

シンボ...
ビットマップはシンボル化しておく

シンボルの注意点
シンボルの中では
乗算・スクリーンなどの
レイヤースタイルは使えない

シンボルの中の
スライスの書き出しがバグる
(CS5以下の場合)
ビットマップはシンボル化しておく

シンボル化しておけば、
320px から拡大して使うなど
どうとでもなる!
@2x と @1x の画像書き出し
@2x と @1x の画像書き出し

まずは、FW から @2x の画像を書き出す
バッチで一括で半分にリサイズして @1x を用意
@2x と @1x の画像書き出し
方法 その1

Automator

•
•

「@2x」の画像を複製

•

ファイル名から
「@2x」を削除する

•

.app 化できるので便利

サイズ調整で 50% に
リサイズ
@2x と @1x の画像書き出し

#!/bin/sh

方法 その2

#dir=$1

Shell Script

find $dir -name "*@2x.*" | while read file;
cd $(dirname $0) ...
@2x と @1x の画像書き出し
方法 その3

FW’s Batch

•
•
•
•

先の2案と同じことが可能

•

生成した画像サイズが
軽め

FWコマンド化できる
Windows でも OK
先の2案より画質が
良さげ
@2x, @1x 画像の振り分けは?
@2x, @1x 画像の振り分け
jQueryで「devicePixelRatio」を判別する
device-Pixel-Ratio が「1.5」以上のデバイスでは、
img を「***@2x.png」など
ファイル名に @2x がついた方に差...
@2x, @1x 画像の振り分け
jQueryで「devicePixelRatio」を判別する
$(function(){
if( 'devicePixelRatio' in window && window.devicePixelRatio ...
@2x, @1x 画像の振り分け

_参考
Adaptation for Retina
display

Optimising for High
Pixel Density Displays.

http://egorkhmelev.githu...
@2x, @1x 画像の振り分け
Media Query で背景画像を振り分ける

.selector {
background: url(../sample.png) no-repeat;
}
@media (-webkit-min-devi...
@2x, @1x 画像の振り分け
CSS4 の「-webkit-image-set()」で振り分ける

.selector {
background:
  -webkit-image-set (
   url( sample.png ) 1x,...
@2x, @1x 画像の振り分け
Media Query のJS版
「window.matchMedia」で振り分ける

var mq = window.matchMedia(
"only screen and (
-webkit-min-de...
@2x, @1x 画像の振り分け
Cloud の画像振り分けサービスで解決

ReSRC.it

Sencha.io Src

http://www.resrc.it/

http://www.sencha.com/learn/how-tous...
@2x, @1x 画像の振り分け
JSライブラリ「Conditionizr」で振り分ける
高精細デバイスにのみに適用させる
JS, CSS, Class を振り分けられる
<script>
conditionizr({
retina : { s...
@2x, @1x 画像の振り分け
ただ、これからは@1x の画像は必要ないかも

• 今やモバイルデバイスのすべてがHiDPI
• PCのHiDPI化もこれから普及?
• そもそも、RWDの普及でピクセルに依存
しないデザインが求められる

脱...
WORKFLOW
NO MORE
for
BITMAP
HIDPI
ビットマップ画像の課題

HiDPI対応の

デバイスの

高解像度な

画面サイズが

画像は重い

更に多様化
ピクセルパーフェクトな

ビットマップに頼れない時代
img画像は写真や図版にのみ使うようにして、

アイコンなどの共通コンポーネントは

脱ビットマップを目指す
Fireworks的 脱ビットマップ

というより、脱img要素
Fireworks的 脱ビットマップ

SVG + Web Fonts
• ベクター(SVG)は

ピクセルに依存しない

• FWでは拡張機能を使って
SVG出力できる

• Web Fonts 化すれば

色・サイズをCSSで容易に
変更可...
Fireworks的 脱ビットマップ

SVG を 対応デバイスでだけ使う
<script src="jquery.js"></script>
<script src="modernizr.js"></script>
<script>
if(!...
Fireworks的 脱ビットマップ

Data URI Scheme
• Base64 形式で、

HTMLやCSSに直接記述

• gzip が有効になる (軽い)
• 内実、ビットマップですが...
• 変換拡張機能が出る噂も

data...
Fireworks的 脱ビットマップ
Data URI Scheme への変換ツール

Data URI Converter

duri.me a super simple dataURI tool

http://www.macupdate....
Fireworks的 脱ビットマップ
Data URI Scheme への変換ツール
Sublime Text 2 + Image2Base64
https://github.com/tm-minty/sublime-text-2-image2...
Fireworks的 脱ビットマップ

_余談
Fireworks の CSS スプライト
機能は、HiDPI時代では
使えない
Retina対応(background-size を
半分に)してくれない

SaSS + Compass などに...
まとめ
カンバスは、基本的に 横幅 640px
ビットマップはシンボル化
なるべくベクターによるパーツ作り
そのグラフィック、ビットマップで
あるべきか?を考える
CSS3, SVG が出力できるのがFWの強み
最後にひとこと
Fireworks関係ないネタが多くて
すいませんでした
ありがとう
ございました
松田直樹

Flickr : Stephen Geyer
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
Prochain SlideShare
Chargement dans…5
×

CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks

デバイスの高精細化が進む中、Fireworks を使ったデザインワークフローはどうなるの?をご紹介

  • Identifiez-vous pour voir les commentaires

CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks

  1. 1. HiDPI 時代の Fireworks 松田直樹 Flickr : ebayink
  2. 2. 松田直樹 2月 発売
  3. 3. What’s HiDPI ? 代表的なものが、Apple製品の Retina Display (iPhone 326 ppi) (iPad 264 ppi) デバイスの高解像度化
  4. 4. HiDPI = = 高ピクセル密度 高 device-pixel-ratio
  5. 5. device-pixel-ratio ?
  6. 6. device-pixel-ratio HTMLコンテンツの1pxを 実際のデバイス上で 何倍のpxで 描画するかを示す数値
  7. 7. は え、なんて? Flickr : Tsahi Levent-Levi
  8. 8. device-pixel-ratio = 2
  9. 9. device-pixel-ratio = 2 @1x Resolution (4dpx) @2x Resolution (16dpx)
  10. 10. device-pixel-ratio = 2 <img src="xxx.png" width="320">
  11. 11. device-pixel-ratio iPhone 4∼ 2 Android 1.5 が多い 326 ppi 250 ppi
  12. 12. device-pixel-ratio 3 HTC J butterfly Xperia Z INFOBAR A02 440 ppi
  13. 13. 進み続ける、 デバイスの HiDPI 化 Flickr : Jeffrey
  14. 14. WORKFLOW for HIDPI
  15. 15. iOSアプリデザインのRetina対応 ワークフローが話題にもなりました http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  16. 16. バシャログ - Retina対応用にページを 分けるFireworksコマンド http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
  17. 17. 画像をRetina対応で書き出しする Fireworksの拡張機能作ったよ。 http://creative-tweet.net/blog/2012/12/retina-image-exporter.html
  18. 18. 株式会社まぼろし まつだなおきさん の場合
  19. 19. カンバスは、基本的に w 640px ビットマップはまずシンボル化 @2x の画像だけ書き出し @1x の画像は一括で半分にリサイズ CSS3, SVG, Web Fonts を活用
  20. 20. カンバスは 横幅 640px
  21. 21. カンバスは 横幅 640px 640px メリット • 多くのスマホの ブラウザが、横幅 320px なため • そのまま書き出せば、 Retina 対応可 • コーダーが別の場合 でも、失敗することが ない
  22. 22. カンバスは 横幅 640px 640px デメリット • すべてのパーツ、 テキストのサイズを 2倍に計算する必要が ある • 実機の実寸との差異が あり、サイズ感が つかみにくい
  23. 23. カンバスが カンバスは 横幅 640px だと... 320px 320px デメリット • あとから @2x 画像が 作りにくい • ビットマップを 拡大すると劣化する • テキストのフォント サイズがおかしくなる • • 9スライスが崩れる 書き出した後で2倍に できない
  24. 24. カンバスは 横幅 640px 実機でのサイズ感が 分かりにくければ... 作ったカンプに、 共通ライブラリの 「iPhone → Hardware」を 重ねてみましょう 画面内が 640px になっています
  25. 25. カンバスは 横幅 640px それでもまだ、 実機でのサイズ感が 分かりにくければ... LiveView https://itunes.apple.com/jp/app/liveview/id301069270?mt=8
  26. 26. カンバスは 横幅 640px 640px の大きいサイズで 作っておけば、 小さいサイズはどうとでもなる!
  27. 27. 2倍で作るコツ
  28. 28. 2倍で作るコツ 高さ、幅、border 幅、 すべてを偶数値で作る Why ? 50%に縮小した際、エッジが ボケるため _参考 Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  29. 29. 2倍で作るコツ Photoshop ライブ エフェクトは使わない Why ? 拡大縮小した際、比例して リサイズされないため _参考 Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  30. 30. 2倍で作るコツ 角丸は、なるべく CSS3 で実装する Why ? 縮小した際、つぶれてしまう ことがあるため _参考 Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  31. 31. 2倍で作るコツ 標準のテクスチャは 使わない Why ? テクスチャは2倍サイズがなく、 リサイズもできないため _参考 Workflow OptimizationDesign Cutting Edge iOS Apps With Adobe Fireworks http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/
  32. 32. 2倍で作るコツ Subtle Patterns Why ? _参考 Subtle Patterns http://subtlepatterns.com 高品質なテクスチャを @2x, @1x のセットで 配布している
  33. 33. 2倍で作るコツ In general, bitmaps are your enemy when designing iOS apps. Ivo Mynttinen ざっくりいえば、iOSアプリを デザインする上でビットマップは 君の敵、って感じ。
  34. 34. ビットマップはシンボル化
  35. 35. ビットマップはシンボル化しておく カンバスは 横幅 640px グラフィック シンボル 非破壊編集
  36. 36. ビットマップはシンボル化しておく カンバスは 横幅 640px グラフィックシンボル ビットマップを 拡大・縮小・回転 非破壊編集 保持 回転やゆがみを 加えても、元画像の状態 はそのまま • シンボルを 拡大・縮小・回転 シンボル化した画像は 拡大縮小を繰り返しても 劣化しない • 劣化 • 画像は大きめ(640px以 上)で用意し、 シンボル化してから 大きさを調整
  37. 37. ビットマップはシンボル化しておく シンボルの注意点 シンボルの中では 乗算・スクリーンなどの レイヤースタイルは使えない シンボルの中の スライスの書き出しがバグる (CS5以下の場合)
  38. 38. ビットマップはシンボル化しておく シンボル化しておけば、 320px から拡大して使うなど どうとでもなる!
  39. 39. @2x と @1x の画像書き出し
  40. 40. @2x と @1x の画像書き出し まずは、FW から @2x の画像を書き出す バッチで一括で半分にリサイズして @1x を用意
  41. 41. @2x と @1x の画像書き出し 方法 その1 Automator • • 「@2x」の画像を複製 • ファイル名から 「@2x」を削除する • .app 化できるので便利 サイズ調整で 50% に リサイズ
  42. 42. @2x と @1x の画像書き出し #!/bin/sh 方法 その2 #dir=$1 Shell Script find $dir -name "*@2x.*" | while read file; cd $(dirname $0) && pwd do width=`sips --getProperty pixelWidth $file | sed -E "s/.*pixelWidth: ([0-9]+)/ • find で「@2x」の 画像を探す • sips コマンドで横幅を 取得 • sips コマンドで 50%に リサイズ • watch できたり便利 1/g" | tail -1` width=`expr $width / 2` newFile=`echo $file | sed 's/@2x//'` sips --resampleWidth $width $(basename "$file") --out $(basename "$newFile") done _参考 iphone用の画像@2x.pngから通常のを生成 http://d.hatena.ne.jp/doorside/20110727/1311782239
  43. 43. @2x と @1x の画像書き出し 方法 その3 FW’s Batch • • • • 先の2案と同じことが可能 • 生成した画像サイズが 軽め FWコマンド化できる Windows でも OK 先の2案より画質が 良さげ
  44. 44. @2x, @1x 画像の振り分けは?
  45. 45. @2x, @1x 画像の振り分け jQueryで「devicePixelRatio」を判別する device-Pixel-Ratio が「1.5」以上のデバイスでは、 img を「***@2x.png」など ファイル名に @2x がついた方に差し替える sample-image@2x.png sample-image.png sample-image.png
  46. 46. @2x, @1x 画像の振り分け jQueryで「devicePixelRatio」を判別する $(function(){ if( 'devicePixelRatio' in window && window.devicePixelRatio > 1 ){ var imgHidpi = $( 'img.hidpi' ).get(); var imgHidpiLength = imgHidpi.length; for (var i=0,l=imgHidpiLength; i<l; i++) { var src = imgHidpi[i].src; src = src.replace(/.(png|jpg|gif)+$/i, '@2x.$1'); imgHidpi[i].src = src; }; } });
  47. 47. @2x, @1x 画像の振り分け _参考 Adaptation for Retina display Optimising for High Pixel Density Displays. http://egorkhmelev.github.com/retina/ http://menacingcloud.com/? c=highPixelDensityDisplays
  48. 48. @2x, @1x 画像の振り分け Media Query で背景画像を振り分ける .selector { background: url(../sample.png) no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5) { .selector { background-image: url(../sample@2x.png); background-size: cover; } }
  49. 49. @2x, @1x 画像の振り分け CSS4 の「-webkit-image-set()」で振り分ける .selector { background:   -webkit-image-set (    url( sample.png ) 1x,    url( sample@2x.png ) 2x   } );
  50. 50. @2x, @1x 画像の振り分け Media Query のJS版 「window.matchMedia」で振り分ける var mq = window.matchMedia( "only screen and ( -webkit-min-device-pixel-ratio: 1.5)" ); if(mq.matches) { ... }
  51. 51. @2x, @1x 画像の振り分け Cloud の画像振り分けサービスで解決 ReSRC.it Sencha.io Src http://www.resrc.it/ http://www.sencha.com/learn/how-touse-src-sencha-io/
  52. 52. @2x, @1x 画像の振り分け JSライブラリ「Conditionizr」で振り分ける 高精細デバイスにのみに適用させる JS, CSS, Class を振り分けられる <script> conditionizr({ retina : { scripts: true, styles: true,           classes: true } Conditionizr }); </script> http://conditionizr.com <html class="retina">
  53. 53. @2x, @1x 画像の振り分け ただ、これからは@1x の画像は必要ないかも • 今やモバイルデバイスのすべてがHiDPI • PCのHiDPI化もこれから普及? • そもそも、RWDの普及でピクセルに依存 しないデザインが求められる 脱ビットマップ
  54. 54. WORKFLOW NO MORE for BITMAP HIDPI
  55. 55. ビットマップ画像の課題 HiDPI対応の デバイスの 高解像度な 画面サイズが 画像は重い 更に多様化
  56. 56. ピクセルパーフェクトな ビットマップに頼れない時代 img画像は写真や図版にのみ使うようにして、 アイコンなどの共通コンポーネントは 脱ビットマップを目指す
  57. 57. Fireworks的 脱ビットマップ というより、脱img要素
  58. 58. Fireworks的 脱ビットマップ SVG + Web Fonts • ベクター(SVG)は ピクセルに依存しない • FWでは拡張機能を使って SVG出力できる • Web Fonts 化すれば 色・サイズをCSSで容易に 変更可能 • 軽い
  59. 59. Fireworks的 脱ビットマップ SVG を 対応デバイスでだけ使う <script src="jquery.js"></script> <script src="modernizr.js"></script> <script> if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); } </script>
  60. 60. Fireworks的 脱ビットマップ Data URI Scheme • Base64 形式で、 HTMLやCSSに直接記述 • gzip が有効になる (軽い) • 内実、ビットマップですが... • 変換拡張機能が出る噂も data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgA AAABQCAYAAABoMayFAAAABHNCSVQICAgIf AAAAAlwSFlzAAALEgAACxIB0t1+/ AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRml vcmtzIENTNui8sowAAAJ/ cHJWV3ic7ZffkZswEMZlEclaiSJSgm/ ck5+vHXeSpxSQcQXXRBrIhOxKAvNH4nwzh 1hYBPJvdz+B5F9/f/5W7+q9k+3W3Xi/ drdLd712Vz6eu8ulu/BRdedzd1ad4sdgsP O9t7ABx988MEHH3zwwQcffPDBBx988MEHH +MTb34nK/P3ovsKP9BeVuR72m0v8kOKrs2 iD+FF28L3Q1NZ/z7CQNv49+tK/jQS6Wn+T
  61. 61. Fireworks的 脱ビットマップ Data URI Scheme への変換ツール Data URI Converter duri.me a super simple dataURI tool http://www.macupdate.com/app/mac/ 46143/data-uri-converter http://duri.me
  62. 62. Fireworks的 脱ビットマップ Data URI Scheme への変換ツール Sublime Text 2 + Image2Base64 https://github.com/tm-minty/sublime-text-2-image2base64
  63. 63. Fireworks的 脱ビットマップ _余談 Fireworks の CSS スプライト 機能は、HiDPI時代では 使えない Retina対応(background-size を 半分に)してくれない SaSS + Compass などに 任せたほうがいい
  64. 64. まとめ カンバスは、基本的に 横幅 640px ビットマップはシンボル化 なるべくベクターによるパーツ作り そのグラフィック、ビットマップで あるべきか?を考える CSS3, SVG が出力できるのがFWの強み
  65. 65. 最後にひとこと
  66. 66. Fireworks関係ないネタが多くて すいませんでした
  67. 67. ありがとう ございました 松田直樹 Flickr : Stephen Geyer

×