サーバーへアップロードする前に、完成したLPのファイルを公開用フォルダーとして整理します。ローカルで偶然表示できても、パスや大文字・小文字の違いによりサーバーでは表示できないことがあります。
公開用フォルダーを確認する
次の図では、「公開用フォルダーを確認する」の仕組みや関係を確認できます。
lp/
├── index.html
├── css/
├── js/
└── images/公開物と制作データを分ける
公開に必要なファイルだけを分け、元画像、下書き、認証情報をサーバーへ送らないようにします。
デザイン元データ、メモ、バックアップ、秘密情報は公開フォルダーへ入れません。公開用フォルダーだけを別の場所へ複製し、その中身をアップロード対象にすると間違いを減らせます。
公開用フォルダーをブラウザで開き直し、元の制作フォルダーにしかないファイルへ依存していないことを確認します。
公開URLを基準にパスを確認する
ローカルでindex.htmlを直接開く場合と、サーバー上のURLから開く場合では開始位置が違います。教材のLPは、公開フォルダー内のindex.htmlを基準にCSS、JavaScript、画像を相対パスで読み込みます。
次の図では、「公開URLを基準にパスを確認する」の仕組みや関係を確認できます。
先頭が/のパスはドメイン直下を基準にします。下層フォルダーへLPを公開すると参照先が変わるため、意味を理解せず先頭へ/を付けません。
index.htmlから必要なファイルをたどる
公開対象を確認するときは、フォルダー内のファイルを眺めるだけでなく、index.htmlから参照されるCSS、JavaScript、画像を順番にたどります。CSS内のbackground-imageやJavaScriptから参照する画像も対象です。
使っていないファイルを除外する場合は、HTMLだけでなくCSSとJavaScript内のパスも検索します。公開後の404を防ぐため、削除後にNetworkで再確認してください。
ローカル専用の記述を取り除く
C:\Users\...や/Users/...のような自分のパソコンだけで通じるパスは使いません。HTMLを基準にcss/style.cssのような相対パスで指定します。
画像を公開用に最適化する
制作中の大きな画像をそのまま公開すると、ページ表示に時間がかかります。表示寸法、縦横比、形式、画質を確認し、内容を判別できる範囲で圧縮します。
- 同じ画像の元データと公開用データを区別する
- 画像の向きと不要な余白を確認する
- ファイル名を半角英小文字へそろえる
- HTMLのwidth・heightと実際の縦横比を合わせる
- 圧縮後の画像をブラウザで開いて確認する
ページ固有の情報を確認する
ページタイトル、meta description、見出し、ロゴのリンク先、問い合わせ先、著作権表記、外部リンクが仮の内容になっていないか確認します。コードが正しくても、情報が間違っていれば公開できません。
公開しないファイルを分ける
次の図では、「公開しないファイルを分ける」で押さえる違いを左右で比較しています。
- デザインの元画像や書き出し前の大きな画像
- メモ、バックアップ、古いバージョン
- OSが自動生成したファイル
- APIキーやパスワードを含む設定ファイル
- 制作途中で使った未使用ファイル
公開直前の状態を保存する
ブラウザとDevToolsで最終確認し、Gitへ公開前のコミットを作ります。問題が起きたときに、この状態へ戻せるようにします。