Yahoo!スマホサイトの新TOPページが2015年5月20日に新デザインに完全リニューアルされました。流行りのタイムライン型になり、個人的に非常に見やすくて使いやすくなったという感想です。
普段はスマホをタテ向きに固定して閲覧しているのですが、この機会にどのような仕様になっているのかをタテ/ヨコでチェックしてみました。
新Yahoo!スマホサイトでの縦向き/横向きの違い
スマホで閲覧した場合のYahoo!新TOPページを比較してみます。
ご覧のようにタテ向きではコンテンツは全幅ですが、ヨコ向きではコンテンツは全幅とならず左右に余白が出る仕様となっています。画面はiPhone6でのキャプチャです。（残念ながらYahoo!旧TOPページでキャプチャを取っておくのを忘れていました）
Web制作ではスマホ向けサイトは原則としてタテ/ヨコどちらの向きでも最適な状態で提供することが求められています。しかし、Yahoo!新TOPページはスマホのヨコ向きを事実上、推奨環境から外したと言えるのではないでしょうか。ナビゲーション部分はリキッドレイアウトで全幅ですが、そこから下はタテ/ヨコ共通になっています。
関連記事：リスティング広告の表示順位と位置について
ヨコ向きデザインの必要性について
よく考えてみると、iPhone6の画面解像度は1334×750ピクセルです。少し前までのPCモニターの標準的な解像度であるXGA（1024×768）やSXGA（1024×1280）と同等の解像度ですから、レイアウトとしてスマホ用が最適なのかPC/タブレット用が最適なのかは判断が分かれるところでしょう。iPhone6Plusはさらに高解像度の1920×1080ですから、さらにPC/タブレット寄りと考えるべきですよね。
ですのでiPhone6のヨコ向きでスマホ用というのがそもそも無理のある考え方なのかもしれません。
今回の新TOPページの仕様は今後のWeb制作において重要なポイントになると思います。これまではクライアントごとに「タテ向きのみでよい」「タテ/ヨコ向きどちらも対応してほしい」とニーズが分かれていたのが、Yahoo!という大手検索エンジンがタテ向きのみを実装しているということで、仕様決めの際の判断要素として大きく影響しそうです。
YDNのインフェード広告も新TOPリリースにあわせて登場
TOPページに掲載されているYDNも新TOPページのリリースに合わせて、インフェード広告という種類が新登場しましたね。タイムラインに並んで表示されるいわゆるネイティブ広告です。
ネイティブ広告とは、FacebookやTwitterのタイムラインに掲載されている広告と同様、記事に溶け込ませて見せる広告です。ユーザーに「いかにも広告です」という印象を与えず、ストレスフリーな状態で広告を提供するための掲載手段です。
【YDN】広告掲載方式「インフィード広告」について – Yahoo!プロモーション広告 公式ヘルプ
スマホをタテ向きに固定するには
タテ/ヨコ向きでの閲覧に関する補足情報です。私は普段からスマホはタテ向き固定にしています。同じようにスマホの画面を常にタテ向きに固定されたい方は以下のように設定を行ってください。閲覧中に画面がぐるぐる回転してうっとおしいと思われていた方は使いやすくなると思います。（既にご存知の方はスルーして頂いて結構です）
手順としては
- スマホ画面下部エリアから上部エリアへ向けてスワイプする
- 表示されたメニューの右上のアイコンをタップする
- アイコンの表示が白色に変われば設定完了
になります。
最後に
Yahoo!スマホTOPページがヨコ向きでの閲覧を推奨環境から外している（と思われる）ので、今後のWeb制作現場におけるデファクトスタンダードになりそうな予感がします。横向きデザインの必要性に悩まされていた方々には朗報とも言えるのではないでしょうか。
「Yahoo!のスマホサイトもヨコ向き専用のデザインは提供していませんよ」というように説明する機会が増えてくるかもしれませんね。
ご参考になりましたら幸いです。
ジムで使えるLINEスタンプです