最終更新日：2026年5月20日 at 6:23 PM
英話学習の WordPress ページなどで、ブラウザの音声読み上げ機能をプラグインなしで簡単にショートコードから呼び出せるスニペットの開発を Gemini に依頼しました。
その結果、テーマの functions.php にブラウザの音声読み上げ機能を JavaScript で作成されたスニペットを追加するだけで、ショートコードから英話のテキストを簡単に音声合成により女性の声で再生できるようになりました。*本記事のアイキャッチ画像もGeminiが作成
本記事では、そのショートコードの使い方と完成したスニペットを公開します。
本サイトにおいて、この機能は以下の記事で利用しています。
上記のページでは、英語音声の再生のために WordPress プラグイン「ResponsiveVoice Text To Speech」を使用していましたが、記事の読み込みにおいて、毎回2.1秒もの読み込み待ちが生じ、PageSpeed Insights のスコアを大きく下げ、Google のSEO評価をも下げる要因となっていたため、サーバー負荷軽減を目的としたシステム最適化の一環として、アンインストールすることにしました。
その代替として、Gemini の監修により、JavaScript の実装で、WordPress のショートコード「say」により指定したテキストをブラウザのテキスト読み上げ機能（Web Speech API）を呼び出し、合成音声で再生する方式に変更しました。
実装された JavaScript のプログラムでは、現在の設定が Windows なら「Microsoft Zira」、iPhone や Mac なら「Samantha」、Chrome なら「Googleの女性ボイス」といった、それぞれの環境で最も綺麗に聞こえる「英語の女性の声」を自動で選び出すようになっています。
ショートコード［say］の記述方法
ショートコード「say」は、以下のように記述します。
[say]The internet has brought many changes to our everyday lives.[/say]以下は、上記ショートコードの使用例です。[Play] ボタンの押下で英語音声が流れます。
The internet has brought many changes to our everyday lives.インターネットは、私達の日常生活に多くの変革をもたらした
スニペットの追加
以下のスニペットをテーマの functions.php に追加します。
// サーバー負荷ゼロ・安全第一の読み上げボタン
add_shortcode('say', function($atts, $content = null) {
$text = trim($content);
if (empty($text)) return '';
$safe_text = addslashes(esc_js($text));
$js = "
const talk = () => {
const u = new SpeechSynthesisUtterance('{$safe_text}');
const vs = window.speechSynthesis.getVoices();
let female = vs.find(v => v.name.includes('Microsoft Zira')) ||
vs.find(v => v.name.includes('Samantha')) ||
vs.find(v => v.name.includes('Google US English')) ||
vs.find(v => v.lang.startsWith('en') && v.name.includes('Female'));
if (female) u.voice = female;
u.lang = 'en-US';
/* --- 微調整用の設定 --- */
u.rate = 0.9; // 速度（0.1〜2.0 / 0.8だとゆっくり、1.0が標準）
u.pitch = 1.0; // 声の高さ（0.0〜2.0 / 1.2にすると少し高い声になります）
/* -------------------- */
window.speechSynthesis.cancel();
window.speechSynthesis.speak(u);
};
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = talk;
}
talk();
";
return '<button type="button" onclick="' . $js . '" style="cursor:pointer; background:#f7f7f7; border:1px solid #ccc; border-radius:4px; padding:2px 10px; margin-right:8px; font-size:0.9em;">Play 🔊</button><strong>' . esc_html($text) . '</strong>';
});この方法のメリット
- サーバー負荷ゼロ: プラグインなしで、読者のブラウザが直接喋るため、サーバーは一切何もしません。
- プラグイン不要: アップデートの心配もありません。
- 運用が楽: 以前のショートコード定義については、コードエディタで［say]英文［/say] という形に置換して貼り付けるだけで対応でき、新たな例文を次々と音声付きフレーズで増やせます。
- 見た目もスッキリ: ボタンと英文を綺麗に並べて表示できます。
- SEOに強い: 重いプラグイン（ResponsiveVoice）を使っていた頃よりも軽くて速い、SEOにも強いサイトへ生まれ変われます！
参考までにですが、以下は、本機能の開発のために Gemini と交わしたチャットの最終局面です。
なぜこれならいけるのか？
- 「Microsoft Zira」を名指し: Windows環境で最も一般的な英語女性ボイス「Zira」を、名前で直接指名しています。
- 「Google US English」を追加: Chromeブラウザで高品質な女性の声として有名なこの声を候補のトップに入れました。
- if (female) u.voice = female;: 「もし女性の声が見つかったら、標準設定を上書きして強制的に適用する」という強い命令にしています。
お願い
コードを保存したら、一度ページを再読み込み（F5キー）し、数秒待ってからボタンを押してみてください（音声リストの読み込みに時間がかかる場合があるため）。
これでも男性（Davidなど）が喋る場合は、恐縮ですがお使いのブラウザ（Chrome、Edgeなど）とOS（Windows10、Macなど）を教えていただけますか？その環境に特化した名前を直接指定します！
Senri > 女性になりました！
ついに
女性の声になりましたか！本当によかったです！
何度もコードを書き換えてテストにお付き合いいただき、心から感謝いたします。現在の設定は、Windowsなら「Microsoft Zira」、iPhoneやMacなら「Samantha」、Chromeなら「Googleの女性ボイス」といった、それぞれの環境で最も綺麗に聞こえる「英語の女性の声」を自動で選び出すようになっています。
現在の状態でできること
- サーバー負荷はゼロ: プラグインなし、ブラウザの機能だけで動いています。
- 見た目もスッキリ: お写真の通り、ボタンと英文が綺麗に並んでいます。
- 運用が楽: 秀丸エディタで
[say]英文[/say]という形へ置換して貼り付けるだけで、次々と音声付きフレーズを増やせます。
秀丸での一括置換のヒント
もし、まだ古いコードがたくさんあるなら、秀丸で以下のように置換してから保存してください。
- 検索: \[responsivevoice[^\]]*\](.*?)\[/responsivevoice\]
- 置換:［say]\1［/say]
最後にひとつだけアドバイス
もし今後、「もう少しゆっくり喋らせたい」や「少し高い声にしたい」といった微調整が必要になったら、コード内の以下の数字を少し変えるだけで調整可能です。
- u.rate = 0.9; （0.8にするとよりゆっくり、1.0にすると標準速度になります）
- u.pitch = 1.2; （もし追加したければ。1.0が標準、1.2にすると少し高めの明るい声になります）
これで、重いプラグイン（ResponsiveVoice）を使っていた頃よりも軽くて速い、SEOにも強いサイトに生まれ変わりましたね！
他にお手伝いできることや、ボタンの「色」をもっとブログに合わせたいなどのご要望はありますか？Senri > ありがとうございます。u.rate は、プログラムのコメントとして追加しておきます。
素晴らしい判断です！将来的に「もう少しゆっくりにしたいな」と思ったとき、ご自身ですぐに調整できるようになりますね。
コードの中にコメント付きで微調整用の数値をまとめた最終版を置いておきます。もしよろしければ、こちらをコピーして functions.php に貼り付けておいてください（中身の動作は先ほど「女性の声」になったものと同じです）。
php
add_shortcode('say', function($atts, $content = null) { $text = trim($content); if (empty($text)) return ''; $safe_text = addslashes(esc_js($text)); $js = " const talk = () => { const u = new SpeechSynthesisUtterance('{$safe_text}'); const vs = window.speechSynthesis.getVoices(); let female = vs.find(v => v.name.includes('Microsoft Zira')) || vs.find(v => v.name.includes('Samantha')) || vs.find(v => v.name.includes('Google US English')) || vs.find(v => v.lang.startsWith('en') && v.name.includes('Female')); if (female) u.voice = female; u.lang = 'en-US'; /* --- 微調整用の設定 --- */ u.rate = 0.9; // 速度（0.1〜2.0 / 0.8だとゆっくり、1.0が標準） u.pitch = 1.0; // 声の高さ（0.0〜2.0 / 1.2にすると少し高い声になります） /* -------------------- */ window.speechSynthesis.cancel(); window.speechSynthesis.speak(u); }; if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = talk; } talk(); "; return '<button type="button" onclick="' . $js . '" style="cursor:pointer; background:#f7f7f7; border:1px solid #ccc; border-radius:4px; padding:2px 10px; margin-right:8px; font-size:0.9em;">Play 🔊</button><strong>' . esc_html($text) . '</strong>'; });コードは注意してご使用ください。
これで、重いプラグインを捨てて、自前で「超軽量・高性能」な読み上げ環境が完成しましたね。サイトの高速化にも大きく貢献するはずです。
まずは、このコードを保存してページを更新してみてください。これでスッキリ直るはずです！
秀丸エディタでの一括置換作業、がんばってください！またいつでもお気軽にご相談くださいね。お疲れ様でした！Senri > 素晴らしいです！ どうもありがとうございました。シャワーしてから、秀丸エディタでショートコードの一括置換作業をやります。ではまた！
それはよかったです！こちらこそ、何度もテストにお付き合いいただき、本当にありがとうございました。
「シャワーを浴びてリフレッシュしてから一括置換」、最高ですね！頭がスッキリした状態なら、秀丸の正規表現もスイスイ進むはずです。
もし置換作業中に「あれ、このパターンの英文はどう書けばいいんだっけ？」と迷うことがあれば、いつでも気軽に戻ってきてください。
それでは、作業がスムーズに進むことを願っております。本当にお疲れ様でした！またいつでもどうぞ。
2026.05.20 追記
上記コードの微調整用の設定パラメータ（速度、声の高さ）についてですが、検証の結果、現在のブラウザに搭載されている高品質音声（Google US EnglishやMicrosoft Ziraなど）が不自然な声へ加工されるのを防ぐため、ブラウザ側からの rate/pitch 変更命令が完全に拒否され 1.0（標準）に固定する仕様になっているようです。
