ホームページ制作MATSUTE BLOG

この記事は「2020年12月02日」に書かれた記事です

1. レスポンシブになっていない（表示が崩れている）
2. フォントが変わっている
3. 画像が大きすぎるなどの問題
4. ファイルデータが日本語名になっている
5. 改行が乱れている

1．レスポンシブになっていない（表示が崩れている）

よくあるのが文字を大きくしたいと、文字に直接指定を入れてしまっているケースです。
少しホームページに詳しい人にありがちなのですが「fontタグ」と呼ばれる設定で、文字のサイズを指定した場合や、WordpressなどのCMSの入力補助機能で文字サイズを設定した場合に起こりやすいです。

ホームページ制作会社や、HTML・CSSに詳しい人であれば、フォントのサイズを変える場合、クラスと呼ばれるCSSのタグの設定で変更します。この設定はパソコン版とスマートフォン版で表示を切り替えることができるため、レスポンシブ（パソコン版・スマートフォン版共通）でも表示が崩れることはありません。

特に、パソコンで表示を確認しながら設定している場合、かなり大きな文字に設定していまってしまい、スマートフォンで閲覧した際に驚くくらい大きな文字になっていることがあります。

• 大きな文字を使いたい
• こういうことをしたい　など

要望があれば、先に依頼しておくことをお勧めします。

2．フォントが変わっている

時々見かけるケースがページによってフォントが変わってしまっている表示崩れです。

多くの原因はワードやエクセルから直接コピーした文章を、管理画面に貼り付けてしまったことにより起こります。コピペは単に文章をコピーしているように見えますが、実際はもっと賢く、ワードで使用している文字情報を一緒に連れてきてしまいます。

そのため、たとえばホームページ全体ではゴシック体をつかっているのに、そのページのみワードで使っていた明朝フォントで表示されているということが起こります。

回避する方法は簡単です。

WordPressなどのCMSを使っている場合は、ワードやエクセルから貼り付ける際、フォントなどの情報を遮断してペーストするボタンが用意されています。そのボタンを押して、貼り付ければOKです。

そんなボタンがないよ！　というときもご安心ください。

1. メモ帳などを開き
2. 一度メモ帳などに貼り付けたあと
3. その内容を再度コピーして
4. 貼り付ければ、ワードなどの設定はすべて取り除かれます。

ただし、ワードで設定した装飾等は、すべて1からやり直しになります。

3．画像が大きすぎるなどの問題

ホームページに掲載する写真を、iPhoneなどのスマートフォンで撮影し、そのまま使ってしまうとかなり大きなデータをアップロードすることになります。

表示されているから問題ない、と思ってしまいますが、データが重くなるとスマートフォンなど容量制限がある場合や、通信環境が重く（遅く）なるケースでは、ページが開かず閲覧自体を敬遠されてしまいます。スマートフォンやデジカメにサイズを小さくする機能があれば、その機能を使ってホームページにアップロードする画像を準備しましょう。

もしそういった機能がない場合、無料ソフトなどを利用し、できるだけ画像のサイズを小さくしてアップロードすることをおすすめします。

４．ファイルデータが日本語名になっている

画像に日本語名をつけて保存している方がかなりいらっしゃいます。
その方が画像を見た時に「どんな画像かすぐにわかるから」だと思いますが、ホームページのデータとしてアップロードするときには注意が必要です。

日本だからと言って表示されないなどの問題が起こることは減りましたが（以前は、日本語を使ったファイルデータは文字化けを起こし、表示されないなどの不具合が起こることがありました）、サーバーを移管する場合やテスト環境を作ってリニューアルする場合など、画像データが移動できないなどの不具合が出る可能性があります。

また、アップロードしたときは日本語名なのですが、サーバー上にアップロードされると文字化けしたファイルデータで保存されてしまっているため、後から見てもなんだかわからないということもあります。

PDFやWord、エクセルなどファイルデータも同じです。
可能であれば、半角英数字で分かりやすい名前を付けておくことをお勧めします。

５．改行が乱れている

こちらもパソコンで作業されている方に多い表示崩れです。改行が崩れる主な原因は下記の２点です。

• スペース「　」を使って文章を調整している
• 自分なりに文章のよいところで改行を加えている

スペース「　」を使って文章を調整している場合

• 文章を中央寄せにしたい
• 改行した文章の冒頭部分に余白を入れたい
• 右寄せにしたい

こんなときに、余白を使っていませんか？
実はこれ、自分が見ているパソコンのブラウザーで自分が意図したように見えているにすぎません。ほかのパソコンで見た場合、デフォルトで表示されるフォントが異なるため改行の場所が異なってくることがあります。

また、現在のホームページはパソコン版とスマートフォン版で同一の内容を表示させるレスポンシブ形式となっていることがほとんどのため、スマートフォン版で予期せぬ余白が連なっていることがあります。これは正直いただけません。

自分なりに文章のよいところで改行を加えている場合

文章の切れ目で改行を入れることがあると思います。私自身も改行を加えています。
確かにパソコンで読んでいるときは読みやすくなるのですが、スマートフォンなどで見た場合は、ひどく読みにくくなってしまうことがあります。

• パソコン、タブレット、スマートフォン
• Windows、Mac、iPhone、Android
• また閲覧しているブラウザーなどによって

表示される文字数などは変わります。改行をするときは、そのことを考慮すると、どの環境で見てもある程度の可読性を保持することができます。