サイトリニューアルで気が付いた解像度問題。STUDIOcolumnサイトリニューアルで気が付いた解像度問題。Webサイトリニューアルで気が付いた解像度問題。「px」単位の時代は終焉?今年の5月は暑すぎるのではないか!?こんにちは。久々の本格的なブログ更新となります。いやはや、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」になっていました。大きな解像度に対応しているんですね。height:auto;}」的な考え方その上で悩みました・・・。何かもっとファニーな解決策は無いのか・・・。height:auto;}的な事をフォントで出来ないのかと・・・。導き出した回答は「vw」でした。ブラウザの画面サイズでフォントサイズを「可変」してしまおうと考えたんです。現在の設定はPC表示で「1.3vw」、スマホ横表示で「3.5vw」です。試したのですがPCはブラウザ表示で横幅3/5をテキスト表示して「40〜50文字」が良い感じかと思いました。上記画像はPC表示ですが、大体のPCで同じ様なフォントサイズで表示されます。27インチだとかなり大きなフォントになりますがw。良い読みやすさかなと思っています。スマホだとこんな感じ。4.7インチ・5インチ・5.7インチ全て同じ様な文字数で表示出来ています。これが正解かは実験段階なのでどうとも言えませんが、考え方的には「アリ」かなと思っています。スマホ横表示は良いのだが、横表示で不都合発生・・・スマホ対応も問題無いかと思いましたが、横表示を見過ごしていました。文字がデカいw老眼には最高の読みやすさですが、フリックする量が増えて宜しくありません。この対応はまだ出来ていませんが、アイデアは湧いています。メディアクエリーを駆使すれば何とかなるのではと思っています。こんなCSSだといけるのではと・・・。}上記CSSは横表示にした場合のメディアクエリーです。このメディアクエリーで対応出来れば神コードですw。横表示は「60〜70文字」ぐらいが適当かなと感じています。試してみて良い感じになれば報告したいと思います。これからの高解像度対応を考え直そう今後PCモニター環境は2020年東京オリンピックに合わせ、4K・5Kから8K・9K時代に移行する可能性が高いでしょう。「1400px」以下の表示はレスポンシブ対応の1部になると予想できます。予想では1800〜2000pxが標準表示ポイント。リキッドデザインはこの記事で書いたように「vw」などを使用するようになるのではと思います。FullHD(1920px)は無くなることは無いと考えています。古いサイトは「px」単位のまま残るでしょう。「px」単位の時代は終焉?今、ふとよぎったことが・・・レスポンシブ案件が急激に増えたことを考えると、大画面へのレスポンシブ案件と「px」単位から「vw」単位への案件も出てくるかもしれませんね。早めに「vw」単位で制作をしておくのも良いのかもしれません。色々なアクシデントへの対応を考え、それらを含めた費用見積も想定しておくことが良いでしょう。この記事を読んでくれた方々も、今後の高解像度対応を考えて下さい。言ったブログで賑わうことを望みます。スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。...WordPress・携帯からの投稿まとめ約30分の設定時間で3つのblogを携帯から画像付きで投稿出来ました。設定から「投稿設定」を選択。レビューhomesite_creationsite_consultantworks_portfoliocontactcolumnsite_creationsite_consultantworks_portfolioサイトリニューアルで気が付いた解像度問題。レビューサイトリニューアルで気が付いた解像度問題。Reservedメニューはこちらメニューはこちら。