機能満載のサイトはいいサイト？　表示速度と見やすさから考えるサイト改善

インターネットが一般に広がり始めたころ、ホームページは今よりも作り手の個性が前面に出る場所でした。
文字を横に流すマーキー、ページを開くと流れるMIDI、点滅するGIFアニメーション、アクセスカウンターなど、覚えた機能を次々と盛り込んだ経験がある人もいるのではないでしょうか。使えるようになったタグを試したくなり、機能を詰め込んだホームページを作っていた人も少なくなかったはずです。

当時は、ホームページ・ビルダーのようなソフトで見た目を整える人がいる一方で、HTMLを覚えたばかりの人が、できることを確かめるように装飾や動きを加えていました。情報を分かりやすく整理することだけでなく、自分の手で文字や画像を動かせること自体が、ホームページ作りの楽しさでした。

そうした時代を象徴するサイトの一つが、愛生会病院の旧ホームページです。院長が自ら制作したサイトには、音楽や動く画像、鮮やかな色など、当時のホームページで使われていた表現が数多く取り入れられていました。現在のサイトとは大きく異なる見た目ながら、作り手の熱意や人柄が伝わるサイトとして、多くの人の記憶に残りました。

現在は通信速度や端末性能が向上し、HTMLやCSSなどの技術も進歩しています。WebPのように画像の容量を抑えやすい形式も使われるようになり、以前より複雑な表現を軽く表示できるようになりました。しかし動画やアニメーション、外部サービスを重ねれば、今でもサイトは重くなります。

機能を多く備えたサイトが、必ずしも見やすく使いやすいサイトとは限りません。
ここでは、昔と今のホームページ作りを比べながら、表示速度と見やすさを両立するサイト改善について説明します。

昔のホームページは機能を試す場所だった

現在のWebサイトでは、見やすさや情報の探しやすさを考えて、必要な機能を選ぶことが求められます。しかし、ホームページが広まり始めたころは、サイトを作ること自体が新しく、覚えた技術を試す楽しさがありました。

愛生会病院のサイトが記憶に残った理由

初期のホームページ文化を語るうえで、愛生会病院の旧サイトは象徴的な存在です。黒を基調とした画面に鮮やかな文字が並び、画像が動き、ページを開くと音楽が流れるなど、さまざまな表現が取り入れられていました。
院長自身がホームページ作りを学び、病院の情報を発信するために制作した手作りのサイトでした。整ったデザインとは別のところに、作り手の熱意や人柄が感じられたことが、多くの人の記憶に残った理由でしょう。

Webサイトは、見やすく整理されていれば必ず覚えてもらえるとは限りません。写真や文章、色、動きから、その会社や作り手らしさが伝わってこそ、印象に残ります。一方で、情報を探す人にとっては、どこを見ればよいのか迷う場面もあったはずです。人の目を引く表現と、必要な情報へ案内する設計は、必ずしも同じではありません。

覚えたタグを全部使いたくなった時代

当時のホームページ作りには、ホームページ・ビルダーなどの制作ソフトで画面を見ながらレイアウトを整える方法と、HTMLタグを自分で覚えて一つずつ書き加えていく方法がありました。

タグを覚え始めた人にとって、新しい機能は使ってみたくなるものでした。文字を左右に流すマーキー、点滅する文字、MIDI、GIFアニメーションなど、覚えた機能を次々と追加していきました。
タグだけでなく、CGIと呼ばれる仕組みを使い、掲示板やチャット、アクセスカウンターを設置する人も多くいました。レンタルサーバーが用意した無料のCGIをアップロードしてパーミッションを設定するだけで動かせるものもあれば、公開されているC言語のソースコードをサーバー上でコンパイルして使うものもあり、サーバーの環境に合わせて調整する手間が必要な場合もありました。
アクセスカウンターには、「1000番を踏んだ方は掲示板へ」といったキリ番の文化もありました。数字が少ないと寂しく見えるため、最初からある程度の数を設定することもあり、現在のサイトで使われる導入実績とは性質の異なる、運営を楽しむための遊びでした。

HTMLを覚え始めたころは、知っているタグをできるだけ使いたくなり、文字を動かしたり音を流したりした人も多かったはずです。見やすさを冷静に考えるというより、「こんなこともできるようになった」と確かめること自体が楽しかったのでしょう。
当時のホームページは、情報を届ける場所であると同時に、技術を試す練習帳でもありました。

技術は進歩しても盛り込みたくなる気持ちは変わらない

現在は、昔よりも速く、きれいで、動きのあるサイトを作りやすくなりました。しかし、使える機能が増えたからといって、すべてを入れる必要はありません。

通信環境とWeb技術が変えたサイト作り

初期のホームページでは、画像を数枚表示するだけでも時間がかかることがありました。現在は光回線や高速なモバイル通信が普及し、パソコンやスマートフォンの処理能力も向上しています。HTMLやCSS、JavaScriptも進歩し、以前より複雑な表現を実現しやすくなりました。

画像形式にも変化があります。かつてはJPEGやGIF、PNGが中心でしたが、現在はWebpやAVIFといった、画質を保ちながら容量を抑えやすい形式も使われています。仮に1枚300KBのJPEG画像を10枚掲載した場合、Webpへの変換で25％容量を削減できれば、合計で750KBほど軽くできる計算です。ただし削減率は写真や圧縮状態によって変わるため、表示する大きさに合わせて画像の寸法も調整する必要があります。

