UPDATE：2023.5.17
- CATEGORY
環境によって見え方が変わります！
ごきげんよう。ジェネギャ（ジェネレーションギャップ）を感じる今日この頃のたぁです。
本日はホームページは環境によって見え方が変わりますというお話です。
スマートフォンとパソコンの画面
なんと言っても画面の横幅が全然違いますよね。パソコンでは主流の27インチですと（実際に表示される）幅は1920ピクセル（高解像度のものだとそれ以上）もあり、スマートフォンを縦で持っている状態では（実際に表示される）幅が320ピクセルや360ピクセルからとなっていて、全然違います。
（実際のピクセル数は高解像度になるので、1.5〜倍以上）
よって、一度に表示される領域が変わるので、パソコンでは横に並んでいるものはスマートフォンではよく縦に並べたりして表示させています。
デバイスによって改行が変わる
続いては改行についてですが、上記の画面の違いの通り幅が異なるので一度に表示される領域が違うことから、同じ文章でも改行が異なります。同じ文章を改行なしで書き、横幅を指定して試してみます。
横幅：80%
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
横幅：70%テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
横幅：50%テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
ご覧のように改行の位置が変わっていることが確認できるかと思います。これをあるところで強制的に改行させることはできるのですが、そのホームページを訪れるユーザーさんが異なる環境でご覧になった場合には当然強制的な改行の他に別途改行が行われることになります。
どの環境でも改行位置を揃えたいというご要望をいただくことがあるのですが、なかなか難しいです。
どうしても！という場合にはその文章部分すべてを画像化させることで対応することは可能ですがSEO的にはあまりよろしくないので現実的ではないかと思います。
パソコンによって色も異なる
みなさん、テレビを買う時にメーカーやモデルで色味や明るさが違って見えたことはありませんか？パソコンのディスプレイでも同じことが言えるのですが、テレビ同様ディスプレイによって色の表現方法が異なるため同じ「この色！」を指定しているのに若干異なって見えてしまいます。
いろんな環境の人がご覧になるものですので、どこかで線引きが必要かと思います。
（もちろんデザイナーは全力で対応しております）
搭載されているフォント（文字の種類）も異なる
パソコンでもWindowsとMac、スマートフォンでもAndroidとiPhoneで端末に搭載されているフォントが異なっています。なので、どの環境でも同じように見せるのは通常では難しいです。
そこで、Googleが提供しているGoogleフォントや有料ですがAdobeが提供しているAdobe Fontsなどを利用して同じ文字で見れるようにすることが可能ですが、その分比較的容量の大きいフォントファイルを読み込むため表示速度が遅くなってしまいますので、表示速度を取るか同じ文字で表示させたいかのトレードオフになります。
以前書いた記事がこちら
トレードオフの関係
まとめ
ざっとですが、環境によって見え方が違うというお話でした。デジタルなのでなんでもできると思いきや色々な制約があるので、制作も大変です。
ご依頼いただく際はこういうのがあるよ！というのをほんのちょっとでも意識していただけるととても助かります！
