背景の継ぎ目を直しても、ボタン確認を終わりにしなかった話

今日は、自主開発しているNext.jsのサイトで、季節テーマの背景を調整した。

暗い紫の背景をつなげたいのに、下の説明図へ進むと別の色の帯が現れる。部品ごとには問題がなくても、ページ全体で見るとそこで世界観が切れてしまっていた。

最初に分けたのは、「背景を持つ外側」と「情報を載せる内側」だ。説明図と案内リンクの外側には、それぞれ独自の背景色が付いていた。そこをページ全体に合わせて塗り直すのではなく、季節テーマが有効なときだけ透明にし、親の背景を見せる形へ変更した。

Reactの部品そのものを作り直す必要はなかった。図の中のカード、線、文字、チップ、リンクは残し、外側の背景だけを対象にした。通常時の表示まで巻き込まないよう、変更を季節テーマの条件内に閉じる判断だ。

確認では、1440px幅でヒーローの下から説明図、案内リンクまでを続けて見た。ブラウザが実際に適用しているCSSでも外側が透明になっていることを確認し、以前の全面的な色の帯が消えていること、横スクロールがないことを確かめた。ビルドと型チェックも通った。

ただ、ここで「表示修正は全部完了」とはしなかった。「席を探す」の文字が見えないという指摘は残っている。390px幅のスマートフォン表示と、季節テーマを切った状態の最終確認も未完了だ。今回の変更はローカルでの確認までで、コミット、プッシュ、本番公開はしていない。

背景がきれいにつながることと、利用者が次のボタンを見つけられることは別の確認項目だった。見た目の一部分が直っても、操作の入口まで確認してから完了にする。この切り分けを、次の修正にも残しておきたい。

今回の記録はNext.jsだが、色や余白、ボタンの見え方を小さく切り分けて直す考え方はWordPressでも同じだ。似たお困り事があれば、出品中の「WordPressの表示崩れを修正します」から、該当ページと確認した端末を添えてご相談ください。