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

1. HiDPI 時代の
Fireworks
松田直樹
Flickr : ebayink

2. 松田直樹
2月
発売

3. What’s
HiDPI ?
代表的なものが、Apple製品の
Retina Display
(iPhone 326 ppi)
(iPad 264 ppi)
デバイスの高解像度化

4. HiDPI
= =
高ピクセル密度
高 device-pixel-ratio

5. device-pixel-ratio ?

6. device-pixel-ratio
HTMLコンテンツの1pxを
実際のデバイス上で
何倍のpxで
描画するかを示す数値

7. は
え、なんて？
Flickr : Tsahi Levent-Levi

8. device-pixel-ratio = 2

9. device-pixel-ratio = 2
@1x Resolution
(4dpx)
@2x Resolution
(16dpx)

10. device-pixel-ratio = 2
<img src="xxx.png" width="320">

11. device-pixel-ratio
iPhone 4∼
2
Android
1.5
が多い
326 ppi
250 ppi

12. device-pixel-ratio
3
HTC J
butterfly
Xperia Z
INFOBAR
A02
440 ppi

13. 進み続ける、
デバイスの HiDPI 化
Flickr : Jeffrey

14. WORKFLOW
for
HIDPI

15. iOSアプリデザインのRetina対応
ワークフローが話題にもなりました
http://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/

16. バシャログ - Retina対応用にページを
分けるFireworksコマンド
http://creative-tweet.net/blog/2012/12/retina-image-exporter.html

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

18. 株式会社まぼろし
まつだなおきさん の場合

19. カンバスは、基本的に w 640px
ビットマップはまずシンボル化
@2x の画像だけ書き出し
@1x の画像は一括で半分にリサイズ
CSS3, SVG, Web Fonts を活用

20. カンバスは 横幅 640px

21. カンバスは 横幅 640px
640px
メリット
•
多くのスマホの
ブラウザが、横幅
320px なため
•
そのまま書き出せば、
Retina 対応可
•
コーダーが別の場合
でも、失敗することが
ない

22. カンバスは 横幅 640px
640px
デメリット
•
すべてのパーツ、
テキストのサイズを
2倍に計算する必要が
ある
•
実機の実寸との差異が
あり、サイズ感が
つかみにくい

23. カンバスが
カンバスは 横幅 640px だと...
320px
320px
デメリット
•
あとから @2x 画像が
作りにくい
•
ビットマップを
拡大すると劣化する
•
テキストのフォント
サイズがおかしくなる
•
•
9スライスが崩れる
書き出した後で2倍に
できない

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

25. カンバスは 横幅 640px
それでもまだ、
実機でのサイズ感が
分かりにくければ...
LiveView
https://itunes.apple.com/jp/app/liveview/id301069270?mt=8

27. カンバスは 横幅 640px
640px の大きいサイズで
作っておけば、
小さいサイズはどうとでもなる！

28. 2倍で作るコツ

29. 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/

30. 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/

31. 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/

32. 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/

33. 2倍で作るコツ
Subtle
Patterns
Why ?
_参考
Subtle Patterns
http://subtlepatterns.com
高品質なテクスチャを
@2x, @1x のセットで
配布している

34. 2倍で作るコツ
In general, bitmaps are your
enemy when designing iOS apps.
Ivo Mynttinen
ざっくりいえば、iOSアプリを
デザインする上でビットマップは
君の敵、って感じ。

35. ビットマップはシンボル化

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

37. ビットマップはシンボル化しておく
カンバスは 横幅 640px
グラフィックシンボル
ビットマップを
拡大・縮小・回転
非破壊編集
保持
回転やゆがみを
加えても、元画像の状態
はそのまま
•
シンボルを
拡大・縮小・回転
シンボル化した画像は
拡大縮小を繰り返しても
劣化しない
•
劣化
•
画像は大きめ(640px以
上)で用意し、
シンボル化してから
大きさを調整

