①グリッド

グリッドデザイン：テキストや画像などの各要素を格子状（グリッド）に配置するレイアウト手法

ベースをグリッドデザインで組み、要所要所でずらすと整った印象のまま遊び心もプラスできます。

②余白

Webでは余白等を8の倍数で揃えると整った印象になります。
スクリーンサイズも8の倍数なので、合わせやすいため。

8の倍数で設計することで端数が発生しにくく、コンテンツのレイアウトや余白の秩序が維持しやすくなり、コーディングが進めやすくなるというメリットもあります。

③レスポンシブ

PC、タブレット、スマホなど異なる画面サイズに応じてデザインを調整すること。同じ情報でも見やすさや操作のしやすさが変わります。

例）
・PCでは1行に並べるものを、スマホでは縦に積む
・複数の画像やカードは、スライダーやカルーセルにして省スペース化
・表組みは必要に応じて折りたたみ表示

💡ポイント
レスポンシブは「単に小さく縮める」だけでなく、画面サイズごとに見やすさ・操作性を最適化することが重要です。