OGPを書き出し共有時の表示を確かめる

画面で完成した画像を見ていても、保存したファイルや共有先には別の版が残ることがあります。画像を作れたことと、配布・再編集・共有ができることを分けて確かめましょう。このレッスンでは採用案のPNGと設定を保存し、開き直して一致を確認します。公開先がある場合は共有設定を確かめ、ない場合はローカルで確認した範囲を記録して修了します。

学習目標

保存したPNGと設定の版を照合する。
設定を開き直して文字を再編集する。
共有設定の確認と未確認事項を記録する。

PNGと編集元を別々に保存する

編集ツールで採用した構図と見出しを表示し、「PNGを保存」を押します。ファイル名へ案名と版を含め、ブラウザーの保存先へ移動してください。ダウンロードしたファイルを開き、画像の寸法が1200×630pxであることと、見出し・素材が採用案と一致することを確かめます。ダウンロード一覧の表示だけでは内容確認になりません。

次に「設定JSONを保存」を使います。設定には文字、構図、サイズ設定、読み込んだ素材が含まれます。これは配布ツールで再編集するための形式です。PhotoshopやPowerPointの編集レイヤーではないため、別のアプリで文字を自由に動かせるとは説明しないでください。

元記事、制作メモ、生成に使った指示、元の素材、採用PNG、設定JSON、比較表を一つのフォルダへそろえます。公開先へ掲載するのは必要な画像だけです。設定には素材が含まれるので、社内の写真や非公開資料を使った実案件では、編集元の共有範囲も別に確認する必要があります。

保存が始まらない場合は、ブラウザーのダウンロード表示や警告を確認します。ファイルが保存された場所を見失った場合は、ブラウザーのダウンロード一覧から開きます。連打して同名ファイルを増やす前に、どこまで処理が進んだかを確かめてください。

保存した設定から再編集を試す

編集ツールを別のタブで開き直し、「設定JSONを読み込む」から保存したファイルを選びます。見出し、構図、素材、文字サイズが採用案へ戻るかを確認してください。元のタブが開いている状態だけで判断すると、保存されていない変更に気付けないことがあります。

再編集の確認では、一時的に二行目を「確認用」に変え、画面が更新されるか試します。その後、保存した設定を読み込み直して元の「3つのこと」に戻します。この操作で、画像の一枚絵を表示しているだけでなく、文字を編集できることが確かめられます。確認用の文字が入ったPNGを採用版へ混ぜないようにしてください。

JSONを読み込めない場合は、PNGや元記事を選んでいないか、ファイルの内容を手作業で書き換えていないかを確認します。ツールが示すエラーを記録し、元のタブが残っていれば設定を保存し直します。拡張子だけを変更しても、形式は変わりません。

元記事を改訂したときは、設定を開いて見出しを直し、新しい版としてPNGを保存します。古い画像と同じ名前で上書きしただけでは、掲載先で古い表示が残る場合があります。次の工程では、画像の版と公開先の設定を対応させて確認します。

公開先がある場合だけ共有設定を確認する

自分が編集権限を持つサイトや記事で使う場合は、そのサービスの管理画面で共有用画像を指定します。本文の画像、記事一覧の画像、SNS共有時の画像が別項目なら、それぞれの役割を確認してください。画面の名称はサービスによって違うため、この教材では一つのサービスのボタン名を共通手順として扱いません。

自分でHTMLを管理する場合、Open Graphの基本情報には記事のタイトル、種類、URL、代表画像のURLがあります。画像は外部から取得できるURLで指定します。手元のファイルパスを貼るだけでは、共有先は画像を取得できません。実装担当者へは採用画像と用途を渡し、実際のページで使われている設定を確認してもらいます。

記事を公開する権限がない場合は、勝手に公開や外部投稿を行わず、担当者へ掲載用画像と確認事項を渡します。練習記事を公開する必要もありません。ローカルの画像確認まで終えたことと、実サービスでの確認が未実施であることを記録すれば、基本課題の制作部分を区切れます。

