自社サイト(HP)を刷新した直後、自分で見返して「低解像度の実画像がダサい」とダメ出しした。そこで写真を一切使わず、数字だけで組むデザインに作り直した。結果、表示は速くなり、読みやすさも上がった。
なぜやったか
前の版は「世界トップクラスのブランドサイト」を目指し、AI(Claude Code)に6案を作らせて審査で1案を選ぶという進め方で仕上げていた。できたものを自分で見ると、載せている実績写真が解像度不足で見た目に浮いていた。写真の選び方自体もいまいちで、「このデザインなら写真を見せる必要はない」と判断した。
やったこと
- AI にコンペ形式で新たに4案作らせ、審査で1案に絞った
- 選ばれたのは、数字を活字の大きさに変換して積み上げる「台帳組版」案。実績の件数を対数で文字サイズに写像し、"級数の滝"として見せる仕組みが評価された
- 写真を全廃し、データだけで組む方向へ全面実装した
- 公開前の機械検査で、書体に含めていない文字が2文字だけ混じっているのを見つけ、直してから公開した
決めたこと
4案とも審査させたが、選ばれた案だけが「そのデータでしか出せない演出」になっていた。数字を文字の級数(大きさ)に変えるという仕掛けは、他の実績データに差し替えても崩れない仕組みだったので、これを軸に決めた。
わかったこと
- 写真がなくても、数字の見せ方だけで説得力のある画面は作れる
- 改修前後で実測がはっきり変わった。画像は173枚から0枚、通信量は81%減、表示の最初の一枚(LCP)は428msから300msに短縮、文字と背景の見やすさ(コントラスト)も最高等級(AAA)まで上がった
- 公開直前の機械検査は効く。文字が別書体に化ける事故を、出す前に見つけられた
つまずいた点
項目名が長いと2〜3行に折り返り、台帳らしい整った見た目が崩れる問題が最後まで残った。
次にやること
長い項目名でも折り返らない組み方を詰める。