ホームページのレイアウト!参考にしたいスマホ変換の3つのコツ

 

くくり
こんにちは。難しいウェブの世界をやさしく楽しくお話しする「くくり」です。

 

女性起業家

こんにちは。くくりさん。

ホームページのレイアウトはパソコン用とスマホ用で変えた方がいいときいたのですがどう変えたらいいですか?

 

くくり

そうですね。

ホームページのレイアウトは確かにパソコン用とスマホ用で変えたほうがいいです。

理由は、スマホ利用者のためです。

今回はスマホ用レイアウトのコツについてお話しますね。

 

 

ホームページレイアウトのコツはスマホベースで考えるべし

スマホ用とパソコン用

 

個人のインターネット利用者は、スマホから最も多く閲覧するようになりました。

 

  • スマホ:59.7%
  • パソコン:52.5%
  • タブレット:20.9%

【参照:平成29年通信利用動向調査

 

特に、ショッピングサイトなどでは80%以上がスマホからの訪問が多いようです。

そうなると、ホームページのレイアウトはスマホをベースに考える必要があります。

 

今までホームページの制作やリニューアルを考える時では、パソコンの画面を中心に話を進めていき、スマホのレイアウトについては二の次だったかもしれません。

 

しかし、インターネット利用者の大半がスマホであるならば、見方を変える必要があります。

 

今後は、スマホのレイアウトをベースに、次にパソコン画面での表示を確認するという優先順位でホームページの作成やリニューアルを計画していくことが必要になりますね。

 

一方で、企業向けのサービスをしているお店のホームページは、スマホよりも会社のパソコンからアクセスされるようなケースもあります。

 

すでにホームページを持っている場合は、 Googleアナリティクスなどのアクセス解析で事前にスマホとパソコンの訪問者比率を調べておきましょう。

Googleアナリティクス(デバイス別セッション)

 

そうすることで、あなたのお店がスマホとパソコンのどちらを優先的に新しいホームページの作成やリニューアルしていけばいいのかわかります。

 

初めてホームページを作る場合は、個人向けの商品・サービスならスマホを優先に、企業向けの商品・サービスならパソコンを優先にするという選択もあります。

 

しかし、今後のことを考えると、やはりスマホ優先のホームページ作りが好ましいですね。

 

>>ホームページのスマホ対応!検索順位の明暗を分ける理由とは?

 

 

 

スマホ用ホームページレイアウト!参考にしたい3つのコツ

スマホ用3つのポイント

 

スマホでは、パソコンと異なるホームページレイアウトのコツがいくつかあります。

そのうちのすぐに改善しやすい3つを紹介します。

 

  1. ボタンは押しやすい形に
  2. 情報は横に並べない
  3. メニュー表示をわかりやすく

 

 

ボタンは押しやすい形にしましょう!

 

スマホを操作していて、「このサイトのボタン小さくて押しにくいなー」と思ったことありませんか?

 

私たちはスマホ利用するとき、人差し指か親指でタップ(クリック)します。

そのため、スマホ用ホームページ内のボタンの形は横長より正方形や円が好ましいです。

 

ボタンの大きさの目安も、親指の腹で簡単に押せる大きさにしてください。

 

横に細長いボタンなどは非常に押しにくいため、これだけでクリック率や離脱率に大きな影響を及ぼします。

せっかく申し込みボタンまで誘導できても「ボタンが押しにくい」ではもったいないですよ。

 

スマホ用のホームページ内のボタンは、パソコン用のホームページではサイズを変えて文字の大きさも調整しましょう。

 

ボタンの大きさと並びが変わる

 

例えば、ユーキャンのホームページでは、ボタンの大きさや並びだけでなく、ボタンの配置や文字の大きさ、太さ、色などもスマホ用とパソコン用のホームページで変えていますね。

 

 

 

情報は横に並べないようにしましょう!

 

あなたはスマホを操作していて、横並びになっている画像をすべて見ていますか?

