Web画面における拡大倍率によるレイアウトの崩れをどの程度までカバーすべきか？

Question

前提・実現したいこと

現在、フロントサイドの勉強の一環として、
html+css+JavaScriptを用い、画面上に画像や文字列、アイコン等を表示するプロトタイプ画面を個人的に作成しています。
(※Googleフォトみたいなものです。）

その上記の開発において、Web画面における拡大倍率にどう対応するのがベストなのかが
判断できず質問させていただきます。

発生している問題

「基本的にはユーザーは拡大率100％の状態でWeb画面を用いる」という勝手な前提(妄想)で開発していたのですが、
進めていくうちに自分自身拡大倍率を変更して作業することがあったため、そのような前提では話にならないと思うに至りました。

ただ、対応を入れるとなるとどの程度まで考慮すべきかという点で行き詰まっています。
また、そもそもどの程度まで対応するのが一般的にはなのでしょうか？

【行き詰っている理由】
1.ユーザー目線に立った時、何がベストなのかがわからない。
例えば、スタイルシートにてサイズを％指定したボタンがあり、拡大率125%まで視認できていたが、
それ以上になると見えなくなる場合においては以下のことが考えられます。
開発者（自分）：普通に考えてボタンを押すときには、拡大率が125%未満のタイミングしか考えられない
ユーザー　　　：画像・文字がデフォルトでは小さすぎるので125%にしたのに、ボタンが隠れて使えない(怒)

2.拡大率変更による妥協点はどう判断するものなのか
teratailやQiitaなどのエンジニア向けサイト、技術系のブログサイトを最大拡大率で見てみると、
ヘッダーが画面の1/3を占めていたり、表の2列目、3列目がスクロールしないと見えないなどの現象が存在しています。

【現時点で考えている対応策】
・拡大率変更の無効化し、画像の大きさの変更には⊕ボタンや⊖ボタンを設けることで
画面全体では無く、中の要素のみの拡大・縮小をできるようにする。
（⇒ただ、拡大率無効化方法は調査中で、また、無効化をすること自体どうなのか？という疑問はあります。）

【対象ブラウザ】
Google chrome(Version:71.0.3578.98)　/ 25% ～ 500%

※参考までに
Microsoft Edge(Version:44.17763.1.0) / 10% ～ 1000%

Answer 1

拡大されると言うことは画面が小さくなる（ウィンドウが小さくなる）と同義と考えてください。
拡大した結果ボタンや文字がかぶってしまうのはサイズの指定方法に問題があります。
おそらく現在のページは拡大どころか
”おじいちゃんのPCやスマホ”等の標準フォントサイズが巨大になっているブラウザで表示すると、
100%表示のままでも崩れてしまうかもしれません。
下記のどちらかの方法に合わせてページを作成してください。

現在のWEBページ制作はざっくりと
・PCブラウザを基本としたすべてが拡大縮小される固定デザイン
・画面サイズ（物理サイズ・拡大率）を基準に表示が変わるレスポンシブデザイン

の２つがあります。
PCブラウザを基本とした表示の場合はすべてのサイズをピクセルを基本として決め打し、
パーセント指定などが混在しないようにし、すべてが拡大縮小されることにより、
デザインの崩れを防ぎます。
また、環境により100%の文字サイズも異なる為こちらも決め打ちしてしまいます。
この場合拡大表示は「虫眼鏡」のような機能として使用できます。
とても小さな画面の端末ではみ出てしまう場合は拡大時と同じくスクロールして使用します。

レスポンシブデザインの場合、サイズや位置の決め打ちを行わず、
画面サイズやフォントサイズ等の環境に合わせて配置が動的に変わるようにデザインします、
これにより画面サイズが小さな端末でも快適に使用できるようになります。
画面が大きな端末で拡大表示した場合は画面が小さい端末と同じ表示となります。

拡大縮小については、
グーグルフォト等のアプリケーション的なページがそうであるように、
小さな文字サイズを使用していない場合、スマホでの拡大表示を無効にするのは問題ない処置です。
標準の文字サイズが読みづらいのであれば標準の文字サイズそのものを変更して使用するのが、
基本的な仕様の為です。
（Windowsの設定、Chromeの設定、Androidの設定…）
画面が大きな端末（PCやタブレット等）での拡大縮小は禁止せず（技術的に難しい上に利益がない）
拡大された場合は自動的に画面が小さな端末での表示となります。

逆に小さな文字で補足情報も表示する等といったたくさんの情報をざっと見る為のページの場合は、
拡大縮小機能を殺さずに使用されるのが普通です（Google検索結果等）

「基本的にはユーザーは拡大率100％の状態でWeb画面を用いる」で行くのであれば崩れない固定デザインを。
多様な環境へ一つのページでの対応を考えるのであれば固定位置でのデザインを行わず、
レスポンシブデザイン（やアダプティブ・レイアウト）を勉強すべきかと思います。
いろいろ検索してみてください。

Comments

[begin2016]

shinobu_osakaさん、回答ありがとうございます。

固定デザイン・レスポンシブルデザインに関する知識が浅いため、
考慮する範囲が漠然としすぎていたようです。
深堀りしてみます。

また、本筋からは逸脱してしまいますが、1点参考にお聞きしたいです。
開発途中ということもあり、現在実装の最中なのですが、
デザインと機能の優先度はどのようにお考えでしょうか？

-----------------------------------------------------------------------------------------
全機能を実装後にデザインを決め、対応を行ったほうがいいのか？
一度立ち止まりデザインを決めてから、機能の実装をリスタートしたほうがいいのか？
-----------------------------------------------------------------------------------------

[shinobu_osaka]

今どきのWEBアプリケーションでは、基本UIありきかと思います。
如何に良いユーザーインターフェース・使い勝手を実現するかがキモかなと。
UIが悪ければ機能が良くとも低評価になりますし、
既存サービスでもUIを一新すれば高評価だったり…。
コードありきで作成するとUIの自由度がどうしても下がってしまいますし、
後からUIのためにコードを変更したりする羽目になってしまいますので、
まずはUIデザインからが良いかと思います。

[begin2016]

やはりUIデザインの見直しが重要な鍵となりそうですね。
shinobu_osakaさんに提示していただいた観点での再考をしてみたいと思います。

Answer 2

個人的には「100％基準」の製作で問題ないと考えています。拡大するしないはユーザーに判断させて、そのうえでスクロールがでるのは仕方が無いと思います。

Comments

[begin2016]

yoshinaviさん、回答ありがとうございます。
いただいた回答について一点質問があります。

＞個人的には「100％基準」の製作で問題ないと考えています。
→上記の「問題ない」という根拠となるのは、以下のようなものでしょうか？
(1)本来の機能が失われるわけではない。
(2)拡大・縮小におけるレイアウトの崩れはユーザーも重々承知してあるはず。

[yoshinavi]

GoogleChromeだと、500％-25％の間で設定できますが、実際にこの拡縮で使用する人がいるかどうかは不明ですので、特に要望が無ければ「100％基準」で問題ないです。

どうしてもの場合、ある程度の値でpx固定させてスクロールで対処するしかないと思います。