デザインセンスは磨ける｜非デザイナーが見た目の良い成果物を作るコツ
この記事のポイント
- ✓非デザイナーのエンジニアやライターでもデザインセンスは後天的に磨ける
- ✓レイアウトの4原則を押さえれば
- ✓見た目の良い成果物を作れるようになります
「自分にはデザインセンスがない」
エンジニアやライターがよく言う台詞だ。僕も元SIerで、デザインは完全に畑違いだった。でもフリーランスになると、提案資料、ポートフォリオ、ちょっとしたバナー作成など、「デザイン的なもの」を自分で作る場面が増える。
結論から言う。デザインセンスは才能ではなく、知識だ。 4つの原則を知るだけで、成果物の見た目は劇的に変わる。
デザインの4原則
まず全体像を示す。デザインの基本原則はたった4つだ。
| 原則 | 内容 | 効果 |
|---|---|---|
| 余白（スペーシング） | 要素間に十分な余白を取る | 「プロっぽさ」の80%はこれで決まる |
| 配色 | 使う色は3色以内 | 統一感が出る |
| フォント | フォントは2種類以内 | 読みやすさが向上 |
| レイアウト（揃え） | 要素を見えない線で揃える | 整理された印象 |
ぶっちゃけ、余白だけ意識すれば見た目は5割改善する。デザイナーが見て「素人っぽい」と感じる最大の原因は、余白の不足だ。
原則1：余白（スペーシング）
なぜ余白が重要か
| 余白あり | 余白なし |
|---|---|
| 読みやすい | 窮屈で読みづらい |
| プロフェッショナル | 素人感がある |
| 情報が整理されて見える | 情報が詰め込まれて見える |
具体的な数値ルール
非デザイナーが迷わないよう、具体的な数値を示す。
| 場所 | 推奨余白 |
|---|---|
| テキストの行間 | 文字サイズの1.5〜1.8倍 |
| 段落間 | 行間の2倍以上 |
| セクション間 | 段落間の2〜3倍 |
| カードの内側余白 | 24〜32px |
| ページの左右余白 | 画面幅の10〜15% |
「迷ったら余白を増やす」。これが非デザイナーの鉄則だ。余白が多すぎて失敗することはほとんどない。余白が少なくて失敗することは多い。
原則2：配色
3色ルール
使う色は3色以内に抑える。
| 色の役割 | 面積比 | 例 |
|---|---|---|
| ベースカラー | 70% | 白、薄いグレー |
| メインカラー | 25% | ブランドカラー（青、緑など） |
| アクセントカラー | 5% | 強調色（赤、オレンジなど） |
配色で失敗しないツール
自分で配色を考える必要はない。ツールに頼る。
| ツール | 用途 | 費用 |
|---|---|---|
| Coolors | 配色パレット自動生成 | 無料 |
| Adobe Color | 色の相性チェック | 無料 |
| Tailwind CSS Colors | Web開発用の配色 | 無料 |
| Realtime Colors | Webサイトの配色プレビュー | 無料 |
避けるべき配色
| NG | 理由 |
|---|---|
| 原色の多用（赤、青、黄を全部使う） | 目がチカチカする |
| 彩度が高すぎる色の組み合わせ | 安っぽく見える |
| 背景と文字のコントラスト不足 | 読めない |
| グラデーションの乱用 | 2010年代風になる |
原則3：フォント
フォントは2種類以内
| 用途 | 推奨フォント（日本語） | 推奨フォント（英語） |
|---|---|---|
| 見出し | Noto Sans JP Bold | Inter Bold |
| 本文 | Noto Sans JP Regular | Inter Regular |
非デザイナーが使うべきフォントは「Noto Sans JP」一択。 Google Fontsで無料、ウェイト（太さ）のバリエーションも豊富。迷う必要がない。
フォントサイズの目安
| 要素 | Web | プレゼン資料 |
|---|---|---|
| 大見出し（h1） | 32〜40px | 36〜48pt |
| 中見出し（h2） | 24〜28px | 28〜36pt |
| 小見出し（h3） | 18〜22px | 24〜28pt |
| 本文 | 16px | 18〜20pt |
| 注釈 | 12〜14px | 14〜16pt |
見出しと本文のサイズ比率
見出しは本文の1.5〜2倍のサイズにする。この比率を守るだけで、情報の階層構造が明確になる。
原則4：レイアウト（揃え）
見えない線で揃える
要素を左揃え、中央揃え、右揃えのいずれかで統一する。混在させない。
| 配置 | 適した場面 |
|---|---|
| 左揃え | テキスト中心のコンテンツ（最も安全） |
| 中央揃え | 短いテキスト、見出し、ランディングページ |
| 右揃え | 数値、日付など限定的な用途 |
迷ったら左揃え。日本語も英語も、人間の目は左から右に読む。左揃えが最も自然で読みやすい。
グリッドシステム
Webデザインでは12カラムグリッドが標準。知っているだけで、要素の配置に迷わなくなる。
| カラム数 | 使い道 |
|---|---|
| 12（全幅） | ヒーローセクション |
| 6+6（2分割） | 比較レイアウト |
| 4+4+4（3分割） | カードレイアウト |
| 3+9（サイドバー＋メイン） | ダッシュボード |
| 8+4（メイン＋サイド） | ブログ記事 |
実践：非デザイナーが使うべきツール
デザインツール
| ツール | 用途 | 費用 | 難易度 |
|---|---|---|---|
| Canva | バナー、SNS画像、プレゼン | 無料（Pro: 月1,000円） | ★☆☆☆☆ |
| Figma | UIデザイン、ワイヤーフレーム | 無料（個人利用） | ★★★☆☆ |
| v0 by Vercel | AIでUIコンポーネント生成 | 無料（制限あり） | ★★☆☆☆ |
| PowerPoint/Keynote | 提案資料 | 既存ライセンス | ★★☆☆☆ |
非デザイナーにはCanvaが最強。 テンプレートを選んで文字を変えるだけで、それなりの成果物ができる。
テンプレートの活用法
ゼロから作るのではなく、既存のテンプレートをカスタマイズする。
- Canva/Figmaでテンプレートを選ぶ
- テキストを自分の内容に差し替える
- 色をブランドカラーに変更
- 不要な要素を削除（足すのではなく引く）
「引き算」がポイントだ。テンプレートの要素を足すのではなく減らすほうが、洗練された印象になる。
デザインセンスを日常で鍛えるトレーニング
1. 良いデザインを「分析」する
ただ見るだけでなく「なぜこれが良いと感じるか」を言語化する。
- 余白はどれくらい取っているか
- 色は何色使っているか
- フォントは何を使っているか
- 要素はどう揃えているか
2. ギャラリーサイトを定期的に見る
| サイト | 内容 |
|---|---|
| Dribbble | UIデザインのギャラリー |
| Awwwards | 優秀なWebサイトの表彰 |
| デザインインスピレーション全般 | |
| SANKOU! | 日本のWebデザインギャラリー |
3. 「デザイン模写」をする
良いと思ったデザインを、Canvaで再現してみる。模写はデザイン力を鍛える最速の方法だ。週1回、30分で十分。
デザイン力が単価に与える影響
| 職種 | デザイン力なし | デザイン力あり | 差額 |
|---|---|---|---|
| エンジニア | 75万円/月 | 85万円/月 | +10万円 |
| ライター | 30万円/月 | 40万円/月 | +10万円 |
| マーケター | 50万円/月 | 65万円/月 | +15万円 |
特に提案資料やポートフォリオの見た目は、スキルが同じでも単価に差をつける要因になる。
ポートフォリオの作り方は「フリーランスのポートフォリオの作り方」を参照。Webデザイナーとしてのスキルアップに興味がある人は「Webデザイナーが学ぶべきコーディングスキル」も読んでみてほしい。
まとめ
- デザインセンスは才能ではなく知識
- 余白、配色、フォント、レイアウトの4原則を押さえる
- 余白を意識するだけで見た目は5割改善する
- 配色は3色以内、フォントは2種類以内
- ツールはCanvaが最強。テンプレートの「引き算」で使う
- デザイン力は月10〜15万円の単価差を生む
「センスがない」と諦める前に、まず4原則を試してほしい。驚くほど簡単に成果物の質が上がるはずだ。
@SOHOでデザインスキルを活かした案件を探そう
@SOHOは手数料0%で、デザイン系からエンジニアリング系まで幅広い案件が揃っている。デザイン力を身につけたら、報酬の100%が手元に入る環境で実力を試してみよう。
この記事を書いた人
榊原 隼人
フルスタックエンジニア・テックライター
SIerで8年間システム開発に携わった後、フリーランスエンジニアに転身。React/Next.js/Pythonを中心に開発案件をこなしながら、技術系の記事を執筆しています。
