—
date: “2026-05-04”
series: “Webデザイン学習ログ”
episode: 1
title: “Webデザイン、何から学べばいい？”
platform: note
status: draft
tags: [Webデザイン, デザイン初心者, 独学, 学習記録]
—
# Webデザイン、何から学べばいい？
「Webデザインを学びたい」と思ってから、しばらく何もできなかった。
「Figma 使い方」「Webデザイン 独学」と検索しては、情報量に圧倒されて閉じる——その繰り返し。そこでいったん立ち止まって、**「まず何を知ればデザインが良くなるのか」** を整理するところから始めました。
ツールより先に、知識が土台になる。それが最初の気づきでした。
—
## ① 余白を「怖がらない」
デザイン初心者がやりがちなのは、画面をぎゅうぎゅうに埋めてしまうこと。情報を詰め込むほど、逆に読みにくくなります。
余白は「何もない空間」ではなく、**要素を引き立てるための設計**。余白が広いほど、残った要素が重要に見える。プロのデザインを見ると、思ったより何も置いていないことに気づきます。
**やること**: 作ったデザインの余白を1.5倍に広げてみる。それだけで印象がガラッと変わる。
—
## ② フォントは2種類まで
フォントをいろいろ使いたくなるけれど、混在するほど画面がうるさくなります。
基本は**見出し用・本文用の2種類**で十分。さらに言うと、同じフォントでもサイズと太さを変えるだけで、強弱は十分つけられます。
**気をつけること**: 「なんとなくかっこいいから」でフォントを選ばない。まず読みやすさを優先する。
—
## ③ 色は3色ルールで整理する
配色に迷ったら、**メインカラー・サブカラー・アクセントカラーの3色**で構成するのが基本。
– メイン：画面の主役になる色（ブランドカラーなど）
– サブ：背景や補助に使う控えめな色
– アクセント：ボタンや強調に使う、目を引く色
色を増やすほどまとまりが崩れます。迷ったらサブカラーをメインの薄い色にするだけでも統一感が出る。
—
## ④ 「揃える」だけでプロっぽくなる
テキストや画像の端がバラバラに置かれているデザインは、それだけで素人っぽく見えます。
**左端、右端、中央——どれか一つの軸に揃える**。それだけで視覚的な秩序が生まれ、見やすさが格段に上がります。Figmaには自動でガイドラインを引く機能があるので、積極的に使うのがおすすめ。
—
## ⑤ 「強弱」をつける
デザインの中ですべての要素が同じ大きさ・同じ色だと、どこを見ればいいかわからなくなります。
**一番伝えたいことを大きく・目立たせ、補足情報は小さく・薄く**。この強弱があるだけで、ユーザーの視線が自然に誘導されます。
気をつけること：「なんとなく全部大きくする」のが一番やってしまいがち。優先度を決めてから配置する。
—
## まず意識するとしたら
この5つの中で、今日から使えるのは **「揃える」と「余白を広げる」** の2つです。ツールを使いこなす前に、この2つを意識するだけでデザインの印象は変わります。
知識は一気に身につけなくていい。一つ意識して、一つ試す——その繰り返しが結局一番早い気がしています。
—
次回：デザインの4原則（近接・整列・反復・コントラスト）を深掘りします
—
#Webデザイン #デザイン初心者 #独学 #学習記録
