scriptタグ1行でWebサイトに操作ガイドを設置する方法｜作成から公開まで

scriptタグ1行で操作ガイドを配信する仕組み

script設置方式では、InputGuideのローダーを対象サイトへ追加します。ローダーが公開済みのガイド設定を読み込み、対象の入力欄やボタンに合わせて画面上へ案内を表示します。ガイドの内容は管理画面側で更新できるため、説明文を直すたびにサイト本体を再リリースする必要はありません。

<script src="https://apps.inputguide.com/loader.js?id=…" async></script>

上記は設置イメージです。実際には管理画面で発行されたサイト固有のタグを使用します。初回のscript追加には、対象サイトを管理する担当者の作業が必要です。

作成担当者はChrome拡張、利用者は追加作業なし

作成担当者はChrome拡張で実際の画面を開き、案内したい入力欄やボタンをクリックします。案内文と進行条件が自動で設定されるので、まずガイドの形を作ってから、自社の説明を必要な箇所に足せます。ガイドを見る利用者には、拡張のインストールをお願いする必要がありません。

script設置方式が向いているサイト

• 自社で開発・運営するSaaSや会員向けWebサービス
• 申し込み、予約、問い合わせなど、完了率を改善したい公開フォーム
• 自社でコードを管理し、多くの社員へ案内を配信する社内Webシステム
• 新機能のオンボーディングや、変更した操作手順を利用者へ案内したいWebサイト

他社が提供する業務SaaSなど、scriptタグを追加できない画面にはChrome拡張方式が向いています。公開サービスと社内システムの両方を持つ場合は、対象ごとに配信方式を選べます。

設置から公開までの流れ

以下は提供開始後の流れです。現在は事前登録受付中です。対象サイトのURL、ガイドを配信するページ、scriptを設置する担当者、ガイドを編集する担当者を事前に整理します。

1. 管理画面で、ガイドを配信するFQDNを登録する
2. 発行されたscriptタグを対象サイトの共通レイアウトへ追加する
3. 作成担当者がChrome拡張を有効にして対象ページを開く
4. 入力欄やボタンを順にクリックし、自動設定された案内文・進行条件を確認して必要な説明を足す
5. テスト環境または限定した公開範囲で表示と操作を確認する
6. 本番公開後、到達・操作時間・離脱を確認してガイドを改善する

共通レイアウトへ設置する

複数ページでガイドを使う場合は、サイトのヘッダーやレイアウトなど、対象ページから共通して読み込まれる場所へ設置します。特定ページだけで使う場合は、そのページに限定して読み込む構成も可能です。

公開前に実際の操作で確認する

レスポンシブ表示、モーダル、プルダウンなど、画面状態が変わる要素は実際の操作順で確認します。サイト側の画面構成が変わったときは、作成担当者が対象要素をクリックし直して再指定します。

上の表は検証時に確認する内容の例です。表示されない場合は、登録した配信先、scriptを読み込むページ、ガイドの公開状態、対象要素がその時点で表示されているかを順に確認します。

公開後も、利用者のつまずきから説明を磨ける

「どこで止まったのか分からない」ときも、InputGuideのステップ別の利用分析が手がかりになります。入力例やヒントの改善案も自動提案されるため、担当者は案を確認・編集するところから着手できます。利用データが蓄積すれば、A/Bテストで説明の違いを比べ、伝わりやすい案内へ育てられます。

導入前に利用条件を確認する

配信先や利用規模によって必要な構成が異なる場合があります。対象サイトのURLと想定する利用方法を整理し、最新の利用条件を料金ページで確認してください。

Chrome拡張と共通の基本料金は月39,800円(税抜)

提供開始後の基本料金は月39,800円(税抜)で、全機能と月2,000回のガイド起動を含みます。Chrome拡張とスクリプト設置を共通で利用でき、起動回数は契約全体で合算します。提供開始後は1ヶ月無料で利用できます。利用条件の詳細は料金ページをご確認ください。

script設置とChrome拡張の違い

入力値そのものをサーバへ送信しない

InputGuideは、利用者がフォームへ入力した値そのものをサーバへ送信しません。計測するのは、フォームへの到達、操作時間、離脱、入力エラーの種別などのイベントです。全角半角の自動変換や形式チェックといった入力補助はブラウザ内で行い、ガイドは画面上にオーバーレイとして表示します。