ボイスサンプルの録り方とサイトへの最適な埋め込み方法

はじめに：サンプルページの設計で依頼率は変わる

同人声優のサイトを何件も作ってきて、一番「もったいないな」と思うのがボイスサンプルの扱いです。せっかく素晴らしい声なのに、サンプルページに飛んだら再生ボタンが小さすぎてどこか分からない、あるいはサーバーに直置きしたMP3をブラウザが独自に表示していて、スマホからだと動作が怪しい――こういうケースを何度も見てきました。

依頼者がボイスサンプルを聴くとき、判断しているのは「声の良し悪し」だけではありません。録音品質、構成の分かりやすさ、再生のしやすさ――すべてが「この人に依頼して大丈夫か」の印象に影響します。同じ声でも、サイト上での見せ方ひとつで評価は大きく変わります。

この記事では、依頼者に響くボイスサンプルの録り方と、Webサイトに埋め込む最適な方法を、制作者の視点で解説します。

録り方のポイント

尺は30秒〜1分がベスト

依頼者の方が何十件もサイトを見て回るなかで、長いサンプルを最後まで聴いてもらえることは少ないです。1サンプルあたり30秒〜1分を目安にしましょう。短すぎると声の雰囲気が伝わらず、長すぎると途中で離脱されてしまいます。

この尺感はサイト設計的にも重要で、プレイヤーを縦に並べたとき「スクロールせずに3〜4個が見える」レイアウトを作りやすくなります。1サンプルが3分あると、プレイヤー自体は小さくてもページ全体の構成が難しくなります。

ジャンル別に用意する

「なんでもできます」と1つのサンプルだけ置くよりも、ジャンルごとに分けた方が依頼者は判断しやすくなります。

• ナレーション（落ち着いたトーン）
• キャラクターボイス（元気系 / クール系 / ささやき系）
• ASMR・耳元系
• セリフ読み（感情表現のバリエーション）

3〜5種類あれば十分です。サイト設計の観点でも、ジャンルをタブやセクションで分けることで「自分の作品に合う声を探す」という依頼者の動線が作りやすくなります。

ノイズ処理は必ず行う

マイクが拾ってしまう環境ノイズ（エアコン、PCファン、外の車の音など）は、録音後に必ず除去しましょう。

• Audacity（無料）：「ノイズリダクション」機能で環境音を除去
• iZotope RX（有料）：プロ品質のノイズ除去が可能
• Adobe Podcast（無料、Web上で使える）：AIによる自動ノイズ除去

ノイズ処理はかけすぎると声が不自然になります。目安は「静かな部屋で聴いてノイズが気にならない」レベルです。これはサイト側では対処できないので、素材の段階で解決しておく必要があります。

ファイル形式の選び方

サイトにボイスサンプルを掲載するとき、WAVをそのままアップしているケースを見かけますが、これはページ速度に直接ひびきます。1分のWAVファイルは約10MB、同じ内容をMP3 192kbpsにすると約1.5MBです。サンプルを5個置くだけで50MBと7.5MBの差がつきます。

形式	ビットレート	ファイルサイズ（1分あたり）	推奨度
MP3	128kbps	約1MB	○
MP3	192kbps	約1.5MB	◎（最推奨）
MP3	320kbps	約2.5MB	△（Web向けには過剰）
WAV	-	約10MB	×（重すぎる）
OGG	128kbps	約1MB	○（ブラウザ互換性に注意）

MP3 192kbpsがWebサイト掲載には最適です。依頼者がブラウザ上で試聴する分には十分な音質で、ページの読み込み速度も維持できます。

納品用の音源はWAVやFLACで保存しておいて、サンプル用のMP3は別途書き出す運用がベストです。同じファイルをWeb用と納品用に使い回すと、どちらかが妥協することになります。

サイトへの埋め込み方法3選

方法1：HTML5 audioタグ（最もシンプル）

<audio controls preload="none">
  <source src="/audio/sample-narration.mp3" type="audio/mpeg">
  お使いのブラウザはaudio要素をサポートしていません。
</audio>

ブラウザ標準の再生プレイヤーが表示されます。HTMLだけで完結するので外部サービスへの依存がなく、サーバーに音源を置くだけで動きます。preload="none"を忘れずに付けることがポイントで、これがないとページを開いた瞬間にすべての音声ファイルをダウンロードしようとしてしまいます。

