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

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

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

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

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

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

「scriptを設置するだけ」と「ガイドを作る操作」は別です。ガイドの作成・編集・対象要素の再指定にはInputGuideのChrome拡張を使います。作成担当者が実際の画面を開き、案内したい要素をクリックして設定します。

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

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

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

設置から公開までの流れ

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

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

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

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

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

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

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

スクリプト設置の提供開始予定価格は月21,800円(税抜)〜

InputGuideのスクリプト設置は月21,800円(税抜)〜を予定しています。利用条件別の確定料金と無料期間は、提供開始前に料金ページでご案内します。

script設置とChrome拡張の違い

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

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