1. スマートフォンサイトを横向きで見たことありますか？
2. 2つのパターンを見比べてみてください
3. スマートフォンサイトのデザインのコツは“リキッドデザイン”
■スマートフォンサイトを横向きで見たことありますか？
スマートフォンでサイトを閲覧する時ほとんどの場合は縦表示が多いと思います。
ですが、スマートフォン向けに最適化されたサイトばかりでないので、中には横表示をすることもあるかと思います。もしくはたまたま横表示になってしまうこともあります。
そもそもスマートフォンではPCや従来型携帯電話と違って、閲覧する際に縦表示と横表示が共存しているのです。どちらで閲覧するかはユーザー次第となってしまいます。
■2つのパターンを見比べてみてください
上記のサンプルサイトを横表示にして閲覧した場合、以下の2つのパターンが考えられます。
パターン1：バナーが小さく余白あり
パターン2：バナーが横幅いっぱい
キャンペーンバナーのサイズが違います。どっちが良いでしょうか。
情報量を比較するとパターン1の方が多くなります。しかしながら、パターン2の方が迫力があるように感じます。この違いはバナーのサイズです。キャンペーンを案内するバナーですがこれはとてもアピールしたい情報です。このバナーが画面いっぱいに表示されていると閲覧者の気を惹くことができそうです。
■スマートフォンサイトのデザインのコツは“リキッドデザイン”
具体的に何が違うのかというと、画像の横幅の指定が違います。パターン1は横幅320px、パターン2は横幅100%指定をしています。
パターン1の場合は縦表示だと横幅が320pxになっているので横幅いっぱいに表示されますが、横表示にすると横幅が余ってしまい余白ができてしまいます。サンプルではセンター寄せを指定しているので左右に余白ができますが、指定していない場合は左寄せとなり右側に大きな余白ができてしまいます。
パターン2の場合は縦表示でも横表示でも常に横幅いっぱいに表示されます。こういった表示サイズに合わせてコンテンツの表示が変わるようなデザインのことを“リキッドデザイン”といいます。
すべての場合でリキッドデザインを採用すれば良いわけではなく目的によって取り入れるべきだと思いますが、PCや従来型携帯電話と違って閲覧する際に縦表示と横表示が共存するスマートフォンのサイトデザインをする上では、リキッドデザインを考慮することが重要となってきています。
