このたびサイト全体の大規模なアップデートを行いました。
その主な目的はスマートフォン（特にiPhone）での見やすさを改善することでした。そしてそれは、おおむね達成されたと思います。
また、今回のアップデートをもって、当サイトにおけるInternet Explorerのサポートを終了させて頂くことになりました。なにとぞご了承ください。
重要な報告は以上です。
今後とも廃墟写真ブログ「Ruin's Cat」を、どうぞよろしくお願いいたします m(_ _)m
1. 主な改善点
1.1 文字の大きさを全体的に拡大
かつて文字が大きいのはダサいとされ、小さなフォントを使ったサイトデザインが流行した時代がありました。
しかしさすがにもう時流に合いません。特に当サイトの文字が明朝体で表示されるWindowsやiOSでは、ゴシック体で表示されるAndroidよりも文字の小ささは深刻でした。
よって、サイト全体を通してフォントサイズを大きく調整しました。ユーザビリティを重視してユーザー体験を向上させることは、現代ではWeb業界に限らず世の中のあらゆるプロダクトで当然の考えになっています。
1.2 脚注のポップアップ表示に対応
本文中の脚注番号（※2 など）を選択した時に、脚注へ飛ぶのではなく内容をポップアップ表示する機能を実装しました。パソコンではマウスポインタを重ねると、スマートフォンではタップすると表示されます。サンプルはこちらです※1。
特にiPhoneでは脚注へ飛んだ時に先頭行が隠れてしまっていたため、従来の状態でははっきり言って使い物になっていませんでした。主要なページではすでに新方式に移行済みですが、あえてこの機能を使っていないページも一部あります。（※ 例外なくポップアップ表示に移行しました）
また、この機能にInternet Explorerが対応していないため、今後はサポート外とさせて頂きました。
1.3 廃墟リストの仕様を変更
廃墟の物件数が数十程度のころは従来のセレクトメニューで問題なかったのですが、それが100を越えてくると話は違ってきます。特にiPhoneではメニューの幅が極端に狭く、まったく機能していませんでした（上の画像の左側）。
これは私自身もサイトのメンテナンスで多用する重要な機能であるため、一覧性のよいアコーディオンタイプのメニューに作り変えました。
この機能にもInternet Explorerは対応していません。一応は使えますが、挙動が少しおかしいです。
1.4 Menuボタンの位置を画面中央寄りに移動
今までは画面の左下にピッタリとくっつけていたのですが、最近のスマートフォンは本体の角の部分まで液晶になっているものも多く、それだと問題があることに気が付きました。
特にiPhoneだとMenuが動作しない原因になっていました。なので邪魔にならない程度に中央寄りに移動させましたが、それでもiPhoneではMenuの動作が怪しいことがあります。
2. その他の改善点
その他こまごまとしたサイト表示の最適化のほか、すでに旧方式となったコードを更新したり、処理の高速化に関わる変更を数多く加えました。煩雑なので詳細は省きますが、今回のアップデートの目的のもうひとつが、このコードの更新や高速化でした。
これらは主目的であるスマートフォンでの使い勝手の向上にも地味に効いています。
また、これらの項目のうちいくつかについてもInternet Explorerはついてこれませんでした。ただし、これについてはIEでもサイトの表示が大きく崩れることがないよう、擬似的に対応させています。
3. 既知の問題点
現時点で判明している不具合を以下に列挙します。そしてその多くは対処不能なことが分かっています。当サイトの仕様なので諦めてください。
【3.1 スマートフォン全般での不具合】
- 大型のスマートフォン（iPhoneXやPlus、Xperia 1、Galaxy S10やNote10+など）で本体を横にしてサイトを表示すると、右側に不自然な空間があく。（※ 2021年4月20日、この問題に対処しました）
→ この不具合が起こる仕組みは完全に把握しています。しかしこれに対処しようとすると、Menuの動作が極めて不安定になるという致命的な問題が起こります。これは当サイトのMenuボタンを制御しているプログラムが、画面幅をもとに制御することを想定して設計されていないためです。
これを解決するにはMenuそのものを作り変えねばならず、とても現実的ではありません。よって当サイトの仕様とします。（※ 2021年4月20日、この問題に対処しました）
【3.2 iPhoneでの不具合】
- iPhoneで「種類別廃墟リスト」を開いた時の表示幅が狭い。また、選択のキャンセルがほぼ不可能。
- iPhoneで「最新のコメント一覧」を開いた時の文字が小さすぎる。視力検査かな？
- iPhoneのうち本体の曲線部分までが画面の機種（iPhone11など）において、Menuボタンを押しても一発で動かない。
→ 当サイトの抱える最大の問題がこれらiPhone上の問題ですが、すべてiOSの仕様です。諦めてください。
- iPhoneで360度画像が全画面表示にできない。
→ 画像表示を司るプログラムがiPhoneだけハブってます。私にはどうすることもできません。諦めてください。
【3.3 PC・タブレットでの不具合】
- 画面サイズを変更した後にサイト上部のドロップダウンメニューを開くと影がずれる。
- パンくずリストの一部がドロップダウンメニューに隠れることがあるかも。
- 記事一覧の画面で、記事の表示順が前後することがそこそこある。
→ 制御プログラム側の仕様です。諦めてください。
4. アップデートの評価
おおむね満足です。表示面での見やすさはこれでかなり改善されたと思います。
しかし機能面での使い勝手がiPhoneではほぼどうにもならなかったのが、仕方ないとはいえ残念ですね。特にiPhoneのセレクトボックスの使いづらさはWebデザイナーにとっては有名な話で、共通の頭痛の種になっているようです。
5. アップデートの経緯
──よもや、このような時代が来ようとは。
皆さん気が付かれたでしょうか、今回まったくと言って良いほどパソコンの話をしていないことに。パソコンの話が主で、スマートフォンのことは軽く最後で触れる程度だった前回の時とはえらい違いです。
これは当サイトのOS別の訪問者数の割合を示す先月分のデータです。iOSとAndroid、すなわちスマートフォンだけで優に8割を超え、パソコンの割合など微々たるものであるのが分かります。
これを見てスマホよりパソコンを優遇する選択はあり得ません。今回のアップデート作業でも、ある程度パソコンを犠牲にしてでもスマートフォンでの表示や動作が良くなるよう常にスマホを優先させてきました。
特に当サイトの最大の顧客であるiOS（≒iPhone）での使い勝手がとても悪かったため、その改善は緊急の課題でした。
そしてそのために取った私の選択というのが、パソコンのInternet Explorerのサポートを切るというものでした。
これは当サイトのブラウザ別の訪問者数の割合を示したグラフです。IEはこの図に名前が表示されてすらいません。これは以前ではとても考えられなかったことです。
これは私が人生で2番目に立ち上げたサイトです。見ての通りRuin's Catのようなブログではなく、いわゆる個人サイトというやつです。この頃は推奨ブラウザをこのように表示する「お作法」がありました。懐かしいですね。
そしてその推奨ブラウザというのは、みな判で押したようにInternet Explorerでした。わざわざ確認するまでもなく、IEは「みんなが使ってる標準ブラウザ」だったのです。
そのブラウザを切るという選択。データで示されてるとはいえ、私にとっては清水の舞台から飛び降りるような気分でした。まさかこんな時代が来るだなんて……
6. 終わりに
当サイトの歴史的な経緯から、スマートフォンへの対応は間に合わせのような状態が今の今まで続いてきました。しかしそれも今回のリニューアルで自分の持てる技術的・労力的限界まで対応できたと自負しています。
これが当サイトをご覧になって下さっている皆さまに、より良い体験をもたらすきっかけになれば幸いです。