其の14 字間や体裁をスペースで調整しない | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル中級其の14

字間や体裁をスペースで調整しない


単語個々の文字幅を合わせたり体裁を整えるために、文字の間にスペースを入れて調整しているサイトがある【1】【2】。

文字間をバランスよく均等に見せたいという意図はわかるが、音声読み上げソフトは空白文字を文章の区切りと解釈する性質を持っているので、この方法では正しく読み上げが行われない。

たとえば「期間」という単語に、「期 間」と2文字の間に全角スペースを入力すると、音声読み上げソフトでは単語単位ではなく、文字単位で読み上げられてしまう。。つまり、この場合「き あいだ」と認識されてしまう。このことから文字間や行幅を調整するのに、スペースは用いてはならない。

文字のレイアウトを整えるために、単語の間にスペースを使用している例
【1】表組みなどのページで縦並びになっている項目の文字数を合わせるために単語の間に空白スペースを入れてしまっている例。これでは、きちんとした読み上げが行われない
スページを取った例
【2】空白を入れないで表示すると、きちんと単語単位で読み上げてくれる

また、空白文字と同様に< br >による改行を文章の区切りと捉える性質があるので、段落などの文章の区切りを除き、文章中で改行を用いることも避けたい【3】【4】。

テキストの一行の折り返し部分に改行を入れていない例
【3】テキストの一行の折り返し部分で改行を入れていない。きちんと読み上げてくれる

行幅をそろえるために、改行を入れている例
【4】行幅をそろえるために、改行を入れている例。これでは正確に読み上げられない

お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在