最近、数十年ぶりにホームページのコーディングをしてみて、モバイルファースト(スマートフォンに最適化したコンテンツ)に苦労させられています。日本にインターネットが一般に普及した経緯からWebサイトのデザインはもともとPCのブラウザの閲覧を考慮して横幅を設計していたので、スマホの狭い画面に表示しきれない「はみ出し」を生じました。PCは1995年に発売のWindows95やその数年後のWindows98の最低要件として640×480の解像度がありました。近年発売のスマホでは横がWindowsよりも狭いのです。具体的な数字を挙げると375×667(iPhone SE)、393×851(Pixel 5)です。
モバイルファースト 【mobile first】
モバイルファーストとは、Webサイトやネットサービスなどの開発・運営方針の一つで、スマートフォンなどの携帯端末向けをパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやアプリの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。
[IT用語辞典 e-Wordより]
640×480よりも小さな画面を想定していないWebコンテンツの作り方をしてきたため、URLの文字列や、コマンドラインの文字列を紹介しているところなども、画面外へはみ出してしまいました。英単語のようなスペースで区切りがあるものは自動改行なのですが、スペースなしに文字列が長く続くとダメなのです。横375ピクセルだと1文字15ピクセルで25文字です。25文字に収まらないURLはたくさんあるので仕方なく折り返しか、横スクロールをさせています。
加えて表組でデザインする古いやり方だったWebページの表示にも問題がありました。横スクロールが増えて閲覧性が低下してしまいました。強制的に横幅に合わせるようにHTMLタグを書くと今度は文字が小さすぎるという指摘を受けるので、表は作り直しするかPCとスマホで切り替えることを考えないといけません。
Webページの大規模リニューアルを完了 の記事に書いた通り、98Stationのリニューアル自体は終わりましたがスマホ機種ごとの表示の問題などはGoogle Search Consoleの指摘のたびに修正していきます。リニュアル作業には計画よりも大幅に日数がかかりました。20年以上放置していたこともあり大変でしたが作業してよかったと思います。今はやり切った達成感の方が勝っています。
ちなみに、NX-Stationの方はまだモバイルファーストデザインになっていません。ページ数が多く、数年中身を更新していないコンテンツもあるのでリライトするとなるとさらに労力がかかりそうで躊躇しています。