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

こんにちは。ホームページの運営と活用のヒントを分かりやすくお伝えするキャラクターの「くくり」です。

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

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

そうですね。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PR▼▼

初めてでも簡単！たった3ステップでホームページが立ち上がる、シンプル操作のレンタルサーバー「くくり」　【ドメイン永年無料】

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

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

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

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

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

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

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

まとめ

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

はい。

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

参考になります！

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

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