バナー・Webデザインの構図パターンから、黄金比などのデザイン理論、配色・作業効率化の無料ツールまで、「感覚ではなく理屈で組み立てるデザイン」の知識を体系的にまとめたガイドページです。
「要素をなんとなく配置している」「色選びに時間がかかる」「Photoshopでガイドをどう引けばいいかわからない」——こうした悩みの多くは、構図と配色の“型”を知らないことが原因です。型を先に覚えれば、迷う時間が減り、仕上がりの説得力も上がります。
このページは「構図の基本 → デザインの基礎・設計ルール → 時短ツール → AIの活用」の順に並んでいます。はじめての方は構図の基本から順に、制作中の方は課題に合ったセクションから読み進めてください。
構図の基本
三分割法・対角線・日の丸構図といった視線誘導の型と、黄金比・白銀比などの比率理論。バナーにもWebデザインにも共通する土台です。
- バナーデザインの構図パターン — 三分割・対角線・日の丸で視線を操る基礎。型の選び方から解説
- Photoshop・Illustratorで構図を再現する方法 — 三分割グリッドや黄金比ガイドの具体的な引き方
- 黄金比・白銀比・白金比の使い方 — バナーやロゴに応用できる比率のデザイン理論
Webデザインの基礎と設計ルール
構図とあわせて押さえたい、デザイン全体の基礎原則と、カンプ制作前に決めておくべき数値のルール。
- Webデザインの基礎点検 — 作り終えた画面を症状から逆引きし、領域ごとに合否ラインで測る
- デザインカンプ前に決めるWebデザインのルール — ウィンドウ幅・コンテンツ幅・カラム設計の決め方
- Webデザインの参考サイトの探し方 — 探せる単位で使い分け、共通構造を抜き出してワイヤーに落とす手順
- 構造・視覚・文字を守れたか検品する — 色を抜く／ぼかすなど3つのテストで作ったものを確かめる
- ワイヤーフレームのテンプレート集 — LPの定番構成を並べて、カンプ前の骨組みを組める無料ツール
デザイン作業を速くする無料ツール
配色・グラデーション・ショートカット・文字素材・画像補正を、ブラウザだけで使える無料ツールと使い方ガイドで時短できます。
- 色の辞書の使い方 — 日本の伝統色とCSS名前付き色を由来から引ける色辞典ツール
- CSSグラデーションジェネレーターの使い方 — linear/radial/conic対応・伝統色プリセット内蔵の生成ツール
- ショートカットキー チートシートの使い方 — Photoshop・Illustrator・Figmaなどアプリ別一覧と自分専用マイ一覧
- 手書き風文字ジェネレーター — 入力した文字を手書き風にしてPNG・SVGで書き出せる無料ツール
- 画像を高画質化する無料ツール — ボケ補正とAI超解像で小さな素材を引き伸ばす
AIでデザイン作業を進める
AIに画像を作らせる・デザインツールを操作させるときの、できることと限界を実際に試して確かめた記事です。
- Figma MCPでワイヤーフレームとバナーを作らせた — Claude CodeからFigmaを操作して分かった得意・不得意
- AI画像で商品バナーは作れるか — DomoAIで日本語と価格表記がどこまで崩れないかを検証
- ClaudeでPhotoshopを操作する2つの方法 — 公式コネクタとExtendScriptの使い分け
関連ガイド
デザインをコードに落とし込む段階では、模写コーディングやCSSの実装テクニックが役立ちます。
- 模写コーディング一覧 — 初級〜上級・Figma模写でデザインの観察力と実装力を鍛える
- CSS実装テクニック集 — 基礎・レイアウト・アニメーション・設計手法を体系化
- サイト構造の設計手順 — ページ洗い出しから階層を組み立てる情報設計のやり方
- AIガイド — AI動画・Claude Codeでのツール操作・MCP連携・AIコーディングを目的別にまとめたハブ
配色に迷ったときは、記事を経由せず 色の辞典 から直接色を探すこともできます。
グラデーションのCSSをすぐ作りたい方は 和の色グラデーションをご活用ください。