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. SNS関連

    Instagramユーザーにおすすめ!大流行の変装アプリ3選!

    いまや全世界で4億人を超えるユーザーが利用しているSNS、Instag…

  2. Web関連

    web制作会社が提案する最適なweb動画配信方法

    最近就寝前に世界遺産の風景映像を見ることにハマっております!就寝前…

  3. Web関連

    デジタルコミュニケーションの可能性

    デジタルコミュニケーションとは、インターネットを使って、情報を収集・配…

  4. Web関連

    面倒な作業を楽にするCSSフレームワーク

    こんにちはサーバーエンジニアの橋本です。WEBシステムを構築している…

  5. Web関連

    Webサイトの裏側までこだわるアートなHTMLソースコード集

    普段何気なく見ているWebサイトの中には、"表側"のデザインはもちろ…

  6. Web関連

    乗り換えるか迷う!「格安SIM」「格安スマホ」の基礎知識

    皆さんは携帯電話の月額料金はどのくらい掛かっていますでしょうか?私は…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    自動運転のメリット・デメリット
  2. Web関連

    サイト制作の見積もりに必要な事、知ってますか?
  3. Web関連

    広がりを見せるIoT。私たちの生活はどう変わる?
  4. Web関連

    メディアミックスとMA(マーケティングオートメーション)の 可能性を考えよう
  5. Web関連

    人の役に立ち、意味のある会社でなるためには
PAGE TOP