近年、インターネットの利用が急増し、さまざまなデバイスからウェブサイトにアクセスすることが一般的になっています。そのため、レスポンシブデザインはますます重要な要素となっています。この記事では、レスポンシブデザインの重要性について説明します。 ユーザーエクスペリエンスの向上 レスポンシブデザインは、異なるデバイスや画面サイズに応じてウェブサイトのレイアウトが自動的に調整される設計手法です。これにより、ユーザーはどのデバイスからでも快適にサイトを閲覧でき、必要な情報を簡単に見つけることができます。良好なユーザーエクスペリエンスは、ユーザーの満足度を高め、再訪問を促進します。 SEOの改善 Googleは、モバイルフレンドリーなウェブサイトを優先的に評価します。レスポンシブデザインは、検索エンジン最適化（SEO）においても役に立ちます。モバイル用とデスクトップ用の異なるURLを持つのではなく、一つのURLでコンテンツを管理することで、SEO効果が向上し、検索結果での表示順位が上がります。 時間とコストの節約 異なるデバイス用に別々のサイトを開発することは、時間とコストがかかります。しかし、レスポンシブデザインを使用すれば、一つのサイトを維持するだけで済みます。これにより、開発者やデザイナーはリソースをより効果的に活用でき、運用コストも削減できます。 共有しやすさの向上 レスポンシブデザインのウェブサイトは、どのデバイスでも一貫した体験を提供します。そのため、ユーザーがウェブサイトをソーシャルメディアで共有する際、他の人がアクセスしやすくなります。簡単にアクセスできるサイトは、より多くの訪問者を引き付けることができます。 モバイルデバイス利用のトレンドに適応 スマートフォンの普及により、インターネット利用の多くがモバイルデバイスから行われています。レスポンシブデザインは、こうしたトレンドに対応し、すべてのユーザーに等しくアクセス可能な体験を提供します。これにより、より多いユーザーにリーチすることが可能です。 未来への適応力 レスポンシブデザインは、将来的に新しいデバイスや画面サイズが登場しても、柔軟に対応できる利点があります。これにより、サイトが時代遅れになるリスクを軽減し、常に最新の技術に適応することができます。 ページ離脱率の低下 モバイルデバイスに最適化されたウェブサイトは、ユーザーがページをすぐに離れる「バウンス率」を低下させる効果があります。良好なユーザーエクスペリエンスを提供することで、滞在時間が延び、結果的にコンバージョン率が向上します。これは、企業にとって非常に重要なことです。 結論 レスポンシブデザインは、単なるトレンドではなく、現代のウェブ開発において不可欠な要素です。ユーザーの期待に応え、ビジネスの成長を促進するために、レスポンシブデザインを取り入れることは重要なステップとなります。これからの時代において、すべての企業がこのデザイン戦略を検討する必要があります。

Webサイトを構築する際に使用するツールとして、Googleが無料で提供するサイトの分析・診断機能であるLighthouse（ライトハウス）があります。これはパフォーマンスやアクセシビリティ、SEOの指標としても有効なツールです。今回はその中のPerformanceという項目についてまとめました。 Performanceとは Performanceは、ページの読み込みスピード、画像の表示速度、レイアウトシフトなど、ユーザーエクスペリエンスに関連する様々なパフォーマンス指標を評価する項目です。評価の高いページはユーザーにとって快適なページであり、Googleにも高く評価されます。そのため、この基準に沿ったページを作成することはSEOにおいても重要な施策になります。 Performanceの各指標 Largest Contentful Paint （LCP）：メインコンテンツの読み込み時間 Largest Contentful Paintは、メインコンテンツの読み込みから表示されるまでの時間を測定するための指標です。優れたユーザーエクスペリエンスを提供するためには、LCPを2.5秒以内にする必要があります。 Cumulative Layout Shift（CLS）：視覚的な安定性 Cumulative Layout Shiftは、ウェブページの視覚的な安定性を測る指標です。ページが読み込まれる際に、予期しないレイアウトの変更が発生する度合いを表しています。CLSが高いと、ユーザーエクスペリエンスが悪化し、特に読み込み中にコンテンツが移動することで、誤クリックや読みづらさが生じます。CLSは0.1以下にする必要があります。 First Contentful Paint（FCP）：最初のコンテンツ表示にかかるまでの時間 First Contentful Paintは、ウェブページが最初にユーザーにコンテンツを表示するまでの時間を測定する指標です。FCPが優れていると評価されるためには、1.8秒以内であることが理想です。ページの読み込みが開始されてからページ内のコンテンツ（テキスト、画像など）のいずれかが画面上にレンダリングされるまでの時間です。 Total Blocking Time（TBT）：ユーザーがページにアクセスして、実際に入力可能になるまでの時間 Total Blocking Timeは、ウェブページがどれくらいの時間、ユーザーの操作に反応できない状態になるかを測る指標です。数値が小さいほど、ページがスムーズに動くので、使いやすくなります。 Speed Index（SI）：ウェブページが読み込まれて、画面に表示される速さを数値で表したもの Speed Indexは、ウェブページがどれくらい速く表示されるかを測る指標です。数値が小さいほど、ページが速く表示されます。 デバイスの選択 Lighthouseでは、採点時にデバイスとしてモバイルとデスクトップを選べます。モバイルの場合、通信環境を低く設定してシミュレートするため、通常デスクトップに比べて点数が低くなりやすいです。 まとめ パフォーマンスのスコアがデスクトップ、モバイル共に50点以上あれば構築上でのSEOに対しての大きな問題はないと言われています。もちろん、スコアは高ければ高いほど良く、特にモバイルでのスコアを上げることが重要です。モバイルユーザーが増えているため、Googleはモバイルフレンドリーなサイトを高く評価します。Lighthouseを使用すると問題点を指摘してくれるので、指摘に沿った対策をすれば、スコアは改善できると思います。また、サーバーの能力や、WPを使用する事でもスコアは大きく変わるのでコーディングだけでは補えない部分も多くあります。スコアについては評価基準の1つとして、ユーザーが快適に利用できるwebページを構築する為のツールとして使用するのが良いと思います。 ジェイ・ラインでは、サイトのパフォーマンスも考慮しながら最適な採用サイトの制作を行っています。 質の高い魅力的な採用サイト制作を検討しているご担当者様は、お気軽にお問い合わせください。

