モバイルサイトでの見え方をチェックするとわかること

スマホ

サイトを作るときに、スマホやタブレットでの見え方を意識しているでしょうか?

人によって、サイトの作り方はやり方が違いますが、最近ではモバイルでインターネット検索する人がますます増えているので、モバイル表示も意識した方が良いとよく言われますね。

スマートフォンが珍しくなくなってきているので、スマホですぐに、気になることを検索して調べる人が増えてきています。

パソコンの画面と比べると、スマホの画面は小さく、見え方もだいぶ変わってきます。

今回は、スマートフォンでの見え方について書きたいと思います。

改行の位置はOK?

キーボード

キーボード

スマートフォンとパソコンでの見え方の大きな違いが出る要素に、改行の位置があります。

一文が長すぎると、スマホ画面では文字の固まりのようになってしまい、読みづらく感じることがあります。

歯切れの良い文章を意識すると、読み進めやすくなるでしょう。

文の途中での改行は、あまりおすすめしません。

なぜかというと、モバイル画面では、パソコンで見るよりも画面の大きさに合わせて余分に改行されます。

そこに、細切れな改行指定が加わると、筆者が意図していない、中途半端な改行ができてしまって、全体のバランスが悪くなるからです。

【改行についての記事】

HTMLコードの「改行」の貼り方
HTMLコードの「改行」の貼り方
HTMLコードで「改行」したいところに、 <br> を入れると、その場所で改行できます。 普段、記事をビジュアル画面を使っ...

広告の位置

【おすすめのASP】

A8ネットは案件が多く、広告を探しやすくて始めやすいです。



モバイルサイトでは、広告の見え方も変わってきますので、モバイル用の配置の仕方にも工夫が必要になるかもしれませんね。

広告の位置やバナーの大きさなどの、見え方を自分のスマホでも表示して見てみるといいですよ。

自分のサイトを確認するときには、ワードプレスの管理画面にログインしてから表示して、アクセス解析に自分がカウントされないようにしています。

アドセンス広告を載せているなら、間違えて自分で広告をクリックしないように気をつけましょう。規約で、自己クリックしてはいけないことになっています。

※広告に関する記事

アフィリエイトにはどんな種類があるか?

アドセンス広告を間違えて自己クリックしてしまったら

全体のレイアウト

写真の配置や大きさなども、実際にモバイルサイトで見てみると参考になります。

また、余白の使い方も、ほどよい具合があるので、文字がつまりすぎている、と感じるなら、行間を広げるか、改行をひとつ多めに取るなどの工夫ができます。

わかりやすいか?

モバイルサイトでスクロールしながら、さーっと読んでみて、意味がわかりにくいところがないか、話の発展の仕方に無理がないかもチェックできます。

実際には、ページを流し読みする人が多いので、流して読んでわかりにくいと、面倒に感じて最後まで読んでもらえない原因になります。

また、長い記事の場合はとくに、意味がわかりにくくなってくると、イライラしてきます。

いろんな人が読んで、わかりやすいことを心がけると良いでしょう。

※ 関連した記事はこちら

読者はネットの記事を斜め読みする!

写真の見え方

写真

写真

全体的に流して読んで、写真の使い方が効果的かを読者の目線で確認してみることができます。

写真の頻度や、伝えたいことが写真からわかるかどうかを判断できます。

(サイトに使いたい写真素材を探すなら、「 写真やイラストのおすすめフリー素材サイト」の記事もおすすめです。)

【フリー写真素材サイト】

写真素材ダウンロードサイト【写真AC】

また、写真の大きさを変えた方が良いかなども見ます。

パソコンで編集していて、大き過ぎるかな?という写真でも、スマホで見るとちょうど良いことがあります。

また、写真の表示速度などもチェックできます。

表示が遅くなる原因として、画像が重すぎることがあるので、画像サイズを小さくしたり、早く表示させるプラグインなどを入れるなどの工夫ができます。

(関連して、「ブログに最適な画像サイズとは?」、「ワードプレスにおすすめのプラグイン」の記事もおすすめです。)

まとめ

モバイルサイトの方が、パソコン用ページよりも多くの人に読まれていることも多いので、モバイル画面でのチェックもぜひしてみてはいかがでしょうか。

合わせて、誤字脱字なども結構見つかることもありますよ。

確認作業は面倒ですが、やっておくと、サイトの質が向上します。

【おすすめレンタルサーバー】

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

※ 関連記事

サイト記事ができるまでの流れや手順

記事内のリンク切れに注意しよう

ファビコンの作り方

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク