AIで作ったサイトのスマホ改行を整えてみた。日本語表示の調整方法とは？

前回は、HTMLサイトのURLから「.html」を消した話をしました。

前回の記事はこちらです。

HTMLサイトのURLから「.html」を消してみた。htaccessで整える方法とは？

AIで作ったサイトのスマホ改行を整えてみた

AIでサイトを作ると、大枠はかなり早く形になります。

ページ構成
文章
デザイン
コード

まで、AIに相談しながら進められます。

ただし、実際にスマホで見ると、細かい違和感が出ることがあります。

そのひとつが、日本語の改行です。

スマホで気になった改行

制作中、スマホで確認すると、次のような改行が気になりました。

「ちょうどいい」が、途中で分かれる
「小さな型から」が、不自然に分かれる
「自分で育てる」が、途中で分かれる
「テンプレート」が、途中で分かれる
「改善できる」が、途中で分かれる
「独自の言葉と考え方」が、読みにくく分かれる

文章として、読めないわけではありません。

でも、見た目としては、少し引っかかります。

この小さな引っかかりが、サイト全体の印象に影響します。

日本語の改行は、なぜ難しいのか？

日本語の改行は、意外と難しいです。

英語のように、単語と単語の間にスペースがあるわけではないからです。

そのため、ブラウザが自動で改行すると、意味のまとまりとは違う場所で切れることがあります。

意味の途中で切れると、読みにくい

例えば、短い見出しやコピーでは、言葉の途中で切れると目立ちます。

こうなると、読者は一瞬だけ、言葉を読み直します。

ほんの一瞬です。

でも、その一瞬が、スマホでは意外と気になります。

短いコピーほど、改行が目立つ

長い本文であれば、多少の改行はそこまで気になりません。

でも、見出しやキャッチコピーでは、改行の位置が印象を左右します。

特に、次のような文章では、改行位置が重要です。

トップページのメインコピー
セクション見出し
CTAの見出し
カード内の短い見出し
フッターのコピー

短い言葉ほど、どこで切れるかが目立ちます。

モバイルファーストで、改行を見直した

今回のサイトでは、PC表示だけでなく、スマホ表示をかなり重視しました。

今は、多くの人がスマホでサイトを見ます。

そのため、PCで美しくても、スマホで読みにくければ不十分です。

スマホで確認したこと

スマホ表示では、次の点を確認しました。

見出しが、自然に読めるか？
短いコピーが、途中で切れていないか？
意味のまとまりで、改行されているか？
改行が多すぎて、間延びしていないか？
PC表示に、悪い影響が出ていないか？
実機スマホで、自然に見えるか？

スマホ表示は、単に横幅を狭くするだけではありません。

スマホで読んだときに、自然に目が流れるかどうかが大切です。

実際に調整した改行

今回の制作では、気になった改行を、ひとつずつ確認しました。

ここでは、代表的な調整を紹介します。

「ちょうどいい」を途中で切らない

トップページでは、次のコピーがありました。

小さな商売に、ちょうどいい学び方。

スマホでは、これが不自然に切れることがありました。

特に、「ちょうどいい」が途中で分かれると、見た目として気になります。

そこで、「ちょうどいい」をひとまとまりとして見せるように調整しました。

「小さな型から」をまとめる

CTAでは、次のような見出しがありました。

最初の一歩は、小さな型から。

これも、スマホで「小さな」と「型から」が不自然に分かれることがありました。

意味としては、「小さな型から」でひとまとまりです。

そのため、スマホでは、このまとまりが崩れないようにしました。

「自分で育てる」を自然に見せる

このは屋のサイトでは、「自分の商売を、自分で育てる。」という言葉を大切にしています。

トップページやフッターにも、この言葉が出てきます。

ここで「自分で」と「育てる」が変に分かれると、少し弱く見えます。

そこで、「自分で育てる。」が自然に読めるように調整しました。

