Web関連

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

0

皆さんはどんな時にスマホで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制作会社になります。
これからスマホサイトの開設を考える人・リニューアルする人がいらっしゃるのであれば、是非お問い合わせください。

関連するサービス

ホームページ制作

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    【バズるコラム】休みなしで10年記事を書き続けた無名ブロガーの「10分で書けるコラム」

    ・コラムをたくさん書いて新規ユーザーを獲得したい・でも、書く時間が…

  2. Web関連

    果たしてDMPの導入は本当に敷居が高いのか?

    こんにちは!デザイナーの角田です。広告業界で大注目のDMP、ご存知です…

  3. Web関連

    機械学習で進化した将棋界

    今回は機械学習について、とても興味深い事例がありましたので、ご紹介した…

  4. Web関連

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

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

  5. Web関連

    人工知能(AI)がユーザーの気持ちを考えてWEB集客率向上!?

    昨今、WEBマーケティングを行う企業が増えていますが、人が行うのはコス…

  6. Web関連

    ブログネタがない時におすすめのブログネタ10選

    ブログをやっている皆さんは「更新したいけどブログネタがない!」という経…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. マーケティング

    不特定多数へ情報を提供する昔のマーケティングしてませんか?
  2. Web関連

    万能のUIなんか存在しない!?
  3. AI関連

    【人工知能(AI)×コールセンター】人工知能で顧客満足度向上と業務効率化を同時に…
  4. Web関連

    えっ!あの有名企業も?MA (マーケティングオートメーション)導入している日本企…
  5. Web関連

    おいしいインドカレー屋さんを見分けるポイント、五か条
PAGE TOP