スマートフォンで見やすい・使いやすいホームページとは？

こんにちは！営業担当のHです。

昨今、iPhoneをはじめとしたスマートフォンが普及し、国内での普及率は80%近くまで上昇していると言われ、
パソコンを追い越す勢いで普及しています。
その流れを受け、ホームページにおいてもスマートフォンへの対応が迫られています。

そこで今回は、スマートフォンでも見やすく、使いやすいホームページにするにはどんなことを行えばいいのかをご紹介いたします。

１．スマートフォン対応の種類は？

まずはじめに、スマートフォン対応を行うための方法としてメインとなる2種類の方法を紹介いたします。

1.「レスポンシブデザイン」でのホームページ制作

レスポンシブデザインとは、ユーザーが使用するパソコンやスマートフォンなどの画面サイズに応じて、Webサイトの表示を柔軟に調整し、見やすく最適な表示にする技術のことを言います。

【メリット】

(1)どの端末でも、見やすく使いやすい状態で表示ができる。
(2)URLが1つなので、ユーザーがリンクを共有をしやすい。

【デメリット】

(1)スマートフォンでの閲覧時でもパソコンで表示される画像・テキストと同じデータが表示されるため、
表示速度が遅くなることがある。
(2)パソコンで閲覧した場合とスマートフォンで閲覧した場合とでデザインを検討する必要があり、
設計や制作に時間を要する。

2.「スマートフォン専用サイト」の制作

「スマートフォン専用サイト」とは、スマートフォンで閲覧することに特化したサイトになります。

スマートフォンからホームページを閲覧しようとした際に、「スマートフォンサイトに移動しますか？」といった表示がでることがありますが、そこで移動した先のサイトが、スマートフォン専用のサイトになっています。

【メリット】

(1)スマートフォン用に作成しているため、画像やテキストなどのデータ容量が小さく、表示速度が速い。
(2)サイトのデザインも、スマートフォンでの表示に合わせたものを作成すればよいので、
デザインの自由度も比較的高い。

【デメリット】

(1)パソコン版のサイトと並行して運用する場合、どちらかを更新したらもう一方も更新する必要があり、更新の手間が増える。
(2)制作内容によっては、パソコン版のサイトを制作する場合と同程度のコストがかかってしまう。

スマートフォン対応の主な手法は「レスポンシブデザイン」「スマートフォン専用サイト」ですが、現在ではどの端末でも画面サイズに合わせて表示できる「レスポンシブデザイン」を採用するホームページが増えてきています。

２．スマートフォンで見やすく使いやすいホームページ

ここまで、スマートフォン対応の方法とそれぞれのメリット・デメリットについて紹介いたしました。

それでは、実際にスマートフォン対応するにあたって
「スマートフォンでも見やすく使いやすいホームページってどんなもの？」
という点を考える上でのヒントを、いくつかご紹介させていただきます。

1．ハンバーガーメニューの表示方法を工夫する

ハンバーガーメニューとは、スマートフォンでWebサイトを閲覧した時に表示される、三本線のナビゲーションメニューのことです。見かけたことがある方も多いのではないでしょうか？

こちらのホームページのように、画面右上のメニューボタンをタップすると画面の上部からメニューバーが下りてくるパターンや、

メニューボタンをタップすると画面の右側からメニュ―バーが出てくるパターンもあります。

2．検索ボックスの配置

ページ数の多いサイトに設置されていると便利な「サイト内検索」ですが、スマートフォンで閲覧したときにこの検索ボックスを配置する場所も、使いやすさを考える上でポイントになります。

画面サイズが小さいスマートフォンでは、一度に表示できる情報量も限られていたり、パソコンと比べてページが縦長になります。

そのときに、トップページ上部に検索ボックスを設置することで、スマートフォンユーザーが知りたい情報にすぐにたどり着けるようになり、「使いやすさ」の向上につながります。

３．表示するコンテンツに優先順位をつける

スマートフォンの小さな画面で一度に表示できる情報量は限られています。
ユーザーに知ってほしい情報をしっかりと見てもらうために、掲載するコンテンツに優先順位をつけて表示方法を工夫することで、情報がまとまった見やすいサイトにすることができます。

こちらのサイトでは、パソコンで見た際には黄色い枠の部分にある「サイト内検索」が表示されています。

それに対してスマートフォンで見ると、「サイト内検索」が表示されなくなり、展示会の情報などが更新される「TOPICS（新着情報）」が大きく表示されるよう設定しています。

「ユーザーが最も知りたいことは何か」「自分たちが伝えたいことは何か」という2つのバランスを取って、コンテンツに優先順位をつけていくこともポイントです。

3.まとめ

今回、スマートフォン対応の種類や、見やすく使いやすいサイトにするためのヒントをご紹介いたしました。
スマートフォンユーザーにとって見やすく、使いやすいホームページを作るためにはやはり
「ユーザー（顧客）」の立場に立って、ホームページを改善していくことが必要となります。