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

20130321_ginza68_0204.jpg

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

参照リンク

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

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

L.png

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

メッセージ

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

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

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

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

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

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

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

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

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

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

毎年年末に開催している「Shift」シリーズの第11弾として、2017年のWeb制作シーンを振り返ります。現在、Facebookにて参加表明を受付中