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

関連記事

  1. Web関連

    野球がしたい人のためのコミュニティサイト活用術

    皆さんは休日に何をして過ごしますか?買い物に行ったり、食べ歩き…

  2. Web関連

    レスポンシブで見せる写真の使い方

    写真好きデザイナー出口です。皆さん写真撮影楽しんでいますか?…

  3. Web関連

    健康診断を行う理由と未来

    健康診断といえば年に一度の行事レベルと考えている従業員の方もいらっしゃ…

  4. Web関連

    アドラーの思想でSDGsについて考えてみる

    最近SDGsという言葉を聞くことが増えたと思います。SDGsとは、…

  5. Web関連

    新米ママをサポートする、子育てIoT新技術

    IoTという言葉が生まれて、国内でも2年ほど前から、様々な企業がこの分…

  6. Web関連

    モバイルフレンドリーについて

    最近、モバイルフレンドリーという言葉をよく聞きませんか?モバイ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    改めて知っておこう!アドテクノロジーの種類と手法の説明
  2. Web関連

    ECサイトの売上を向上させたい 第2回目
  3. AIさくらさん

    ホントは違った!メールで使う「Re:」は返信という意味では無かった!
  4. Web関連

    たかがキャラクター。されどキャラクター。~町おこし編~
  5. Web関連

    脱・マンネリ化!仕事が楽しくなる3つのスイッチ
PAGE TOP