PCサイトとどこが違う？スマホサイトのデザイン

スマホサイトのデザインとは

スマートフォンが年々普及しているのは、ニュースにもなっていますよね。
様々なホームページのアクセスを調べていると、3割以上がスマートフォンだったりします。
PCを持たないけど、携帯はスマホ、という人や、PCは家族で1台だけど、スマホはそれぞれが持っています、という人が、めずらしくなくなってきているのでしょう。
そこで考えるべきは「スマホサイト」ではないでしょうか？
年々増えつつあるスマホユーザーにも、便利に快適にホームページを見てもらえるためのスマホサイトは、ただ作れば良いわけではなく、色々なポイントがあります。
何をスマホサイトと言うか、については定義が難しく、技術的にはPCサイトもスマホサイトも同じと言えますが、今日はスマホサイトのデザインについて、PCサイトとどこが違うのか、どんなデザインにすればスマホで閲覧しやすいかを考えていきましょう。

画面サイズをスマホ用にする

PCサイトをスマホで閲覧すると、画面が小さく、拡大しなければ文字が読めない…といった経験はありませんか？
スマホサイトでは様々な種類のスマホに対応できるよう、画面サイズを設定します。
iPhoneで見ても、Xperiaで見ても、同じように見えるのがベストですね。

横方向に広がるレイアウトを避ける

PCサイトでは、例えば料金表など、縦にも横にも長いコンテンツがありますよね。
画像の横に文章が入るレイアウトもよく見かけます。
スマホは画面が小さく、縦に持って見ることが多いため、横に長いレイアウトは不向きと言えます。
横にスクロールしたり、拡大縮小したりする手間を避けるため、なるべく縦にのみ延びるレイアウトをおすすめします。

指での操作を考えたボタン

PCサイトはマウスで操作するため、ラジオボタンやチェックボックス、テキストリンクなど、多少小さくてもクリックできます。
スマートフォンでは指での操作がメインですので、指で隠れてしまって押しているかどうか分からないようなサイズのボタンはNGです。
複数行にわたるテキスト内に、テキストリンクがたくさんあるのも押しにくいですよね。
フォームを作るときは入力欄やドロップダウンメニューも、スマホ用に大きく作ると良いでしょう。

見たい情報を上に集める

例えばあなたがPCもスマホも持っているとして、あえてスマホでホームページを見るのはどんな時でしょうか？
「外出していてPCを見られない」「PCを見ている時間はないけどスマホなら」
こんなパターンが考えられます。
もちろんスマホしか持っていない人もいますが、スマホサイトを利用するシーンを考えてみると、屋外にいる、通勤途中、休憩中など、あまり時間のない時なのかもしれません。
PCサイトでは画面サイズが比較的大きいため、いろんな情報を一度に見せることができますが、スマホサイトではそれが難しくなります。
あなたの会社のホームページを閲覧するとき、あまり時間のないユーザーは何を求めているか、何を見たいと思っているのかを考え、そのコンテンツを上に集めると良いでしょう。

ボタンなのか、ただの画像なのかを分かりやすくする

スマホには、オンマウスしてクリック、というPCでは当たり前の操作がありません。
マウスを持っていくとポインタが指マークになったり、ボタンの色が変化したり、という仕様はスマホサイトではできません。
そのためスマホサイトでは、タッチすればリンクがあるボタンなのか、それともただの画像なのかを判断できるよう、デザインには注意が必要です。
例えばボタンには矢印を付けることを徹底したり、「詳しくはこちら」のような文言を付与してもいいかもしれません。

地図や、電話番号など、他のアプリを使うことも意識する

スマホにはPCにはない機能がたくさんありますよね。
例えば電話発信の機能や、GPSでの位置検索などがあります。
スマホサイトではホームページの閲覧と並行して、それらの機能を使うことも意識した作りにすると良いですね。
電話番号を表示するときは、タッチすると電話発信されるようにしておきましょう。お店に来てもらいたい、予約してもらいたい、といった業種なら特にこの機能を使いたいですね。
地図を表示するときは、地図アプリを起動するためのリンクを貼っておきましょう。実際に来店するとき、地図アプリを見ながら来てもらえるとスムーズです。
スマホ独自の機能を活かせるスマホサイトにしましょう。

日に日に進化していく、スマートフォン。
ぜひユーザーに寄り添ったスマホサイトを作りましょう。

スマホサイト制作についてはこちら