スマートフォンはPCに比べて画面の横幅が狭い！⇒横並びに弱い

　スマートフォンでウェブサイトを閲覧するとき、画面の広さ（横幅）はPCで見る時の半分以下になることがほとんどです。そのため、PCできれいに表示されるように記事を作成しても、スマートフォンで見ると見づらくなってしまうことがあります。この段落のように、改行が許容される「文章」であれば問題はありませんが、文字数が多い箇条書きや列数が多い表（3列以上ある表）などは表記を工夫する必要があります。

文字数が多い箇条書きの、PCで見た時とスマートフォンで見た時の違い（イメージ）

　この問題を解決するためには「文字数を減らす」「共通する単語は見出しにする」「どうしても長くなる時は項目と項目の間に改行を入れる」などの対応が必要になります。

列数が3以上ある表について

　スマートフォン版表示では、表のレイアウトが自動で縦並びに変換されます。2列までの表であれば問題なく表示されます。

　3列以上ある表はスマートフォン表示だと正しく表示されないので、項目を分けて縦に並べていくか、どうしても表の体裁を保つ必要がある場合はその表を記載したPDFファイルを作り、そのPDFへリンクを張るようにしてください。

文章の体裁を整える時の「字下げ（インデント）」と「改行の位置」に要注意

　ホームページの記事更新作業はPCで行うため、どうしてもPCでの見栄えを前提として文章の体裁を整えてしまいがちです。しかし、過剰な字下げ・および空白スペースを連続入力して文章の体裁を整えたり、文の途中で改行したりすると、スマートフォンで閲覧した際に意図せず体裁が崩れてしまう可能性があります。

　この問題を回避するために、見出しを利用したり文言を調整したりして、字下げがなくても読みやすいレイアウトにすることを推奨します。

補足：単語の間に空白スペースを入れて見た目を調整してはいけません

　スマートフォンでの閲覧に限った問題ではありませんが、見た目を整える目的で単語と単語の間に空白スペースを入れると、音声読み上げソフトで正しく読み上げられないことがあるので行わないようにしてください。

NG例：上下の単語と文字数を合わせて整列させようとして空白スペースを使ったもの

　単語と単語の間にスペースが入ることで熟語として認識されなくなることがあるため、書き方を変えるか単語の後にスペースを入れるようにしましょう。

　詳細は総務省のサイト「ウェブアクセシビリティ」のページを参照してください。

なお、2つ以上連続して使用されている空白スペースは、実際に表示される際に自動で削除されます。

「文字が入っている画像」の視認性に要注意

　スマートフォン表示の際、大きな画像は「スマートフォンの画面内に収まるように、縦横比を維持して縮小」されます。これにより、PCで見た時は適切な大きさであった画像が想定以上に小さくなる場合があり、画像の中の文字が読みづらくなる可能性があります。

例：文字が入っている「見出し画像」をPCで表示した時

　PCで見た時は文字が大きく、目立つ見出しのように見えますが、スマートフォンで見た時は画面の横幅が狭まる分、それに合わせて縮小されてしまいます。

上記の画像をスマートフォンで表示したときのイメージ

　このように、場合によっては本文のテキストより小さい文字になってしまいます。この問題を回避するために「文字は画像の中ではなく、記事の中にテキストとして記載する」「縮小されても問題ない大きさで画像の中に文字を入れる」などの対応が必要となります。

今や、ウェブサイトはスマートフォンで見る人の方が多数派！

　総務省の統計によると、2020年時点における個人のインターネット利用率は83.4%で、そのうちの68.3％の人がスマートフォンでインターネットを見ているとのことです。この広域連合ウェブサイトのアクセス解析結果を見ても、およそ6割の人がスマートフォンからアクセスしていることが分かります。

総務省統計：インターネットの利用端末の種類(2019年～2020年)

広域連合ウェブサイトのアクセス解析結果：ユーザーのデバイス使用率（2022年11月の1か月間）

　この情勢に鑑みて、広域連合ウェブサイトでもスマートフォンでの閲覧に最適化する必要があります。今回のウェブサイトリニューアルは主にスマートフォンで見やすくするための改修が行われていますが、個別の記事については既存の内容がそのまま使われていますので、ページによってはスマートフォンで表示した際に見づらくなっているものがあります。

　既存の記事に「スマートフォンにも配慮した表記の修正」を施しつつ、今後作成する記事もまたスマートフォンで見やすいように配慮していきましょう！