文章が意図しない場所で折り返される、というお問合せをいただくことがあります。
実は、ホームページでは折返しや余白を完全に制御することはできません。ここではその理由や、可能な対策について説明いたします。
この記事には最新版がございます→「ホームページの文章の折返しを制御できない理由」
ホームページは閲覧環境によって見え方が異なります。
極端な例を上げれば、日本語フォントがインストールされていない海外のPCからは、日本語のホームページを正しく閲覧できません。このように、ホームページは閲覧する端末(パソコンやスマートフォンなど)や閲覧ソフト(インターネットエクスプローラー・Googleクロームなど)に依存します。
ホームページの見え方に影響する要因を挙げてみます。
紙媒体に比べれば、同じ内容を様々な環境で見ることができるのはホームページの大きなメリットです。
「思い通りに表示できない」と自分の表現にこだわるのではなく、誰でも同じように見れる表現を心がけることが重要です。
実は英語など単語ごとにスペースの入る外国語では、日本語よりも自在に改行をコントロールできます。
日本語にも「、」や「。」はあるものの、外国語に比べて単語ごとの区切りが明確ではなく、コンピュータでは確認判断できないため、日本語の文章はどこでも折返しができるように扱われています。
とは言え、折返しや余白は重要な表現の1つです。以下では、可能な選択肢を挙げてみます。
新鮮な旬の魚介類をふんだんに使った創作イタリア料理を、太平洋を望む絶景の眺望とともにお楽しみください。
という宣伝文を「、」で区切るパターン・区切らないパターンに分け、1,280pxのパソコン(標準と133%拡大)・タブレット・スマホ2種でシミュレーションしてみました。
このように、ある画面サイズでは改行ありの方が良く、ある画面サイズでは改行なしの方が良い、という一長一短の結果となります。
よって、ある画像サイズでの見栄えを優先するのではなく
というように文章の改行ルールを優先させた方が無難だと言えます。
どうしても改行を入れる場合は、様々な閲覧環境の中で最も折返しの発生しやすいスマートフォン(狭い画面)で改行位置や文字サイズを調整するのが良いでしょう。
モバイルユーザーの方が多い現状を考慮し、モバイル優先(モバイルファースト)のホームページ作成を心がけましょう。
可能なケースならば、アルファベット表記という選択肢を検討しましょう。
英語などの外国語は折返しの制御が可能で、基本的には「単語の途中では折り返さない」というルールが適用されます。閲覧環境が異なっても一定の判読性が確保されます。
また英語は膨大な漢字を必要とする日本語に比べて字数が少ないため、日本語が「ゴシック」「明朝」という2択なのに対し、幾つかの字体を選べます。これに、大文字・小文字の組み合わせを合わせることで、理想に近い表記を選べる可能性があります。
尚、「全角英数」は日本語と同じように扱われ、単語の途中で折り返される可能性があるので注意が必要です。
左側の余白を行ごとに一文字ずつ増やし、階段上に文字を配置する表現があります。
このような「折返しが発生しないことを前提として表現」は最も避けるべきです。上記のように閲覧環境によっては折返しが発生し、とても見づらくなってしまうためです。
「中央揃え」「右揃え」を使えば似たような表現が可能です。それでも、折返しが発生する可能性があることは考慮しましょう。
まめわざで、「中央揃え」「右揃え」をする場合は、ブロックにマウスを当てて表示される「装飾」ボタンから行います。
装飾ウィンドウが表示されたら、左側のタブから「テキスト」(その他の表記もあり)を選び「左右中央揃え」欄で左・中央・右から選択します。
この折返し問題には、禁じ手とも言える解決策があります。それは、文章全体を画像化することです。
通常の文章がまめわざを使って入力できる状態であるのに対し、画像化した文章は写真などと同じビットマップ画像(細かい点の集合体)となります。
写真が閲覧環境に応じて自動的に伸縮するように、画像化した文章も伸縮するため、折返しは発生しません。一定の環境では効果があります。
ただし、画像化した文章には次のようなマイナス面(デメリット)が存在するので、文章を画像化する前に熟慮しましょう。
「ホームページは折返しや余白が制御出来ない代わりに、様々な環境で閲覧できる選択肢をユーザーに提供できる」という点で紙媒体の宣伝物とは異なります。このことを受け入れ、慣れることがベストな解決策と言えます。
身も蓋もない解決策ですが、新しい媒体に古い表現を当てはめようとしていることが問題源ですので、柔軟に対応しましょう。