ブラウザデフォルトのUIはChromeとSafariで見た目が微妙に異なるため、デザインにこだわりがある場合は次の方法を検討してください。

方法2：SoundCloud埋め込み（無料で使える）

SoundCloudに音源をアップロードし、埋め込みコードをサイトに貼り付ける方法です。

<iframe loading="lazy" width="100%" height="166" scrolling="no" frameborder="no"
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/xxxxx">
</iframe>

プレイヤーの見た目が統一されて波形も表示されるので、見栄えが整いやすいです。loading="lazy"を付けると画面外のiframeは遅延読み込みになるため、複数埋め込む場合も速度への影響を抑えられます。

ただし、SoundCloud側の仕様変更やサービス停止の影響を受ける点は把握しておいてください。

方法3：自作プレイヤー（デザイン自由度が高い）

JavaScriptとCSSを使って、オリジナルデザインの再生プレイヤーを作る方法です。サイトのデザインに完全に溶け込むプレイヤーが実現できます。

よく使うライブラリは「Howler.js」「Plyr」「wavesurfer.js」あたりです。wavesurfer.jsは波形をリアルタイムに描画できてビジュアルの完成度が高いのですが、波形データの生成処理が重めなので、実装時は音声ファイルを事前に波形データとして書き出しておく方法を取ることが多いです。Plyrはカスタマイズしやすくレスポンシブ対応も楽なので、シンプルに見た目を整えたいケースでよく採用します。

各方法のメリット・デメリット比較表

項目	HTML5 audio	SoundCloud	自作プレイヤー
導入の手軽さ	◎	○	△
デザインの自由度	△	△	◎
外部サービス依存	なし	あり	なし
再生回数の表示	×	○（自動）	△（実装次第）
モバイル対応	◎	○	△（実装次第）
ページ速度への影響	小	中（iframe分）	実装次第
費用	無料	無料（制限あり）	実装コスト

実際に制作するときの選び方の目安はこうです。

• まずサクッと載せたい・メンテナンスを最小限にしたい → HTML5 audioタグ（preload=“none”必須）
• プレイヤーの見た目を統一したい・再生回数も把握したい → SoundCloud
• サイトの世界観にプレイヤーを溶け込ませたい → 自作プレイヤー（Plyrが実装コストと品質のバランスが良い）

ページ表示速度を犠牲にしない工夫

ボイスサンプルページはファイルサイズが大きくなりやすいので、速度対策は制作時に必ず入れるようにしています。

preload=“none”とlazy loadingを徹底する

HTML5 audioタグではpreload="none"を指定しておくことが基本です。これをつけ忘れるとブラウザがページ読み込みと同時に音声ファイルを先読みしようとするため、5ファイルあれば5ファイル分のリクエストが一気に走ります。

SoundCloudのiframeにはloading="lazy"を追加すると、スクロールして画面に入るタイミングまで読み込みを遅延できます。どちらも1行の違いですが、Core Web Vitalsのスコアに影響が出るくらいの差になります。

サンプル数は5〜8個に絞る

「たくさん載せた方がアピールになる」という発想は分かりますが、サンプルが多すぎると依頼者がどれを聴けばいいか分からなくなります。選択肢が多すぎると人は選べなくなる、いわゆるパラドックス・オブ・チョイスの問題です。

5〜8個に絞って、各サンプルにジャンルと一言説明をつける構成が、依頼者の「これだ」という判断を一番引き出しやすいレイアウトです。

ボイスサンプルページをさらに魅力的にするためのポイントは、ボイスサンプルサイトで押さえるべきポイントでも詳しく解説しています。

まとめ

ボイスサンプルは同人声優にとって「名刺」とも言える存在ですが、サイト上での見せ方次第でその名刺が活きるかどうかが変わります。

• 1サンプル30秒〜1分、ジャンル別に3〜5種類用意する
• Web掲載用はMP3 192kbpsに変換する（WAVをそのまま置かない）
• HTML5 audioタグを使うときはpreload="none"を必ず付ける
• SoundCloud埋め込みにはloading="lazy"を追加する
• サンプルは5〜8個に絞り、各ジャンルに一言説明をつける

まずHTMLにaudioタグでサンプルを1つ載せるところから始めてみてください。サンプルがあるとないとでは、依頼者の「この人に頼んでみよう」という判断の速さがまるで変わります。

---

Web制作のご相談はお問い合わせページからお気軽にどうぞ。