📝 記事概要
「Webサイトを作ったけど、なんとなくデザインがイマイチ…」
そんな悩みを解決するために、初心者でもすぐに実践できる「美しいWebデザインの基本」を5つのポイントに分けて紹介します！
📌 1. 配色のルールを守る
- カラーパレットを3色以内にする（ベース・メイン・アクセント）
- 例：「#F4F4F4（ベース）」「#007AFF（メイン）」「#FF9500（アクセント）」
- 色の組み合わせが難しい場合は、Adobe Color や Coolors でパレットを作成
📌 2. フォントを統一する
- タイトル用と本文用の2種類で統一
- 例：タイトル → 「Noto Sans」 / 本文 → 「M PLUS 1p」
- 行間（1.5倍程度）や文字の大きさを意識
📌 3. 余白（ホワイトスペース）を活用する
- 文字や画像を詰め込みすぎない！
- 各ブロックの間に適度な余白を入れることで視認性が向上
- GoogleやAppleのサイトを参考にしてみると分かりやすい
📌 4. 直感的なナビゲーションを作る
- メニューは**「5つ以内」**にまとめる
- CTA（Call To Action）は目立つ色に！（例：「お問い合わせ」ボタンを赤系にする）
- パンくずリストを設定して迷子にならない設計に
📌 5. モバイル対応（レスポンシブデザイン）
- スマホで見たときに崩れないか Googleのモバイルフレンドリーテスト で確認
- フォントサイズは 16px以上 を推奨（小さすぎると読みにくい）
- ボタンは指で押しやすいサイズ（40px × 40px 以上） に設定
📌 まとめ
✅ 色・フォント・余白を意識するだけでデザインが洗練される！
✅ ナビゲーションのわかりやすさがサイトの使いやすさを左右する！
✅ モバイル対応を忘れずに！
💡 これらのポイントを押さえて、より美しいWebサイトを作りましょう！
