“裏側”から整える：Webサイトのコンディションを保つ6つのポイント

Webサイトは企業の顔として、日々ユーザーと接する重要な存在です。

だからこそ、デザインやレイアウトといった表面的な部分にばかり注目しがちではありませんか？

実は、HTML・CSS・JavaScriptなど、サイトの裏側ともいえるソースコードの部分にも、パフォーマンスやセキュリティに関わる多くの“気にすべきポイント”が潜んでいます。

これらが長期間メンテナンスされていないと、サイトの表示速度が遅くなったり、セキュリティ面での脆弱性が生じている可能性があります。また、最新技術のベストプラクティスを取り入れることで全体的なパフォーマンス改善を期待できる場合があります。

今回は、そうした“裏側”に焦点を当て、フロントエンドエンジニアの視点から、Webサイトのコンディションを良好に保つための6つのチェックポイントをご紹介します。

サイトの改善やリニューアルを検討している方に役立つ内容です。

1. 表示速度改善：自社のWebサイト、表示が遅いと感じたことはありませんか？

Webサイトを閲覧する際、ページの表示が遅いと感じたり、そのまま途中で閲覧を諦めた経験はありませんか？

このような状態では、ユーザー体験（UX）が損なわれ、サイトの離脱率が増加することにもつながります。

こうした遅延が発生する原因はさまざまで、サーバーの応答時間の遅さ、JavaScriptやCSSの読み込みの問題、最適化されていない画像ファイルなどが考えられます。

そこで鍵となるのが、Googleが提唱する『Core Web Vitals（コア・ウェブ・バイタルズ）』です。これらの指標を活用することで、表示速度や操作性に関する課題を可視化し、その結果をもとに遅延の原因を特定、適切な改善を行うことで、ユーザー体験（UX）の向上が期待できます。

2. セキュリティ上の脆弱性リスク：古いバージョンのライブラリを使用していませんか？

Webサイトに動きや機能を追加する際には、さまざまなライブラリが活用されています。ライブラリとは、特定の機能や処理を簡単に実装できるようにまとめられたコードの集まりです。これらを使うことで、アニメーションやインタラクションを効率よく追加することができます。

例えば、JavaScriptのライブラリ『jQuery』もその一つで、古いバージョンを使い続けていると、クロスサイトスクリプティング(XSS)^*といったセキュリティ上の脆弱性のリスクが高まってしまいます。そのまま放置していると、知らない間に自社のサイトが他者の犯罪行為に巻きこまれてしまう可能性もあります。

対策として、最新版の脆弱性対策済みバージョンにアップデートすることが推奨されます。

一度導入した技術も、時代の流れや技術の進化にあわせて、見直しやアップデートが必要になる日がやってきます。そのためにも、Webサイトを定期的にチェックすることはとても大切です。

リスクを回避するだけでなく、企業の信頼性やブランド価値を守るうえでも重要な取り組みとも言えるでしょう。

3. デバイスの多様化：スマホ・タブレットでも快適に閲覧できますか？

自社のWebサイトは、PCとスマートフォン、タブレットなど、それぞれのデバイスに適した設計・デザインになっているでしょうか？
一部のページのみがモバイル表示に対応していたり、PCサイトとモバイルサイトで情報量に差があったりしていませんか？

Webサイトの閲覧環境や端末は、今や多種多様となっています。

現在のGoogle検索では、2018年にモバイルファーストインデックス（MFI）が導入され、検索順位の決定においてモバイル版のコンテンツを優先的に評価・インデックス化しています。つまり、モバイル端末への対応が遅れているということは、検索順位が下がる可能性があり、その結果、届けたいユーザーに情報を届けることができていない可能性が高いということでもあります。

操作性の面でも、問題が起きることがあります。
たとえば、PC画面を前提に作られたWebサイトをモバイルデバイスで見ると、以下のようなトラブルが起きやすくなります。

• 横スクロールが発生し、操作しづらくなる
• 文字や画像が小さくて見にくい
• ボタンやリンクが小さすぎる、間隔が狭くタップしにくい

こうした問題は、ユーザーにとって使いにくいと感じさせてしまい、結果的にページから離れてしまう大きな要因となってしまいます。

現在では、Googleが推奨する「レスポンシブデザイン」を採用することが一般的です。レスポンシブデザインとは、1つのソースコードでブラウザ幅にあわせてレイアウトを最適化する手法のことで、PCサイトとモバイルサイト別々にファイルを用意する必要がなく、同一のコンテンツとして管理することができるため、メンテナンス性が向上します。

このようにそれぞれのデバイスに適した設計・デザインを行うことで、ユーザーには「使いやすさ」を提供でき、企業側にとっても運用の効率化が期待できます。双方にとってメリットの大きい取り組みと言えるでしょう。

4. ブラウザ、HTML・CSSの進化：ソースコードを整理してパフォーマンス向上を期待

