column

サイトリニューアルで気が付いた解像度問題。font-sizeの単位は「vw」

CATEGORY PC & Web UX お勉強 最新技術

投稿日:

執筆者:

今年の5月は暑すぎるのではないか!?

こんにちは。TQSの戸清です。

久々の本格的なブログ更新となります。

 

いやはや、5月だと言うのに暑いですね。暑いのは苦手です・・・。

5月末だと言うのに30度を超える日もあるという異常気象ですね。

 

Web制作中はクーラーが効いた部屋で作業出来るのですが、ここ1年ほど「講師業」もやっていて自分が思う「快適温度」に設定出来ないのが暑いという理由です・・・。

女性は冷え性の方が多いので、寒すぎるのはダメなんですね。

 

自分の言う「快適温度」は「冷蔵庫」に近いと思って下さい。

20年ほど前はPCの熱暴走が大問題だったので、クーラーの設定温度は「18度」!

それに慣れてしまっているので「25度」とか「27度」は暑すぎて・・・。

 

でも先生だからわがまま言えません!

対策としては、足の裏に「冷えピタ」張ったこともあるのですが、後半逆に生ぬるくていけません。

PCに密着しないようにしても腱鞘炎の悪化が怖いし・・・。

打つ手無しです・・・。

 

USB扇風機を持ってこようか思案中の今日この頃です。

 

 

大画面化とスマホ対応を考えた「フォントサイズ」

さて、長い前置きでしたが今回は最近のPC事情も含めたコーディングの考え方をお話ししていきたいと思います。

リニューアル制作時に色々と気づいた事がありまして。

何かと申しますと「解像度」です。

 

FullHDに対応しながらスマホ対応も考える

最近のPCはラップトップ(ノート)でもFullHDは当たり前です。

要するに「1920x1080」以上だと言う事です。

 

一昔前は「960グリッド」とか流行っていましたが、「横幅960px」だと1/2しか表示しないと言う事です。

最近MacBookPro2016に買い換えて「2048x1280」とか「2560x1600」とかで表示しているのですが、そうなると「横幅960px」だと本当に小さいんですね。

文字が読めない・・・。

 

それじゃぁと、「横幅1200px」で制作しようと考えましたが、それでも1/2です。

「font-size:14px;」でも老眼の入った目では読めないのですよw。

 

ブログでも有名な「LIG」さんを見て見ると、最近は「17px」になっていました。

やっぱり大きな解像度に対応しているんですね。

 

「img {width:100%; height:auto;}」的な考え方

その上で悩みました・・・。

何かもっとファニーな解決策は無いのか・・・。

画像ファイルを

img {
  width:100%;
  height:auto;
}

的な事をフォントで出来ないのかと・・・。

 

導き出した回答は「vw」でした。

ブラウザの画面サイズでフォントサイズを「可変」してしまおうと考えたんです。

 

PC表示は「1.3vw」、スマホ横表示で「3.5vw」

現在の設定はPC表示で「1.3vw」、スマホ横表示で「3.5vw」です。

色々試したのですがPCはブラウザ表示で横幅3/5をテキスト表示して「40〜50文字」が良い感じかと思いました。

 

上記画像はPC表示ですが、大体のPCで同じ様なフォントサイズで表示されます。

27インチだとかなり大きなフォントになりますがw。

ですが丁度良い読みやすさかなと思っています。

 

スマホだとこんな感じ。

4.7インチ・5インチ・5.7インチ全て同じ様な文字数で表示出来ています。

これが正解かは実験段階なのでどうとも言えませんが、考え方的には「アリ」かなと思っています。

 

スマホ横表示は良いのだが、横表示で不都合発生・・・

スマホ対応も問題無いかと思いましたが、横表示を見過ごしていました。

 

文字がデカいw

老眼には最高の読みやすさですが、フリックする量が増えて宜しくありません。

 

この対応はまだ出来ていませんが、アイデアは湧いています。

メディアクエリーを駆使すれば何とかなるのではと思っています。

例えばこんなCSSだといけるのではと・・・。

@media (min-width: 768px) and (orientation: landscape) { ... }

 

上記CSSは横表示にした場合のメディアクエリーです。

このメディアクエリーで対応出来れば神コードですw。

横表示は「60〜70文字」ぐらいが適当かなと感じています。

近々試してみて良い感じになれば報告したいと思います。

 

 

これからの高解像度対応を考え直そう

今後PCモニター環境は2020年東京オリンピックに合わせ、4K・5Kから8K・9K時代に移行する可能性が高いでしょう。

「1400px」以下の表示はレスポンシブ対応の1部になると予想できます。

予想では1800〜2000pxが標準表示ポイント。

リキッドデザインはこの記事で書いたように「vw」などを使用するようになるのではと思います。

 

 

ただしFullHD(1920px)は無くなることは無いと考えています。

古いサイトは「px」単位のまま残るでしょう。

 

「px」単位の時代は終焉?

今、ふとよぎったことが・・・

レスポンシブ案件が急激に増えたことを考えると、大画面へのレスポンシブ案件と「px」単位から「vw」単位への案件も出てくるかもしれませんね。

早めに「vw」単位で制作をしておくのも良いのかもしれません。

色々なアクシデントへの対応を考え、それらを含めた費用見積も想定しておくことが良いでしょう。

 

この記事を読んでくれた方々も、今後の高解像度対応を考えて下さい。

そう言ったブログで賑わうことを望みます。

そして、自分も勉強させて下さいw

 

 

 


コメントを残す

関連記事

PREV

Tokyo Q Studio Site 2017年度版リニューアル致しました!

サイトリニューアルで気が付いた解像度問題。font-sizeの単位は「vw」

side bar

メニューはこちら

メニューはこちら