「スマホ対応のためレスポンシブデザインでリニューアルしたい」
「スマホ閲覧に対応したいが費用がないのでデザインは同じで崩れないコーディングをしてほしい」
WEBサイトのリニューアル時に「スマホ、タブレットできれいに見えるデザインを」との希望を出される方が多くなりました。
スマートフォン（以下、スマホ）からWEBサイトへのアクセスは伸びる一方で、業種やターゲット層に関わらずパソコンからの閲覧数をスマホが超える状況が続いています。企業や行政のWEBサイトのスマホ対応は必須の時代となりましたので、「スマホで見やすいWEBサイトを」と皆さんがご希望を出すのは当然のことと思います。
ただ、スマホからWEBサイトへのアクセスが増えてから、既にかなりの年数が経過しています。ほとんどのユーザーがスマホからの閲覧に慣れ、「ただ調べ物をしている」以外に、通販の購入や資料請求、飲食店やクリニックの予約等は日常的となり、住宅や車など高額な買い物の検討もスマホで、という方も多くなってきました。
つまり「パソコンで見る前に軽くスマホで見ておく」という使い方は既に少なくなり、スマホで見ている＝そのまま購入や申し込みをしてくださりお客さまとなっていくのです。
○パソコン用WEBサイトをスマホで見せるデメリット
パソコン閲覧を前提とした設計やデザインで、液晶サイズなど異なる状況からアクセスしてくださっているお客さまに見せるとどうしても見づらさ、情報の探しづらさがあり、結果が変わってきます。
画面サイズの小ささに合わせるためにメニューを折りたたんで小さくしたり、サイドバーをいちばん下に落としてしまいスクロールを何度もしないと見えなかったりすることによるデメリットを考えないのはもったいないです。スマホから快適に見たり操作したりできるようにすれば売上や問い合わせ、予約がアップしていくはずです。
そこで今回の記事では、手軽にスマホからの売上や問い合わせ数の向上に役立つ改善のコツを5つ選んでピックアップします。
１．画面下に固定メニューを置く
２．メニューにサムネイル画像を付ける
３．ナビゲーションメニュー項目に優先順位を付ける
４．長い文章はアコーディオンで折り畳む
５．問い合わせや予約フォームをスマホ専用につくる
できるだけ手間が少なくできるものを優先的に選びました。全体のデザインは触らず、コーディングの範疇で改善できるものもあります。今後のWEBサイトリニューアルや改善のお役に立てていただければ幸いです。
１．画面下に固定メニューを置く
1つ目は、成果につながりやすいページ（例えば申し込み／問い合わせフォームや商品一覧ページなど）へのリンクボタンをスマホの画面下に表示させる方法です。
参考：https://www.route-inn.co.jp/hotel_list/kumamoto/index_hotel_id_77/
このホテルの公式ページでは「空室検索」と「予約の変更・キャンセル」のリンクボタンが固定で表示されています。パソコンからの閲覧では出ておらず、スマホからの閲覧時のみ表示させています。
「空室検索」は訪問者さまがすぐに予約へ動けるように、そして「変更・キャンセル」は利便性のために付けていると推測されます。ホテルの公式ページを見る場合は、半分以上の閲覧者さまが【予約のため】に見ていると思われますので、このメニューは訪問者さま目線に立ったものであり、かつ予約獲得しやすい施策といえます。
○HTML、CSSの書き方
この固定メニューはHTMLとスタイルシート（CSS）の改善で実装できます。
背景色やフォント等のビジュアルや、タグの固定化、スマホやタブレット閲覧時のみ表示させるなどの設定はスタイルシートで調整します。
全体のデザイン・ビジュアルは触りませんので、取り入れやすい方法です。
ぜひ実践をオススメします。
２．メニューにアイコン画像を付ける
通販サイトやニュースメディアのカテゴリメニューはどうしても文字がズラズラと並んでしまい、小さいスマホ画面ではわかりづらいです。
訪問者さまが読みたいページへ進みやすくするため、文字ばかりのメニューにアイコン画像を追加します。
飲食店のメニューなどもイラストやメニュー写真など画像が入るだけで、わかりやすさがかなり改善されそうです。
実際の商品写真ではなく、素材集のイラスト等を使っているWEBサイトもあります。撮影や切り抜きが大変なときは素材集の採用も良いと思います。シンプルなシルエット画像でも何もなく文字ばかりが並ぶよりわかりやすくなります。
参考：https://www.cosme-de.net/category
HTMLとCSSの修正だけで実装できます。
WordPressで構築していればプラグインを入れるだけなのでより手軽です。
○オススメのアイコン画像付きメニューができるプラグイン
WordPressの無料プラグイン「Menu Image, Icons made easy」を導入すると簡単にアイコン画像付きメニューがつくれます。
https://ja.wordpress.org/plugins/menu-image/
プラグインをインストール、有効化するだけで初期設定も不要で使えます。
アイコン画像の設定は「外観＞メニュー」のメニュー設定から行います。
アイコン画像もたくさん用意されているので、好みのものを選びます。
メニューの前にアイコン画像が表示されました。
このようにWordPressを導入していれば、HTMLやCSSを触らずプラグインで改善していくことができるので便利ですね。ただ、もちろんプラグインでは最低限の挿入しかできず、細かい見た目の調整や画像の変更サイズの変更などを行う場合はコーディングが必要となります。
３．ナビゲーションメニュー項目に優先順位を付ける
ヘッダーのナビゲーションメニューにさまざまな項目を載せていると、スマホから閲覧するとファーストビュー（ページを開いてすぐ目に入る画面）が埋まってしまう場合があります。そのため、スマホではメニューを折り畳むデザインが一般的です。
参考：https://kumamon-official.jp/
しかし、この折り畳まれたメニューを率先して開く人は少ないのが現状です。訪問者さまに見てほしいリンク（移動してもらいたいページ先）はヘッダー直下にそのまま置いておくほうが離脱が少なく成果が出やすくなります。
見せるもの／見せずに隠すもの、とリンクに優先順位をつけて厳選する作業を行うことをオススメします。
参考：https://kori-dc.com/
メニューひとつ取っても、どのように表示させるか、たくさんの選択肢があることがわかります。新規作成時はデータもなく、どのページが人気かもわからないので一般的な選択になるかと思いますが、リニューアルやメンテナンス時にデザイナーやコーダーに相談して少しずつ改善をしていくことをオススメします。
４．長い文章はアコーディオンで折り畳む
文章についても優先順位を決める必要があります。それほど重要度が高くなく、さらにその情報が必要な人が限られている文章は一部だけ見せて残りをアコーディオンで隠すことで限られたスペースを有効活用できます。
参考：https://doki-dental.com/faq/
このようなアコーディオン表示はCSSだけでもつくれますし、WordPressのプラグインでコンテンツをつくることでも可能となります。
WordPressプラグインを使って実装する方法は過去記事「効果的なQ&AをWordPressでつくる方法」の中でプラグイン「Ultimate FAQ」を導入した結果をまとめていますので、ご参考にしていただけたら幸いです。
５．問い合わせや予約フォームをスマホ専用につくる
問い合わせや予約、相談など入力項目が多い場合、スマホから見るとページが長くて入力に躊躇する人もおられます。
スマホは小刻みに入力画面が進むようステップを分けて設計したり、チェックボックスとプルダウンを使い分けたりとパソコンとスマホで作り変えると入力がしやすくなります。
参考：https://www.daiwahouse-reform.co.jp/regist_soudan.asp
WEBサイトの最終着地点が問い合わせや資料請求、予約等の場合は、どのページからもアクセスできるよう導線を考えるとともに、フォームの改善や工夫をすることで離脱が減り、結果として売上につながります。
実装方法としては、パソコンとスマホでWEBページを別々につくる／スタイルシート（CSS）で切り替える／.htaccessファイルでリンク先を振り分ける、など複数の方法があります。
大きな変更をするとなると費用もかかります。改善に着手する前にフォームへのアクセス数や離脱率をデータチェックし、どれくらいの費用をかけて改善を行うのが最適か、考えてみることをオススメ致します。
まとめ
WEBサイトへのスマートフォンやタブレットからのアクセスが増えることにより、デザインやコーディング時の前提が変わりつつあります。調べ物はパソコンで行い、最終の予約や購入は必要なときに手元のスマホから、というパターンもあるでしょう。
ご自身のWEBサイトのターゲット層や、その方々の利用シーンなどを考えながら、少しずつ改善を加えていってください。WEBサイトは一度つくったら終わりではなく、そのときどきの時流やゴール地点に合わせて手を加えていくことが大切です。大きなリニューアルを企画できなくても、少しずつできる改善を積み重ねるのも成果につなげていく方法だと思います。