スマートフォンサイトを表示する

  1. TOP
  2. はじめて相談室 : 第42回 スマホでの表示が遅いのはなぜ?

エキスパートコラム

はじめて相談室

第42回:スマホでの表示が遅いのはなぜ?

執筆:#fc0(株式会社エフシーゼロ)

2018年10月9日更新

  • このエントリーをはてなブックマークに追加

閲覧数1,139views

このコラムをPDF形式でダウンロードする

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、スマホでの表示が遅いのはなぜ?というご相談です。

おたより

はじめまして。Jimdoでホームページを作成していますが、スマホで見た時に指で次を見ようとスライドしても動きが悪いのですが、どうしてでしょうか?

ナビゲーターからの回答

ナビゲーター

はじめまして。はじめて相談室ナビゲーターの立花かずみです。
おたよりありがとうございます!

今回のおたよりにはホームページのアドレスも書かれていたので、スマートフォンで見てみました。「スライドしても動きが悪い」とのことですが、ページの読み込みが全体的に遅いようですね。

ページの読み込みが遅い原因はずばり「画像のサイズ」にあると思います!
そこで今回は、はじめてWEB(Jimdo)でホームページを作るときの画像の扱いについて見ていくことにしますね。

「画像サイズ」の2つの意味

画像のサイズというと縦横の大きさをまず思い浮かべる方が多いと思いますが、ホームページで扱う画像の場合「画像サイズ」にはもう1つ意味があります。それが「ファイルサイズ」です。画像ファイルの容量のことです。

もちろん、画像の大きさが大きいほどファイルサイズは大きくなりますが、ファイルサイズは大きさだけではなく中身の内容によっても変わります。たとえば、色がたくさん使われていたり、画質が高いものだったりするとファイルサイズが大きくなります。同じ大きさのものでもカラーより白黒のほうがファイルサイズは小さくなります。

以下の図は、Windows10で写真をダブルクリックで開き、右クリックで「ファイル情報」を選択すると表示される画面です。

ちなみにMacをお使いの方は、画像を右クリックして「情報を見る」を選択すると画像サイズがわかります。

ホームページで画像を使うとき、ファイルサイズは超重要!

ホームページはインターネットの回線を通じてデータのやりとりをすることで表示されます。つまり、データが多いほど表示に時間がかかるということになります。文字のデータはそれほどのデータ量ではありませんが、画像については、ファイルサイズによって表示が遅くなったりすることがあります。

また、パソコンで表示する場合、自宅や会社の光回線を使っている場合も多いため速度が早いのですが、携帯電話(スマートフォン)は光回線に比べると速度が早くないため、パソコンよりも表示が遅くなることがあります。

Jimdoに大きな画像を入れてみる

ところが、Jimdoではこのあたりが良くできているんです!Jimdoで「コンテンツ」として画像を入れると、大きな写真を入れても自動的にページやコンテンツの幅に合わせてファイルサイズや画像の大きさが調整されるのでとても便利なんです。

例を見てみましょう。
サンプルで使っている写真は、デジカメで撮って何も調整していない写真です。ファイルサイズを調べると「2.7MB」、大きさは「4608×3456」とあります。

これを、Jimdoへアップロードしてみます。
実際にやってみると「アップロードしています」の画面が結構長く出ています。画像のファイルサイズが大きいため、データのやりとりに時間がかかっているのです。

ページにアップロードされたら、その画像を保存して画像の大きさを調べてみます。

※ちなみにホームページにある画像の保存は、画像の上で右クリックして「名前をつけて画像を保存」を選ぶとできます。

調べてみると、ファイルサイズが「122.6KB」、大きさは「1040×780」となっていて、かなり小さくなっていることがわかります。1MB=1024KBなので、計算するとファイルサイズはおおよそ23分の1くらいになっています!縦横の大きさも、ページの幅に合わせて自動的に小さくなっています。

このように「コンテンツ」として画像を入れ込んだ場合、Jimdoがもとの画像を自動調整してくれるので、ホームページの表示のときのデータ量が抑えられます。

それなら別に問題ないじゃない?と思うかもしれませんが、今回の問題はここからです。
今回おたよりをいただいた方のホームページでは、「ページの背景」に「スライド表示」が使われているのです。

Jimdoでは、ページの最初の大きな画像は「ページの背景」を使っている

