特殊なCMS入稿を、制作と確認の流れから設計したタイアップLP

ご要望は、指定媒体の環境へ掲載できる形でLPを制作することでした。一般的なサーバー納品と異なり、完成した画面を誰がどの形式へ変換し、CMSへ登録し、最終表示を確認するかが品質に直結します。制作物を提示する前に完成状態へ近づける進行でも、CMS反映後の見え方までは制作環境だけで確定できません。

また、画像の書き出し方法、端末ごとのフォント差、修正をHTMLとCMSのどちらへ戻すかが曖昧だと、同じ箇所を二重に直すことになります。デザインと実装の要件に加え、入稿後の確認者、修正の戻し先、完了条件を整理する必要がありました。

最初に、制作環境のプレビュー、入稿用データ、CMS反映後の画面を別の確認段階として定義しました。それぞれで確認できる内容を分け、デザインと基本動作は制作環境で、媒体固有の表示はCMS反映後に確認する流れを採用しました。

画像は、見た目の品質だけでなく、指定された入稿単位と差し替え方法を考慮して分割しました。フォント差による改行や高さの変化を見込み、固定寸法に依存し過ぎない構成へ調整しています。修正は完成画面へ直接追加するのではなく、元データへ戻してから再入稿し、差分の発生源を一本化しました。

この進め方は、外部CMSや媒体側の作業を経て公開される案件に有効です。CMS反映後の確認権限がない場合は、確認担当と証跡の受け渡しを別途決める必要があります。

媒体の既存トーンと企画固有の表現を分け、入稿後も崩れにくい画面を設計しました。端末やCMS側のフォント条件が制作環境と異なる可能性があるため、文字幅が変わっても画像やボタンへ重ならない余白を確保しています。

画像として書き出す範囲とHTMLで保持する範囲は、見た目だけで決めず、修正頻度、文字の読みやすさ、差し替え方法から判断しました。すべてを一枚画像にする案は、細かな修正やアクセシビリティ面で不利になるため避けています。

デザイン確認では、制作時の静止画だけでなく、CMS反映後のスクリーンショットも比較し、媒体側のスタイルによる差を見つけられるようにしました。

コーディングでは、媒体側へ渡す単位を先に確認し、CSSや画像パスがCMS入稿後にも成立する構成にしました。制作環境だけで動く指定や依存を持ち込まず、入稿後に変更される可能性のある部分を分離しています。

フォント差、画像比率、端末幅によって高さが変わる箇所は、固定値で合わせ込まず、内容に追従するレイアウトへ調整しました。修正時には、制作元、入稿データ、CMS上の表示のどこが最新版かを明確にし、直接修正による差分の分岐を避けました。

外部CMS案件では、コードの完成だけを納品条件にできません。反映後の表示確認、差し戻し方法、再入稿、最終確認者までを一つの実装工程として扱うことが重要だと整理しています。