BLOG

  1. HOME
  2. ブログ
  3. ネット広告・サイト運営
  4. サイト運営お役立ち情報
  5. 改めて、スマートフォン対応大切ですよという話 ~デバイスに左右されないブログの書き方
by かわさき かわさき

改めて、スマートフォン対応大切ですよという話 ~デバイスに左右されないブログの書き方

改めて、スマートフォン対応大切ですよという話 ~デバイスに左右されないブログの書き方

こんにちは。今日は仕事上がりに会社のみんなでバーベキューのためウッキウキなかわさきです。終業まで仕事頑張るぞ!

さて、今回は日々制作やお客様とのやり取りをしていて気になった「スマートフォン対応」について、データを交えて書いてみました。ブログを書く時に気をつけたい点もご紹介します。

目次

今やパソコンでインターネットをする人のほうが少数派?

以下、2016年のインタネット白書より引用したデバイス別の利用者数になります。

年齢別、デバイス別のインターネット利用者割合

スマートフォンの利用者数

インターネット白書2016[vol.20] P75 株式会社インプレスR&D 発行

スマートフォンと家庭のPCを比較すると、10代、20代は言わずもがな、40代まではスマートフォンが多数です。50代、60代ではPCが上回ります。

お客様からお話を伺っても、高年齢向けのサイトを運営されているところはまだまだPCからのアクセスや売上が優位のようです。

ただし、伸び率のグラフを見る限り、今後は高年齢層にもスマートフォンのユーザーが増えてくると考えられます。(個人的な話ですが、先日久々に会った70歳近い叔父がiPhoneをかなり使いこなしていてびっくりしました。)

パソコンからインターネットをする人は「パソコンを使うついで」「選定や入力が複雑なサイトを使う」

パソコンを使うついで

何と言っても一番多いのは「仕事のついで」ではないでしょうか。

ついで…というと言い方が悪いですが、パソコンを使う業務の方は調べ物等行う際にわざわざスマートフォンを使うことは少ないかと思います。

こちらは、マグネッツのサイトと、とある美容系のサイトのデバイス別のアクセス比率を比較したものです。(Googleアナリティクスより)

デバイス別アクセス数の比較

(どちらも1位がブルーで見づらいのですが…)

マグネッツのサイトはホームページ制作会社という業務上、BtoBであるため、また、Web制作に関する記事も多数載せているので制作をしている方(=パソコンを使っている方)のアクセスが多いと考えられます。

逆に美容系のサイトになると、オフタイムにアクセスする方(特に20~40代の女性)が多いと考えられるので、モバイルからのアクセスが約8割とほとんどを占めています。

ECサイトもアパレルや美容品はスマートフォンからの購入が大多数を締めると考えられますが、逆にオフィス用品ECのアスクルなどはパソコンからの購入が多いのではないかなと予想します。

選定や入力が複雑なサイトを使う

こちらのサイト、2015年のデータで少し古いのですが…

各大手サイトをジャンルごとに分け、デスクトップとモバイルのアクセスを比較したデータです。

「食品メーカー」や「コスメ通販サイト」はモバイルの比率が高くなっている中で、「家電メーカー」「銀行」「ネット証券」はデスクトップの比率が比較的高くなっています。

  • 家電メーカー … パソコンの方が性能や機能など細かいスペックを比較しやすい
  • 銀行・ネット証券 … パソコンの方が細かい情報の入力等やりやすい

といった理由のようです。

確かに、スマートフォンの小さな画面で色んなページを行き来して情報を見比べるのは大変ですし、新規口座開設などの大量の情報入力を行うのはキーボードのほうが効率がいいですね。

しかし最近はサイトのアプリ化が進んで操作性が大幅に向上しており、今後はスマートフォンでのアクセスが増えていくと予想されます。

Google Play内、各銀行の専用アプリ

↑GooglePlay内の銀行系アプリ。各行が専用アプリを出しています。

自社のWebサイトはついついPC版の方を意識しがち?

前の項目のパソコンでインターネットをする人は「仕事のついで」が多い…と関連するのですが、自社のWebサイトに触れるのは圧倒的に業務中にパソコンからが多いから、パソコンでの見た目を中心に考えてしまう…という罠があると、個人的に考えています。

パソコン

飲食店のオーナー様や外回りの営業さんはスマートフォンやタブレットで確認される方も多いかと思いますが、Web担当など内勤の方はやはりパソコンが圧倒的…そうなるとパソコンの方がスマートフォンよりも画面も広く、リッチな表現が可能になりますので、そちらをついつい優先してしまいがちです。

