目次
今年の５月は暑すぎるのではないか！？
こんにちは。TQSの戸清です。
久々の本格的なブログ更新となります。
いやはや、５月だと言うのに暑いですね。暑いのは苦手です・・・。
５月末だと言うのに３０度を超える日もあるという異常気象ですね。
Web制作中はクーラーが効いた部屋で作業出来るのですが、ここ１年ほど「講師業」もやっていて自分が思う「快適温度」に設定出来ないのが暑いという理由です・・・。
女性は冷え性の方が多いので、寒すぎるのはダメなんですね。
自分の言う「快適温度」は「冷蔵庫」に近いと思って下さい。
２０年ほど前はPCの熱暴走が大問題だったので、クーラーの設定温度は「１８度」！
それに慣れてしまっているので「２５度」とか「２７度」は暑すぎて・・・。
でも先生だからわがまま言えません！
対策としては、足の裏に「冷えピタ」張ったこともあるのですが、後半逆に生ぬるくていけません。
PCに密着しないようにしても腱鞘炎の悪化が怖いし・・・。
打つ手無しです・・・。
USB扇風機を持ってこようか思案中の今日この頃です。
大画面化とスマホ対応を考えた「フォントサイズ」
さて、長い前置きでしたが今回は最近のPC事情も含めたコーディングの考え方をお話ししていきたいと思います。
リニューアル制作時に色々と気づいた事がありまして。
何かと申しますと「解像度」です。
FullHDに対応しながらスマホ対応も考える
最近のPCはラップトップ（ノート）でもFullHDは当たり前です。
要するに「1920ｘ1080」以上だと言う事です。
一昔前は「960グリッド」とか流行っていましたが、「横幅960px」だと1/2しか表示しないと言う事です。
最近MacBookPro2016に買い換えて「2048ｘ1280」とか「2560ｘ1600」とかで表示しているのですが、そうなると「横幅960px」だと本当に小さいんですね。
文字が読めない・・・。
それじゃぁと、「横幅1200px」で制作しようと考えましたが、それでも1/2です。
「font-size:14px;」でも老眼の入った目では読めないのですよｗ。
ブログでも有名な「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をテキスト表示して「４０〜５０文字」が良い感じかと思いました。
上記画像はPC表示ですが、大体のPCで同じ様なフォントサイズで表示されます。
27インチだとかなり大きなフォントになりますがｗ。
ですが丁度良い読みやすさかなと思っています。
スマホだとこんな感じ。
４．７インチ・５インチ・５．７インチ全て同じ様な文字数で表示出来ています。
これが正解かは実験段階なのでどうとも言えませんが、考え方的には「アリ」かなと思っています。
スマホ横表示は良いのだが、横表示で不都合発生・・・
スマホ対応も問題無いかと思いましたが、横表示を見過ごしていました。
文字がデカいｗ
老眼には最高の読みやすさですが、フリックする量が増えて宜しくありません。
この対応はまだ出来ていませんが、アイデアは湧いています。
メディアクエリーを駆使すれば何とかなるのではと思っています。
例えばこんなCSSだといけるのではと・・・。
@media (min-width: 768px) and (orientation: landscape) { ... }
上記CSSは横表示にした場合のメディアクエリーです。
このメディアクエリーで対応出来れば神コードですｗ。
横表示は「６０〜７０文字」ぐらいが適当かなと感じています。
近々試してみて良い感じになれば報告したいと思います。
これからの高解像度対応を考え直そう
今後PCモニター環境は2020年東京オリンピックに合わせ、4K・5Kから8K・9K時代に移行する可能性が高いでしょう。
「１４００px」以下の表示はレスポンシブ対応の１部になると予想できます。
予想では1800〜2000pxが標準表示ポイント。
リキッドデザインはこの記事で書いたように「vw」などを使用するようになるのではと思います。
ただしFullHD（1920px）は無くなることは無いと考えています。
古いサイトは「px」単位のまま残るでしょう。
「px」単位の時代は終焉？
今、ふとよぎったことが・・・
レスポンシブ案件が急激に増えたことを考えると、大画面へのレスポンシブ案件と「px」単位から「vw」単位への案件も出てくるかもしれませんね。
早めに「vw」単位で制作をしておくのも良いのかもしれません。
色々なアクシデントへの対応を考え、それらを含めた費用見積も想定しておくことが良いでしょう。
この記事を読んでくれた方々も、今後の高解像度対応を考えて下さい。
そう言ったブログで賑わうことを望みます。
そして、自分も勉強させて下さいｗ