本文へ移動
仕事実践ラボ
, ,

Codexで既存LPを季節仕様へ改修した実録|公開後にQRコードまで確認

Codexで既存LPを季節仕様へ改修した実録|公開後にQRコードまで確認の内容を表すアイキャッチ画像

既存LPの季節変更を始める前に、画像名3件が文字化けしていることが分かりました。直接編集を続ければ、公開時に画像切れや既存ページの上書きを招くおそれがあります。そこで構成と参照先を先に調べ、原本を残した改修コピーで作業しました。

変更後は固定URLを発行し、PCとスマートフォンの表示を確認。最後にQRコードから同じページが開くところまで確かめました。

既存LPを触る前に構成と参照先を調べた

いきなり文言を置き換えず、Codexには最初にファイル構成だけを調べてもらいました。中心は一つのHTMLファイルで、見た目と動きもその中にまとまり、画像は別フォルダに置かれていました。

編集対象が分かったため、必要以上のファイルを触らずに済みました。元のLPはそのまま残し、別の年月管理フォルダへ改修用コピーを作り、公開用フォルダも分けました。

文字化けする画像名3件を先に直した

HTMLが参照する名前と実際のファイル名が一致していない画像が3件ありました。日本語名が文字化けしており、別のパソコンや公開環境へ移すと画像切れになる可能性がある状態でした。

画像名を英数字へ変更し、本文だけでなく共有時に使われる画像参照も同時に更新しました。再照合ではローカル画像参照の不足が0件になりました。

変更前と改修後

  • 変更前:原本に旧日付・旧企画名・旧説明が残る状態
  • 改修後:原本は保管し、別コピーで日付・企画名・説明文・特典・リンクを更新
  • 確認方法:旧文言を再検索し、残りがないか照合

原本を残したまま季節仕様へ変更した

本文に見える日付だけでなく、ページタイトル、説明文、SNS共有用の情報、別の案内欄まで旧情報を一覧化しました。置き換え後は旧文言を再検索し、目視だけに頼らず残りを確認しています。

春らしい装飾を外して淡い寒色と白を中心にした最初の案は、少し寂しく見えました。日付、主な案内、相談導線の読みやすさを保ち、背景や区切りにだけ季節感を足す方向へ直しました。

公開先とスマートフォン表示を確認した

既存サイトへ一部フォルダだけを追加する方法には、トップページを置き換える危険がありました。その方法は選ばず、静的ページを別の公開先へ出す方へ切り替えました。

パソコンでは正常でも、スマートフォンでは長い日付が不自然な3行に分かれていました。表記を短くして1〜2行に収め、横スクロールが出ないことも確認しました。

固定URLをQRコードから実際に開いた

公開先で固定URLを発行し、ページと画像が表示されることを確認しました。そのURLからQRコードを作り、実際に読み取って同じページが開くところまで確かめています。

印刷物へ載せるQRコードの締切が先だったため、固定URLを先に確保し、同じURLの内容を後から更新できる構成にしました。準備中ページを実際に再公開した完了までは記録上確認できていないため、そこは未確認のまま残します。

同じ改修で先に確かめる4点

  • HTML・画像・共有情報の参照先を編集前に洗い出す
  • 原本と改修コピー、公開用フォルダを混ぜない
  • 旧日付や旧企画名を変更後に再検索する
  • 固定URLをPC・スマートフォン・QRの3経路から開く
前の記事
次の記事