サイト職人スタッフブログ

最近ではパソコンよりも、スマートフォンサイトの方を重視する企業が増えてきました。
こうした動きや考え方を「モバイルファースト」と言います。

なぜ、モバイルファーストの動きが高まっているかと言うと、ユーザーの多くがスマートフォン経由でホームページにアクセスするようになってきたからです。

こういった背景から、企業側ではこれまで以上にホームページがスマートフォンで見られた場合の見栄えを気にするようになりましたが、ユーザーの満足度はまだ高いとは言えません。

なぜ満足度が低いかと言うと、多くのサイトがパソコン用のホームページをそのままスマートフォンサイトに当てはめようとしているからです。
当然ですが、画面の大きさも違えば、使い方も違う、利用シーンも目的も異なるパソコンとスマートフォンでは、ユーザーが取る行動は異なってくるため、それに合った画面設計をする必要があります。

では、どんなことを意識していけばいいのでしょうか。

PCとスマートフォンの特徴の違いを理解しよう

最近では高性能のスマートフォンがたくさん出てきましたが、画面に載る情報量や使い方の違いから、パソコンの情報をそのままスマートフォンに持ってくることは難しいです。
たとえば、トップページを表示した場合の情報量を比較すると、文字数では
・PCが1200文字～1300文字程度
なのに対し、
・スマートフォンでは300文字程度
と4分の1以下で、スマートフォンの方がかなり少ないことがわかります。
もしパソコンのページをそのまま持ってきた場合、ユーザーは拡大したり、スクロールしたりと、とても片手では収まりきらない操作をしなければならず、その使い方はとても”スマート”とは言えません。
そのため、スマートフォンに合わせた情報量と、ユーザーの利用シチュエーションに合わせた使い勝手の検討が必要になります。

実機で画面を確認しサイズを合わせる

スマートフォンページのデザインはパソコンからでも確認はできますが、実際の端末で見た際に「思ったより文字が小さかった」「画像が見えにくい」などということがあります。それだけにスマートフォンでの確認は必要不可欠です。
また、パソコンで見たときには出ていなかったデザインの崩れや操作の不具合などもあるので、チェックの際には実際のスマートフォン画面で見るようにしましょう。

ページの読み込み速度を上げる

スマートフォンユーザーはパソコンを利用した場合と比べ、サイト内の動作が素早い傾向にあります。
ページの読み込みが重いと、それだけでユーザーのモチベーションが下がり、購入しようと思っていた商品があっても離脱してしまいます。せっかく購入寸前まで行ったユーザーを取り逃がしかねません。
ではどのように軽量化を図るかと言うと、たとえば下記のような方法で実現が可能です。

• 画像の容量の削減
• JavaScriptや他のコードを最適化する
• CSSを単純化する

知識なしでは難しいかもしれませんが、それほど難しい作業でもありません。まずは画像の軽量化から考えてみるのがいいかもしれません。
このようにページを軽量化しながら、読み込み時間でユーザーがストレスを感じないよう、最適化していきましょう。

タッチ操作でのユーザーの意思を伝えやすくする構成に

スマートフォンやタブレットなどのスマートデバイスは、基本的に画面をタッチすることだけですべてを行います。
画面上のUI（ユーザーインターフェイス：ここでは画面の使いやすさ、見やすさ、入力のしやすさなどを指します）をタッチしやすく表示・配置することはもちろんのこと、数字入力や半角英数字の入力の際にはあらかじめその入力が簡単にできるよう、フォームの設計を行っていくとより良い操作性を実現できます。

電話からの申込みボタンを設置

もう一つ、スマートフォンサイトのUIをアップさせるテクニックとして、電話ボタンの設置があります。
スマートフォンサイトを参照しながら電話を掛けたいと思った時、いちいちウェブで調べて電話番号をかける…といった操作はなかなか難しく、面倒くさいですよね。
こうしたことから多くのスマートフォンユーザーは、面倒でストレスが溜まる文字入力より、電話で問い合わせできる方が楽で早いと考えます。

まとめ

同じユーザーでも使用するデバイスによってサイト上で取る行動は全然違います。
スマートフォンサイトを作る際には、この違いを少し意識してコンテンツづくりを行うとユーザーにとっても、企業にとってもよりよいホームページができるのではないでしょうか。