「なんとなくダサい」「まとまりがない」
そんなデザインの多くは、配色・フォント・写真選びに原因があります。
今回は、初心者がつまずきやすいこの3つの要素について、すぐに使える具体的なコツを紹介します。
色の基本：トーン＆カラーパレットの選び方
トーンをそろえると一気におしゃれに！
色は“色相”だけでなく「明るさ／鮮やかさ（＝トーン）」が大切です。
同じ色相でも、トーンがバラけると統一感がなくなります。
▶ おすすめ：類似トーンでまとめたカラーパレットを作ること！
- メインカラー（ブランドカラー）
- サブカラー（見出し・ボタンなどに使用）
- アクセントカラー（強調に使う1色だけ）
→ Adobe Color や Coolors などの配色ツールで自動生成がおすすめ。
フォント：読みやすさと印象を決める重要要素
フォントは“2種類まで”が鉄則！
| 種類 | 向いている用途 | 印象 |
|---|---|---|
| ゴシック体 | Webサイト本文・見出し | モダン・読みやすい |
| 明朝体 | タイトル・強調 | 上品・信頼感 |
- 本文はゴシック系で読みやすく
- 見出しだけ別フォントでメリハリをつける
Webで使えるおすすめフォント
- Google Fonts：Noto Sans / Roboto
- モリサワ風：ヒラギノ角ゴ / 游ゴシック
写真・アイコン選び：無料素材サイトを賢く使おう
プロっぽく見えるかどうかは素材選びで8割決まります！
無料写真サイト
- Unsplash（洋風）
- Pixabay（日本語◎）
- 写真AC（日本の素材・人物系）
アイコン・イラスト
- Flaticon（アイコン）
- unDraw（統一感ある線画）
- illustAC（ポップなイラスト）
ポイント：写真はトーンをそろえる／アイコンはスタイルを統一する（線の太さや角丸など）
よくあるNG例と回避のコツ
| NG例 | 改善ポイント |
|---|---|
| 色を5色以上使ってしまう | 使う色は3色＋白黒まで絞る |
| 読みにくい細い明朝体を本文に | 本文はゴシック系（太さregular〜medium） |
| 写真の雰囲気がバラバラ | “明るさ・背景色”が近いものを選ぶ |
| アイコンのテイスト混在 | 1サイト内で同サイトの素材のみ使用 |
まとめ
- 色は「トーンをそろえる」だけでセンス良く見える
- フォントは2種類まで・読みやすさ優先
- 写真・アイコンは無料サイトで統一感を意識して選ぶ
- NG例を避ければ初心者でも“整ったデザイン”が作れる！
次回は「第7回：Figmaなどのデザインツールの使い方」を予定しています。
実際にツールを使って、今回学んだ配色やフォント選びを反映するデザインの作り方をレクチャーします！