前述の通り、対象の年代や扱うサービスや商材によって変わってきますが、一度アクセス解析を見て、自社のサイトがどのくらいスマートフォンからアクセスされているかを確認してみるのは重要です。Googleアナリティクスの場合は、ユーザー→デバイス→概要…から確認が可能です。

スマートフォンからのアクセスが優勢なこの時代、ブログを書く時にちょっと気をつけたいこと

1.改行に気をつける

例えば、以下のような改行を行ったとします。

パスワード:パスワードを設定すると、
パスワードを知っている人だけファイルがダウンロードできるようになります。
ファイル転送サービスはURLを送るだけでファイルが共有できるという
便利な面がある反面、URLさえ知っていれば誰でもダウンロードできる…
という危うい面もありますので、パスワードの設定をお勧めします。

パソコン・スマートフォンでの見た目を比べると、こんな感じになります。

改行したときの、パソコン・スマーフォトンでの見た目

パソコンの場合は、丁度いい文節で改行できていますが、スマートフォンでは結局途中で折り返してしまっておりそうでもない…。

スマートフォンはモニタサイズが小さい上に、機種によってサイズもまちまちなので、狙った位置でキレイに改行するのがなかなか難しかったりします。

特に長文の場合は、無理に改行を行わず、一文は繋げてひとまとまりとして書いたほうがどのデバイスでもキレイに表示でき、可読性が高いです。

2.センタリングに気をつける

前項と同じ理由ですが、センタリングは更に扱い要注意です!

これが…

地元で頑張る社長さんや事業主様に出来るだけ低コストで最大限の効果を感じ、
実際に結果を出して頂く事が私たちの最大の喜びです。

こうなります。

センタリングしたときの、パソコン・スマーフォトンでの見た目

せっかくのキャッチコピーがえらいことに…(´・ω・`)

長文に関してはセンタリングを用いず、短い文節(「会社概要」等のページタイトルなど)に留めて置くのがベターだと思います。

3.画像の回り込みに気をつける

WordPress等、ブログエンジンでは画像を挿入する際に画像の横にテキストを置く設定(回り込み)が可能です。

回り込み

こういうやつですね。レイアウトの幅が広がって便利です。
こちらもちょっと実験してみます。

ここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキストここにテキスト…あー猫、可愛いですね。

で、こうなります。

回り込みしたときの、パソコン・スマーフォトンでの見た目

スマートフォンだと、テキストの領域が狭いため読みづらいですね…。

スマートフォンのことを考えると、回り込みは用いないか、サイト構築時の工夫(パソコンでは回り込み、スマートフォンでは横幅100%にして回り込みしないように…等)が必要です。

4.画像の容量に気をつける

スマートフォンを利用している人は自宅にWi-Fiがなく、モバイル回線のみを使用している人も多いため、あまりにもページが重たすぎるとページを閲覧せずに引き返してしまうこともあります。画像点数や画像ごとの容量も気を配りましょう。

以前、簡単に画像のリサイズやトリミングが行えるサイトやアプリを紹介した記事を書きましたので、ご参考までに。

パソコンでスマートフォンでの見た目を確認する方法

とはいえ、パソコンを使いながら度々スマートフォンでサイトを開いて確認するのは面倒なもの…そんな時はおなじみかもしれませんが、ブラウザのGoogle Chromeを使うことで簡単に確認が可能です。

まずはGoogle Chromeをダウンロード

スマートフォンでの見た目を確認したいサイトを開きます。

サイトを開く

キーボードの「F12」を押して、「開発者ツール」を開きます。
なんか色々出てきますが気にしない方向で…。

開発者ツールを開く

「Tolle device toolbar」をクリック(スマートフォンとタブレットが重なったアイコン)、もしくはCtrl + Shift + M。
サイトの表示領域がスマートフォンサイズになります。

「Tolle device toolbar」をクリック

再度ページを更新すると、スマートフォンの見た目に。

スマートフォンの見た目に

「ね? 簡単でしょう?」(本当に)

まとめ

iPhone3が発売されて今年が丁度10年目なのですが、まさか10年間でこんなにも世界に広まり、性能がアップするとは思いもよりませんでした。ちょっと先の未来はさらにスマートフォンがシェアを広げるのか、はたまたもっと違うデバイスが登場するのか…いずれにせよ、インターネットで情報発信を行うのであれば、時代に合わせたアップデートが必要ですね。

ではでは。

ページの先頭に戻る