CSSプロパティ｜ volume・voice-family・richness

volume: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「volume」と「voice-family」、「richness」についてのご説明です。

ホームページ制作・作成において、volume（ボリューム）は、音量（ボリューム）を指定します。

volume 音量（ボリューム）を指定

CSSプロパティのvolumeは、ホームページの音声再生にかかる音量（ボリューム）を指定します。このCSSはCSS2.1で削除されました。

volume : 数値

0（聞き取り可能な最低音量）～100の間の数値で指定

volume : %

親要素の音量に対する割合を%値で指定

volume : キーワード

medium

数値　50（初期値）

silent

消音

soft

数値　25

x-soft

数値　0

loud

数値　75

x-loud

数値　100

CSS2.1で削除。

volume: ;

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

廃止されたプロパティと現代の音声制御のあり方

CSSのvolumeプロパティは、かつて音声ブラウザや読み上げソフト向けに、スタイルシート側から音量を制御しようという意図で設計されました。しかし、現在ではより専門的には「見た目（装飾）はCSS、構造はHTML、機能（動作や制御）はJavaScript」という役割分担が明確になっています。そのため、音声のボリューム調整という機能的な役割はCSSの領域ではないと判断され、CSS2.1の段階で正式に仕様から削除されました。

現在、ホームページ（ウェブサイト）上で音声や動画の音量を制御する場合は、HTML5のaudioタグやvideoタグを使用し、細かな調整が必要な場面ではJavaScriptを組み合わせて実装することが一般的です。過去の仕様であるvolumeプロパティを記述してもブラウザには認識されず、他の装飾プロパティの動作に悪影響を及ぼす可能性もあるため、使用は避けることが重要です。

UX（ユーザー体験）と直帰率への影響

Webマーケティングの観点から見ると、ホームページにアクセスした瞬間にユーザーの意図しない音声が突然再生される仕組みは、非常にリスクが高い設計と言えます。スマートフォンが普及した現代では、電車内や静かなオフィスなど、音を出せない環境で事業のホームページを閲覧しているユーザーが数多く存在します。

そうした状況で突然音が鳴ってしまうと、ユーザーは驚いてすぐにページを閉じてしまいます。結果としてホームページの直帰率が急増し、ユーザーの利便性を損なうだけでなく、検索エンジンからの評価も下がってしまうかもしれません。

もし事業のプロモーションなどで動画や音声を活用する場合は、初期状態をミュート（消音）に設定しておき、ユーザー自身の自発的な操作によって音を出せるように設計することが求められます。単に仕様として音を鳴らすだけでなく、閲覧環境に配慮した細やかな設計を行うことが、ユーザーとの信頼関係を築き、最終的な集客や成果へと繋がっていきます。

ホームページ制作・Webデザインの1ポイント

HTMLと同様にCSSでもvolumeなど廃止されたプロパティがあります。廃止されたプロパティを使うとブラウザによっては機能しないため、Webデザインに崩れが生じることもあるため注意が必要です。現在ではホームページ制作で使用することのできない、廃止されたCSSの多くは、音声関連です。視覚と聴覚の二つの知覚から表現できるようにと配慮されていたと想定されますが、ホームページ閲覧中の音声再生は、時と場合によって問題があるケースが多く、需要がなくなっていったと考えることができます。

voice-family

voice-family: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「voice-family」についてのご説明です。

ホームページ制作・作成において、voice-family（ボイスファミリー）は、ページ読み込み時の声の種類を指定します。

voice-family 声の種類を指定

voice-familyは、ホームページのテキストを読み上げる声の種類を指定します。ボイスファミリー。

, で区切って複数の声の種類の候補を指定可能。

voice-family : ボイスファミリー名

voice-family の後に、以下のタイプのボイスファミリー名を指定することで、テキストを読み上げる声のタイプを指定することができます。

male

男性の声

ホームページのテキスト読み上げ音声を男性の声に指定します。

female

女性の声

ホームページのテキスト読み上げ音声を女性の声に指定します。

child

子供の声

ホームページのテキスト読み上げ音声を子供の声に指定します。

CSS2.1で削除。

voice-family: ;

音声読み上げにおけるvoice-familyの現状とアクセシビリティ

CSSのvoice-familyプロパティは、テキストを表示する際のfont-familyと同じように、文章を音声で読み上げる際の声の種類（男性、女性、子供の声、あるいは特定の音声合成エンジン名など）を指定するために考案されました。しかし、現代のホームページ（ウェブサイト）制作の現場において、このプロパティが実際に使用されるケースはほとんどありません。

