すべての人に届くWebサイトへ。Vol.4｜言葉と構造が、アクセシビリティを決める

前回は「操作のしやすさ」について、パソコンとスマートフォンの両面から考えました。今回は、Webサイトの「中身」に目を向けます。見た目のデザインや操作性と同じくらい、いえ、それ以上に大切なのが、言葉の選び方と情報の構造です。

Webサイトの情報は、目で読む方だけに届いているわけではありません。読み上げソフトを使って耳で聞いている方、検索エンジンのクローラー、そしてさまざまな端末やブラウザ。情報がどのように「構造化」され、どんな「言葉」で記述されているかによって、届き方はまったく変わります。言葉の丁寧さと構造の正しさは、目には見えにくいけれど、アクセシビリティを支えるとても大切な土台です。私たちは、この土台づくりこそがUXデザインの要だと感じています。

見出しタグの正しい使い方と、その効果

Webページには、見出し、本文、画像、リンクなど、さまざまな要素が並んでいます。これらが視覚的に整理されていることはもちろん大切ですが、「見た目の整理」と「構造的な整理」は、実は別のものです。

たとえば見出し。デザイン上は大きな文字で表示されていても、HTMLの構造としてh1、h2、h3といった見出しタグが正しく使われていなければ、読み上げソフトはそれを見出しとして認識できません。読み上げソフトのユーザーの中には、見出しの一覧を使ってページ内を移動する方がいらっしゃいます。つまり、見出しが適切に設定されていれば、そのページの全体像をすばやく把握できるのです。

逆に、見出しタグが使われていなかったり、装飾のために見出しタグを使っていたりすると、ページの構造が読み取れなくなってしまいます。これは、本の目次がないまま読み進めるようなもの。どこに何が書いてあるのかわからず、必要な情報にたどり着くまでに余計な時間と労力がかかってしまいます。

見出しタグを正しく使うことは、特別な技術を必要としません。h1はページのタイトルに、h2は大きな区切りに、h3はその中の小さな区切りに——この階層を素直に守るだけで、ページの「読みやすさ」は大きく変わります。

代替テキストは「画像の翻訳」である

Webサイトにはたくさんの画像が使われています。サービスの紹介写真、図解、アイコン、バナー。視覚的な情報は、文章だけでは伝えきれないことを補ってくれる大切な存在です。しかし、画像が「見えない」状況があることを忘れてはいけません。

読み上げソフトを使っている方は、画像そのものを見ることができません。通信環境が悪くて画像が表示されない場面もあります。そうしたとき、画像の代わりに読み上げられたり表示されたりするのが「代替テキスト（alt属性）」です。

ところが、この代替テキストが適切に設定されていないケースは非常に多く見受けられます。「image01.jpg」のようなファイル名がそのまま残っていたり、代替テキストが空のままだったり。あるいは、すべての画像に「写真」とだけ書かれていたり。これでは、画像が何を伝えようとしているのか、まったくわかりません。

代替テキストとは、いわば「画像の翻訳」です。その画像が何を伝えたいのかを、短くても正確な言葉で表現すること。「スタッフが笑顔でお客さまと打ち合わせをしている様子」と書かれていれば、画像が見えなくても場面の雰囲気が伝わります。この小さな心配りが、情報のやさしい橋渡しになるのです。

リンク文言が、ユーザーの道しるべになる

Webサイトのリンクは、ページとページをつなぐ大切な道しるべです。しかし、この道しるべが「こちら」「詳しくはこちら」という表現になっているケースを、とてもよく見かけます。文脈の中で読んでいれば意味がわかりますが、これにはひとつ見落としがちな問題があります。

読み上げソフトには、ページ内のリンクだけを一覧表示する機能があります。この機能を使ったとき、「こちら」「こちら」「こちら」と並んでいたら、どのリンクが何を指しているのか、まったくわかりません。これは、読み上げソフトを使っている方だけでなく、ページ内を素早く斜め読みしている方にとっても、同じように不便な体験です。

「料金プランの詳細を見る」「お問い合わせフォームへ進む」「導入事例のページを開く」——リンク先の内容が言葉だけで伝わる表現を選ぶこと。少し長くなっても構いません。リンクそのものが、訪問者にとっての案内板になってくれます。

