スマホサイトを作るとき│Web制作会社のスマホサイト関連コラム

Columnコラム

スマートフォンサイト

スマホサイトを作るときに気を付けるべきこと

スマホサイトを作るときに気を付けるべきこと

2015/09/25
このエントリーをはてなブックマークに追加

皆さんはどんな時にスマホでWebを閲覧しますか?
「通勤・営業で電車に乗っているとき」に見る、「ちょっとした休憩のとき」に見る、など短い時間で閲覧する人が多いでしょう。
今回はスマホでWebページを表示させるうえで気を付けなければならないことについて考えてみたいと思います。

PCサイトをスマホで見た場合

皆さん誰でも一度はスマホでPCサイトを閲覧したことがあると思います。
皆さんも、スマホでPCサイトを見たとき、こんなことを思ったことはありませんか?
1.文字が小さく、拡大しないと読めない。
2.画像の読み込み速度が遅くてイライラする。
3.ボタンやリンクが小さくて間違ったページへ遷移する。

しかし、これらはスマホページに作り変えれば、ほぼ解決ができます。
ですが、1つ注意点があります。2.の読み込み速度は考えなければなりません。
画像の読み込み速度はPCサイト用の解像度からスマホ用の解像度に変えれば、ある程度は改善できます。
しかし、LPサイトやECサイトの画像を多用するページは気を付けないといけないのです。
スマホの通信速度を考えると画像を多用することで、その画像分の通信が発生しますので表示速度が落ちてしまうというわけです。
2.の「画像の読み込み速度が遅くてイライラする。」ことについては、表示時間がかかってしまうほど、ユーザーが離脱してしまう可能性が多くなるので気を付けて下さい。

sumahotomoya01.jpg

便利なHTML5とCSS3

スマホが登場する前は「HTML4」や「XHTML1.0」、「CSS2」が主流でした。
スマホでは「HTML5」と「CSS3」が採用され、今まで画像で表示していたボタンやタイトルのデザインなどがCSSだけで作ることができるようになりました。
画像を使う枚数が減りますので、先ほど述べた「画像の多用による読み込み速度が遅くなる」という問題が解決され、大幅に表示速度が速くなります。
そのほかにも今までflashやjavascriptで作っていたアニメーションもCSS3を使用することで作ることが可能になりました。要素ごとに時間が経つことに変化させていくことで実現が可能になりました。

注意点

HTML5とCSS3を使う場合には注意点もあります。
Webブラウザによっては使えるプロパティと使えないプロパティがあるからです。基本的にはすべてのブラウザに対応させるために、それぞれのブラウザで使用可能なプロパティを使わなければなりません。そのため、開発工数も多少かかってしまうことがしばしありますが、公開した後を考えると、時間をかけてでも活用した方が良いサイトに絶対仕上がります。

モバイルフレンドリー

今年の4月からモバイルフレンドリーアップデートがあり、スマホでの検索結果の表示方法が変更されました。「スマホサイトを持っているのか」「スマホサイトがユーザーにとって使いやすいものになっているか」が重視されています。スマホでの評価が悪ければ、スマホでの検索結果の表示順位がガクッと下がってしまいます。
評価が下がる一例としては下記のものがあります。

・テキストサイズが小さい。(文字が読めなかったら意味ないですからね。)
・リンク同士が近すぎる。(ご操作で別のリンクに飛ばないように。)
・画面幅に対してコンテンツ幅が超えている。(横スクロールが出来ないように。)

スマホでの検索順位を上げるならユーザーが使いやすいものにしていかないといけません。

最後に

スマホサイトの需要は年々高まっています。今回紹介した気を付けるべきことのほかにもまだまだ気を付けないといけないことがたくさんあります。このような問題点を解決できるのがWeb制作会社になります。
これからスマホサイトの開設を考える人・リニューアルする人がいらっしゃるのであれば、是非お問い合わせください。

関連するサービス

ホームページ制作

スマートフォンサイト制作

text_totop