幅800ピクセルで表示する画像に幅4000ピクセルのデータをそのまま使えば、Webpにしても無駄が残ります。画面に入るまで見えていない画像は、スクロールに合わせて後から読み込む方法もあります。選べる技術が増えた分、何を使うかだけでなく、どの大きさで、どのタイミングで読み込ませるかまで考えられるようになりました。

今のサイトにもある機能の盛り込みすぎ

現在のサイトは、昔のホームページほど派手に見えなくても、画面の裏側で多くの機能が動いています。
ファーストビューの動画、スクロールに合わせたアニメーション、複数のスライダー、Webフォント、チャットボット、SNSの埋め込み、アクセス解析、広告配信や効果測定のタグなど、追加できるものは数多くあります。一つひとつに目的があっても、重なれば読み込むデータや処理は増え、画面上の動きが多すぎて訪問者がどこを見ればよいのか分からなくなる場合もあります。

昔のホームページは、動く文字や点滅する画像が並んでいたため、機能を盛り込みすぎていることが一目で分かりました。現在はデザインが整っている分、見た目だけでは分かりにくくなっています。表示に時間がかかったり、操作しようとした瞬間に画面が動いたりすれば、訪問者には使いにくいサイトです。

動画や静止画で伝えにくい内容を補えているか、アニメーションで見る順番を分かりやすくできているか、チャットボットが訪問者の疑問を減らせているか。機能を追加するときは、何を伝えるために必要なのかを起点に考えることが大切です。
魅せる工夫をなくす必要はありませんが、使える機能をすべて盛り込むことが、よいサイト作りではありません。

表示速度を測り必要なものを選ぶ

サイトの重さは、作っている人の感覚だけでは判断できません。普段見ている環境では問題なく表示されていても、初めて訪れる人には遅く感じられる場合があります。実際の表示状況を確認しながら、必要な改善を進めることが大切です。

作り手はキャッシュで遅さに気づきにくい

サイトを制作したり更新したりしている人は、同じページを何度も開くため、画像やCSS、JavaScriptなどのデータがブラウザのキャッシュに保存され、2回目以降は短い時間で表示されます。そのため、大きな画像や複数の機能が入っていても、作り手はそれほど重さを感じないことがあります。
初めて訪れる人の端末にはキャッシュがなく、画像やプログラムを一から読み込むため、表示に時間がかかります。

閲覧する環境も人によって異なり、高速な社内回線では問題なくても、スマートフォンのモバイル回線や電波の弱い場所では表示速度が変わります。表示を確認するときは、キャッシュを削除した状態やシークレットモードで、スマートフォンからモバイル回線で開いてみると、訪問者に近い状態で判断できます。

PageSpeed Insightsで改善点を確認する

表示速度を客観的に調べる方法として、Googleが提供するPageSpeed Insightsがあります。調べたいページのURLを入力すると、スマートフォンとパソコンの表示状況を確認でき、改善が必要な部分も示されます。まずは、容量の大きな画像がないか、表示する大きさに対して画像の寸法が大きすぎないか、使っていないプログラムを読み込んでいないかといった分かりやすい部分から確認できます。

ページを開いた直後には見えない画像まで最初から読み込んでいる場合は、スクロールで近づいたときに読み込むよう変更すれば、初回表示の負担を減らせます。
動画やSNS、地図、チャットボットなど外部サービスから読み込む機能にも注意が必要です。自社サイト内の画像を軽くしても、外部のプログラムが多ければ表示に時間がかかります。アクセス解析や広告効果測定のタグも、長く運用しているうちに使われていないものが残っているかもしれません。

点数を100点にすることだけを目的にする必要はありません。診断結果を見ながら、訪問者にとって必要なものと、なくても困らないものを分けることが重要です。大きすぎる画像を調整し、JPEGやPNGをWebpなどへ変換し、最初の表示に不要な画像を後から読み込むようにし、使っていない機能やタグを整理する。こうした改善を一つずつ進めるだけでも、表示速度は変わります。

まとめ

かつてのホームページには、作り手が覚えた技術を試す楽しさがありました。マーキーやMIDI、GIFアニメーション、アクセスカウンターなどを盛り込み、画面をにぎやかにしていくこと自体が、サイト作りの魅力でした。愛生会病院の旧サイトが今も語られているのも、単に機能が多かったからではなく、院長が自ら作り、思いや個性を画面に表していたからこそ、多くの人の記憶に残ったのでしょう。

現在は通信環境や端末性能が向上し、Webpなどの新しい画像形式も使えるようになり、以前より多くの表現を短い時間で表示しやすくなっています。しかし機能を増やせば読み込むデータや処理は増え、動画やアニメーション、外部サービスを重ねれば今でもサイトは重くなります。

大切なのは機能を減らすことではなく、その機能が誰に何を伝えるために必要なのかを考えることです。見た目を印象的にするのか、情報を探しやすくするのか、問い合わせへ案内するのか。
目的がはっきりしていれば、必要な機能と不要な機能を分けやすくなります。作り手の環境では快適でも、初めて訪れる人には遅く感じられることがあるため、PageSpeed Insightsなどで表示速度を確認し、画像の容量や使われていない機能を見直す必要があります。

機能満載のサイトが、必ずしもよいサイトとは限りません。見た人が迷わず情報へたどり着き、その会社らしさも感じられること。そのために必要な表現を選び、できるだけ軽く届けることが、現在のサイト作りには求められています。
自社サイトの表示速度が遅い、スマートフォンで見にくい、情報を増やした結果どこから直せばよいか分からない。そんな課題がある場合は、画像や機能だけでなく、ページ全体の構成から見直す必要があります。

伝えたい内容を整理し、見やすさと表示速度を両立したWebサイトの制作・改善をご検討の際は、是非ご相談ください。