スマホサイトに重要なページの表示スピードを考えたWebサイトの制作
投稿日:2020.04.01.
更新日:2025.04.12.

執筆・編集 衣川 知秀デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。

3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み:AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条:私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
執筆記事:記事一覧ページ
今や新しく制作されるほとんどのホームページはスマートフォン対応しています。スマートフォン対応するということはそれだけスマートフォンでサイトにアクセスされているという事になります。
スマートフォンでは通信速度や容量制限によりサイト表示するまでに時間が掛かる事があります。そのため、デザインがしっかりてとても見た目もよいサイトでも表示スピードが遅ければユーザーの直帰率が高くなってしまうことがあります。
ホームページはスマートフォン対応にしたものの、サイトの容量が大きすぎて表示スピードが遅くユーザーが離脱するようなことでは制作した意味がありません。また、Googleの検索順位の基準の一つとしてページのモバイル上の表示スピードを取り入れていることを考えれば、サイトスピードの改善はとても重要です。
このTREVOのサイトでも表示スピードを意識したサイト制作をしています。
「TREVOのホームページの改良点について」
ページの表示スピードが遅くなる原因
コンテンツが重い
webページは画像、テキスト、動画など様々な要素で構成されています。
その中でコンテンツ容量に影響しやすい要素は画像になります。
今主流のレスポンシブWebデザインではパソコンとスマートフォン両方で同じ画像を使うことがほとんです。
そのためパソコンサイズに合わせて作成した画像をスマートフォンで読み込もうとすると容量が大きく表示スピードが遅くなる原因となります。
2017年のGoogleの調査によるとページの表示スピードが3秒かかるだけで32%の離脱になり、5秒になると90%にな跳ね上がると調査結果がでています。
JavaScriptの多様
スライドショー、スマホ用バーガーメニュー、画像のポップアップなど、cssだけでは表現できないことを実現させてくれるJavaScriptですが、多様しすぎるとページを読み込むスピードは遅くなります。
外部ファイルの読み込み
ページを表示するには、画像、JavaScript、cssなど様々なファイルと通信してページを表示しています。
そのため、フォント、JavaScrip、画像などファイル数だけ通信して読み込むことになります。
外部ファイルが多いほど読み込むスピードは遅くなります。
改善方法
画像容量の軽減
制作時はパソコンサイズに合わせたサイズになりどうしても画像容量が大きくなってしまいます。
また、pngで作成した画像はjpegに比べてファイルサイズが大きくなります。
画像サイズを軽くすると画像が荒れてしまいますが、ファイル圧縮を利用すれば比較的綺麗なまま画像サイズを軽くすることができます。
画像を圧縮するには下記のサイトから画像をアップロードすることで圧縮することができます。
外部ファイルの圧縮
css、JavaScripはファイル内の改行が多いほどファイル容量が大きくなります。
圧縮をすると改行が無くなるため、次にファイルを編集するときに編集しずらくなるのでサーバーにアップするファイルは編集用とは別に用意するといいです。
不要な外部ファイルを削除する
制作時にテストで読み込んだり、以前は使っていたが使う必要が無くなったファイルがそのままコードに残っている場合があるので定期的にチェックして削除しましょう。
サーバーを変える
制作者が出来ることを全て行ってそれでも表示スピードが遅い場合は、サーバーサイドに問題があると考えられます。
サーバの性能が悪いと制作側ではどうしようもありません、その場合サーバーの乗り換えを考えてみてはいかかでしょうか。
まとめ
今のホームページ制作は画像、ファイルの軽量化は必須といっても過言ではありません。
Googleも検索指標としてモバイルファーストインデックス(MFI)をうたっています。要はスマートフォンサイトを評価してインデックスするようになっています。
ホームページ制作をする上で表示スピードを意識したを心がけるようにしましょう。
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。