文章で折返しや余白を完全には制御できません

文章が意図しない場所で折り返される、というお問合せをいただくことがあります。
実は、ホームページでは折返しや余白を完全に制御することはできません。ここではその理由や、可能な対策について説明いたします。

この記事には最新版がございます→「ホームページの文章の折返しを制御できない理由

折返しや余白を制御できない理由

閲覧環境は千差万別、全てに対応するのは不可能

ホームページは閲覧環境によって見え方が異なります。
極端な例を上げれば、日本語フォントがインストールされていない海外のPCからは、日本語のホームページを正しく閲覧できません。このように、ホームページは閲覧する端末(パソコンやスマートフォンなど)や閲覧ソフト(インターネットエクスプローラー・Googleクロームなど)に依存します。
ホームページの見え方に影響する要因を挙げてみます。

  • 画面サイズ
    テレビ・デスクトップPC・ノートPC・タブレット・スマートフォンなど、様々な画像サイズがあります
  • フォントの種類
    あるフォント(字体)を指定しても、そのフォントがインストールされていない環境では別の字体に置き換えられ、表情が大きく変わります
  • 表示拡大機能
    ホームページの閲覧ソフトやOSのには拡大表示機能が備えられています。
    高齢者・弱視者に限らず、高解像ディスプレイの対策や、意図せずサイズを変更したまま利用している例もあります
  • その他
    ホームページの閲覧ソフトやOSによって、スペースのサイズや折返しのルールが異なります

紙媒体に比べれば、同じ内容を様々な環境で見ることができるのはホームページの大きなメリットです。
「思い通りに表示できない」と自分の表現にこだわるのではなく、誰でも同じように見れる表現を心がけることが重要です。

単語で区切られる英語、区切られない日本語

実は英語など単語ごとにスペースの入る外国語では、日本語よりも自在に改行をコントロールできます。
日本語にも「、」や「。」はあるものの、外国語に比べて単語ごとの区切りが明確ではなく、コンピュータでは確認判断できないため、日本語の文章はどこでも折返しができるように扱われています。

とは言え、折返しや余白は重要な表現の1つです。以下では、可能な選択肢を挙げてみます。

改行する場所はこちらで決められます

新鮮な旬の魚介類をふんだんに使った創作イタリア料理を、太平洋を望む絶景の眺望とともにお楽しみください。

という宣伝文を「、」で区切るパターン・区切らないパターンに分け、1,280pxのパソコン(標準と133%拡大)・タブレット・スマホ2種でシミュレーションしてみました。

横1,280pxのパソコン
横1,280pxのパソコン(133%拡大表示)
横768pxのタブレット
横414pxのスマホ
横320pxのスマホ

このように、ある画面サイズでは改行ありの方が良く、ある画面サイズでは改行なしの方が良い、という一長一短の結果となります。
よって、ある画像サイズでの見栄えを優先するのではなく

  • 段落ごとに改行する
  • 「。」であれば改行あり、「、」であれば改行なし

というように文章の改行ルールを優先させた方が無難だと言えます。

折返しが最も発生しやすい条件

どうしても改行を入れる場合は、様々な閲覧環境の中で最も折返しの発生しやすいスマートフォン(狭い画面)で改行位置や文字サイズを調整するのが良いでしょう。
モバイルユーザーの方が多い現状を考慮し、モバイル優先(モバイルファースト)のホームページ作成を心がけましょう。

可能ならばアルファベット化も

可能なケースならば、アルファベット表記という選択肢を検討しましょう。
英語などの外国語は折返しの制御が可能で、基本的には「単語の途中では折り返さない」というルールが適用されます。閲覧環境が異なっても一定の判読性が確保されます。
また英語は膨大な漢字を必要とする日本語に比べて字数が少ないため、日本語が「ゴシック」「明朝」という2択なのに対し、幾つかの字体を選べます。これに、大文字・小文字の組み合わせを合わせることで、理想に近い表記を選べる可能性があります。
尚、「全角英数」は日本語と同じように扱われ、単語の途中で折り返される可能性があるので注意が必要です。

大文字・小文字によって全幅が変化。全角では単語の途中で折り返されます。

余白によるインデントは避け、左右中央揃えを使う

左側の余白を行ごとに一文字ずつ増やし、階段上に文字を配置する表現があります。
このような「折返しが発生しないことを前提として表現」は最も避けるべきです。上記のように閲覧環境によっては折返しが発生し、とても見づらくなってしまうためです。

左側に余白を入れた例
意図しない場所で折返された例

「中央揃え」「右揃え」を使えば似たような表現が可能です。それでも、折返しが発生する可能性があることは考慮しましょう。

中央揃え
中央揃えで折返し発生

まめわざで、「中央揃え」「右揃え」をする場合は、ブロックにマウスを当てて表示される「装飾」ボタンから行います。
装飾ウィンドウが表示されたら、左側のタブから「テキスト」(その他の表記もあり)を選び「左右中央揃え」欄で左・中央・右から選択します。

画像化は最後の手段

この折返し問題には、禁じ手とも言える解決策があります。それは、文章全体を画像化することです。
通常の文章がまめわざを使って入力できる状態であるのに対し、画像化した文章は写真などと同じビットマップ画像(細かい点の集合体)となります。
写真が閲覧環境に応じて自動的に伸縮するように、画像化した文章も伸縮するため、折返しは発生しません。一定の環境では効果があります。

画像化した文章の問題点

ただし、画像化した文章には次のようなマイナス面(デメリット)が存在するので、文章を画像化する前に熟慮しましょう。

  • 「文章」として扱われない(検索エンジン対策に不利、文章のコピーできない、読み上げソフトに対応できない場合もあり)
  • 画面が小さい端末では判読性が下がり、拡大してもギザギザして見づらい
  • 「文章」として扱えない(リンクを貼れない、修正に手間がかかる)

ベストな解決策は・・・

「ホームページは折返しや余白が制御出来ない代わりに、様々な環境で閲覧できる選択肢をユーザーに提供できる」という点で紙媒体の宣伝物とは異なります。このことを受け入れ、慣れることがベストな解決策と言えます。
身も蓋もない解決策ですが、新しい媒体に古い表現を当てはめようとしていることが問題源ですので、柔軟に対応しましょう。

2016/6/1