【デザインのこと】「さっと見る」モーダルでPC/スマホの見た目を切り替えられるようになりました

2026.9.28
更新 2026.9.30
デザインのメモ
デザインのこと

「デザインのこと」の「さっと見る」ボタン、押したことありますかー

あのモーダル、実は中でPC/スマホの見た目を切り替えられるようになったんです。今回はその話です。

何ができるようになったか

デザインのこと – Web design gallery の各記事には「さっと見る」ボタンがあって、押すとそのサイトのキャプチャ画像がモーダル（ポップアップ）で開きます。今まではPC版の見た目だけでしたが、モーダルの中に「PC」「スマホ」の切り替えタブが増えました。

1つのWebデザインでも、PCで見た印象とスマホで見た印象はけっこう違います。今までは別々の記事を探して見比べる必要があったのが、同じモーダルの中でタブを押すだけで両方見られるようになりました。ページ遷移も、ブラウザの幅を変える手間もありません。

PC記事とスマホ記事は同じサイトのURLをもとに自動で紐づけられているので、書き手が何かを設定する手間もありません。一覧ページのカードからも、記事ページの本文からも、同じモーダルが同じ動きで開きます。

既存のタブ切り替えを流用したら、2回続けて壊れた

ここからは実装の話です。サイトには元々「タブ切り替え」を行う共通のJavaScriptがあったので、まずはそれをそのまま流用してみました。ところが2回続けて、思わぬところで壊れました。

1回目: タブのリンクを href="#pc" のように書いたところ、モーダルが93pxずれる現象が起きました。原因は、同じページ内にある「ページ内リンクでスムーズスクロールする」既存の仕組みが、#で始まるリンクを片っ端から自分の対象だと思い込んで、タブ切り替えと二重に反応していたことでした。href="#"（中身なし）に変えて、行き先は別の属性で指定する形に直しました。

2回目: タブの見た目を整えるために既存の tabs というクラス名を借りたところ、今度はタブがまったく押せなくなりました。調べてみると、既存のタブ機能がそのクラス名を持つ要素すべてに自動でイベントを結びつけていて、しかも「対象が見つからないときは何もしない」という処理の中に、後続の処理を止めてしまう書き方が混ざっていました。同じクラス名を使ったせいで、新しいタブのクリックがそこで止められ、こちらの処理まで届かなくなっていたんです。専用の別のクラス名を用意し直して解決しました。

2回とも原因は同じでした。「既存の仕組みが見ている名前」を、意味も見た目も違う新機能でうっかり再利用してしまったこと。名前が同じだと、既存の仕組みが「自分の担当だ」と誤解して割り込んできます。似ているようで違うものには、違う名前をつける。地味ですが効く教訓でした。

隠れている画像は、そのままだと読み込まれない

もう1つ、地味だけど厄介だったのが画像の読み込みです。スマホタブの画像は、最初は非表示になっているので、画像の読み込みを後回しにする仕組み（遅延読み込み）と噛み合わず、タブを開いても画像が出てこないことがありました。

原因は、画像を軽くするプラグインが画像の読み込み先を独自のちょっと変わった書き方で持っていたことでした。通常の遅延読み込みの仕組みからは、その書き方が見えていなかったんです。

対策はシンプルにしました。タブを開いた瞬間に、画像そのものをJavaScriptで作って差し込む。あらかじめ用意しておいて表示・非表示を切り替えるのではなく、必要になったその場で作る方式です。プラグイン側の独自の仕組みに頼らずに済むので、確実に表示されます。実際に計測すると、タブを開くまでは通信量0件、開いた瞬間だけ画像分の通信が発生することも確認できました。見ていないタブの分の画像は読み込まれないので、ページ全体としても無駄がありません。