LINEスタンプ販売中!
←前のレッスンLPの資料リンクを検証し、クリックと成果を区別するAIでつくるLPコース

コース責任者:ヨハク先生

LPを公開する前に、配布一式と公開URLの動作を確認する

このレッスンの担当:ヨハク先生

公開用と編集用のファイルを分ける。

デザイン | レッスン 09 | 応用

この端末に保存

手元で動くHTMLができても、公開先ではファイルの場所や設定が違うため、リンクが切れることがあります。

編集用の操作欄や内部メモをそのまま公開することも避けたい不備です。

このレッスンでは、公開用の一式を準備し、公開する範囲と検索表示の条件を決め、公開URLで実物を再確認します。

ファイルを保存した状態、サーバーへ置いた状態、読者が正常に使えると確認した状態を分けて管理する方法を学びます。

この記事で学ぶこと

  • 公開用と編集用のファイルを分ける。
  • 公開URLでリンクと資料を再検査する。
  • 検索表示と公開範囲の条件を確認する。

公開するファイルだけをまとめる

まず編集用見本から公開用HTMLを保存し、同じフォルダへPDFを置きます。

公開用には文章編集、保存、動作確認の操作欄を残しません。

編集元、元情報、根拠台帳、検査記録は管理側へ保管します。

公開するフォルダを別に作ると、内部メモや試作品を一緒にアップロードする誤りを減らせます。

ファイル名を変えた場合はリンク先も更新してください。

今回の見本は画像をHTML内に含めていますが、PDFは別のファイルです。

HTMLだけを移してもページ自体は見えるため、資料リンクの欠落に気づきにくい場合があります。

公開用の一式を別フォルダへコピーして開き、資料が受け取れるかを確認します。

元の作業フォルダにあるファイルへ偶然つながっている状態を、納品可能な状態と取り違えないようにします。

公開版には版の日付と対応する資料の版を記録します。

管理記録へ、公開URL、編集元の場所、配布PDF、更新担当、前の版の保管場所を書きます。

問題が見つかった際に、何を元へ戻せばよいか分かるようにするためです。

不要なファイルを破棄する前に、公開中の版や復旧に必要な物でないかを確認し、依頼者の保存ルールに従って扱います。

公開範囲と検索表示を区別する

このコースの完成見本は、学習用のページとして検索掲載を避ける設定を付けます。

HTMLのnoindexは、対応する検索エンジンへ検索結果に載せないよう伝える指定です。

アクセスを制限する機能ではないため、URLを知る人は閲覧できます。

社外秘や個人情報を置くための保護として使わないでください。

公開範囲の制御が必要なら、別の仕組みを用意します。

検索から見つけてもらいたい実際の商品紹介ページでは、検索意図、ページタイトル、説明、正式なURL、共有時の画像などを別途整えます。

教材用の設定を理由なく外すのではなく、公開する目的と内容を確認して変更します。

見本は検索集客用の本番商品紹介ページを代わりに運用するものではありません。

検索設定の変更と、実際に検索結果へ掲載されたことも別の状態です。

検索エンジンへの反映には、そのページを取得できることなどの条件があります。

公式案内を確認し、公開後も検索管理の画面で状態を確かめる必要があります。

HTMLへ指定を書いたことだけで、即時に検索掲載や除外が完了すると断定しないようにします。

今回の教材では見本の設定を確認し、実案件で必要な検索運用は引継ぎ記録の項目として残します。

公開先へ同じ構成で配置する

利用する公開サービスや既存サイトの運用方法に従い、HTMLとPDFを同じ関係の場所へ置きます。

たとえばHTMLがsampleフォルダにあり、リンク先が同じフォルダのPDFなら、公開先でもその関係を保ちます。

PCの個人的な保存場所を指すパスが残っていないかも確認します。

自分の端末でだけ開くリンクは、読者の端末では使えません。

既存サイトへ組み込む場合は、そのサイトの構成や更新手順を優先します。

見本のために別の仕組みへ置き換える必要はありません。

管理者が決めた公開方法、確認環境、承認範囲を確認し、関係のないページを変更しないようにします。

今回の大学では既存のコース、レッスン、配布ファイルの構成へ追加し、サムネイルも正本の参照先へそろえます。

アップロードやビルドの成功表示が出たら、次に公開URLを開きます。

処理が完了したことと、期待した内容が配信されていることは別です。

更新が反映されるまで時間がかかる場合もあるため、古い版を見ていないかを確認します。

確認日時、公開した版、ページの見出し、ファイルの内容を記録し、「これから変わるはず」で納品を終えないようにします。

公開URLで一連の動作を試す

公開先では、ページの表示、主要リンク、画像、PDFの内容を改めて確認します。

