スマホファースト時代のホームページ編集方法


あなたの会社ホームページはパソコンとスマホからの閲覧の割合はどのくらいでしょうか?


ホームページを閲覧するデバイスは?

私の会社ホームページは、2017年4月現在で、

パソコン 33%
スマホ 61%

ほどです。

スマホ割合

これは、職種によって変わってきます。B to Cだとスマホの割合が高く、B to Bだとパソコンの割合が高くなる傾向にあるようです。

それでも50%プラスマイナス20%程度ではないでしょうか。

スマホファーストとは言いますが、パソコンからの閲覧も無視はできない数字ですので、スマホ用もパソコン用もどちらから見ても見やすいホームページにする必要があります。



スマホファーストで作成する

ホームページは、基本的にパソコンで作成や編集をする人が大半だと思います。

そうすると、どうしてもパソコンからの見た目が優先して、スマホからの見た目は後回しになりがちです。

しかしこれから先もスマホからの閲覧の割合は増えていくと思われますので、スマホ用のホームページを中心に作っていく必要があると思います。



レスポンシブデザインの落とし穴

今は、レスポンシブデザインのホームページ作成ソフトが主流になっています。

自動で全てのデバイスに対応します!

‥と謳っているソフトがほとんどですが、実際は自動だけに任せてはいけません

なぜなら、スマホ用とパソコン用の表示で微調整をしないと、どのデバイスから見ても全てで見やすく分かりやすく表示する事はできまないからです。


例えば、文章の折り返しや写真、文字入りバナー等が挙げられます。

これは知り合いの床屋さんのホームページから拝借したバナー写真です。

バナー写真

これをパソコンから見ている人は文字も読めるでしょうけど、スマホ…特に画面が小さめのスマホから見ている人は、文字は読めません。

この場合は、パソコンからはこのバナー写真を使い、スマホからの閲覧には別の文字の大きいバナーを使うか、写真と別に文字ベースで表示するなどの工夫が必要になります。



次は文字の折り返しの例です。

パソコン表示

レスポンシブデザイン

文字数もいい感じで見やすいですね♪


スマホ表示

レスポンシブデザイン

文字が変なところで折り返されていてかっこ悪いですよね…


スマホ表示 修正後

レスポンシブデザイン

折り返しもいい所でできていて、かっこ良く見やすくなりましたね。



このように、レスポンシブデザインといえども、微調整をすることは必要なのです。

ホームページ作成ソフトは、パソコン表示とスマホ表示で見た目を変えたり写真を変えたり、それぞれで微調整ができるソフトを使うべきだと思います。

見た目だけでなく機能面でもそうです。

例えば電話番号の表示ですが、パソコンからは文字で表示してスマホではタップで電話がかけられるようにするべきですよね。


パソコン表示

PC用電話番号表示

スマホ表示

スマホ用電話番号リンク



自社ホームページの閲覧はスマホから

日頃からホームページはパソコンからでなくスマホから見る癖を付けるべきだと思います。

しかしここで、間違った確認方法をしている人も多いようです。

「いつもちゃんと自分のスマホから確認しているよ!

という人もいるかもしれません。そこで質問です!

確認しているスマホの画面は何インチですか?

例えばiPhone6の 4.7インチで確認しているのであれば、他のスマホでは快適に見れていない可能性もあります。

今でもユーザー数が多い、iPhone5(SE)などの4インチの画面で見ると、iPhone6では綺麗に見えるのに、iPhone5ではレイアウトが崩れていたりします。

スマホ表示を確認するのであれば、4インチのスマホで確認しなければ不十分なのです。

「でも4インチのスマホなんか持ってないよ‥」

という人も多いでしょう。

しかし今は便利な時代です。有志の方がパソコンからスマホ表示を確認できるサービスを提供してくれています。

スマホ表示を確認できるサイトを一つだけ紹介しておきます。

Resizer

Resizer

Resizer

他にもたくさんありますので、使いやすいものを探してみてください。

スマホシュミレーター
スマホ 表示 確認

などで検索すればいろいろ出てくると思います。

この時注意するのは、4インチ画面で確認する事です。基本的にそれを守ればどのスマホから見ても大丈夫なようになります。



まとめ

  • スマホファーストを意識する
  • パソコンとスマホの両方で最適化させる
  • 4インチスマホで確認する