Webサイトは、Google ChromeなどのWebブラウザで閲覧しますが、各ブラウザの仕組みが異なるため、Webサイトの見た目や動作に差が生じることがあります。
これまでのWeb制作では、主にInternet Explorer（IE）に対応するために多くの時間を費やし、個別対応のコードを追記するなどして、ブラウザ間での差異を最小限に抑えるよう調整してきました。

しかし、2022年6月15日にInternet Explorer 11のサポートが終了したことにより、多くのプロジェクトでIE対応の必要性が薄れ、今ではIE向けのソースコードは実質不要となりました。もし自社のサイトがIEをターゲットブラウザとして作られている場合、これを機にソースコードを整理することで、軽量化が少し進むかもしれません。

さらに、HTML・CSSも進化しており、JavaScriptなしでデザインや機能を実現できるケースが増え、それによりパフォーマンスアップが期待できる部分も出てきました。

画像のフォーマットについても、WebP（ウェッピー）・AVIF（エーブイアイエフ）といった次世代画像フォーマットを使用することで、JPEG・PNG・GIFよりもファイルサイズを小さくしつつ、高品質な画像を提供することができるようになってきています。

5. 正しいマークアップの重要性：人にもコンピューターにも適切に情報を届けることができていますか？

普段私たちが閲覧しているWebページは、HTMLという言語で記述されたファイルが表示されています。

このHTMLファイルの中では、テキストや画像などのコンテンツをコンピューターが理解できるように、「タグ」と呼ばれる目印を使って構造化されています。例えば、ページの主要な見出しは「h1」というタグで囲まれ、箇条書きのリストは「ul」タグを用いて記述するなど、一つひとつの要素に意味を与えていきます。この作業をマークアップと呼びます。

しかし、適切なタグが使われず「表示されていればOK」と受け取れるようなソースコードを記述しているサイトも、残念ながら存在しています。自社のWebサイトにおいても、一見すると問題ないようにみえても、実はコンピューターには正しく理解されていない部分があるかもしれません。

正しくマークアップを行うことは、コンピューターだけでなく、届けたい「人」に対しても正しく伝えることにつながります。例えば、スクリーンリーダーを使ってWebサイトを閲覧しているユーザーにとっては、情報が理解しやすくなり、操作や移動もスムーズになります。

誰にとってもわかりやすく、やさしいWebサイトを目指したいですね。

6. アクセシビリティ対応：今が取り組みのチャンスです

“裏側”の部分でいうと、画像の代替テキスト（alt属性）もその一つではないでしょうか？
代替テキストとは、画像の内容をテキストで説明したもので、画像が表示されない場合やスクリーンリーダーを使用する場合に、alt属性に記入したテキストが代替テキストとして読み上げられます。これにより、視覚的には見えなくてもそこにある情報を得ることができます。また、検索エンジンも代替テキストを通じて画像の内容を理解します。
代替テキストは、その画像の目的や文脈に応じて適切に設定することが重要です。

ソースコードでは、以下のalt属性に記入されている「〇〇」の部分が代替テキストにあたります。

<img src=”****.png” alt=”〇〇”>

代替テキストは一例ですが、『アクセシビリティ対応』そのものが、世界的な法整備や企業の社会的責任の観点から無視できない存在となってきています。

世界各国でウェブアクセシビリティの法整備が進んでいることから、グローバル展開を行う企業にとっては、自社サイトが適切に対応できているかを確認することが重要になっています。対応の遅れは、罰則や訴訟といったリスクにもつながりかねません。

日本での動きでいうと、2024年4月1日に改正された「障害者差別解消法」では「合理的配慮」が義務化され、ウェブアクセシビリティは努力義務である「環境の整備」に含まれていますが、今後は義務化される可能性もあり、今が取り組みのチャンスでもあります。

D&I（ダイバーシティ＆インクルージョン）やESG経営への関心が高まる中、ウェブアクセシビリティは企業の責任ある取り組みとして重視されており、企業価値の向上にも寄与します。

まとめ：ビジネスを支えるWebサイトへ、まずはできることから

今回ご紹介した6つのポイントは、Webサイトを安全かつ快適に保ち、より多くのユーザーにとって使いやすいものにするために重要な視点です。

Webサイトは、世界中に情報を発信し、ユーザーとの信頼関係を築くための重要なコミュニケーションツールであり、ビジネスにおいても非常に強力な武器となります。
だからこそ、表面的な部分だけでなく、見えにくい“裏側”のソースコードを健全に保つことが重要であり、人間でいえば“健康診断”のような役割を果たします。

まずは気になる部分から少しずつ見直していくことも継続的な改善への第一歩となります。
「どこから手をつければよいかわからない」「自社サイトの現状が把握できていない」といったお悩みがあれば、ぜひお気軽にご相談ください。