画面では読める実績が、PDFにすると消えた話

今日は、Next.jsで作っている自分のポートフォリオを確認していて、画面表示とPDF出力で違う問題に出会った。

きっかけは、ページ全体のスクリーンショットで、実績の見出しや本文が欠けて見えたことだった。最初はレイアウトの崩れを疑ったが、実際にスクロールしながら見ると読める。スクロールに連動する表示演出と、ページ全体を撮影する際の継ぎ目の影響を切り分ける必要があった。

そこで、印刷用の表示も別に確認した。すると、こちらでは実績本文が透明な状態になっていた。撮影結果だけの問題と思って終わらせていたら、見逃していた不具合だった。

原因は、スクロールに応じて現れる要素の初期状態が、印刷時にも残っていたこと。通常画面では演出が進んで読めても、印刷用の状態では文字が見えない。文字自体が存在することと、相手に読めることは別だった。

修正は印刷用CSSに絞った。印刷時だけ対象要素の透明度を戻し、位置や傾きの変形、アニメーション、切り替え効果を解除した。通常画面の演出を残しながら、紙やPDFでは情報を読むことを優先する方針だ。

修正後はPDF出力で本文の表示を確認した。型チェックとビルドの確認も行ったが、これは手元の開発環境での結果。本番にはまだ反映しておらず、実際のプリンターで紙に出した確認も済んでいない。

今回感じたのは、見栄えを整える作業でも、「どの状態なら相手が読めるか」まで確認する必要があるということ。実績を社内で共有したり、比較検討用に保存したりする方にとっては、PDFも大切な閲覧方法になる。

表示の不具合をご相談いただくときは、作り直す前に、通常画面・スマートフォン・印刷など、どの条件で起きるかを整理したい。WordPressの見た目の不具合は、出品中の「WordPressの表示崩れを修正します」からご相談いただけます。崩れる画面の画像と再現する操作を添えていただくと、確認範囲を絞りやすくなります。