コラム

ここ数年のスマートフォンの急激な普及により、デバイス別アクセス数ではスマホからのアクセスが6～7割になっているサイトも非常に多く見受けられます。
特にGoogleではレスポンシブデザインが推奨されているので、WEBサイトを作る上ではスマホサイトは必須といえるでしょう。
スマホはPCと違い、縦長という空間でデザインを表現しなければなりません。
ここからは、スマホサイトを作る上で大切なユーザビリティーをいくつかピックアップしていきたいと思います！

1. TOPページのメイン画像はなるべく縦長にしてインパクトを強めに！

これはサイトにもよると思いますが、スマホ版のメイン画像は少し縦長に作った方が、インパクトが出ます。
また横長で作るとメイン画像の下にリンクボタンなどを配置した時に、あまり違いが分からなくなり、
メリハリのあるデザインにしづらいという部分もあると思います。

2.TOPページは下層ページへの導線！リンクボタンは上の方に表示させる

スマホの場合は他のページへの導線となるページのブログやニュースなどのテキストメインのページを
上手く使い分ける必要があります。
記事ページの場合はその文章を読んでもらうことが一番の目的ですので、テキストを以下に読みやすくするかが
重要になってきます。
しかしTOPページや一覧ページなどの場合は次のページへ誘導させることが一番の目的です。
スマホは縦長でただでさえスクロールするのが面倒です。
特にTOPページは直帰率を下げないためにも、なるべくテキストの使用は控えて、リンクボタンやバナーを上の方に
配置させるようにしましょう。

3. display:noneを有効活用

レスポンシブデザインの場合どうしてもレイアウトが限られたり、PC側でできるのにスマホ側でできない動きなども出てきます。
そんなときは「display:none」を有効活用して、スマホでは非表示の部分を作ることができます。
今のところGoogleのガイドラインでも特に問題ないとのことですので、上手く活用してみても良いと思いますよ！

4. JSなどの動きは最低限に

スマホの場合動きのあるページはどうしても表示に時間がかかります。
もしページの表示に時間がかかったらどうしますか？
多分前のページに戻ることがほとんどだと思います。
そうなると、せっかく見て欲しいページも見てもらえなくなるので、JSなど動きが必要な場合は
表示速度をしっかりと頭に入れて作るようにしましょう！

5. 電話発信や地図検索はスムーズに！

スマートフォンの便利なところは、電話番号リンクを設定しているだけで簡単に電話がかけられます。
またGoogleマップのリンクをつけておくことで、スマホのアプリですぐに調べることができます。このような設定をしておくだけでも、ユーザーにとっては非常に使いやすいサイトになります。
店舗詳細ページなどには付けておいた方が良いでしょう！

いかがだったでしたでしょうか？
大まかにですが、簡単にできるスマホのユーザビリティーについての紹介になります。
他にももっと細かい部分に気をつけることで、さらにユーザビリティーを向上することができますので、
色々と試してみて下さい！