意味のまとまりで、改行を決める

改行を整えるときに大切なのは、意味のまとまりです。

文字数だけで、改行位置を決めると、不自然になることがあります。

意味で見た方が良い例

例えば、次のような言葉は、まとまりで見た方が自然です。

ちょうどいい
小さな型から
自分で育てる
全体像をつかむ
日々の商売で試し、整える
AIと一緒に、改善できる
無料で受け取れる、13個のテンプレート

見た目だけでなく、意味の流れを見ます。

言葉の途中で切れないようにするだけでも、かなり読みやすくなります。

読み上げると、違和感に気づきやすい

改行位置を考えるときは、実際に声に出して読むと分かりやすいです。

声に出して不自然な場所は、画面上でも不自然に見えることがあります。

確認するときは、次の点を見ると良いです。

息継ぎの位置として、自然か？
意味の区切りとして、自然か？
強調したい言葉が、見やすいか？
途中で読みにくくなっていないか？

改行は、文章のリズムにも関わります。

PC表示とスマホ表示を、分けて考えた

今回の調整では、PC表示とスマホ表示を分けて考えました。

PCで自然な改行が、スマホでも自然とは限りません。

反対に、スマホで自然な改行が、PCでは不自然に見えることもあります。

PC表示では、広さを活かす

PC表示では、横幅があります。

そのため、無理に細かく改行しすぎると、かえって不自然になることがあります。

PCでは、余白や文字サイズを活かして、ゆったり見せることを意識しました。

スマホ表示では、意味のまとまりを優先する

スマホ表示では、横幅が限られます。

そのため、意味のまとまりを崩さないことを優先しました。

言葉の途中で、切らない
強調したい言葉を、見やすくする
1行が、長くなりすぎないようにする
改行が、多すぎないようにする

同じ文章でも、画面幅によって、良い見せ方は変わります。

AIに改行案を出してもらった

今回の改行調整では、AIにも相談しました。

ただし、AIに完全に任せたわけではありません。

まず、見出しや大きめの本文を抜き出しました。

そのうえで、スマホ表示で不自然になりそうな箇所を洗い出しました。

AIに相談したこと

どの見出しが、スマホで崩れやすいか？
どこで改行すると、意味が自然か？
どの言葉を、ひとまとまりにした方が良いか？
PC表示に、影響を出さずに調整できるか？
CSSで、どのように制御できるか？

AIは、候補を出すのに役立ちました。

ただし、最終判断は、人間が行いました。

日本語の自然さは、かなり感覚的な部分があるからです。

最終的には、人間の違和感が大切

AIは、改行案を出せます。

CSSの調整もできます。

ただ、最後に「この見え方で自然か？」を判断するのは、人間です。

人間が見た方が良い部分

言葉の途中で、切れていないか？
読み上げたときに、自然か？
そのブランドらしい見え方か？
スマホで見たときに、美しいか？
見出しとして、力が残っているか？

今回も、最終的には実機スマホで確認しました。

PCのレスポンシブ表示だけでは、実機と少し違って見えることがあるからです。

実機スマホで確認した

スマホ改行の確認では、実機確認が大切でした。

ブラウザの開発者ツールでも、スマホ幅の確認はできます。

でも、実際のスマホで見ると、印象が変わることがあります。

実機で確認した理由

文字の見え方が、実際に近い
スクロール感を、確認できる
ブラウザごとの違いに、気づける
指で操作したときの感覚が、分かる
見出しの圧迫感を、確認できる

今回も、Safari、Chromeなどで見え方を確認しました。

ブラウザによって、余白や動きの印象が少し違うこともありました。

スマホ改行で、やりすぎにも注意した

改行を整えることは大切です。

ただし、やりすぎると逆に不自然になります。

改行を入れすぎると、文章が細切れになってしまうからです。

やりすぎると起こること