より専門的には、視覚障害を持つ方や高齢者の方が利用するスクリーンリーダー（音声読み上げソフト）は、ユーザー自身が聞き取りやすいように、手元の端末であらかじめ声の種類や再生速度をカスタマイズしていることが一般的です。そのため、CSS側で特定の声を強制してしまうと、かえってユーザーを混乱させ、ホームページの使い勝手を著しく下げてしまう危険性があります。現在では、音声の出力方法はブラウザやOS、そしてユーザー自身の環境設定に完全に委ねるアプローチが主流となっています。

音声環境に向けた正しい最適化と集客への影響

voice-familyのようなCSSプロパティによる音声の装飾は実用的ではありませんが、音声読み上げ環境そのものへの配慮は、今後の事業展開において非常に重要です。スマートスピーカーの普及や、アクセシビリティ（誰もが平等に情報にアクセスできる状態）への関心の高まりにより、音声で正しく内容を理解できるホームページは、結果的に検索エンジンからも高く評価される傾向にあります。

音声を最適化するためには、CSSで声のトーンを変えるのではなく、土台となるHTMLの構造を正しく記述することに注力します。例えば、ページの言語を正しく指定する、画像には音声で読み上げられるための適切な代替テキストを用意する、そして見出しや段落を正しい順番で組み立てるといった、基本的な設計が求められます。

視覚的なWebデザインだけでなく、目に見えない情報構造を丁寧に整えることが、結果としてあらゆるデバイスや環境からのスムーズなアクセスを生み出します。こうした本質的なユーザビリティの向上が、事業の信頼性を高め、長期的な集客基盤の強化へと繋がっていきます。

ホームページ制作・Webデザインの1ポイント

voice-familyなど音声読み上げに関するCSSはたくさん廃止されました。現在ではホームページ制作で使用することのできない廃止済みのCSSはほとんどが音声関連です。

Webデザインを微調整する際には、ブラウザの開発者用ツールを使うと、変更後の表示のされ方をチェックすることができます。ただしモバイルデバイスでの表示テストなどは、使用フォントなどの関係で実際の表記とは若干の違いがあることがありますので注意が必要です。

richness

richness: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「richness」についてのご説明です。

ホームページ制作・作成において、richness（リッチネス）は、声の豊かさを指定します。

richness 声の豊かさを指定

richnessは、声の豊かさを指定します。

指定する値が大きいほど快活になります。

richness : 数値

0～100の間の数値で指定（初期値　50）

CSS2.1で削除。

現代のホームページ制作における音声読み上げとアクセシビリティ

「richness」は、音声ブラウザなどでテキストを読み上げる際の「声の豊かさ（明るさや滑らかさ）」を指定するために考案されたプロパティです。しかし、現在の主要なブラウザ環境において、こうした音声用CSS（Aural CSS）が直接的にサポートされているケースはほとんどありません。現代のホームページ（ウェブサイト）制作においては、個別のCSSプロパティに頼るのではなく、より汎用的なアクセシビリティ対応へと手法が変化しています。

最新のブラウザ環境での音声制御と代替アプローチ

Google ChromeやSafari、Edgeなどを利用するユーザーに対して音声の読み上げを最適化する場合、現在ではCSSで直接声質を制御するのではなく、Web Speech APIなどのJavaScriptを用いたアプローチや、ユーザーが利用するスクリーンリーダー側の自動設定に委ねる形が主流です。

より専門的には、無理にCSSで読み上げのトーンを操作するよりも、HTMLのタグを意味的（セマンティック）に正しく記述していくことが重要です。見出しや段落、ナビゲーションといった役割をブラウザへ正確に伝えることで、どのような環境の音声読み上げソフトであっても、自然な抑揚や間合いでコンテンツが再生されていきます。サポートが終了している古いコードを整理し、正しいHTML構造を保つことは、検索エンジン最適化（SEO）の評価を高める上でも有意義な対応です。

誰もが利用できる環境づくりと事業成果への貢献

視覚に障害がある方だけでなく、スマートスピーカーやスマートフォンの音声アシスタントを通じて情報を得るユーザーも増加しています。ホームページ（ウェブサイト）のテキストが音声環境でも正しく、かつ快適に読み上げられるように整えることは、全体のユーザー体験を大きく向上させる一歩になります。

Webマーケティングの視点からも、情報を届ける層を広げ、多様なデバイスからのアクセスにこたえる環境を構築することは非常に重要です。すべてのユーザーがストレスなく情報を取得できるアクセシビリティの高さは、ホームページ（ウェブサイト）の信頼感を底上げし、最終的には問い合わせの増加や事業の売上拡大といった目に見える成果に結びついていきます。

richness: ;

ホームページ制作・Webデザインの1ポイント

richnessなど音声に関するCSSの設定項目はほとんどが削除され、HTMLからの移行などによって、CSSはWebデザインに関するものが多くなりました。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