「レスポンシブWebデザインで変わるワークフロー」のプレゼン資料をアップしました

2013/04/21 23:19 | レスポンシブWebデザイン

上にスライドが表示されない場合はこちらからご覧ください。

3月9日に行われたSwapSkills Doubbble09 「マルチデバイス時代の新常識
レスポンシブWebデザインの今と未来」という勉強会で「レスポンシブWebデザインで変わるワークフロー」という題名でお話をさせていただきました。プレゼン資料の公開のお許しが出たのでシェアします。プレゼン資料だけだと分かりづらい部分もあるかと思いますが、少しでもなにかのお役に立てば幸いです。

また、関連する内容で、このブログの記事でぜひ読んでいただきたいものをご紹介しておきます：

ちなみに、他のセッションでは、表示パフォーマンスをはじめ、プロトタイプ作成に使えそうなツール「Adobe Reflow」の紹介やRWD制作の最新事情（VHやVWについての興味深い話など）のお話がありました。宣伝になってしまいますが、僕のセッションも含め講演の内容は電子書籍化する予定だそうです。近日こちらで告知されるはずです。乞うご期待！

レスポンシブWebデザインは臨機応変に使うのが良い

2013/04/16 23:51 | レスポンシブWebデザイン

「レスポンシブWebデザイン」が題に入る本を書いてはいますが、レスポンシブWebデザイン（RWD）という手法を選択しなければならない、絶対にRWDでなければならないという理由はないと考えています。なぜなら、プロジェクトごとに向き不向きはありますし、そもそも発注側の企業文化や制作会社との相性、信頼関係の深度などによっては、RWDという制作の手法が向いていない可能性もあります。

そう考えると、なんでもかんでも安易にRWDで良いかというと、そうでもないように思います。長期的な視野で考えるとRWDのような手法が良いと考えていますが、だからといって現段階でそれが唯一の方法だとは考えていません。ゼロか百かの選択肢だけじゃなく、必要な場合は、ちょっとレスポンシブという臨機応変な対応もありですし、プロジェクトによっては個別スマホサイトを作ったほうが良いケースもあるかもしれません。

では、ウェブサイトの制作手法を選ぶにあたって、なにを考えておけば良いのでしょうか？
例によって長文ですが、レスポンシブWebデザインで実際にウェブサイトを作り、運営して、本まで書いて考えてきたことを、トピックを絞ってもう一度整理してみます。

続きを読む

「そのアプリどこでインストールできるの？ → ウェブでしょ！」のForecast.ioアプリが面白い

2013/04/13 11:38 | ウェブについての考察など

「It’s not a web app. It’s an app you install from the web.」という記事がTwitterで流れているのを見て、ちょっと衝撃的だったのでご紹介します。

It’s not a web app. It’s an app you install from the web.

[意訳]
ウェブアプリじゃなくて、ウェブからインストールするアプリだよ

ようするにウェブアプリなんですけど…

「アプリ」という概念に対する彼らのアプローチがすごく面白いんです。まず、Forecast.ioのウェブサイトにiPhoneでアクセスすると、以下の画面が出てきます。 続きを読む

25%ファイルサイズをカットできる画像フォーマット「WebP」の可能性

2013/04/09 22:32 | ウェブ制作・運営ノウハウ

先日のCloudFourのレスポンシブ・イメージについての記事にWebPのことが書かれていて興味がわいたので、実際に使えるものなのか調べてみました。

このWebP（ウェッピーと読む）の最大のメリットはJPEGと比べて25%近くファイルサイズを小さくできるところです。ウェブページを構成するファイルの多くを占める画像ファイルのサイズを25%カットできたら、表示パフォーマンスをかなり向上できます。しかし、一つの大きな問題としてiOSでのサポートがありません。そのため、結論から言ってしまうと、モバイル端末からのアクセス・シェアでAndroidユーザ（しかも4.0以降）が圧倒的に多ければWebPを利用する価値はありますが、逆にiOSユーザが多い場合は現段階ではメリットが考えられません。

ただ、Android端末のシェアは拡大していますし、万が一iOS SafariでWebPが対応されることになれば状況は180度変わってきます（Blinkの件でもGoogleとAppleの仲が悪そうなので、難しい状況にはありますが…）。現段階ではあまり積極的に使えるものではないですが、どんな可能性を秘めたものなのかだけでも知っておく価値はあると思います。

続きを読む

いまさら聞けないRetina対応のための「ピクセル」の話

2013/04/01 19:34 | ウェブ制作・運営ノウハウ

個人的には高解像度ディスプレイへの対応より、表示パフォーマンスのほうが大切だと考えているので、あまり積極的に高解像度ディスプレイへの対応について考えてきませんでした。ところが、最近発売される端末を見ていると、ほとんどの端末が高解像度で、通常の3倍サイズの画像が必要になるCSSピクセル比が3倍なんていう端末も出てきています。先日のSVGに関する記事もその流れから書いたもので、その記事にコメントいただいていた通り、高解像度端末が普通の時代が「近い将来」ではなく「今でしょ！」になっています。

たとえば、レスポンシブWebデザインで様々な画面サイズに対応したウェブサイトを作っても、高解像度端末では画像がボヤけたものばかりになってしまい、ユーザー体験に悪影響を及ぼす可能性も出てきます。競争が激しい昨今、特にイメージを重視するビジネスでは、ウェブサイトでもクリアな画像で鮮明なイメージを印象づけておくことは必須になります。※それでもページの表示スピードのほうが重要だと思いますがw