LINEやTwitter、Facebookなど主要なSNSがそうであるように、私たちの目線はスマホの上下移動に慣れています。

スマホ利用者を主としているなら、情報の横並びはできる限り避けた方がベストでしょう。

 

【やってはいけない情報の横並び】

  • バナーを横に複数並べる
  • テキストボックスを横に複数並べる
  • 画像を横に複数並べる

 

情報の横並びをできる限り避けた方がよい理由は、横にたくさん情報が詰め込まれていると横の動きに慣れず疲れてしまうからです。

結果的に、バナーなどを横にスライドしてもらえず見て欲しい情報を見てもらえない可能性が高くなります。

スマホ用のホームページ内の画像は、パソコン用のホームページでは縦並びから横並びに変えたり、表示から非表示にしたり、画像の幅の調整しましょう。

どうしても横並びにしたいなら勝手にスライドしてくれる仕組みにしておくべきですよ。

 

画像の大きさと並びが変わる

 

例えば、家庭教師のトライのホームページでは、画像を横並びから縦並びに変えるだけでなく、画像の大きさもスマホ用とパソコン用のホームページで変えていますね。

 

 

 

メニュー表示をわかりやすくしましょう!

 

「ハンバーガーメニュー」をご存知ですか?

スマホではハンバーガーメニューというものがよく使われます。

 

ハンバーガーメニューとは、パソコン用のサイドバーメニューをスマホのレスポンシブデザインで勝手にまとめてくれるアイコンです。

 

ハンバーガーメニュー部分にも「メニュー」と文字を入れてあげるとさらにわかりやすいですね。

 

ハンバーガーメニューで画面が変わる

 

 

しかし、ハンバーガーメニューだけだとアイコンをクリックするまでどんなメニューがあるかわからず、使いにくいホームページになります。

 

特に閲覧してほしいページ、需要のあるページは、画面下部もしくは上部にハンバーガーメニューとは別のアイコンを作成するようにしましょう。

 

検索やカート等はメニューと別に

 

例えば、ユニクロのホームページでは、スマホ用のホームページのハンバーガーメニューに合わせて検索、店舗、お気に入り、カートの文字表示以外にアイコン画像が入っていてわかりやすくなっていますね。

 

 

 

お客様に実行して欲しいアクションをわかりやすく

お客様にしてほしいこと

 

スマホ用のホームページはパソコン用のホームページに比べ、お客様の離脱率が高めです。

理由は、お客様がスマホを利用している状況によります。

 

・家事やテレビを見ながらなど「~ながら利用」

・待ち時間や通勤電車など「気が散る環境での利用」

・通信環境による表示の遅さなど「不便な状況での利用」

 

そのため、スマホ用のホームページでは、お客様にどういった行動を取って欲しいのかをパソコン用のホームページ以上に厳選して絞り込む必要があります。

 

さらに、スマホ用のホームページはパソコン用のホームページより商品購入率やお問い合わせ率が下がるケースが多いので、出来る限り簡単な操作で済むようにすることが大切です。

 

例えば、会員登録や、LINE、メルマガの登録の案内はトップページや主要なページの目立つ箇所に準備します。

 

ログインと会員登録は上に

 

また、「初回限定お得なセット商品」「ご予約の方に限り特別価格」といったように、「買うなら今ですよ~」と購入に結びつける商品を用意して注目させるなどの工夫をしてみるのもいいですね。

 

 

 

まとめ

 

くくり
スマホの「ホームページレイアウト」について、参考にしていただけそうですか?

 

女性起業家

はい。

スマホ利用者のために「ホームページのレイアウト」には、ストレスなくわかりやすくするコツがあるんですね。

参考になります!

 

くくり

スマホ利用者が増加している以上、スマホからみるホームページのレイアウトは気にかけるべき部分なんですよ。

いろんなホームページのスマホ対応を参考にしてみるといいですよ~