canvas-design

キャンバスデザイン

HTML Canvas または Python の画像処理ライブラリを使って、目を引く静的デザインを作成します。

デザインの原則

構図

• 三分割法：重要な要素をグリッド線に沿って配置します
• 視覚的階層：サイズ、色、位置で重要度を示します
• 余白：ネガティブスペースを活かして上品に仕上げます
• バランス：フォーマルな印象には対称的な構図、動きのある印象には非対称な構図を使います

色彩理論

• 補色：色相環で反対に位置する色（高いコントラスト）
• 類似色：隣り合う色（調和のとれた印象）
• 三色配色：等間隔に位置する3色（鮮やかな印象）
• パレットは3～5色に絞ります

タイポグラフィ

• ディスプレイ用フォントと本文用フォントをそれぞれ1種類選びます
• 一貫した階層構造を保ちます
• 読みやすさ（コントラスト、サイズ）を確保します

Python Canvas（Pillow + Cairo）

from PIL import Image, ImageDraw, ImageFont
import cairo

# Create canvas
width, height = 1200, 800
surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, width, height)
ctx = cairo.Context(surface)

# Background gradient
pattern = cairo.LinearGradient(0, 0, 0, height)
pattern.add_color_stop_rgb(0, 0.1, 0.1, 0.2)
pattern.add_color_stop_rgb(1, 0.05, 0.05, 0.1)
ctx.set_source(pattern)
ctx.paint()

# Draw shapes
ctx.set_source_rgba(1, 0.3, 0.3, 0.8)
ctx.arc(600, 400, 150, 0, 2 * 3.14159)
ctx.fill()

# Add text
ctx.set_source_rgb(1, 1, 1)
ctx.select_font_face("Sans", cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_BOLD)
ctx.set_font_size(48)
ctx.move_to(400, 600)
ctx.show_text("Hello Design")

# Save
surface.write_to_png("design.png")

HTML Canvas から画像へ

const canvas = document.createElement('canvas');
canvas.width = 1200;
canvas.height = 800;
const ctx = canvas.getContext('2d');

// Draw
ctx.fillStyle = '#1a1a2e';
ctx.fillRect(0, 0, 1200, 800);

ctx.fillStyle = '#e94560';
ctx.beginPath();
ctx.arc(600, 400, 150, 0, Math.PI * 2);
ctx.fill();

// Export
const dataUrl = canvas.toDataURL('image/png');

デザインスタイル

• ミニマリスト：色数を抑え、余白を多くとり、すっきりとした線を使います
• ブルータリスト：飾らない、大胆なタイポグラフィと強いコントラストが特徴です
• グラスモーフィズム：すりガラスのような効果と控えめな境界線を使います
• レトロ／ヴィンテージ：落ち着いた色、テクスチャ、クラシックなタイポグラフィを使います
• 抽象：幾何学図形、グラデーション、芸術的な構図を使います