Webフォントは、デバイスを問わず同じフォントを使用できるという特性があり、沢山のユーザーに使用されています。私も、コーディングする際にwebフォントを読み込み使用しています。 本記事では、サイトのパフォーマンスを上げる観点から、webフォント(主にGoogle Fonts )を使用する際の特性と気をつける点についてまとめました。 webフォントの特性 フォントデータのファイル容量 特に日本語や中国語の場合は文字数が多いため重たいです。「Noto Sans JP」は1ウェイトあたり1.6MBあるため、「Regular (一般的な太さの文字」「Bold(太めの文字)」の2種類を利用すると3.2MBになります。Googleの推奨は1ページあたり1.6MBで、これはすべてのリソース（画像、スクリプト、スタイルシートなど）を含む合計サイズです。したがって、フォントだけで3.2MBを使用するのはページ全体のパフォーマンスに大きな影響を与えています。 https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight?hl=ja FOIT (Flash of Invisible Text) フォントデータをダウンロードしている間にページの描画が止まります。その為、サイト表示速度の低下に繋がります。 FOUT (Flash of Unstyled Text) webフォント読み込み時に代替フォントを表示し、フォントダウンロード後にフォントを置き換えるプロセスです。置き換わる際にチラつきやレイアウトシフトに繋がります。 キャッシュの挙動 当該ページで1度ダウンロードされたフォントデータは一定期間キャッシュされます。(2回目以降キャッシュされたフォントデータを使用するので、キャッシュ期間中はダウンロードされないです。) フォントデータの読み込み時間中のテキストの扱いは、FOITとFOUTのどちらかを選択して構築進める事になります。 フォントの読み込みを効率化する基本施策 必要ないフォントは読み込まない 構築時に不要なfont family, font-weightを一緒に読み込でいる事はありませんか？フォントの種類、太さ、斜体の違いで1つのフォントデータになります。ページに不要なフォントデータは読み込まない事が、一番重要です。ですので、外部からフォントを読み込まないのが最速です。デザインする時から、あまり多くの種類のフォントを使用することは表示速度にも影響すること理解しておくことも大事だと思います。 cssファイルに@importを使用せずに、htmlの<head>内で読み込む。 cssファイル内で読み込む@importに対して高速化する手段がございません。その為、フォントデータの読み込みは<head>内で行う事が基本となります。 Google Fontsを使用する際はリクエストを連結させて、まとめて記述する。 複数に分けてリクエストを記述するのは、余計な通信が発生します。なので、まとめてリクエストする事で通信の回数を少なくするのは基本になります。Google Fontsで設定を行う際は、複数のフォントもまとめて設定するようにしてください。 セルフホスティング フォントデータをダウンロードして、自サーバ内に設置して使用します。自サーバに設置することでパフォーマンス的にも安定して使用できます。※通信環境に問題のない環境であれば、CDNを利用した場合と比べても速さにあまり差はないみたいです。ダウンロードするデメリットとしては、更新が反映されないという事。(逆にサーバーにアップしたものから変わらないという事です。) サブセットを使用する。 この機能については、セルフホスティングした場合のみ使用できる機能です。サブセット化 = 使うフォントだけをフォントファイルにするようなイメージ。日本語書体については効果は大きいですが、使用できる条件は限定的だと思います。 まとめ フォントデータの読み込み時間は、サイトの読み込み速度、レイアウトシフトにも影響します。それはLighthouse（Googleが無料で提供しているWebサイトを分析・診断するための機能）の採点に反映されますのでSEOにも影響がでるということになります。 ですので、Webフォントの使用についてはメリット・デメリットをデザイン面からも理解していただき、コーディングの際もページに不必要なフォントデータは読み込まないなどの当たり前な事をきちんと守って設定することが大事です。 ジェイ・ラインでは、サイトのパフォーマンスも考慮しながら最適な採用サイトの制作を行っています。 質の高い魅力的な採用サイト制作を検討しているご担当者様は、お気軽にお問い合わせください。