CSS Nite in Ginza, Vol.68フォローアップ（2）松田さんのセッション

2013年3月21日（木）、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.68のフォローアップとして、松田直樹さん（まぼろし）の『HiDPI時代のFireworks』のスライドを公開します。

参照リンク

• Design Cutting Edge iOS Apps With Adobe Fireworks
• バシャログ - Retina対応用にページを分けるFireworksコマンド
• creative tweet - 画像をRetina対応で書き出しするFireworksの拡張機能作ったよ。
• iOSアプリ - LiveView
• Subtle Patterns（テクスチャ配布サイト）
• Adaptation for Retina display（画像振り分け方法）
• Optimising for High Pixel Density Displays.（画像振り分け方法）
• ReSRC.it（画像振り分けCloudサービス）
• Sencha.io Src（画像振り分けCloudサービス）
• Conditionizr（デバイスの様々な環境を振り分けるJS）

『現場のプロが教える スマートフォンサイト 制作ガイドブック』

松田直樹さんが執筆された『現場のプロが教える スマートフォンサイト 制作ガイドブック』が、翔泳社から2013年2月にリリースされました。

• 出版社の『現場のプロが教える スマートフォンサイト 制作ガイドブック』紹介ページ
• Amazonで『現場のプロが教える スマートフォンサイト 制作ガイドブック』を見る

メッセージ

今回お話させていただいた松田直樹@まぼろしです。皆様、ご参加いただきまして本当にありがとうございました。

本セッションではFireworksを用いたHiDPIデバイスへのデザイン対応のワークフローについてお話しましたが、あくまで私が今現在採っている手法であり、もっと様々な手法もあるかと思います。皆様が、それぞれに馴染むような手法を見つける際の手助けになれば幸いです。（いい方法があれば、ぜひ教えて下さい！）

Fireworksに直接関係のない内容も多く含んでおりましたが、Webサイト制作全体がFireworksだけで完結できるものはありませんし、デザインと実装を分業されているケースも多くあるかと思い、このような内容にさせていただきました。Web制作ワークフロー全体でのご参考にしていただればと思います。

ともあれ、今回のまとめ的キーワードとしては、「大きいことはいいことだ（カンバス幅640px）」と「脱ビットマップ（SVG）」ということです。

個人的にもワークフローを見直せたりと有意義なイベントでした。ありがとうございました！

私の個人ブログで、Fireworks で SVG Web Fonts を作る際のチュートリアルを説明しています。ご参考まで。

• Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる | 歴史雑談録

アンケートに「振り分け方法をたくさんご紹介されていましたが、どれがベストかと言うのはあるのでしょうか。」という質問がありましたが、現状、個人的な見解としては以下の手法となります。

• img要素の振り分け：Javascript の window.devicePixleRatio を取得して、画像のファイル名を振り分け（スライドp.47参照）
• CSSの背景画像の振り分け：Media Query で背景画像を振り分ける（スライド p.49参照）

Apple の サイトでも使われている手法ですので、最もメジャーな手法だと思われます。