233 ページの読み込み速度
たった数秒の遅延でも、ユーザーの離脱率が大幅に増加してしまいます。
ナビゲーション、レイアウト
多くのユーザーは、当然はじめてサイトを訪れることになります。
そのため目的の情報の場所やページをすぐ見つけれるようなデザインはユーザーエクスペリエンスの向上に有効です！
下記はとくに影響が大きいポイントです
- CTAの位置
- ナビゲーションの有無
モバイルファースト
一般的にユーザーの多くはスマホでサイトをみていますよね。
そのため「モバイルファーストで設計しよう」となるのですが、思ったより結構考慮すべき点が多いんですよね！
- レスポンシブデザイン
- タップしやすいサイズ
- タッチ操作前提（ホバーに依存しない）
- モバイルは特に回線が不安定になりやすい（電車内、郊外など）のでサクサク表示できるよう軽量化する
| 項目 | 内容 | なぜ重要？ |
|---|---|---|
| HTMLの軽量化 | ・無駄なdivを減らす・シンプルな構造にする | DOM（ブラウザが読み込む要素）が多いとスマホで処理が遅くなる |
| 画像の最適化 | ・必要最低限のサイズにリサイズする ・ WebP形式を使う・ lazyloadを付ける | スマホは画像表示で一番重くなるので、これだけで劇的に速くなる |
| CSSの軽量化 | ・未使用CSSを削除 ・CSSファイルをミニファイ（圧縮） ・小さなCSSは <style>でインライン化もあり | 無駄なCSSは、特にモバイルでレンダリング（描画）を遅くする |
| JavaScriptの軽量化 | ・必要ないJSライブラリは読み込まない ・小さなJSはミニファイ ・必要なページだけJSを読み込む | JSはスマホのCPU負荷が高く、読み込みと実行が遅くなりやすい |
| フォントの最適化 | ・Webフォントを最小限にする ・必要な文字セットだけを使う | フォント読み込みもモバイルでは重くなる要素 |
| サーバー指示 | ・サーバー側キャッシュを利用できるように指示する（.htaccessとか） ・画像やCSS/JSに適切なキャッシュ制御を設定 | 何回も同じファイルを取りに行かないようにできる |
| レンダリングブロック防止 | ・CSSや重要なJS以外は「遅延読み込み（defer / async）」にする | ページをすぐ見せる（＝First Paint）ために大事 |
マークアップ時の注意点
| 項目 | コーディングポイント | ポイント |
|---|---|---|
| ページ読み込み速度 | ・画像の最適化（適切なサイズ、WebP化、lazyload） ・CSS/JSの最適化（ミニファイ、不要読み込みの削除） ・HTML構造の整理（不要なdivや重いタグの削減） | ページ表示が速くなると、離脱率が劇的に下がる。コーダーの工夫が直結する部分。 |
| ナビゲーションのしやすさ | ・適切なリンク設置（クリックしやすいリンクサイズ、ARIA属性） ・パンくずリストの実装 ・アンカーリンクの正確な設置 | HTMLレベルでナビゲーションをわかりやすく補助できる。SEOにも効果あり。 |
| CTA配置・設計サポート | ・CTAボタンをHTMLできちんと目立たせる（大きめ、適切な配置） ・タップしやすいサイズ設定（モバイル考慮） ・フォーム要素のアクセシビリティ強化 | デザインに指示がある場合でも、コーダー側で「使いやすいか？」を意識して組める。特にモバイル重視。 |
| デザイン一貫性・構造 | ・統一されたHTML/CSS設計（ボタンやカードのパターンを揃える） ・コンポーネント化・再利用性を意識 ・アクセシビリティ対応（alt属性・ラベル） | デザインをただ組むだけではなく、「揃える」「再利用できる」コードを書くことで、UXに寄与できる。 |
| モバイル最適化 | ・レスポンシブコーディング（モバイルファースト） ・タッチ操作前提でコーディング（ホバー依存にしすぎない） ・モバイル高速化（軽量コード意識） | PCだけでなくスマホ中心で設計・コーディングするだけで、離脱率を大幅に下げられる。 |