バナー・Webデザインの構図パターンから、黄金比などのデザイン理論、配色・作業効率化の無料ツールまで、「感覚ではなく理屈で組み立てるデザイン」の知識を体系的にまとめたガイドページです。
「要素をなんとなく配置している」「色選びに時間がかかる」「Photoshopでガイドをどう引けばいいかわからない」——こうした悩みの多くは、構図と配色の“型”を知らないことが原因です。型を先に覚えれば、迷う時間が減り、仕上がりの説得力も上がります。
このページは「構図の基本 → デザインの基礎・設計ルール → 時短ツール」の順に並んでいます。はじめての方は構図の基本から順に、制作中の方は課題に合ったセクションから読み進めてください。
構図の基本
三分割法・対角線・日の丸構図といった視線誘導の型と、黄金比・白銀比などの比率理論。バナーにもWebデザインにも共通する土台です。
- バナーデザインの構図パターン — 三分割・対角線・日の丸で視線を操る基礎。型の選び方から解説
- Photoshop・Illustratorで構図を再現する方法 — 三分割グリッドや黄金比ガイドの具体的な引き方
- 黄金比・白銀比・白金比の使い方 — バナーやロゴに応用できる比率のデザイン理論
Webデザインの基礎と設計ルール
構図とあわせて押さえたい、デザイン全体の基礎原則と、カンプ制作前に決めておくべき数値のルール。
- Webデザインの基礎9つ — 余白・整列・コントラストなど、デザインの土台になる原則を解説
- デザインカンプ前に決めるWebデザインのルール — ウィンドウ幅・コンテンツ幅・カラム設計の決め方
デザイン作業を速くする無料ツール
配色・グラデーション・ショートカットの3領域を、ブラウザだけで使える無料ツールと使い方ガイドで時短できます。
- 色の辞書の使い方 — 日本の伝統色とCSS名前付き色を由来から引ける色辞典ツール
- CSSグラデーションジェネレーターの使い方 — linear/radial/conic対応・伝統色プリセット内蔵の生成ツール
- ショートカットキー チートシートの使い方 — Photoshop・Illustrator・Figmaなどアプリ別一覧と自分専用マイ一覧
関連ガイド
デザインをコードに落とし込む段階では、模写コーディングやCSSの実装テクニックが役立ちます。
- 模写コーディング一覧 — 初級〜上級・Figma模写でデザインの観察力と実装力を鍛える
- CSS実装テクニック集 — 基礎・レイアウト・アニメーション・設計手法を体系化
- サイト構造の設計手順 — ページ洗い出しから階層を組み立てる情報設計のやり方
配色に迷ったときは、記事を経由せず 色の辞典 から直接色を探すこともできます。
グラデーションのCSSをすぐ作りたい方は 和の色グラデーションをご活用ください。