Web関連

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

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

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

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

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

 

便利なHTML5とCSS3

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

注意点

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

モバイルフレンドリー

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

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

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

最後に

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

関連するサービス

ホームページ制作

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

WEB接客と親和性の高そうなサービスを考えてみた前のページ

【Web制作】スマホサイト制作とスマホアプリ制作、それぞれそのメリット・デメリット:前編次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    Webサービスで地域を盛り上げる!

    地域活性化と聞いたときに、どんな取り組みのことを思い浮かべますか?5秒…

  2. Web関連

    顧客満足度の高いホームページを作るためにやるべきこと

    どの企業も顧客満足度の高いホームページで売上向上やブランディングの向上…

  3. Web関連

    Web制作会社に発注するときはここに注意!!ベスト5

    今回はWeb制作を制作会社に発注する際にぜひ気を付けておきたい5つのポ…

  4. Web関連

    セキュリティ対策はクラウドストレージでも必須!!

    データの保存や共有などにとても便利なクラウドストレージ。中でも無料で使…

  5. Web関連

    「とりあえずAI導入しろ」という上司のムチャ振りへの答え3つ!

    昨今、様々な企業でAIの導入が進んでいる中、社内でこんな会話が繰り広げ…

  6. DX関連

    知っているようで知らない。Googleについてまとめてみる

    もはや知らない人はいないかもしれない企業、「Google」。知らず…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    【業務・会計担当必見】医療控除の困った!はコレで解決!
  2. Web関連

    ひと目に触れないクラッキング対策について
  3. Web関連

    効率的なミーティングの為に、心掛ける8つのポイント
  4. Web関連

    広告によるストレスを減らすネイティブ広告
  5. Web関連

    HTML5での動画再生が主流になってきた!
PAGE TOP