デザインセンスは磨ける｜非デザイナーが見た目の良い成果物を作るコツ

2026年2月4日

榊原隼人

この記事のポイント

✓非デザイナーのエンジニアやライターでもデザインセンスは後天的に磨ける
✓レイアウトの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年代風になる

なお、背景と文字のコントラスト不足は「見栄え」だけの問題ではなく、誰もが情報にアクセスできるかという観点でも重要だ。淡いグレーの文字を白い背景に乗せると、若い人には読めても、明るい屋外や視力の弱い人には判別しづらくなる。クライアントの提案資料やWebサイトは不特定多数が見るものだから、自分の環境で読めるかどうかだけで判断してはいけない。配色を整えることは、見た目の良さと同時に、誰にとっても読みやすい成果物づくりにそのままつながる。

原則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サイトの表彰
Pinterest	デザインインスピレーション全般
SANKOU!	日本のWebデザインギャラリー

3. 「デザイン模写」をする

良いと思ったデザインを、Canvaで再現してみる。模写はデザイン力を鍛える最速の方法だ。週1回、30分で十分。

デザイン力が単価に与える影響

職種	デザイン力なし	デザイン力あり	差額
エンジニア	75万円/月	85万円/月	+10万円
ライター	30万円/月	40万円/月	+10万円
マーケター	50万円/月	65万円/月	+15万円

特に提案資料やポートフォリオの見た目は、スキルが同じでも単価に差をつける要因になる。（職種別の年収データを見る）

デザインの基礎は、DX人材に求められる素養としても無視できない要素になりつつある。デザイン思考やコンテンツデザインといった領域は、職種を問わず価値を生むスキルとして体系のなかに位置づけられている。

経済産業省とIPAが策定した「デジタルスキル標準」では、DXを推進する人材に共通して求められる素養として、データやデジタル技術の活用に加え、利用者視点で課題を捉え価値を生み出す力が重視されている。 IPA「スキル標準（デジタルスキル標準）」

ポートフォリオの作り方は「フリーランスのポートフォリオの作り方」を参照。Webデザイナーとしてのスキルアップに興味がある人は「Webデザイナーが学ぶべきコーディングスキル」も読んでみてほしい。

まとめ

デザインセンスは才能ではなく知識
余白、配色、フォント、レイアウトの4原則を押さえる
余白を意識するだけで見た目は5割改善する
配色は3色以内、フォントは2種類以内
ツールはCanvaが最強。テンプレートの「引き算」で使う
デザイン力は月10〜15万円の単価差を生む

「センスがない」と諦める前に、まず4原則を試してほしい。驚くほど簡単に成果物の質が上がるはずだ。

よくある質問

Q. 資料作成の際、どの原則から着手すべきですか？

まずは「近接」と「整列」から始めるのが最も効果的なコツです。情報を意味ごとにグループ化して距離を近づけ（近接）、左揃えなど一定のラインに沿って配置する（整列）だけでも、散らかった素人っぽい印象はほぼ完全に解消されます。その後に「対比」でメリハリをつけるとスムーズです。

Q. デザインの原則を学ぶのに最適なソフトウェアは何ですか？

特定のソフトウェアに依存するものではありません。初心者が原則を意識してレイアウトを組む練習をするには、PowerPointやCanvaが直感的でおすすめです。データ分析の文脈であれば、TableauやLooker StudioといったBIツールでも全く同じ四大原則が適用できます。

Q. Four Basic Principles（四大原則）は誰が提唱したものですか？

米国のデザイナーであるRobin Williams（ロビン・ウィリアムズ）氏の著書『ノンデザイナーズ・デザインブック』で広く知られるようになりました。長年にわたり世界中で読まれている、デザインの基礎を学ぶための必読書であり、多くのノンデザイナーのバイブルとなっています。

Q. フリーランスデザイナーに必要なツールは？

ツール	用途	月額費用
Figma（Professional）	UI/UXデザイン	約2,200円
Adobe Creative Cloud	画像編集、印刷物	約7,780円
Notion	プロジェクト管理	無料〜
Slack	クライアント連絡	無料〜
freee / マネーフォワード	会計・請求書	約1,300円〜

税金の計算方法や経費にできるものについてはフリーランスの税金完全ガイドやフリーランスの経費一覧も参考にしてください。

Q. 著作権とかフォントのライセンスが怖いです……？

これは絶対におろそかにしたらアカンやつです。無料素材でも「商用利用不可」のものがありますし、フォントもライセンス違反をすると、最悪の場合クライアントを巻き込んで訴訟問題になります。必ず「商用利用OK」と明記されているものだけを使いましょう。Adobe Fontsのような定額制サービスを使うのが一番安心です。