PCとスマートフォン幅で開き、上部と下部のリンクから同じ資料へ進みます。

ファイル名や日本語の文字がURLへ含まれる場合も、実際に押して確かめてください。

手元の検査結果をそのまま公開先の合格として扱わず、配信された実物を見る工程です。

編集用ではなく公開用を置いた場合は、操作欄がないことと、本文が一致することも見ます。

画像の代替説明、ページタイトル、リンク文が変更されていないかを確認します。

PDFは保存または表示して、表紙とページ数だけでなく内容も照合します。

資料を更新したのに画像が古い場合は、説明とプレビューの両方を直す必要があります。

一部の表示が古いときは、確認したURLが同じか、ブラウザーに古い内容が残っていないか、公開処理が完了しているかを順に調べます。

すぐに別の場所へ複製すると、公開版が複数に分かれて管理が難しくなることがあります。

原因を切り分け、正式なURLと版を一つに定めてから再確認します。

直った箇所と確認条件を記録してください。

公開後に直す条件を決める

公開時点で分かっている未確認事項を残します。

実際のスマートフォン全機種、初見読者の理解、外部計測、相談や売上の結果などは、制作中の検査だけでは確認できません。

これらを欠陥と同じ扱いにせず、追加で何を確かめる必要があるかを分けます。

一方でリンク切れや誤った提供条件は、公開後の実験として放置せず修正します。

更新のきっかけも決めます。

PDFの内容が変わったとき、提供条件が変わったとき、読者から同じ誤解が続いたときは、商品紹介ページを見直す理由になります。

色を変えることだけを改善と呼ばず、どの判断が難しいかを確かめて対象を選びます。

期限のない見本でも、リンク先や外部サービスは変わるため、次に確認する日と担当を記録してください。

納品時は、公開URLだけでなく編集元と検査の記録を渡します。

次の担当者が文章を変え、保存し、公開し、確認できる状態が必要です。

「AIが作ったので分からない」で終わらず、使った指示文と固定条件を残します。

見た目の完成と、更新を続けられることの両方を確認したら、次は公開後の情報から改善する方法へ進みます。

実践課題

実践課題:公開用一式と検査記録を作る

公開用HTMLとPDFを別フォルダへまとめ、操作欄がないこと、資料が開くこと、内部メモが混じっていないことを確認します。

公開先を使える場合は許可された範囲へ置き、公開URLから同じ検査を行います。

公開先がない場合は未公開と明記し、ローカルで一式を検査するところまで進めてください。

公開していないURLを完成例として作る必要はありません。

  1. 公開前チェックを実行する。
  2. 同じフォルダ構成でアップロードする。
  3. 公開先で表示とPDFを開き直す。

記録例は「公開用HTMLとPDFを配置、PCと390pxで確認、両リンクから8ページPDFを表示、公開日時と版を記録」です。

失敗例は、アップロード成功だけを見てリンク切れに気づかないことです。

自己確認では、正式な公開先が分かるか、配信された実物を見たか、更新担当と未確認が残っているかを見ます。

検索設定を変える場合は、その目的と確認方法も別に記録してください。

自己確認

  • 公開用と編集用のファイルを分ける。
  • 公開URLでリンクと資料を再検査する。
  • 検索表示と公開範囲の条件を確認する。

まとめ

商品紹介ページは、公開用の一式をそろえ、公開URLで表示と資料を確認して初めて反映を確かめられます。

編集用と公開用、公開範囲と検索表示、処理成功と実物の一致を区別しましょう。

未確認の利用条件と更新のきっかけを残し、編集元と検査記録を引き継ぎます。

次は、公開後の数字や読者の反応を原因と混同せず、次に確かめる変更を選ぶ方法を学びます。

  • 公開用と編集用のファイルを分ける。
  • 公開URLでリンクと資料を再検査する。
  • 検索表示と公開範囲の条件を確認する。

参考資料

無料配布セット:元情報・指示文・LP・PDF・検査シート
ZIPを展開し、はじめに.htmlを開きます。教材費0円、AI利用枠は別です。

資料を受け取れるLP完成見本
実際の8ページPDFを開けます。フォームや外部計測は実装していません。

HTMLのリンク:MDN公式リファレンス
2026年10月8日確認。リンクや保存の挙動はブラウザーでも検査します。

次に知りたいことは?

仕事で困っていることを、次の教材づくりに生かします。

困りごとを送る

チームのLP制作を整えたい方へ

制作物と確認に迷う工程を整理して、法人研修・継続支援の内容をご覧ください。

法人研修・AI導入支援を見る
次のレッスンLPを改善し、数字の差から仮説と次の検証を決める→
カワイ校長

今日は何学ぶ?

1分でわかる、大学の使い方

「はじめに」でいつでも見られます