ということで、今回も高解像度ディスプレイ対応関連の内容ですが、SVGに続き今回はRetina対応に必要な「ピクセル」関連の基本情報についてまとめてみました。まずは、2種類のピクセルの定義から。次に、メディアクエリでの高解像度ディスプレイ対応についてまとめていきます。

注） この記事で書いている内容はウェブサイトの制作を念頭に置いています。アプリ制作に関する情報とは若干違ってくる可能性があるのでご注意を！

2種類のピクセル

デバイス・ピクセル（ハードウェア・ピクセル）

device pixel / hardware pixel

デバイス・端末がサポートする物理的な最小単位のピクセル。ハードウェア・ピクセルともいう。デバイス・ピクセルのほうが一般的に使われているようなので、この記事では統一してデバイス・ピクセルを使います。

CSSピクセル

css pixel / reference pixel

CSSで使う論理上のピクセル。デバイス・ピクセルが物理的なピクセルの数であるのに対し、CSSピクセルは論理上のピクセルの数です。デバイス・ピクセルとCSSピクセルの数が同じだったころは問題はありませんでした。しかし、Retinaディスプレイの登場で、それらが違う数になったため、デバイス・ピクセルとCSSピクセルを明確に分けて考える必要が出てきました。

例) iPhone 4のデバイス・ピクセルとCSSピクセルの違い

たとえばiPhone 4のスクリーンの物理的なピクセル数であるデバイス・ピクセルは640 x 960pxですが、論理上のピクセル数であるCSSピクセルは320 x 480pxになります。そのため、iPhone 4の場合、1つのCSSピクセルを4つのデバイス・ピクセルを使って表現しています。

ピクセル関連のその他の単位について

デバイス・ピクセル比（device pixel ratio）とは？

上で説明したデバイス・ピクセルとCSSピクセルの比率のことです。この比率が1:1、2:1、3:1の場合を図で表すと以下のようになります。たとえばiPhone 4の場合は真ん中の2:1になります。

デバイス・ピクセル比が 1:1 の場合、一番左の図のように、1つのCSSピクセルが1つのデバイス・ピクセルで表現されます。2:1の場合、1つのCSSピクセルが4つのデバイス・ピクセル、また、3:1の場合は9つ（3 x 3）のデバイス・ピクセルを使ってディスプレイに描画されます。

ピクセル密度（pixel density）とは？

1インチの中にあるピクセルの数（立方計算ではない）= ppi (pixels per inch)。dpi (dots per inch)も一般的に使われていて、これらは同じ意味で使われている場合が多いようです。たとえば、最近の端末のピクセル密度は以下のようになっています。

端末 デバイス・ピクセル（px） ピクセル密度（ppi） ピクセル比
iPhone 5 640 x 1136 326 2
Galaxy S IV 1080 x 1920 441 2
HTC One 1080 x 1920 468 3
Xperia Z 1080 x 1920 443 3

ピクセル密度とピクセル比の関係

ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。

※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。
※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。

ピクセル比に似た値「dp」とwindow.devicePixelRatio

Androidの密度非依存ピクセル「dp」

Density-independent Pixel / dipともいう

このdpという単位は、Androidアプリを作る際に使われる単位で、Androidの開発者向けウェブサイトではDevice-independent Pixel（密度非依存ピクセル)という単位を定義しています。これは160dpiのピクセル密度を持つディスプレイで表示される1pxを1dpとしたもので、たとえば、320dpiの場合1px = 2dp1dp = 2px（2013/10/27修正）に、480dpiの場合3dp1dp = 3px（2013/10/27修正）になります。

この単位と上述のデバイス・ピクセル比は違うものなので注意が必要です。

window.devicePixelRatioについて

それぞれの端末のピクセル比が掲載されているウェブサイトは上述したWikipediaのページか、こちらのブログ記事しか見つけられませんでした。ピクセル密度は書いてあるんですが、ピクセル比は端末のスペックなどには書いてない仕様なんですね。そこで登場するのがwindow.devicePixelRatioです。

端末のピクセル比はwindow.devicePixelRatioを使うことで端末から取得することができます。たとえば、以下のようにJavaScriptを使ってピクセル比を表示させると僕のiPhone 5や同僚のGalaxy Nexusでは「2」と表示されました。ちなみに、QuirksModeさんが、こんな便利なテストページを作ってくれています。

<script>
document.write(window.devicePixelRatio);
</script>

window.devicePixelRatioの注意点

ところが、このwindow.devicePixelRatioを使う際は以下の2つに注意が必要です。

  1. FirefoxやIEでサポートされていない
  2. 同じ端末でもブラウザによって違う値を返す

QuirksModeのこの記事によると、たとえば、ディスプレイ・サイズが720 x 1200pxのGalaxy Nexusでは、AndroidブラウザやChromeでは2になるのが、Operaでは2.25になるそうです。これは、AndroidやChromeでは360pxをCSSピクセルにして計算しているのに対して、Operaでは320pxで計算しているからだそうです。

Androidブラウザの場合
720 ÷ 360 = 2

Operaの場合
720 ÷ 320 = 2.25

また、iPhone 5のSafari、Chrome、Operaで試してみたんですが、それぞれ、2、2、1が返されました。なぜかOperaだけ1でした。なぜ？？？これは謎です。

※Android端末では2.0以上でサポートされています。
※devicePixelRatioについてはこちらやこちらのQuirksModeさんの記事(英語)が参考になります。