折りたたみスマホ「iPhone Duo」の発表と、それに合わせて登場した「iPhone Duo Simulator」というツールについて、改めて調べてみました。
折りたたんだ状態、開いた状態、それぞれでWebページやWebアプリがどう表示されるかを確認できるシミュレータのようで、UIデザイナーの間ではちょっとした話題になっていました。
価格が364,800円からという点にも驚きましたが、自分がそれ以上に「うわ、来たか」と思ったのは、また新しいビューポートのパターンが増えるという事実の方でした。
スマホ・タブレット・デスクトップだけでも大変だったのに、今度は「折りたたみ」という状態変化まで考慮しないといけません。今回はこのニュースをきっかけに、自分がこれまで多様なビューポート対応で苦労してきた経験を振り返ってみたいと思います。
「ブレイクポイントを増やせば解決する」と思っていた頃
自分がまだ経験の浅かった頃、レスポンシブ対応というのは「ブレイクポイントを何個か用意して、それぞれでレイアウトを組み直せば終わり」という単純な作業だと思い込んでいました。
スマホ用・タブレット用・PC用の3パターンをデザインカンプで用意して、あとはコーディングという進め方です。
ところが実際に案件を進めていくと、iPadのSplit View、Androidのマルチウィンドウ、ブラウザの縮小表示など、想定していた「幅」の外側にあるケースが次々と出てきました。特に社内ツールの管理画面を作っていたときは、営業チームが外部モニターを縦にして使っていたり、タブレットを横向きで固定して使っていたりと、こちらが想定していない「使われ方」が普通に存在していて、その都度レイアウトが崩れているというクレームが来ていました。
『とりあえず375pxと1440pxだけ作っておけば大丈夫』という時代は、もうとっくに終わっていたんだなと、あの頃になって気づかされました。
「コンテナ」で考える発想への転換
この経験があってから、自分はデザインをするときに「画面幅」ではなく「コンポーネントが置かれる場所の幅」で考えるように意識を変えました。いわゆる「コンテナクエリ」的な発想です。
カードコンポーネントひとつとっても、サイドバーに置かれるのか、メインエリアに大きく置かれるのか、モーダルの中に置かれるのかによって、最適な見え方は変わってきます。
折りたたみスマホのシミュレータが出てきたというニュースを見て、自分が真っ先に思ったのは「これは画面幅の話であると同時に、アスペクト比の話でもあるな」ということでした。折りたたんだ状態は縦に長く、開いた状態は正方形に近くなります。同じコンポーネントでも、置かれる「箱」の縦横比が変わるだけで、見え方も使い勝手も大きく変わってくるはずです。
