グラフィックデザイン
デジタルメディアと印刷メディアにおいて、プロフェッショナルなビジュアルデザインを作成するための包括的なガイドです。
デザインの基本
デザインの7原則
| 原則 | 定義 | 活用方法 |
|---|
| バランス | 視覚的な均衡 | 対称、非対称、放射状 |
| コントラスト | 要素間の違い | サイズ、色、形、質感 |
| 強調 | 焦点の作成 | 階層によって視線を誘導する |
| 動き | 視覚的な流れの方向 | リーディングライン、反復 |
| パターン | 要素の反復 | リズムと統一感を生み出す |
| リズム | 視覚的なテンポ | 規則的、流動的、段階的 |
| 統一感 | 一貫性のある全体 | 全体を通じてスタイルを統一する |
色彩理論
カラーモデル
| モデル | 用途 | 構成要素 |
|---|
| RGB | デジタル画面 | 赤、緑、青（0-255） |
| CMYK | 印刷メディア | シアン、マゼンタ、イエロー、キー／ブラック |
| HSL | デザインツール | 色相、彩度、明度 |
| Hex | Web／CSS | #RRGGBB 形式 |
配色の調和
Complementary: Opposite on wheel (high contrast)
Analogous: Adjacent colors (harmonious)
Triadic: 3 equidistant colors (vibrant)
Split-Comp: Base + 2 adjacent to complement
Tetradic: 4 colors forming rectangle
Monochromatic: Single hue, varying saturation/lightness
色彩心理学
| 色 | 連想されるイメージ | 用途 |
|---|
| 赤 | エネルギー、緊急性、情熱 | CTA、セール、警告 |
| 青 | 信頼、落ち着き、プロフェッショナル | 企業、テクノロジー、金融 |
| 緑 | 成長、自然、健康 | エコ、ウェルネス、お金 |
| 黄 | 楽観、注意、温かさ | ハイライト、注意喚起 |
| 紫 | 高級感、創造性、知恵 | プレミアム、クリエイティブ |
| オレンジ | 熱意、自信 | CTA、若者向けブランド |
| 黒 | 洗練、力強さ | 高級、エディトリアル |
| 白 | 清潔、ミニマル、純粋 | モダン、医療 |
アクセシブルな色のコントラスト
WCAG AA Requirements:
- Normal text: 4.5:1 minimum contrast ratio
- Large text (18pt+): 3:1 minimum
- UI components: 3:1 minimum
WCAG AAA Requirements:
- Normal text: 7:1 minimum
- Large text: 4.5:1 minimum
Tools: WebAIM Contrast Checker, Stark, Color Safe
タイポグラフィ
書体の分類
| カテゴリー | 特徴 | 用途 |
|---|
| セリフ体 | 装飾的なストローク | 印刷、エディトリアル、フォーマル |
| サンセリフ体 | すっきりとして、ストロークがない | デジタル、モダン、UI |
| スラブセリフ体 | 太く、ブロック状のセリフ | 見出し、ブランディング |
| スクリプト体 | 手書き風 | 招待状、ロゴ |
| ディスプレイ体 | 装飾的で個性的 | 見出しのみ |
| 等幅フォント | 固定幅 | コード、技術用途 |
文字の階層
Display: 48-72px (Hero headlines)
H1: 32-48px (Page titles)
H2: 24-32px (Section headers)
H3: 20-24px (Subsections)
Body: 16-18px (Readable text)
Caption: 12-14px (Secondary info)
Micro: 10-12px (Legal, footnotes)
タイポグラフィのルール
- フォント数を制限：プロジェクトごとに最大2～3種類
- コントラストのある組み合わせ：セリフ体＋サンセリフ体は相性が良い
- 行の高さ：本文では1.4～1.6
- 行の長さ：45～75文字が最適
- 文字間隔：すべて大文字のテキストでは広げる
- 配置：本文は左揃えにする（読みやすいため）
フォントの組み合わせ例
Headlines + Body:
- Playfair Display + Source Sans Pro
- Montserrat + Merriweather
- Oswald + Lato
- Roboto Slab + Roboto
- DM Serif Display + DM Sans
レイアウトと構成
グリッドシステム
12-Column Grid (Most Common):
├─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┤
│1│2│3│4│5│6│7│8│9│10│11│12│
Common Column Spans:
- Full width: 12 columns
- Two-thirds: 8 columns
- Half: 6 columns
- One-third: 4 columns
- One-quarter: 3 columns
- Sidebar: 3-4 columns
余白のシステム（8ptグリッド）
/* Base unit: 8px */
--space-1: 4px; /* 0.5x - tight */
--space-2: 8px; /* 1x - base */
--space-3: 16px; /* 2x - comfortable */
--space-4: 24px; /* 3x - section gap */
--space-5: 32px; /* 4x - group separation */
--space-6: 48px; /* 6x - major sections */
--space-7: 64px; /* 8x - page sections */
--space-8: 96px; /* 12x - hero spacing */
三分割法
┌───────┬───────┬───────┐
│ │ │ │
│ ●───┼───● │ │ Place key elements
├───────┼───────┼───────┤ at intersection
│ │ │ │ points (●)
│ ●───┼───● │ │
├───────┼───────┼───────┤
│ │ │ │
└───────┴───────┴───────┘
視覚的階層を作るテクニック
- サイズ：大きいほど重要
- 色：明るい色や彩度の高い色は注意を引く
- コントラスト：コントラストが高いと焦点になる
- 余白：孤立させることで強調が生まれる
- 位置：左上（Fパターン）または中央
- タイポグラフィ：太字、異なるフォント、大文字
ファイル形式
ラスター（ピクセルベース）
| 形式 | 最適な用途 | 備考 |
|---|
| JPG/JPEG | 写真、グラデーション | 非可逆圧縮、透過非対応 |
| PNG | グラフィック、透過 | 可逆圧縮、ファイルサイズ大 |
| GIF | シンプルなアニメーション | 最大256色 |
| WebP | Web画像 | 圧縮率が高く、モダン |
| AVIF | Web画像 | 最新形式、画質とサイズのバランスが最適 |
ベクター（数式ベース）
| 形式 | 最適な用途 | 備考 |
|---|
| SVG | Webグラフィック、アイコン | 拡大縮小可能、アニメーション対応 |
| AI | Adobe Illustrator | ネイティブ形式 |
| EPS | 印刷、旧形式 | 汎用ベクター形式 |
| PDF | 印刷、ドキュメント | ベクターを保持 |
書き出しのガイドライン
Web Graphics:
- Icons: SVG (or PNG fallback)
- Photos: WebP with JPG fallback
- Illustrations: SVG or WebP
- Resolution: 72 DPI minimum, 2x for retina
Print Graphics:
- Resolution: 300 DPI minimum
- Color: CMYK mode
- Format: PDF/X or TIFF
- Bleed: 0.125" (3mm) on all sides
デザインツール
業界標準
| ツール | 最適な用途 | プラットフォーム |
|---|
| Figma | UI/UX、コラボレーション | Web、デスクトップ |
| Adobe Photoshop | 写真編集、ラスター | デスクトップ |
| Adobe Illustrator | ベクターグラフィック | デスクトップ |
| Sketch | UIデザイン | macOSのみ |
| Affinity Designer | ベクター（Illustratorの代替） | デスクトップ |
| Canva | 手早いデザイン | Web |
無料の代替ツール
| ツール | 代替対象 | プラットフォーム |
|---|
| GIMP | Photoshop | デスクトップ |
| Inkscape | Illustrator | デスクトップ |
| Photopea | Photoshop | Web |
| Vectr | Illustrator | Web |
デザインシステム
コンポーネント構造
Atoms:
- Colors, typography, icons
- Buttons, inputs, labels
Molecules:
- Form fields (label + input + helper)
- Cards (image + title + description)
- Navigation items
Organisms:
- Header (logo + nav + actions)
- Forms (multiple fields + submit)
- Product cards grid
Templates:
- Page layouts
- Grid structures
Pages:
- Specific instances with real content
命名規則
Colors:
- primary, secondary, accent
- success, warning, error, info
- gray-100 through gray-900
- background, surface, text
Components:
- btn-primary, btn-secondary, btn-ghost
- card-default, card-elevated, card-outlined
- input-default, input-error, input-disabled
印刷デザインの詳細
標準的な印刷サイズ
US Paper:
- Letter: 8.5" × 11"
- Legal: 8.5" × 14"
- Tabloid: 11" × 17"
International (ISO):
- A4: 210 × 297mm
- A3: 297 × 420mm
- A5: 148 × 210mm
Business Cards:
- US: 3.5" × 2"
- EU: 85 × 55mm
印刷チェックリスト
ベストプラクティス
DO：
- スケッチやワイヤーフレームから始める
- 一貫したスペーシングシステムを使用する
- 実際のサイズでデザインをテストする
- 早い段階から頻繁にフィードバックを得る
- まずアクセシビリティを考慮してデザインする
- 可能な限り実際のコンテンツを使用する
- スタイルガイドやデザインシステムを作成する
DON'T：
- 3種類を超えるフォントを使用しない
- 意味を伝える手段を色だけに頼らない
- 余白を無視しない
- 画像を引き伸ばしたり変形させたりしない
- 低解像度の画像を使用しない
- 長い段落を中央揃えにしない
- モバイル対応やレスポンシブデザインを忘れない
デザインレビューのチェックリスト
