レスポンシブのサイトのサイズ指定はどのようにするのがプロのやり方ですが？

Question

https://teratail.com/questions/22751
の続き

レスポンシブのサイトのサイズ指定はどのようにするのがプロのやり方ですが？

レスポンシブなのでこの単位は使ってはいけないということはないのですね。

下記の認識でしょうか？
フォントサイズや、横幅を広げても、拡大しないでほしいところは、セクションのパッディング、マージンなどでもremで、セクションのパッディング、マージンなどで拡大してほしいところは%を使う。
PXは解像度が高いと小さくなりすぎるので使うことは、レスポンシブではないと思ったのですが、使いますか？

ただ、%は同じセクション内の要素のマージンを同じ%にしても、デブツールズ上で見るとPXが違っていたり、思ったとおりにならないことがよくあります。
そのようなことはありませんか？

Answer 1

用途によって違うというのが基本で、レスポンシブを強く意識するならview portに対するサイズで書くのが一番レスポンシブです。

view portが大きくなれば文字も大きくなり、小さくなれば小さくなります。スマホ画面で文字が小さすぎるのは問題ですから、まずそこから文字サイズを決め、逆にPC画面では大きくなりすぎるというのはメディアクエリとcalcで計算できます。

参考サイト: Scalable Text with Maximum and Minimum Sizes in Pure CSS | codepen

しかし、ここまで作りこんでも人によっては文句が出るのが世の常なので、大中小あるいはスライダ等で可変に文字サイズを決めれて、それをローカルストレージやcookieなどに保存できる方が良いという人もいます。

zoomでいいじゃないかといつも思います。読みにくい人は自分のブラウザだけ拡大縮小して、他に迷惑かけんなと思います。
ただし、全部が拡大されるとデザインがおかしくなるというのはありますよね。
なのでremなり、emなりで倍率による制御を作り手側が提供するのはアリです。あくまでデザインのためですね。レイアウトが崩れても大きくしたい人は勝手にブラウザですれば良いと思います。
小さい文字だと読めない人は実物の拡大鏡で読んでる人もいるぐらいですから、提供する側が良かれと思うデザインでも関係なく読めなければ何とかして読むと思うんですよ。

もうね、テレビにPC接続して見ればいいじゃんと思う人もたくさんいましたよ。

で、僕の結論としては自分が良いと思うデザインとサイズで作れば良いということです。
一流のグラフィックデザイナーと言われる人のレイアウト文書でも、書籍でもそれが読めない人は勝手に道具を使って拡大するんですから。

ただ極端に小さい、極端に大きいはダメです。まだ大きい方は読めますが...。

読めない人にあわせるのは後で良いと思います。
まずは読める大半の人に向けて作るべきです。だいたい読めない人に向けて作っていったら色盲だからこの色使うなとか、うんぬんと言われたりします。で、もう面倒くさいからグレーでデザインすると言うと暗すぎると言われたりもします。
トム・クルーズのように文字自体が読めないというか読みにくい病気の人もいますから誰でもが問題ないように見れるようにするのは難しいです。ならば問題のない大半の人が普通に読めたらそれでいいじゃないと言う感じです。

Comments

[退会済みユーザー]

widthなどのサイズは固定でよい場合はすべてrem、可変してほしい場合はすべて%でよいということですね。

フォントのサイズはSP16PX、PC１４PXくらいですかね？

[hidekichi]

その昔フォントは小さいほどスタイリッシュに見えるというのがあったじゃないですか、こぞって10pxとか12pxでスタイルしているサイトも多かったです。で、それは間違いではないと思うんです。

ただ最近は読みやすさも考慮するほうが何かとお得というのもあるので14pxは良い選択ですが、むしろPCでは16pxで横45文字(マージン等の考慮で40文字ぐらい〜)、720pxぐらいの幅にすると、サイドバーが仮に300px程度なら1020pxの幅+スペースと考えて、タブレットにも合うのと、文字を小さくして日付(例えば12px)や脚注(例えば14px)のような説明を入れても読みやすいと思うんです。

14pxベースだと、それら段階を考慮した場合に小さい文字が本当に小さくなりすぎると思うんですよね。ブラウザデフォルト16pxというのはよく考えられていると思います。

スマホなどはスタイリッシュにしたいというのもありながら、画面が小さいので320pxの幅だとすると16pxの場合、20文字分しかなく、読みやすいんですがスクロールが増えてしまうので、可能であれば逆に小さくしても良いかも知れません。ズームもすぐに簡単にできますから。

bootstrapなどは14pxがベースだったと思います。が、日本語のフォントで考えるとやや行間が狭いなと思ったりもします。行間自体はline-heightで調整できますが、日本語で利用する文字の種類が多彩なので、メリハリを付けたいと言う場合は14pxよりも16pxでデザインする方が見た目に美しくなるようにも思います。

ひらがなとカタカナだけなら14pxの方が綺麗だと思うんですけどね。漢字が潰れた感があるんですよ、小さくすると...。ここらは個人的に良いと思うベストなサイズを僕も色々模索している途中です。

結局は美しいフォントとモニターであれば14〜16pxのサイズでの違いはそれほど気にするほどでもないと言うふうにも思います。