サイトを見せる場所で、サイトの切れ端を見せていた話

先日、こう言われました。「スクロールで流れるサンプルWEBページが、WEBの一部しか表示されてなくて逆効果です」。

見に行って、うわ、と声が出ました。

トップページで自動スクロールしているカード。あれは制作したサンプルサイトを並べて「こういうのを作れます」と見せる場所です。そこに映っていたのは、サイトの上端13%だけでした。ヘッダーの帯と、その下のぼんやりした壁。それ以外は何も見えない。

サムネの元画像を調べたら、780×1688pxでした。スマホでページ全体を撮った、あの細長いキャプチャです。

カードの枠は横長です。そこに object-cover で入れれば、当然、上のほうだけが切り取られる。計算するとこうなります。

厄介なのは、これが壊れて見えなかったことです。画像は正しく読み込まれているし、レイアウトも崩れていない。ちゃんと表示されている「上端13%」を、私はずっと見ていたわけです。

object-contain にすれば全体は映ります。1行で終わる。

でも、それをやると細長い画像が横長の枠の中にぽつんと収まって、左右に大きな余白ができます。前にこれをやって「小さすぎる」と自分でボツにしていました。

つまり選択肢は最初から2つしかなかった。切るか、小さくするか。どちらも負けです。

なので、画像そのものを撮り直しました。枠に合わせるのではなく、枠と同じ比率で撮る。

サンプルサイトはPCの幅で撮れば横長になります。単純だと思ったら、2つ引っかかりました。

1つ目。撮った画像の左に、266pxの白い帯が入る。サンプルサイトのプレビュー画面には編集用の余白レールがあって、ビューポートごと撮るとそれまで写り込んでいました。ブラウザ上で main 要素の座標を測って、そこだけ切り出すようにして解決。

2つ目。デジタル名刺はそもそもスマホ前提のページで、PC幅で撮ると中央にひょろっとした帯が立つだけになります。こちらは撮り方を変えて、430×932の1画面を撮り、自分自身をぼかした背景の中央に角丸で載せました。全体が欠けずに映って、かつ横長の枠に収まります。

この2つを含めて21件、スクリプト1本で撮り直しました。

撮り直した画像を同じファイル名で置き換えたら、本番では古い切れ端のままでした。

画像キャッシュを1年に設定していたからです。中身を差し替えてもURLが同じなら、配信側は「もう持っている」と判断する。当たり前の挙動でした。

ファイル名を変えて解決しましたが、これは1年設定にした自分が悪い。速さのための設定が、直したはずのものを1年間隠し続けるところでした。

この手のミスは、たぶんまた別の形でやります。「表示されている」と「伝わっている」は別物で、前者は自動で検知できても、後者は誰かが見て言ってくれるまで分からない。

今回もスクリプトは1つも例外を吐いていませんでした。エラーゼロで、間違ったものが並んでいた。

せめて同じ形では繰り返さないように、サムネは全部 1200×900 に統一する、というルールにしました。比率が揃っていれば、枠に入れたときに切れようがない。ルールにしないと忘れるので、書いて残しています。

制作実績のページは、そのサムネで並べ直したものです。カードを見て「このサイトを見てみたい」と思えるかどうか。そこだけが判定基準です。