38. ビットマップはシンボル化しておく
シンボルの注意点
シンボルの中では
乗算・スクリーンなどの
レイヤースタイルは使えない
シンボルの中の
スライスの書き出しがバグる
（CS5以下の場合）

39. ビットマップはシンボル化しておく
シンボル化しておけば、
320px から拡大して使うなど
どうとでもなる！

40. @2x と @1x の画像書き出し

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

42. @2x と @1x の画像書き出し
方法 その1
Automator
•
•
「@2x」の画像を複製
•
ファイル名から
「@2x」を削除する
•
.app 化できるので便利
サイズ調整で 50% に
リサイズ

43. @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

44. @2x と @1x の画像書き出し
方法 その3
FW’s Batch
•
•
•
•
先の2案と同じことが可能
•
生成した画像サイズが
軽め
FWコマンド化できる
Windows でも OK
先の2案より画質が
良さげ

45. @2x, @1x 画像の振り分けは？

46. @2x, @1x 画像の振り分け
jQueryで「devicePixelRatio」を判別する
device-Pixel-Ratio が「1.5」以上のデバイスでは、
img を「＊＊＊@2x.png」など
ファイル名に @2x がついた方に差し替える
sample-image@2x.png
sample-image.png
sample-image.png

47. @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;
};
}
});

48. @2x, @1x 画像の振り分け
_参考
Adaptation for Retina
display
Optimising for High
Pixel Density Displays.
http://egorkhmelev.github.com/retina/
http://menacingcloud.com/?
c=highPixelDensityDisplays

49. @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;
}
}

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

51. @2x, @1x 画像の振り分け
Media Query のJS版
｢window.matchMedia」で振り分ける
var mq = window.matchMedia(
"only screen and (
-webkit-min-device-pixel-ratio: 1.5)"
);
if(mq.matches) {
...
}

52. @2x, @1x 画像の振り分け
Cloud の画像振り分けサービスで解決
ReSRC.it
Sencha.io Src
http://www.resrc.it/
http://www.sencha.com/learn/how-touse-src-sencha-io/

53. @2x, @1x 画像の振り分け
JSライブラリ「Conditionizr」で振り分ける
高精細デバイスにのみに適用させる
JS, CSS, Class を振り分けられる
<script>
conditionizr({
retina : { scripts: true, styles: true,
classes: true }
Conditionizr
});
</script>
http://conditionizr.com
<html class="retina">

54. @2x, @1x 画像の振り分け
ただ、これからは@1x の画像は必要ないかも
• 今やモバイルデバイスのすべてがHiDPI
• PCのHiDPI化もこれから普及？
• そもそも、RWDの普及でピクセルに依存
しないデザインが求められる
脱ビットマップ

55. WORKFLOW
NO MORE
for
BITMAP
HIDPI

56. ビットマップ画像の課題
HiDPI対応の
デバイスの
高解像度な
画面サイズが
画像は重い
更に多様化

57. ピクセルパーフェクトな
ビットマップに頼れない時代
img画像は写真や図版にのみ使うようにして、
アイコンなどの共通コンポーネントは
脱ビットマップを目指す

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

59. Fireworks的 脱ビットマップ
SVG + Web Fonts
• ベクター(SVG)は
ピクセルに依存しない
• FWでは拡張機能を使って
SVG出力できる
• Web Fonts 化すれば
色・サイズをCSSで容易に
変更可能
• 軽い

60. 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>

61. 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

62. 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

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

64. Fireworks的 脱ビットマップ
_余談
Fireworks の CSS スプライト
機能は、HiDPI時代では
使えない
Retina対応（background-size を
半分に）してくれない
SaSS + Compass などに
任せたほうがいい

65. まとめ
カンバスは、基本的に 横幅 640px
ビットマップはシンボル化
なるべくベクターによるパーツ作り
そのグラフィック、ビットマップで
あるべきか？を考える
CSS3, SVG が出力できるのがFWの強み

66. 最後にひとこと

67. Fireworks関係ないネタが多くて
すいませんでした

68. ありがとう
ございました
松田直樹
Flickr : Stephen Geyer