もうひとつ意識したいのは、リンクの見た目です。本文の中にリンクが埋め込まれている場合、下線や色で通常のテキストと区別されていることが大切です。どこがリンクでどこがただのテキストかがわからなければ、せっかくの道しるべも見逃されてしまいます。リンクは「ここを押せますよ」とやさしく教えてくれる存在であってほしいと思います。

構造が整うと、伝わり方が変わる

Webページの情報構造がきちんと整理されているかどうかは、ユーザー体験に大きな影響を与えます。構造がしっかりしたページは、まるで整頓された書棚のように、どこに何があるかがすぐにわかります。一方、構造が曖昧なページは、積み上げられた書類の山から必要な一枚を探すようなものです。

構造を整えるとは、具体的にどういうことでしょうか。見出しの階層を正しく設定すること。段落を適切に分けること。リストはリストとして、表は表として、引用は引用として、それぞれの要素に正しい役割を与えること。こうした「意味のある構造化」は、コンテンツの信頼性を高め、情報を正確に届けることにつながります。

そして、構造が整っているページは、読み上げソフトでも自然に読み上げられます。見出しでページの概要を把握し、リストで要点を確認し、本文で詳細を読む。こうした情報の階層が明確であれば、どんな方法で情報を受け取っても、内容がすっと頭に入ってきます。

構造を整えることには、特別な技術も大きな予算も必要ありません。基本に忠実であること。それだけで、Webサイトの伝わり方は驚くほど変わります。丁寧に整えられた構造は、訪問者への静かなおもてなしのようなものだと、私たちは感じています。

専門用語を「伝わる言葉」に置き換える

Webサイトに掲載される言葉は、その企業の「声」そのものです。しかし、専門的な業界にいると、自分たちにとって当たり前の言葉が、訪問者にとっては初耳であることに気づきにくくなることがあります。

「ソリューション」「リテラシー」「コンバージョン」「ローンチ」——自分たちが日常的に使っている言葉が、Webサイトを訪れる方にとっても日常的かどうか、一度やさしい目で見つめ直してみる価値はあります。専門用語が並んだページは、訪問者にとっては「自分には関係ないサイトだ」と感じさせてしまう原因になりかねません。

もちろん、専門用語を一切使わないという意味ではありません。業界特有の用語が必要な場面はあります。大切なのは、初めてそのページを訪れた方が「何のことだろう？」と立ち止まらなくて済むように、わかりやすい補足や言い換えを添えることです。

たとえば「コンバージョン率の改善」ではなく「お問い合わせや購入に至る割合を高めること」と言い換える。あるいは、初出の専門用語には簡単な説明を括弧書きで添える。こうした配慮は、読み手の理解を助けるだけでなく、「この会社は、自分にもわかるように伝えようとしてくれている」という温かい印象を生み出します。

言葉の丁寧さが、信頼につながる

ここまで、見出し、代替テキスト、リンク文言、構造、専門用語について触れてきました。これらに共通しているのは、すべて「言葉と構造の丁寧さ」に集約されるということです。

Webサイトにおける言葉の丁寧さとは、敬語を多用するということではありません。訪問者が必要な情報にストレスなくたどり着けるように、言葉を慎重に選び、情報を整理して配置すること。それは、お店に来てくださったお客さまを、迷わせずにご案内するスタッフの心配りに似ています。

言葉を丁寧に選ぶことは、たしかに手間のかかる作業です。見出しの一つひとつを吟味し、代替テキストを考え、リンクの文言を見直す。でも、その手間が「この会社は、ちゃんと伝えようとしてくれている」という信頼を生み出します。

Webサイトの印象は、デザインの美しさだけで決まるものではありません。言葉の選び方、情報の並べ方、ひとつひとつの表現の丁寧さ——こうした目に見えにくい部分にこそ、その企業の姿勢が表れます。言葉の丁寧さは、デザインの丁寧さと同じくらい、Webサイトの品質をやさしく物語ってくれるのです。

記事監修

中谷 浩和

株式会社サンアンドムーン｜代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。