無料相談

売上あげる、
おてつだい。

  1. トップページ
  2. コラム
  3. 記事

コラム

会社サイトに外部サービスを埋め込む前に|止まった時も案内を残す設計

チップス

会社サイトに地図・動画・予約を埋め込む前に、自社ページへ残す住所・入口写真・要点・受付条件と連絡先を整理。読み込み中、表示できない時、手続きへ進めない時の案内と確認範囲を紹介します。

建物の入口を前に、スマートフォンの入口写真と文字の案内を照合し、外部の地図だけに頼らず場所を確かめるイメージ

地図の枠が空白になり、紹介動画を再生できず、予約画面にも進めない。そんな場面を想定して、外部サービスの表示と、自社ページに残す案内を分けましょう。住所、内容の要点、受付条件、別の連絡方法を、埋め込んだ枠の外でも読めるようにすることから考えます。外部の表示が使えない時に、利用者が次に何をできるかを決めます。

例えば、堺市の部品製造会社が、見学案内のページに地図、工場紹介の動画、外部の予約画面を置く場面を仮定します。ここで考えるのは、特定のサービスが止まる頻度や復旧方法ではなく、表示や手続きを使えない場合にも残す会社側の説明です。

埋込みの中だけにある情報を見つける

今のページで、埋込みが使えないと何が分からなくなるかを見ます。住所が地図の中にしかないのか、見学の流れを動画だけで説明しているのか、受付条件が予約画面を開かないと読めないのか。表示する部品の一覧と、そこへ預けている案内を対応させます。

この会社なら、住所と建物の入口、見学で紹介する内容、予約が必要な条件、受付を確かめる方法を、会社の本文でも説明する案があります。外部画面に似たものを作り直すことが目的ではありません。来る人や申し込む人が、その表示だけを頼りにしなくても状況を理解できるようにします。

地図・動画・予約ごとに、残す説明を決める

外部へ任せる表示自社ページにも残す案内使えない時に選べる行動
地図住所、建物と入口の説明、確認した入口写真文章と写真で場所を確かめ、不明点を窓口へ聞く
紹介動画何を紹介する動画かと、知ってほしい内容の説明写真や本文から要点を読み、必要な情報を確認する
予約画面対象となる手続き、受付条件、別の連絡方法申込みの状態を確かめ、対応する窓口へ相談する
仮定の見学案内の例です。住所・入口・受付条件・窓口は、実際に案内できる内容を会社で確認して掲載します。

地図へのリンクを別に置く案でも、同じ外部サービスが使えない場面では、その行き先も利用できるとは限りません。リンクを増やすだけで代わりの案内ができたとせず、住所と入口の説明を自社ページで読めるかを確認します。写真には、実際に来訪者へ案内してよい入口を選びます。

動画には、内容が分かる説明を添えます。音声や画面で伝えている情報を文字にする方法は、W3C WAIの解説でも示されています。短い要点を添えることだけで動画全体の代わりが完成するとせず、動画を使えない人にも必要な説明は何かを確かめます。本稿では、見学内容を知るための本文を埋込みの外にも用意する案として扱います。

外部の地図・動画・予約画面の枠と、自社ページに残す住所・入口写真・内容の要点・受付条件・連絡方法を分ける構成図
埋込みの外に、会社が確認して更新する案内を置く考え方です。外部の障害を自動で検知し復旧する仕組みを示すものではありません。

読み込み前・表示不能・手続き不能を分けて試す

読み込みが終わらない間も、本文や連絡先を読めるかを試します。大きな空白や読み込みの表示だけが続き、下に何があるか分からなくならないかを見ます。必要な住所や受付条件を読むために、外部画面の表示完了を待つ構成にしていないかを確認します。

埋込みを表示できない場合は、その枠を使わなくても必要な案内へ進めるかを見ます。利用者へ操作を求める説明を置く場合も、何を表示しようとしているかが分かり、ほかの本文と連絡先を使えるようにします。代わりの文章を初めから枠の外へ出す案と、状態に応じて案内を変える機能は、分けて見積もる仕事です。

外部の手続き先へ進めない場合は、表示の問題だけでなく、申込みが終わったか分からない人への案内を考えます。この会社なら、見学希望を送った後に受付結果が分からなければ、繰り返し予約する前に窓口へ確認する流れを比べます。窓口で希望を聞いたことと、見学日時が決まったことも区別して伝えます。

代わりの窓口を置くなら、実際に誰が対応し、どの時間や方法で連絡できるかを確かめます。「電話してください」という文だけでは、電話が難しい人や受付時間外の人が困るかもしれません。会社が受けられる別の方法と、返答の受け方をそろえ、対応していない約束を加えないようにします。

表示だけでなく、残す案内の更新担当も決める

住所や受付条件を自社ページにも持つなら、外部サービスの設定を変更した際に、どの本文を見直すかを決めます。サービス側だけを更新して会社の案内が古くなったり、逆に本文だけを変えて予約条件が以前のままになったりしないよう、対象と担当を残します。

導入時には、通常の表示、読み込み途中、表示できない想定、手続きへ進めない想定を、確認用の環境や方法で制作側と試します。スマートフォンでも、説明を読み、必要な情報を探し、別の連絡先へ進むところまで確認します。埋込みの枠を一度表示できたことだけで、すべての場面を確認済みにはしません。

改修相談では、今使うサービスと掲載ページ、利用者にしてほしい行動を伝えます。自社本文の追加、入口写真、連絡方法、表示する場所、試験する範囲をまとめて相談できます。利用するサービスの終了や変更がある場合は、案内の差し替え先と、古い埋込みを残さない確認も含めます。

見学案内に地図、紹介動画、外部の予約画面を置く予定です。表示や手続きを使えない時も、住所・入口写真・内容の説明・受付条件と連絡先を読めるようにしたいです。読み込み中と表示できない場面、申込み結果が分からない場面まで含めて、本文と画面の改修を相談したいです。

みやあじよでは、事業のお話を伺い、ホームページの内容や構成・デザインを整理するところから制作をご相談いただけます。堺市で、外部サービスの埋込みと代わりの案内を相談するから、今のページや使いたいサービスをお聞かせください。原因や直す方法が分からない段階でもご相談いただけます。残す本文と連絡方法、表示・動作の確認を整理し、必要な対応範囲と費用を確認します。

参考資料

  • W3C WAI:Transcripts(音声・映像の理解に必要な情報を文字で提供する方法と、見つけやすい配置について参照)
マーケター・コンサルタントの皆様へクライアントの「価値」を伝えるWebトータルパートナー提携Webに関するトータルからスポット作業まで必要な部分だけお任せできるWeb制作パートナー提携