Gemini Canvasを使って、写真をアップロードするだけで「チェキ風」の画像に加工できるツールを作ってみました。

プログラミングの知識は不要です。AI（Gemini）に日本語でやりたいことを伝えるだけで、誰でも簡単にオリジナルのツールが作れます。今回はその制作の裏側である「メイキング」を共有します！

写真をアップするだけでチェキ風の画像に簡単に写真を加工ができます。日付スタンプ・フレームの変更などもできます。アップされた画像はどこにも保存されず、あなたのパソコン上にのみ表示されるので、安全にご利用いただけます。

HTML コードビューア

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
  /* 範囲選択スライダーのカスタマイズ（ブラウザ間の差異吸収） */
  input[type=range] {
    -webkit-appearance: none;
    background: transparent;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ec4899; /* pink-500 */
    cursor: pointer;
    margin-top: -6px; 
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e5e7eb;
    border-radius: 2px;
  }
  /* Canvasのタッチ操作無効化（スクロール防止） */
  canvas {
    touch-action: none;
  }
</style>
</head>
<body class="bg-transparent">

<!-- アプリケーションラッパー -->
<div id="instax-app" class="font-sans text-gray-800 p-4 md:p-8 max-w-6xl mx-auto">
  
  <!-- ヘッダー -->
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 flex items-center gap-2">
      <i data-lucide="image" class="w-8 h-8 text-pink-500"></i>
      チェキ風メーカー
    </h1>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
    
    <!-- 左側：プレビューエリア -->
    <div class="lg:col-span-7 flex flex-col items-center justify-start gap-6 bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
      <div class="w-full flex justify-between items-center bg-gray-100 p-3 rounded-lg mb-4">
        <span class="text-sm text-gray-500 font-medium flex items-center gap-2">
          プレビュー
          <span id="drag-hint" class="hidden text-xs font-normal text-pink-600 bg-pink-100 px-2 py-0.5 rounded-full flex items-center gap-1">
            <i data-lucide="move" class="w-3 h-3"></i>ドラッグで移動可能
          </span>
        </span>
        <div class="flex gap-2">
          <label class="cursor-pointer bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 text-sm transition-colors shadow-sm">
            <i data-lucide="upload" class="w-4 h-4"></i>
            写真を選択
            <input type="file" id="image-upload" accept="image/*" class="hidden" />
          </label>
        </div>
      </div>

      <!-- Canvas表示エリア -->
      <div class="relative shadow-xl rounded-sm overflow-hidden bg-gray-200 cursor-move" style="max-width: 100%;">
        <canvas id="canvas-preview" class="max-w-full h-auto block" style="max-height: 70vh;"></canvas>
        <div id="no-image-msg" class="absolute inset-0 flex items-center justify-center text-gray-400 pointer-events-none">
          <p>写真をアップロードしてください</p>
        </div>
      </div>

      <button id="download-btn" disabled class="mt-4 w-full md:w-auto px-8 py-3 rounded-xl font-bold text-lg flex items-center justify-center gap-2 transition-all shadow-md bg-gray-300 text-gray-500 cursor-not-allowed">
        <i data-lucide="download" class="w-5 h-5"></i>
        画像を保存する
      </button>
    </div>

    <!-- 右側：コントロールパネル -->
    <div class="lg:col-span-5 flex flex-col gap-4">
      
      <!-- 1. サイズ選択 -->
      <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
        <div class="flex items-center gap-2 mb-3 text-gray-700 font-bold">
          <i data-lucide="layout-template" class="w-5 h-5"></i>
          サイズ選択
        </div>
        <div class="grid grid-cols-3 gap-2" id="size-buttons">
          <!-- JSで生成 -->
        </div>
      </div>

      <!-- 2. フィルター & レタッチ -->
      <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
        <div class="flex items-center gap-2 mb-3 text-gray-700 font-bold">
          <i data-lucide="refresh-ccw" class="w-5 h-5"></i>
          フィルター
        </div>
        <div class="grid grid-cols-3 gap-2 mb-4" id="filter-buttons">
          <!-- JSで生成 -->
        </div>

        <div class="space-y-4 pt-2 border-t border-gray-100">
          <div class="space-y-1">
            <div class="flex justify-between text-xs text-gray-500">
              <span class="flex items-center gap-1"><i data-lucide="sun" class="w-3 h-3"></i> 明るさ</span>
              <span id="brightness-val">100%</span>
            </div>
            <input type="range" id="brightness-input" min="50" max="150" value="100" class="w-full">
          </div>
          <div class="space-y-1">
            <div class="flex justify-between text-xs text-gray-500">
              <span class="flex items-center gap-1"><i data-lucide="maximize" class="w-3 h-3"></i> コントラスト</span>
              <span id="contrast-val">100%</span>
            </div>
            <input type="range" id="contrast-input" min="50" max="150" value="100" class="w-full">
          </div>
        </div>
      </div>

      <!-- 3. フレーム設定 -->
      <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
        <div class="flex items-center gap-2 mb-3 text-gray-700 font-bold">
          <i data-lucide="palette" class="w-5 h-5"></i>
          フレーム
        </div>
        
        <div class="flex gap-4 mb-4">
          <label class="flex items-center gap-2 text-sm cursor-pointer">
            <input type="radio" name="frameType" value="color" checked class="text-pink-500 focus:ring-pink-500">
            単色カラー
          </label>
          <label class="flex items-center gap-2 text-sm cursor-pointer">
            <input type="radio" name="frameType" value="image" class="text-pink-500 focus:ring-pink-500">
            画像背景
          </label>
        </div>

        <div id="frame-color-options" class="flex flex-wrap gap-2">
          <!-- JSで生成 -->
          <label class="relative cursor-pointer ml-2 bg-gray-100 hover:bg-gray-200 w-auto px-3 rounded-lg flex items-center text-xs h-8">
            <input type="color" id="frame-color-picker" value="#ffffff" class="opacity-0 absolute inset-0 w-full h-full cursor-pointer">
            <span>カスタム</span>
          </label>
        </div>

        <div id="frame-image-uploader" class="hidden">
          <label class="block w-full text-center border-2 border-dashed border-gray-300 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition-colors">
            <span class="text-sm text-gray-500">背景用画像をアップロード</span>
            <input type="file" id="frame-pattern-upload" accept="image/*" class="hidden" />
          </label>
          <p id="frame-image-status" class="text-xs text-green-600 mt-2 text-center hidden">画像設定済み</p>
        </div>
      </div>

      <!-- 4. オプション -->
      <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
        <div class="flex items-center gap-2 mb-3 text-gray-700 font-bold">
          <i data-lucide="settings" class="w-5 h-5"></i>
          オプション
        </div>
        
        <div class="space-y-3">
          <div class="flex items-center justify-between">
            <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
              <input type="checkbox" id="show-date" class="rounded text-pink-500 focus:ring-pink-500">
              <i data-lucide="calendar" class="w-4 h-4"></i>
              日付を入れる
            </label>
            <div id="date-controls" class="hidden flex items-center gap-2">
              <input type="color" id="date-color" value="#000000" class="w-6 h-6 rounded cursor-pointer border border-gray-300 p-0" title="日付の色">
              <input type="text" id="date-value" class="border border-gray-300 rounded px-2 py-1 text-sm w-32 text-right font-mono">
            </div>
          </div>

          <div class="flex items-center justify-between">
            <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
              <input type="checkbox" id="show-cutline" class="rounded text-pink-500 focus:ring-pink-500">
              <i data-lucide="scissors" class="w-4 h-4"></i>
              切り取り線を表示
            </label>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
  // --- 初期化 ---
  // Lucideアイコンのレンダリング
  lucide.createIcons();

  // --- 定数・設定 ---
  const FILM_SPECS = {
    mini: { width: 540, height: 860, photo: { x: 40, y: 40, w: 460, h: 620 }, label: 'ミニ (54x86mm)' },
    square: { width: 720, height: 860, photo: { x: 50, y: 50, w: 620, h: 620 }, label: 'スクエア (72x86mm)' },
    wide: { width: 1080, height: 860, photo: { x: 45, y: 45, w: 990, h: 620 }, label: 'ワイド (108x86mm)' }
  };

  const FILTERS = {
    normal: { name: '通常', value: '' },
    sepia: { name: 'セピア', value: 'sepia(0.8) contrast(1.1)' },
    grayscale: { name: 'モノクロ', value: 'grayscale(1) contrast(1.2)' },
    vivid: { name: '鮮やか', value: 'saturate(1.8) contrast(1.1)' },
    invert: { name: '反転', value: 'invert(1)' },
    sharp: { name: 'くっきり', value: 'contrast(1.4) saturate(1.1) brightness(1.1)' }
  };

  const FRAME_COLORS = [
    { c: '#ffffff', n: '白' },
    { c: '#1a1a1a', n: '黒' },
    { c: '#fce7f3', n: '桜' },
    { c: '#e0f2fe', n: '空' },
    { c: '#fef3c7', n: 'クリ' }
  ];

  // --- 機能判定 ---
  // Canvas Filterがサポートされているかチェック (一部の古いスマホ対策)
  const isFilterSupported = (function() {
    const testCanvas = document.createElement('canvas');
    const testCtx = testCanvas.getContext('2d');
    return typeof testCtx.filter !== 'undefined';
  })();

  // --- 状態管理 ---
  const state = {
    originalImage: null,
    framePatternImage: null,
    settings: {
      size: 'mini',
      brightness: 100,
      contrast: 100,
      filter: 'normal',
      frameType: 'color',
      frameColor: '#ffffff',
      showDate: false,
      dateValue: new Date().toISOString().split('T')[0].replace(/-/g, '.'),
      dateColor: '#000000',
      showCutLine: false,
    },
    drag: {
      isDragging: false,
      lastPos: { x: 0, y: 0 },
      offset: { x: 0, y: 0 }
    }
  };

  // --- DOM要素 ---
  const canvas = document.getElementById('canvas-preview');
  const ctx = canvas.getContext('2d');
  const noImageMsg = document.getElementById('no-image-msg');
  const dragHint = document.getElementById('drag-hint');
  const downloadBtn = document.getElementById('download-btn');
  const sizeButtonsContainer = document.getElementById('size-buttons');
  const filterButtonsContainer = document.getElementById('filter-buttons');
  const frameColorOptions = document.getElementById('frame-color-options');
  const frameImageUploader = document.getElementById('frame-image-uploader');
  const dateControls = document.getElementById('date-controls');

  // --- 初期UI生成 ---
  Object.keys(FILM_SPECS).forEach(key => {
    const btn = document.createElement('button');
    btn.textContent = key.toUpperCase();
    btn.className = `py-2 px-1 text-sm rounded-lg border-2 transition-all font-medium ${state.settings.size === key ? 'border-pink-500 bg-pink-50 text-pink-700' : 'border-transparent bg-gray-100 text-gray-600 hover:bg-gray-200'}`;
    btn.onclick = () => updateSetting('size', key);
    sizeButtonsContainer.appendChild(btn);
  });

  Object.keys(FILTERS).forEach(key => {
    const btn = document.createElement('button');
    btn.textContent = FILTERS[key].name;
    btn.className = `py-2 text-xs md:text-sm rounded-lg transition-all ${state.settings.filter === key ? 'bg-gray-800 text-white shadow-md' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`;
    btn.onclick = () => updateSetting('filter', key);
    filterButtonsContainer.appendChild(btn);
  });

  FRAME_COLORS.forEach(color => {
    const btn = document.createElement('button');
    btn.className = `w-8 h-8 rounded-full border border-gray-200 shadow-sm relative ${state.settings.frameColor === color.c ? 'ring-2 ring-pink-500 ring-offset-2' : ''}`;
    btn.style.backgroundColor = color.c;
    btn.title = color.n;
    btn.onclick = () => {
      updateSetting('frameColor', color.c);
      document.getElementById('frame-color-picker').value = color.c;
    };
    frameColorOptions.insertBefore(btn, frameColorOptions.lastElementChild);
  });

  document.getElementById('date-value').value = state.settings.dateValue;

  // --- イベントリスナー設定 ---
  document.getElementById('image-upload').addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      const img = new Image();
      img.onload = () => {
        state.originalImage = img;
        state.drag.offset = { x: 0, y: 0 };
        updateUI();
        draw();
      };
      img.src = ev.target.result;
    };
    reader.readAsDataURL(file);
  });

  document.getElementById('frame-pattern-upload').addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      const img = new Image();
      img.onload = () => {
        state.framePatternImage = img;
        state.settings.frameType = 'image';
        document.getElementById('frame-image-status').classList.remove('hidden');
        updateUI();
        draw();
      };
      img.src = ev.target.result;
    };
    reader.readAsDataURL(file);
  });

  function updateSetting(key, value) {
    state.settings[key] = value;
    updateUI();
    draw();
  }

  document.getElementById('brightness-input').addEventListener('input', (e) => updateSetting('brightness', Number(e.target.value)));
  document.getElementById('contrast-input').addEventListener('input', (e) => updateSetting('contrast', Number(e.target.value)));
  
  document.querySelectorAll('input[name="frameType"]').forEach(radio => {
    radio.addEventListener('change', (e) => updateSetting('frameType', e.target.value));
  });

  document.getElementById('frame-color-picker').addEventListener('input', (e) => updateSetting('frameColor', e.target.value));
  document.getElementById('show-date').addEventListener('change', (e) => updateSetting('showDate', e.target.checked));
  document.getElementById('date-value').addEventListener('input', (e) => updateSetting('dateValue', e.target.value));
  document.getElementById('date-color').addEventListener('input', (e) => updateSetting('dateColor', e.target.value));
  document.getElementById('show-cutline').addEventListener('change', (e) => updateSetting('showCutLine', e.target.checked));

  downloadBtn.addEventListener('click', () => {
    if (!state.originalImage) return;
    const link = document.createElement('a');
    link.download = `cheki_${state.settings.size}_${Date.now()}.png`;
    link.href = canvas.toDataURL('image/png');
    link.click();
  });

  // --- ドラッグ操作 ---
  function getPointerPos(e) {
    const rect = canvas.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    return { x: clientX - rect.left, y: clientY - rect.top };
  }

  function handlePointerDown(e) {
    if (!state.originalImage) return;
    if(e.cancelable) e.preventDefault();
    state.drag.isDragging = true;
    state.drag.lastPos = getPointerPos(e);
  }

  function handlePointerMove(e) {
    if (!state.drag.isDragging || !state.originalImage) return;
    if (e.touches && e.cancelable) e.preventDefault();
    const currentPos = getPointerPos(e);
    const scaleX = canvas.width / canvas.clientWidth;
    const scaleY = canvas.height / canvas.clientHeight;
    const dx = (currentPos.x - state.drag.lastPos.x) * scaleX;
    const dy = (currentPos.y - state.drag.lastPos.y) * scaleY;
    state.drag.offset.x += dx;
    state.drag.offset.y += dy;
    state.drag.lastPos = currentPos;
    draw();
  }

  function handlePointerUp() {
    state.drag.isDragging = false;
  }

  canvas.addEventListener('mousedown', handlePointerDown);
  canvas.addEventListener('mousemove', handlePointerMove);
  canvas.addEventListener('mouseup', handlePointerUp);
  canvas.addEventListener('mouseleave', handlePointerUp);
  canvas.addEventListener('touchstart', handlePointerDown, { passive: false });
  canvas.addEventListener('touchmove', handlePointerMove, { passive: false });
  canvas.addEventListener('touchend', handlePointerUp);

  function updateUI() {
    if (state.originalImage) {
      noImageMsg.style.display = 'none';
      dragHint.classList.remove('hidden');
      downloadBtn.disabled = false;
      downloadBtn.classList.remove('bg-gray-300', 'text-gray-500', 'cursor-not-allowed');
      downloadBtn.classList.add('bg-gray-900', 'text-white', 'hover:bg-gray-800');
    } else {
      noImageMsg.style.display = 'flex';
      dragHint.classList.add('hidden');
    }
    Array.from(sizeButtonsContainer.children).forEach((btn, idx) => {
      const key = Object.keys(FILM_SPECS)[idx];
      btn.className = `py-2 px-1 text-sm rounded-lg border-2 transition-all font-medium ${state.settings.size === key ? 'border-pink-500 bg-pink-50 text-pink-700' : 'border-transparent bg-gray-100 text-gray-600 hover:bg-gray-200'}`;
    });
    Array.from(filterButtonsContainer.children).forEach((btn, idx) => {
      const key = Object.keys(FILTERS)[idx];
      btn.className = `py-2 text-xs md:text-sm rounded-lg transition-all ${state.settings.filter === key ? 'bg-gray-800 text-white shadow-md' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`;
    });
    document.getElementById('brightness-val').textContent = state.settings.brightness + '%';
    document.getElementById('contrast-val').textContent = state.settings.contrast + '%';
    if (state.settings.frameType === 'color') {
      frameColorOptions.classList.remove('hidden');
      frameImageUploader.classList.add('hidden');
      document.querySelector('input[name="frameType"][value="color"]').checked = true;
    } else {
      frameColorOptions.classList.add('hidden');
      frameImageUploader.classList.remove('hidden');
      document.querySelector('input[name="frameType"][value="image"]').checked = true;
    }
    Array.from(frameColorOptions.children).forEach(child => {
      if (child.tagName === 'BUTTON') {
        if (child.style.backgroundColor) child.classList.remove('ring-2', 'ring-pink-500', 'ring-offset-2');
      }
    });
    if (state.settings.showDate) {
      dateControls.classList.remove('hidden');
      dateControls.classList.add('flex');
    } else {
      dateControls.classList.add('hidden');
      dateControls.classList.remove('flex');
    }
  }

  // --- 手動フィルター処理（ctx.filter非対応ブラウザ用） ---
  function applyManualFilters(data) {
    const { brightness, contrast, filter } = state.settings;
    
    // パラメータ準備
    // Brightness: 1.0が基準
    // Contrast: 1.0が基準 (0% -> 0.0, 100% -> 1.0, 200% -> 2.0 にマッピング近似)
    let b = brightness / 100;
    let c = contrast / 100;
    
    let saturate = 1.0;
    let sepia = 0;
    let grayscale = 0;
    let invert = 0;

    // フィルタ別追加パラメータ
    if (filter === 'sepia') { sepia = 1; c *= 1.1; b *= 0.9; } // 少し暗めに
    if (filter === 'grayscale') { grayscale = 1; c *= 1.2; }
    if (filter === 'vivid') { saturate = 1.8; c *= 1.1; }
    if (filter === 'invert') { invert = 1; }
    if (filter === 'sharp') { c *= 1.4; saturate = 1.1; b *= 1.1; }

    // Contrast計算用ファクター (入力0-255を想定した近似式)
    // CSS contrast(2.0)等は単純倍率だが、中心点(128)からの拡縮にする
    const intercept = 128 * (1 - c);

    for (let i = 0; i < data.length; i += 4) {
      let r = data[i];
      let g = data[i + 1];
      let b_val = data[i + 2]; // bはbrightness変数とかぶるので別名

      // 1. Invert
      if (invert > 0) {
        r = 255 - r;
        g = 255 - g;
        b_val = 255 - b_val;
      }

      // 2. Grayscale
      if (grayscale > 0) {
        const gray = 0.299 * r + 0.587 * g + 0.114 * b_val;
        r = gray; g = gray; b_val = gray;
      }

      // 3. Sepia (簡易式)
      if (sepia > 0) {
        const or = r, og = g, ob = b_val;
        r = (or * 0.393) + (og * 0.769) + (ob * 0.189);
        g = (or * 0.349) + (og * 0.686) + (ob * 0.168);
        b_val = (or * 0.272) + (og * 0.534) + (ob * 0.131);
      }

      // 4. Saturate (彩度)
      if (saturate !== 1.0) {
        const gray = 0.299 * r + 0.587 * g + 0.114 * b_val;
        r = gray + (r - gray) * saturate;
        g = gray + (g - gray) * saturate;
        b_val = gray + (b_val - gray) * saturate;
      }

      // 5. Contrast
      if (c !== 1.0) {
        r = r * c + intercept;
        g = g * c + intercept;
        b_val = b_val * c + intercept;
      }

      // 6. Brightness
      if (b !== 1.0) {
        r *= b;
        g *= b;
        b_val *= b;
      }

      // クランプ処理
      data[i] = Math.min(255, Math.max(0, r));
      data[i + 1] = Math.min(255, Math.max(0, g));
      data[i + 2] = Math.min(255, Math.max(0, b_val));
    }
  }

  // --- Canvas描画 ---
  function draw() {
    const spec = FILM_SPECS[state.settings.size];
    
    canvas.width = spec.width;
    canvas.height = spec.height;

    // 1. フレーム
    if (state.settings.frameType === 'image' && state.framePatternImage) {
      drawCoverImage(ctx, state.framePatternImage, 0, 0, spec.width, spec.height, {x:0, y:0});
    } else {
      ctx.fillStyle = state.settings.frameColor;
      ctx.fillRect(0, 0, spec.width, spec.height);
    }

    // 2. 写真
    if (state.originalImage) {
      ctx.save();
      // クリッピング領域を設定
      ctx.beginPath();
      ctx.rect(spec.photo.x, spec.photo.y, spec.photo.w, spec.photo.h);
      ctx.clip();

      if (isFilterSupported) {
        // --- モダンブラウザ用 (高速) ---
        const filterVal = FILTERS[state.settings.filter].value;
        ctx.filter = `brightness(${state.settings.brightness}%) contrast(${state.settings.contrast}%) ${filterVal}`.trim();
        drawCoverImage(ctx, state.originalImage, spec.photo.x, spec.photo.y, spec.photo.w, spec.photo.h, state.drag.offset);
      } else {
        // --- レガシーブラウザ/一部スマホ用 (互換モード) ---
        ctx.filter = 'none';
        // 一度描画してからピクセル操作
        drawCoverImage(ctx, state.originalImage, spec.photo.x, spec.photo.y, spec.photo.w, spec.photo.h, state.drag.offset);
        
        // 描画された写真領域のピクセルを取得して加工
        // 注意: drawImageでクリップ外にはみ出した部分は取得できないため、
        // 本来はオフスクリーンCanvasを使うのが正確だが、簡易的に表示領域のみ加工する
        const imageData = ctx.getImageData(spec.photo.x, spec.photo.y, spec.photo.w, spec.photo.h);
        applyManualFilters(imageData.data);
        ctx.putImageData(imageData, spec.photo.x, spec.photo.y);
      }
      
      ctx.restore();
    } else {
      ctx.fillStyle = '#333';
      ctx.fillRect(spec.photo.x, spec.photo.y, spec.photo.w, spec.photo.h);
      ctx.fillStyle = '#666';
      ctx.font = 'bold 40px sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('NO IMAGE', spec.photo.x + spec.photo.w / 2, spec.photo.y + spec.photo.h / 2);
    }

    // 3. 日付
    if (state.settings.showDate) {
      ctx.save();
      ctx.fillStyle = state.settings.dateColor;
      ctx.shadowColor = 'rgba(255,255,255,0.3)';
      ctx.shadowBlur = 0;
      ctx.shadowOffsetX = 1;
      ctx.shadowOffsetY = 1;
      const fontSize = state.settings.size === 'mini' ? 24 : 32;
      ctx.font = `bold ${fontSize}px "Courier New", monospace`;
      ctx.textAlign = 'right';
      
      const dateX = spec.photo.x + spec.photo.w;
      const dateY = spec.photo.y + spec.photo.h + fontSize + 10;
      
      ctx.fillText(state.settings.dateValue, dateX, dateY);
      ctx.restore();
    }

    // 4. 切り取り線
    if (state.settings.showCutLine) {
      ctx.save();
      ctx.strokeStyle = '#999';
      ctx.lineWidth = 2;
      ctx.setLineDash([10, 10]);
      ctx.strokeRect(0, 0, spec.width, spec.height);
      ctx.restore();
    }
  }

  function drawCoverImage(ctx, img, x, y, w, h, offset) {
    const imgRatio = img.width / img.height;
    const areaRatio = w / h;
    let drawW, drawH, drawX, drawY;

    if (imgRatio > areaRatio) {
      drawH = h;
      drawW = h * imgRatio;
      drawX = x - (drawW - w) / 2;
      drawY = y;
    } else {
      drawW = w;
      drawH = w / imgRatio;
      drawX = x;
      drawY = y - (drawH - h) / 2;
    }
    
    ctx.drawImage(img, drawX + offset.x, drawY + offset.y, drawW, drawH);
  }

  // 初回描画
  updateUI();
  draw();