見出しが、縦に長くなりすぎる
読むリズムが、途切れる
余白が、間延びして見える
強調したい言葉が、弱くなる
PC表示で、不自然になることがある

そのため、今回は、気になる箇所を優先して調整しました。

すべてを完璧に制御しようとしすぎないことも、大切です。

調整する場所を、優先順位で決めた

スマホ改行は、すべての文章を細かく調整しようとすると大変です。

そのため、優先順位を決めました。

優先して調整した場所

トップページの大きな見出し
各ページのメインコピー
CTAの見出し
カード内の短い見出し
フッターのコピー
フォーム周辺の短い説明文

目立つ場所ほど、改行の違和感も目立ちます。

まずは、目立つ場所から整えるのがおすすめです。

スマホ改行を整えると、何が変わるのか？

スマホ改行を整えると、サイトの印象が変わります。

大きなデザイン変更ではありません。

でも、読むときの引っかかりが減ります。

良くなったと感じたこと

見出しが、読みやすくなった
短いコピーの印象が、強くなった
スマホでの見た目が、整った
サイト全体の完成度が、上がった
言葉の意味が、伝わりやすくなった

改行は、細かい調整です。

でも、スマホファーストで考えるなら、かなり大切な部分です。

AIでサイトを作る人への注意点

AIでサイトを作る場合、スマホ改行は最後に必ず確認した方が良いでしょう。

AIが作ったHTMLやCSSが、PCではきれいに見えることがあります。

でも、スマホでは、別の見え方になることがあります。

確認したいポイント

トップページの見出しは、自然か？
短いコピーが、途中で切れていないか？
CTAの見出しは、読みやすいか？
フッターのコピーは、詰まっていないか？
フォーム周辺の説明文は、読みにくくないか？
実機スマホで見ても、違和感がないか？

特に、日本語サイトでは、改行の確認はかなり大切です。

英語サイトとは、見え方の難しさが少し違います。

AIは、改行調整の相棒になる

スマホ改行は、人間の感覚が大切です。

ただし、AIが役に立たないわけではありません。

むしろ、かなり役立ちます。

AIに手伝ってもらえること

見出しを、一覧にする
不自然になりそうな箇所を、洗い出す
改行候補を、出す
CSSでの調整方法を、考える
PC表示とスマホ表示を、分ける方法を考える

人間がすべてを手作業で探すと、大変です。

AIに候補を出してもらい、人間が確認する。

この進め方が、現実的でした。

まとめ

今回は、AIで作ったサイトのスマホ改行を整えた話をしました。

要点をまとめます。

日本語のスマホ改行は、意外と難しい
言葉の途中で切れると、見た目に違和感が出る
短い見出しやコピーほど、改行位置が目立つ
PC表示とスマホ表示は、分けて考える
意味のまとまりで、改行を調整することが大切
AIに改行候補を出してもらい、人間が最終判断する
実機スマホで確認すると、違和感に気づきやすい
やりすぎず、目立つ場所から整えるのがおすすめ

スマホ改行は、かなり地味な調整です。

でも、スマホで読まれるサイトでは、印象に大きく関わります。

今回のコーポレートサイトでも、改行を整えたことで、かなり読みやすくなりました。

実際のサイトはこちらです。

このは屋のコーポレートサイトを見る

このは屋

このは屋｜自分の商売を、自分で育てる。 AIとテンプレートを味方に、外注業者へ依存せず、商売の仕組みを自分の手でつくるための学び舎。

あなたがAIでサイトを作る場合も、最後にスマホで見出しを確認してみてください。

言葉の途中で、切れていないか？
意味のまとまりで、読めるか？
スマホで見て、美しく感じるか？

このあたりを見るだけでも、サイトの完成度は変わります。

次回は、WordPressブログとHTMLコーポレートサイトを分けた運用について、お話しします。

ブログはWordPress
会社サイトはHTML

この使い分けが、今回かなり、しっくりきました。