先日のAppleの発表会でiPhoneの新機種が公開されましたね。ところで、Appleのサイトを見ていて興味深いことがあったので投稿したいと思います。
まずは本題の前に、AppleのレスポンシブWebについて触れたいと思います。
前置き：Appleは一般的なレスポンシブWebサイトではない
Appleのサイトを見ながらブラウザのウィンドウサイズを変更してみてください。特に何も起こらないかと思います。もちろんスマホでAppleのサイトを見てもPCと同じ表示がされるはずです。
ウィンドウに応じて表示が切り替わるようなレスポンシブWebの手法が、Appleのサイトには備わっていないのです。
この、レスポンシブWebが蔓延しきった時代に、です。
でも理由はあるようです。素晴らしい解説をされているサイトがありますのでご紹介します。
参考サイト：
考察：Appleはスマホサイトを作らない。
きちんとWebサイトのデザインを設計する必要がありますが、こういった表現であればPCもスマホも同じユーザビリティを保てるので、とても有効だと思いました。
本題：高さを可変にしたレイアウト
本題です。前置きでは、AppleはレスポンシブWebにしていないと言いましたが、ちょっと違いました。
iPhone5sのサイトを見てみてください。いやー、うにょーんとして気持ち良い動きですね。ところで、ページを開いたままブラウザのウィンドウの高さを変えてみてください。なんと、ウィンドウに応じて画面サイズがうまい具合に切り替わっている！
↑高さを大きめに取った場合
↑高さを小さめに取った場合
残念ながら高さを可変対応しているのはiPhone5sと、iPhone5cのトップページだけみたいですが、そうでないページは普通にスクロールすると、こういう中途半端な見え方になってしまいます。
そういった意味で、高さに合わせた可変レイアウトはとても良いなと思いました。
十字キーのスクロールで動いてくれるのも使いやすくて良いですね。HOMEボタン(Fn+←キー)で画面上部に切り替わるのもさすがApple、芸が細かい。
さいごに
ここまで書きましたが、僕は別にApple信者というわけではありません。。Windows歴の方が圧倒的に長いです。Windowsにだって良いところはきっとたくさんあるはず…！
