印刷範囲
全体プリント
本文プリント

単語内にスペースを入れたり、文の途中に強制改行を入れたりしない

投稿日: | 投稿者:ayatori
ウェブサイトのコンテンツ更新において、単語内にスペースを入れてしまうケースを目にすることが時々あります。


たとえば:

す ご く 美 味 し い !

(* 上記の例では、フレーズを大きく見せようとして、各々の文字の間に、スペースがひとつずつ、入っています。)

また、一行あたりの長さを調整するなどの目的で、文 (センテンス) の途中に強制改行を入れるケースも見受けられます。たとえば:

昔々、あるところに、おじいさんとおばあさんがいました。ある日、おじいさん<br />
は山へ柴刈りに、おばあさんは川へ洗濯に出かけました。すると川の上の方から、<br />
大きな桃が流れて来ました。

(* 上記の例では、「おじいさん」「川の上の方から、」の後に、それぞれ、強制改行を意味する <br /> という HTML タグが記述されています。)

こういった、単語内のスペースや文中の強制改行は、問題があるのでやるべきではありません。

何が問題なのか?

単語内のスペースの問題

単語内にスペースを入れてしまうと、本来は単語というひとつの塊であった情報が、バラバラに分解されてしまいます。

上記の例で言うと、「美味しい」という単語の各々の文字間にスペースが入ると、目が見える人間はそれでも「美味しい」と判読することができるのですが、テクノロジー、たとえば検索エンジンのクローラー (各ページの情報を取得してデータベース登録する巡回プログラム) や、視覚障碍者が利用するスクリーンリーダー (画面の情報を音声で読み上げるソフト) は、「美味しい」とは解釈せずに、「美」「味」「し」「い」と分断された形でしか認識できなくなります。

文内の強制改行の問題

文の途中に強制改行を入れてしまうと、ユーザーが任意で文字サイズを拡大した場合、以下のようにレイアウトが崩れてしまう (行の途中で改行が発生して不恰好になる) 可能性があります。

昔々、あるところに、おじいさんとおばあさんがいました。ある日、おじいさん<br />
は山へ柴刈りに、おばあさんは川へ洗濯に出かけました。すると川の上の方から、<br />
大きな桃が流れて来ました。

また、「おじいさんは」の「は」は助詞で、本来「わ (wa)」と発音されるべきところ、手前に強制改行が入ることで、スクリーンリーダーはこれを助詞であると解釈せずに、「は (ha)」と発音してしまいます。結果、「おじいさん、葉山 (はやま) へ柴刈りに...」という具合に読み上げてしまうので、視覚障碍者に正しく情報が伝わらなくなるおそれがあります。

どうすればよいのか?

このように、単語内のスペースや文中の強制改行には、アクセシビリティ上の問題が潜んでいます。Web コンテンツの更新時、文字情報 (文章などのテキスト) を入力したり編集したりする場合には、このようなスペースや強制改行は入れないようにしましょう。

代わりに、こういった視覚的なデザイン調整 (文字間隔やブロックの幅など) は、別途「CSS (Cuscading Style Sheet)」と呼ばれる仕組みで制御/管理するのが「あるべき姿」となっています。どうしても文字組の変更が必要であれば、制作会社に相談してみてください。

また、Web というメディアは、ユーザーによってレイアウトが流動的に変わるもの、という理解は必要だと思います。画面サイズ (コンテンツを表示できる幅) は PC、タブレット、スマートフォン、と多種多様ですし、同じ画面サイズのデバイスでも、ユーザーによっては文字サイズを変更したりしています。大事なのは「どんなユーザーにも、情報の内容が正しく伝わること」ということを、肝に銘じたいものです。

無料オンライン相談受付中!ウェブ戦略の専門家が
ご相談を承ります!

ウェブマーケティング担当者必見!

ウェブ戦略お役立ち資料

お役立ち資料のダウンロードや
セミナーのアーカイブ視聴が無料でできます。
ページの先頭へ