実際の共有表示を確認する場合は、公開された記事URLを対象サービスのプレビューなどで確認します。画像を直接開けたことだけでは、記事の共有設定が正しい証拠にはなりません。必ず記事URLと表示された画像の組み合わせを見てください。

旧画像が出たら版と参照先を調べる

新しい画像を保存したのに、公開先で旧画像が見える場合があります。まず、掲載したファイルと管理画面で指定した画像が同じ版かを確認します。制作フォルダに新版があるだけで、公開先には旧版をアップロードしていることもあります。画像そのものの公開先と、記事が参照する先を分けて見てください。

同じ画像URLへ上書きすると、ブラウザーや共有サービスが以前の画像を保持している場合があります。設定の誤りとキャッシュによる古い表示を区別し、実装担当者と相談して版を含む新しいファイル名へ変更する方法を検討します。新URLを作るだけでなく、記事側の参照先も更新する必要があります。

その後、ページを読み直し、新しい画像が表示されるかを確認します。共有サービス側の再取得方法がある場合は公式の手順を使います。反映までの時間や利用できる機能はサービスによって異なるため、「何分待てば必ず変わる」とは約束しません。確認できた画面と時点を記録してください。

この問題に対して画像を再生成する必要はありません。正しいファイルが公開されているなら、調べる対象は設定と取得の状態です。制作、保存、掲載、共有の各段階を分けておくことで、関係のない作業をやり直さずに済みます。

完成記録へ確認範囲を残す

最後に、採用PNGのファイル名、寸法、設定ファイル名、元記事の版、確認日を書きます。確認欄は、原寸、320px、192px、中央正方形、再編集、実サービスでの共有に分けます。「全部OK」とだけ書くのではなく、何を実際に見たかが分かる記録にしてください。

架空の記入例なら「横長の画像と再編集は確認済み。中央正方形では左側が欠けるため流用しない。公開先がないため共有表示は未確認」です。未確認があることと、確認した制作範囲が使えないことは同じではありません。使える条件と次に必要な確認を分けて説明します。

最終提出物は、本命1案と比較2案のPNG、各設定JSON、元記事、制作メモ、生成指示、確認記録です。配布素材だけで進めた場合は、その使用を明記します。画像生成を実施していない工程が残っているなら、利用できる環境で後から取り組めるよう、未実施の欄を残します。

確認テストでは判断の理解を確かめますが、正答しただけで画像の品質が保証されるわけではありません。自分の完成物を照合する作業と組み合わせて修了とします。実際の閲覧数や受注は別の検証です。公開後に記録する場合も、画像だけの効果と決めつけないでください。

実践課題：再編集できる提出物をまとめる

採用した案をPNGと設定JSONで保存し、ダウンロードした両方のファイルを開き直します。別のタブへ設定を読み込み、文字を一度変更してから元へ戻し、再編集を確認してください。公開先がある人は権限の範囲で共有用画像を指定し、記事URLの表示を確かめます。ない人は未実施と記録します。

完成例は「A-v2.png、1200×630px、A-v2.json、記事v1、横長と再編集は確認済み、共有表示は未確認」です。自己確認は、PNGと設定が同じ版か、元の素材と指示が残っているか、確認した範囲と未確認を分けたかの三点です。最後にコースの確認テストで、制作と共有設定の違いを振り返ってください。

まとめ：使える条件まで伝えて完成する

画像の保存だけで終えず、編集元を開き直し、採用版と一致することを確認します。公開先の共有設定と古い画像の表示は、画像制作とは別に調べます。確認できた条件と未確認事項を添えれば、後から自分や別の担当者が修正を引き継げます。これで基本課題の制作と確認が完了します。

自社の記事画像制作へ取り入れる

チームで使う記事と制作例、判断に迷う箇所を整理して、法人研修・AI導入支援の内容をご覧ください。