こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Web制作のトレンドは年々変化しており、数年前までは当たり前だったコーディング手法が、現在では非推奨になっていることも珍しくありません。
特に、保守性・拡張性・パフォーマンスを考慮したコーディングが求められる今、上級Webデザイナーとして活躍するためには、最新の知識を常にアップデートすることが重要です。
本記事では、2025年のWeb制作において押さえておくべき「コーディングの新常識」を10個紹介します。
これを意識することで、よりスマートで効率的なコーディングができるようになります。
また、以下の関連記事も参考にしながら、さらにレベルアップを目指していきましょう！
1. !importantは使わない
!importantを多用すると、CSSの優先順位が管理しづらくなり、後から修正したいときに影響範囲が大きくなります。【改善策】
・適切なセレクタ設計を行う（BEMやSMACSSを活用）
・コンポーネントごとにスタイルを適用する（CSS ModulesやScoped CSSを使用）
background-color: red !important;
}
background-color: red;
}
2. widthとmax-widthは併用する
widthを固定すると、レスポンシブ対応が難しくなり、異なる画面サイズでレイアウトが崩れる原因になります。
そのため、max-widthを併用することで、より柔軟なデザインが可能になります。
【改善策】
width: 1200px;
}}
max-width: 1200px;
width: 100%;
}
3. heightで固定しない
高さを固定すると、コンテンツ量が変わった際にレイアウト崩れの原因になります。min-heightを指定しておくことで、柔軟なデザインが可能になります。
【改善策】
height: 300px;
}
min-height: 300px;
}
4. overflow: hiddenを使わない
overflow: hiddenを安易に使うと、スクロールが必要なコンテンツが見えなくなる可能性があります。
代わりにclip-pathやoverflow: autoを活用しましょう。
【改善策】
overflow: hidden;
}
clip-path: inset(0 0 0 0);
}
5. Sassでファイルを分割管理する
CSSを1つのファイルにまとめるのではなく、Sass（SCSS）を活用してファイルを分割管理すると、保守性が向上します。
【ファイル構成例】
├── _reset.scss
├── _header.scss
├── _footer.scss
├── main.scss
6. position: absoluteよりflexやgridを活用する
絶対配置を多用すると、レスポンシブ対応が難しくなります。レイアウトにはflexboxやgridを優先的に使用しましょう。
【改善策】
display: flex;
justify-content: space-between;
}
7. pxではなくremを使用する
フォントサイズや余白の指定にはpxではなく、remを使うことで、デバイスに応じた適切なサイズ調整が可能になります。
【改善策】
font-size: 1rem; /* 16px */
}
8. hoverエフェクトをスマホで考慮する
スマホではhoverが効かないため、代替手段として:focusやタップイベントを活用するのが重要です。
【改善策】
.button:focus {
background-color: blue;
}
9. アニメーションはCSSで処理する
JavaScriptを使わずに、transformやopacityを活用することで、GPU処理が最適化され、よりスムーズな動きになります。
【改善策】
transition: transform 0.3s ease-in-out;
}
10. 画像のlazy-loadingを活用する
ページの読み込み速度を向上させるために、画像にはloading="lazy"を設定しましょう。
【改善策】
<img src="image.jpg" loading="lazy" alt="説明">
まとめ
今回紹介した10の新常識を押さえることで、より保守性・拡張性の高いコーディングが可能になります。
特に、レスポンシブ対応・パフォーマンスの最適化・CSS設計の見直しを意識することが大切です。
「なんとなく」書いていたコードを見直し、より効率的なWeb制作を目指しましょう！