</script>
</body>
</html>

作成ログ

完成までの作成時間：約10分
完成までのチャットでのやり取り回数：6回
使用ツール： Gemini Pro 3.0 (Canvas機能)

Gemini Canvasでの制作過程

まずはGemini Canvasを開き、作りたいツールのイメージを伝えます。今回は「チェキ風加工サイト」を作りたいので、必要な機能を箇条書きにして以下のようにお願いしました。

初見のプロンプト

写真をアップするとチェキ風の画像に加工ができるサイトを作りたい

サイズ選択【ミニ・スクエア・ワイド】
フィルターとレタッチ【通常、セピア、モノクロ、鮮やか、反転、くっきり】
明るさ・コントラスト調整
フレーム変更【白・黒・カラー・画像UP】

オプション
日付スタンプ追加

これだけで、基本的な機能が実装されたプレビュー画面が出来上がります。

プレビュー画面を見ながら微調整していく

出来上がったツールを触ってみて、「もっとこうしたい」と思う部分を追加で指示していきます。

修正プロンプト

日付の色変更したい
デフォルトは黒で

あと、ドラッグしたら写真動かせるようにして

暗めの写真に日付を入れたいときは白など、写真に合わせて色を変更できるように修正します。

いい感じのツールが出来上がりましたが、ここで一つ問題が発生しました。作成されたコードが「TypeScript」という言語で書かれており、そのままではWordPressの記事内（カスタムHTML）で動きませんでした。

