注意:⚠️技術的な内容については期待しないでください。また、初投稿なので読みづらいかと思います。ご容赦ください。
新iPad Pro発表！！
日本時間2018年10月30日 23:00、ニューヨークで行われたAppleのイベントで新しいiPad Proが発表されましたね！
期待通りのフルディスプレイ、Face ID、磁力でくっつく新しいApple Pencil。何もかもが素晴らしくて速攻買いたくなりました。
Appleのサイトで詳細を確認しよう！
と思って僕はAppleのiPad Proのページに飛びました。もちろんiPhoneで。
(以後iPhoneのSafariでの閲覧を前提に話を進めます)
はじめまして！！
僕はワクワクしながらページをスクロールしました。そして思ったのです。
あ！こんなところに再生ボタンがある！！
発表会をライブで見たのでPVは既に視聴済みでしたが、こっちだと日本語字幕がついているのでもう一度見る事にしました。
横画面にして、再生ボタンをタップ！
あれ、、、？
なんということでしょう。iPhoneを横向きにした途端、Safariがページをリロードし始めたではありませんか！！
ページがクラッシュしたのかな、、？
最初はそう思っていました。しかし次の瞬間！そこには全く違う景色が広がっていました、、、
なんこれ？！しかも縦にスクロールできない！！
何が起こったのか
- 画面の向きを変える
- ブラウザの縦横のサイズが変わる
- JavaScriptでそれを検知
- 横画面用にページを再構築(レイアウトや画像)
大急ぎで書いたので、ちゃんと調べたりコード読んだりしたわけではありませんが、恐らくこれで合っているでしょう。
リロード後に読み込んでいるURL・HTMLファイルはどちらも同じなので、別のページに飛んだわけではないようです。
これの何が最悪なのか
画面の向きやサイズによって表示内容やその方法を変えるのは、モバイルデバイス向けのページにはむしろ有効な手段と言えるでしょう。
しかし
このページには以下のような問題点があると感じました。
- 切り替えにリロードを伴う。
- やたら横スクロール
- と思いきや縦スクロールも混在
切り替えにリロードを伴う
PC版とモバイル版で別々のページを用意しているのであれば全く問題ありませんが、このページはそうではありません。
リロードすることによりユーザーを待たせ、体験を悪化させる上にサーバー、回線、デバイスに余計な負担をかけてしまいます。
さらにこのリロードは先述のように動画再生中でも強制的に発動するため、ますます不適切です。。。
やたら横スクロール
スクリーンショットの右の方に、「スワイプ〉」とあります。
「横向きに持ってるんだから横スクロールにしよう！」というクリエイティブな発想が見受けられますが、実際はそんなに良いものではない。ものすごく見づらい、、
加えて、このページの横スクロールはなぜか非常に重く、カクカクとしていました。「僕がiPhone 6s Plus使ってるから重いのか？」とか思ったりもしましたが、そんなはずは、、、
追記
iPhone Xでも同様に少しカクツクとのコメントをいただきました。やっぱり性能は関係なさそうですね。
と思いきや縦スクロール
参考動画
これだけ振り回されて、最終的には裏切られました。
なんと、このページの最後の部分は横にスワイプしてるのに縦にスクロールしだした！！かと言って縦にスワイプしてもスクロールしない、、、
まとめ
何をしたいのかよくわからないページになってしまっていると感じました。(縦持ちならいつも通り最高なんだけどなぁー、、、)
トップの画像を横向きのiPad Proに置き換えて、レイアウトを少しCSSのメディアクエリでいじるだけの方がよっぽど良いものになった気がしました。