Jimdoのレイアウトの中にはページの一番上のほうで写真を大きく使っているものが多くありますが、これは「ページの背景を見せる」という方法で実現しています。背景を利用して写真を見せることで、両脇に隙間を作らないダイナミックな表現を可能にしているんです。

たとえば、人気のレイアウトの「Miami」も、最初に見えている画像はページの背景です。これは、一度設定をした方ならご存知かと思います。

ページの背景は、管理メニューの「デザイン」を選択したあと「背景」を選択すると設定ができます。背景はいくつか種類が選べて、その中に「スライド表示」というものがあります。これは、複数の画像をスライドショー(紙芝居的な感じ)で見せることができるものです。いろいろなホームページで使われている人気のテクニックです。

今回のおたよりで見せていただいたホームページは、「スライド表示」の背景を使って5枚くらいの写真を切り替えていました。どの写真もきれいでかっこいいのですが、スマホで見るとこの部分の読み込みにいつも時間がかかっている状態でした。

表示が遅くなる原因は?

今回表示が遅くなっている原因は2つあります。

ひとつは「ページの背景に大きな写真を使っていること」、もう1つは「スライド画像で複数枚を切り替えていること」です。ひとつひとつ見ていきましょう。

1. ページの背景として使っている画像はファイルサイズが小さくならない

さきほど、「コンテンツ」として画像を入れたときはページの幅に合わせて画像が自動的に小さくなりましたが、「背景」として画像を設定した場合、ファイルはそのままの状態で表示されます。

アップしてみた背景画像を(ちょっと裏ワザを使って)保存して調べたところ、元のものとまったく同じ大きさ・ファイルサイズでした。ということは、デジカメで撮ったままのとても大きな画像が背景に指定されているということになります。

Jimdoのページの中では画像の一部が表示されていますが、実際には切り取られているわけではなく一部がくり抜かれた感じで表示されています。このため、見えない範囲の部分のデータもすべて読み込まれているんです。

2. スライド画像を使うと、複数の画像を一度に読み込もうとする

たとえば5枚を切り替えるスライド画像を設定したとします。スライドをするなら、1枚めが出たらすぐに2枚めがスムーズに出るようにするために、ページを最初に読み込む時点で5枚を一度に読み込もうとします。5枚すべてがデジカメで撮ったそのままの画像だったら、大きな画像5枚分のデータが一度に読み込まれることになります。

今回のサンプルで言うと、「2.7MB×5=13.5MB」となります。PCならちょっと遅いくらいで済むかもしれませんが、携帯電話の回線で見ると一度に13MBを処理するのはちょっと大変です。

今回のおたよりで送っていただいたホームページにはこのようなスライドの背景画像がすべてのページに設定されていましたので、ページを切り替えるたびに読み込みが発生して、表示が遅くなっていると考えられます。

表示を早くするには?

2つの方法がありますが、簡単なのは「スライド画像の枚数を減らす」ことです!
できれば1枚にできるとよいです。まずは一度これを試してみてください。

そしてもう1つは、おわかりですよね。
「画像のファイルサイズを減らす」ことです!
減らし方はいろいろありますが、今回は画像のファイルサイズを手軽に減らせるWebサービスをご紹介します。

アップロードボタンをクリックして、圧縮したい画像をアップロードすると、自動的に圧縮がはじまります。終わったら、ダウンロードボタンを押して保存します。

実際にこのサービスを使ってサンプル写真を圧縮してみたら、画像の縦横の大きさは同じなのに、ファイルサイズが「524.3KB」になりました!大きさを変えずにファイルサイズを落とそうとすると画質が落ちるのですが、そこまで大きく落ちずに圧縮できているようです。

こちらを使うとデータ量が減るので、表示が早くなるかもしれません!ぜひ試してみてくださいね。

さて、今回は実験も交えつつ、「画像のサイズ」についてのお話をしてきました。
画像のサイズにも気をつかいながら、快適に見てもらえるホームページづくりに取り組んでみてくださいね!

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

さあ、はじめよう!

はじめてWEB ホームページ公開の7ステップとポイントを動画でご紹介!!

  • ホームページ公開の7ステップ

    ホームページ公開の7ステップ

    ホームページ公開の7ステップ
  • はじめてWEB サービス紹介

    はじめてWEB サービス紹介

    はじめてWEB サービス紹介
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

小さなお店&会社のホームページ Jimdo入門

  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2018/12/2~2018/12/8]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