読書速度測定ウィジェット＆認定バッジ
あなたのブログ記事、学習管理システム（LMS）、学校ポータル、Notion、ポートフォリオに、効果的な読書速度測定ツールや認定バッジを1行のコードで簡単に無償設置できます。
公式・読書認定バッジ (Verified Reader Badge)
個人ブログのサイドバー、読書メーターやブクログのレビュー記事、GitHubプロフィール、Notionのダッシュボードに設置して、客観的な測定テストを受験済みであることを証明できる高解像度SVGベクターバッジです。
<a href="https://onlinereadingspeedtest.com/ja/" target="_blank" rel="noopener" title="読書速度・読解力測定テスト">
<img src="https://onlinereadingspeedtest.com/badges/verified-reader-dark.svg" alt="Verified Reading Speed on OnlineReadingSpeedTest.com" width="220" height="40" />
</a>[](https://onlinereadingspeedtest.com/ja/)読書速度測定 Iframe ウィジェット（完全版）
利用者があなたのWebサイトから離脱することなく、その場で即座に読書速度テストを実行できるレスポンシブな埋め込みコンテナです。広告なしの静謐なUIでシームレスに動作します。
<iframe
src="https://onlinereadingspeedtest.com/ja/1-minute-reading-test/?embed=true"
width="100%"
height="650"
style="border: 1px solid #e5e5dc; border-radius: 12px; max-width: 800px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);"
title="読書速度・読解力測定テスト"
loading="lazy"
sandbox="allow-scripts allow-same-origin allow-popups"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
<p style="font-size: 12px; color: #71717a; text-align: center; margin-top: 6px;">
提供: <a href="https://onlinereadingspeedtest.com/ja/" target="_blank" rel="noopener" style="color: #d97706; text-decoration: underline;">OnlineReadingSpeedTest.com</a>
</p>プラットフォーム別導入手順とセキュリティ設定
教育管理システム、CMS、およびブログサービスでの具体的な埋め込み手順です。
1. 教育現場・LMS（Moodle、Google Classroom、Canvas）への導入
- Moodle: コース編集モードを「オン」にし、「ブロックを追加」から「HTMLブロック」を選択します。ブロックの設定アイコンから「ブロック設定」を開き、エディタの「HTMLソース編集（<>アイコン）」をクリックして上記のiframeコードを貼り付けます。
- Google Classroom: 「授業」タブから「作成」→「資料」を選択し、リンクとして
https://onlinereadingspeedtest.com/ja/1-minute-reading-testを追加します。生徒の端末（Chromebook等）でスムーズに全画面テストが開始されます。 - Canvas LMS: リッチコンテンツエディタ（RCE）の「挿入」→「埋め込み」をクリックし、コードスニペットを入力して保存します。
2. WordPress（Gutenberg / クラシック）および各種ブログサービス
- WordPress（ブロックエディタ）: 記事執筆画面で「+」ボタンを押し、「カスタムHTML」ブロックを挿入します。上記のコードをそのまま貼り付けてプレビューで表示を確認します。
- はてなブログ / note: HTML編集モードに切り替えてコードを貼り付けます（noteなど外部iframe制限のあるプラットフォームでは、認定バッジ画像＋リンクの組み合わせをご利用ください）。
3. Content Security Policy（CSP）とセキュリティ要件
強固なセキュリティヘッダーを導入しているWebサーバーでは、iframeの埋め込みがブロックされる場合があります。その際は、WebサーバーのHTTPレスポンスヘッダー（Content-Security-Policy）に以下のディレクティブを設定してください。
Content-Security-Policy: frame-src 'self' https://onlinereadingspeedtest.com;当サイトは完全HTTPS（TLS 1.3）暗号化通信に対応しており、安全なオリジン分離が施されています。
よくある質問と回答
ライセンス、料金、技術仕様に関する疑問にお答えします。
ウィジェットの埋め込みや利用に料金は発生しますか？ ▼
いいえ。学校、大学、学習塾、個人ブログ、非営利団体など、すべてのWebサイトにおいて完全無料でご利用いただけます。APIキーの発行申請やアカウント登録も一切不要です。
学校のLMS（Moodle、Google Classroom、Canvas等）に埋め込めますか？ ▼
はい。Moodleの「HTMLブロック」や「ラベル」、Google Classroomの教材リンク、Canvasの埋め込み機能等でそのまま動作します。レスポンシブ対応のため、PCでもタブレット端末でも表示が崩れません。
WordPressやNotionへの設置方法は？ ▼
WordPressではブロックエディタの「カスタムHTML」ブロックに提供コードを貼り付けるだけです。Notionでは「/embed」コマンドを入力し、ウィジェットURLを貼り付けることでインライン表示が可能です。
ウィジェット内に広告や不適切なコンテンツは表示されますか？ ▼
いいえ。iframe埋め込み用の測定画面では、学習の集中を維持するため、ポップアップ広告や自動再生動画などの邪魔な広告表示を完全に排除したクリーンな状態で配信されます。
Content Security Policy（CSP）の設定で注意すべき点は？ ▼
親サイトで厳格なCSPを適用している場合、frame-src または child-src ディレクティブに https://onlinereadingspeedtest.com を追加指定してください。
iframeの幅や高さを自由にカスタマイズできますか？ ▼
はい。style属性やCSSを用いて、widthを100%に設定し、親コンテナの幅に追従させることができます。推奨高さは600px〜700pxです。
読書認定バッジの画像はローカルにダウンロードして使用できますか？ ▼
はい。SVGベクター形式のバッジ画像を直接ダウンロードして自身のサーバーにアップロードするか、当サイトのCDN URLをそのまま参照（hotlinking）してご利用いただけます。
埋め込みによって自社サイトの表示速度（Core Web Vitals）に悪影響はありますか？ ▼
当ウィジェットのコードには loading="lazy" 属性があらかじめ指定されているため、ユーザーがスクロールしてウィジェット位置に近づくまで読み込みが遅延され、初期ページのLCPやCLSを阻害しません。
ウィジェットの改変やクレジット表示の削除は許可されていますか？ ▼
ウィジェット下部の提供元リンク（クレジット）の削除や、測定アルゴリズムの改ざん、有料会員制コンテンツの内部に囲い込んで別料金を請求する行為は利用規約により禁止されています。
読書速度・読解力テストの測定手順
標準的な測定基準に基づき、読書文字数（CPM）、理解度、偏差値を客観的に判定します。
- STEP 01
文章を選択
随筆・実用書・論説文から文字数が標準化されたテキストを選びます。
- STEP 02
自然に黙読
普段通りの自然なペースで黙読。タイマーが所要時間を計測します。
- STEP 03
設問に回答
本文が非表示になり、記憶保持と真の読解力をクローズドブックで測定。
- STEP 04
速度・偏差値を確認
1分間の文字数（CPM）、内容理解度、日本人平均との偏差値を即時判定。