士業の学校:プレスクール

士業・コンサル向けのマーケティング・仕事術の情報サイト

集客力に影響大。デバイス(画面解像度)ごとのホームページのレイアウトに注意しよう

集客力に影響大。デバイス(画面解像度)ごとのホームページのレイアウトに注意しよう

あなたは、自分がお持ちのパソコン以外で、自分のホームページを見てみたことはありますか?

ホームページは、表示されるデバイスの画面サイズや、画面解像度によって、見え方が異なります。

場合によっては、意図しない表示崩れが起こっていて、ホームページの集客力が下がっていた…なんてことも。

今日は、便利なチェックツールも合わせて、ポイントをご紹介します。

例:上部メニューが崩れ、集客力に悪影響が…!

例えば、以下は、当社の公式サイトです。

私が使っているパソコンでは、以下のように表示されています。

例:自分のパソコンで見てみると

ただ、実は、すべてのパソコンで、同じように表示されているか?
と言うと、そうではないのです。

例えば、表示幅「1024 x 600」のパソコンで見ると、以下のように表示されます。

例:表示幅「1024 x 600」のパソコンで見ると

なんと、上部メニュー(グローバルメニュー)の表示が崩れてしまうのです。

こうなると、ホームページの問合せ率(コンバージョン率)にも悪影響になってしまうのは、容易に想像できますよね。

このように、自分の普段遣いのデバイスだけでデザインを確認していると、思わぬ崩れが起こっていることもあるのです。

レスポンシブWebデザインの場合には、特に注意

特に注意したいのが、レスポンシブWebデザインでホームページを作っている場合です。

レスポンシブにすることで、表示幅に合わせて、自動的にコンテンツを配置できるので、便利といえば便利です。

しかし、上記でご紹介したように、場合によっては、それが原因で表示が崩れていることもあるのです。

レスポンシブWebデザインの方は、要注意してくださいね。

チェックツール「Screenfly」で、デバイス(画面解像度)ごとの画面レイアウトを確認しよう

ここで便利なのが、「Screenfly」というツールです。

このツールを使うことで、いろいろなデバイス(パソコン、スマートフォン、タブレットなど)での、表示の違いを簡易的にチェックすることができます。

「Screenfly」で、デバイス(画面解像度)ごとの画面レイアウトを確認

一点、ホームページの作り方によっては、実際にスマートフォンやタブレットで表示した場合と、このツール(Screenfly)で確認した場合の表示が、微妙に異なることがあります。

例えば、当社の公式サイトで言うと、以下のような違いがあります。

注意!メニューの表示のされ方などが、微妙に異なることもある。

そのため、最終的には、実際のデバイスで見たほうが良い、というのが正直なところです。

(友人のパソコンやスマートフォンで見せてもらう、など)

ただ、簡易的なチェックはできるので、ぜひ活用してみてくださいね。

まとめ

いかがでしたでしょうか。

自分が普段使っているデバイスでしか確認していないと、思わぬデザインの崩れが起こっていることもあります。

ぜひ、こういったツールも活用して、ホームページの表示チェックをしてみてくださいね。

得られた学びや気付きをぜひコメントして下さい。運営の励みになります。

お名前の入力は任意(ニックネームでもOK)です。

*

Return Top