そこで、WordPressでも動く形式に書き直してもらいます。

修正プロンプト

ワードプレスのカスタムHTMLに貼れるようにして

修正前のコード

修正後のコード

これで、ブログに埋め込めるコードが入手できました！

公開後の動作チェック

PCでは完璧に動作しましたが、公開後にスマートフォンで確認したところ、フィルター加工がうまく反映されないバグが見つかりました。

もちろん、これもGeminiに報告して直してもらいます。

修正プロンプト

スマートフォンだとフィルター加工がうまくされない

この修正を経て、PCでもスマホでも快適に動く「チェキ風メーカー」が完成しました！

まとめ

いかがでしたか？「こういう機能が欲しい」「ここが動かない」と相談するだけで、あっという間にツールが完成しました。皆さんもぜひ、Gemini Canvasでオリジナルのブログパーツ作りに挑戦してみてくださいね。

【Geminiに指示するだけ】10分で完成！チェキ風画像メーカーの作り方

HTML コードビューア

作成ログ

Gemini Canvasでの制作過程

初見のプロンプト

プレビュー画面を見ながら微調整していく

修正プロンプト

修正プロンプト

修正前のコード

修正後のコード

公開後の動作チェック

修正プロンプト

まとめ

【実録】70代父のスマホがウイルス感染？偽クリーナーアプリを生成AIと撃退した全手順

Gemini 写真加工プロンプト図鑑！家族写真がアートに変わる！？｜Nano-Banana【コピペOK/随時更新中】

Gemini 画像加工プロンプト図鑑！1枚のイラストを劇的アレンジ｜Nano-Banana【コピペOK/随時更新中】

【2026年版】デザイナー歴17年のママフリーランスが本気で選んだ「神」仕事道具・ガジェットまとめ

５分で完了「生成AI活用レベル診断」