メインコンテンツへ移動
Boletolibre

イベントの写真ギャラリーをサイトで公開する:元アルバム、埋め込み、公開確認

写真ギャラリーは承認済みの写真を探してもらうためのページであり、文章によるイベント振り返りとは役割が異なります。写真を並べる前に、公開対象のアルバム、更新担当者、閲覧者に許可する操作を決めます。その後、公開ページと代替の直接リンクを、一般の閲覧者と同じ条件で確認します。

Boletolibre編集部

公開日

承認済みの写真アルバムからイベントページの写真一覧へつながり、埋め込みが使えない場合の直接リンクも示した図。
承認済みアルバムを一つの基準にし、公開ページと直接リンクの両方を確認します。

承認済みアルバムと更新担当者を決める

編集できるギャラリー公開確認表をダウンロード(英語のMarkdown)

この公開ページに使うことをチームが承認した写真を、明確な範囲で選びます。アルバムのURL、担当者、イベントの開催回、最後に承認した版を記録します。作業用アップロード先と公開元は分けてください。サービスが自動更新する場合、後から追加した写真が確認前に表示されることがあります。実際の設定と動作を確認します。

最初に見せる写真は、イベントが分かる小さなまとまりにします。ページ名、開催日、短い説明を添えると写真の文脈が伝わります。写真が複数回に分けて届くなら、各回の承認者と公開アルバムの更新者を決めます。

ページ内ギャラリー、埋め込み、直接リンクを選ぶ

サイト編集画面に標準のギャラリーがある場合は、画像と説明文について公式の操作手順に従います。外部アルバムなら、提供元の最新の手順で埋め込みコードを取得し、対応する入力欄にだけ設定します。iframeには内容が分かるタイトルを付けます。編集画面のプレビューだけで一般公開を確認したことにはなりません。[4]

外部埋め込みのそばには、行き先が分かるアルバムへの直接リンクも置き、アクセスを別に試します。イベントページがBoletolibre.comにある場合、そのページをイベントとチケットの案内先として保ち、埋め込みに対応していなければ外部ギャラリーへリンクします。

閲覧者に見える写真と操作を確かめる

ログインしていないブラウザーで開き、予定した写真がすべてあるか、説明文や日付が正しいか、写真の拡大やダウンロードが承認済み設定どおりか確認します。サービス本体でしか使えない操作もあります。埋め込み画面にない機能を案内文で約束しないでください。

情報を伝える写真には、そのページで写真が伝える内容に合った代替テキストを書きます。人物、活動、場面をキャプションで示す場合は、イベント記録で確認できる内容にします。画像自体がリンクなら、代替テキストにはリンクの働きを記します。画像が読み込まれなくても順番と説明が分かるか確認します。[1]

公開ページをスマートフォンとキーボードで試す

スマートフォンで複数の写真を開き、移動してイベントページへ戻ります。キーボードでも写真一覧へ移動し、拡大表示を開閉してフォーカスの位置を確かめます。拡大表示がモーダルダイアログなら、フォーカスとEscapeキーの動きをW3Cのパターンと比較します。提供元の説明だけで合格としないでください。[2]

公開ページを遅い通信環境で再読み込みします。次に、アルバムのサービスは利用できる状態で埋め込みだけが失敗する状況を再現し、直接リンクが開くか確かめます。サービス自体が停止した場合はリンクも失敗し得ます。その際もイベントページを読める状態に保ち、現状を正確に伝える案内と、確認済みの更新先または連絡先を示します。外部埋め込みは読み込みや表示位置に影響するため、このページで確認し、端末、結果、修正担当者を記録します。[3]

写真の更新と古い画像の整理を続ける

公開後も、写真の追加・削除・説明変更のたびに、担当者が表示中の一覧を承認済みアルバムと照合します。サービス設定、アカウント、サイトが変わったら、未ログインで直接リンクと埋め込みを再確認します。写真を取り下げるときは元アルバムと公開ページを修正します。複製やキャッシュがすぐ消えるとは限りません。

イベントをアーカイブするときは、ギャラリーを公開し続けるか、安定したアーカイブへ移すか、削除するかを決めます。導入文と直接リンクを決定に合わせて直し、結果を試します。編集可能な公開確認表には、内部の写真承認手続きとは分けて、公開元、設定、閲覧テスト、次回確認日を記録します。

出典と参考資料

  1. Images TutorialW3C WAI · 確認日
  2. Dialog (Modal) PatternW3C WAI · 確認日
  3. Best practices for using third-party embedsweb.dev · 確認日
  4. Using the title attribute of the iframe element (H64)W3C WAI · 確認日