例

Image Cropper の実践的な例と代表的なユースケースです。

基本的な例

プロフィール画像の作成

任意の画像から正方形のプロフィール画像を作る手順です。

1. 写真をアップロードする
   • ポートレート写真や集合写真を選びます
   • JPEG、PNG など一般的な形式を利用できます
2. アスペクト比を 1:1 に設定する
   • アスペクト比設定で 1:1 を選びます
   • クロップ領域が正方形になります
3. クロップ領域を配置する
   • 被写体の顔が中央に来るように調整します
   • 必要な要素が入るようにサイズを調整します
4. 書き出し設定を決める
   • 形式：PNG（透過が必要な場合に適しています）
   • サイズ：多くのプラットフォームでは 400x400
   • 品質：JPEG を使う場合は 90%

結果：SNS プロフィールに適した見栄えの良い正方形アバターを作成できます。

ソーシャルメディア最適化

Instagram 投稿（1:1）

• アスペクト比：1:1
• 推奨サイズ：1080x1080
• 形式：JPEG
• 品質：85%

Instagram ストーリー（9:16）

• アスペクト比：9:16
• 推奨サイズ：1080x1920
• 形式：JPEG
• 品質：80%

Twitter ヘッダー（16:9）

• アスペクト比：16:9
• 推奨サイズ：1500x500
• 形式：JPEG
• 品質：90%

EC 商品画像

統一感のある商品写真を作る例です。

1. 標準サイズを決める
   • メイン画像は 1000x1000
   • 詳細画像は 800x600
   • 背景は白にすると見やすくなります
2. バッチ処理の流れ
   • 出力形式を JPEG に設定します
   • 品質を 85% に設定します
   • 一貫性のため 1:1 を使います
   • すべての商品画像を同じ設定で処理します

高度な例

Web デザイン素材

ヒーロー画像

アスペクト比：16:9 または 21:9
サイズ：1920x1080 または 2560x1080
形式：WebP（フォールバックは JPEG）
品質：75%（画質と表示速度のバランス）

ブログ記事のサムネイル

アスペクト比：4:3
サイズ：800x600
形式：WebP
品質：80%
最適化：主題がはっきり見えるようにする

カード画像

アスペクト比：3:2
サイズ：600x400
形式：WebP
品質：85%

写真ワークフロー

大きな写真から細部を切り出す

1. 高解像度画像を読み込む
   • 元画像：6000x4000
   • 目的：特定のディテールを切り出す
2. 精密にクロップする
   • 自由アスペクト比を使います
   • 拡大して細かく選択します
   • 注目したい部分を中心に切り取ります
3. 出力を最適化する
   • 高い品質（95%）を維持します
   • 元が PNG なら形式を維持します
   • Web 用に適切なサイズへ調整します

写真シリーズを作成する

1. アスペクト比を統一する
   • クラシックな印象なら 4:3
   • モダンな印象なら 16:9
2. サイズを統一する
   • 4:3 なら 1200x900
   • 16:9 なら 1200x675
3. 品質基準を揃える
   • 写真は JPEG で出力します
   • 展示用途なら 90%
   • Web ギャラリーなら 80%

ワークフロー例

複数画像のバッチ処理

1. 準備
   - 元画像をフォルダーに整理する
   - 目標仕様を決める
   - 命名規則を統一する
   

2. 処理
   - 最初の画像を読み込む
   - アスペクト比と形式を設定する
   - 品質と出力サイズを設定する
   - クロップしてダウンロードする
   - 残りの画像にも同じ手順を繰り返す
   

3. 品質確認
   - すべての処理済み画像を確認する
   - ファイルサイズが適切か確認する
   - 寸法が揃っているか確認する
   - 目的のアプリケーションで表示をテストする
   

1 枚の画像から複数バリエーションを作る

1 枚の元画像から複数の用途向けバリエーションを作成できます。

バリエーション 1：フル解像度

• 用途：高品質な印刷
• 設定：元サイズ、PNG、100% 品質
• クロップ：最小限にして元の構図を保つ

バリエーション 2：Web 表示

• 用途：Web サイトのギャラリー
• 設定：最大辺 1200px、JPEG、85%
• クロップ：Web 閲覧向けに構図を最適化する

バリエーション 3：サムネイル

• 用途：一覧プレビュー
• 設定：300x300、JPEG、75%
• クロップ：主題に集中させる

バリエーション 4：モバイル最適化

• 用途：モバイルアプリ
• 設定：最大辺 800px、WebP、80%
• クロップ：小さな画面でも重要な要素が見えるようにする

トラブルシューティング例

大きなファイルの処理

問題：50MB の RAW 変換画像を扱う必要がある。
解決策：

1. 十分なメモリがあるブラウザーを使う
2. 他のタブを閉じてメモリを確保する
3. 必要なら事前にファイルサイズを減らす
4. 利用可能なら段階的読み込みを使う

品質とファイルサイズのバランス

シナリオ：ファイルサイズは小さくしたいが、画質も保ちたい。

試す設定：

• WebP は JPEG より約 30% 小さくなることが多い
• 75% 品質はバランスの良い設定になりやすい
• 実際の用途に合わせてサイズを最適化する
• 適切なアスペクト比を使って無駄な画素を減らす

比較結果：

• 元の JPEG (90%)：2.1MB
• 最適化後 JPEG (75%)：1.2MB
• WebP (75%)：800KB
• WebP (60%)：450KB

モバイル端末での互換性

課題：スマートフォンやタブレットで画像を処理する。

考慮点：

• 利用可能メモリが少ない
• タッチ操作でクロップ範囲を調整する必要がある
• 処理速度が遅くなりやすい
• ダウンロード方法が限られることがある

ベストプラクティス：

• モバイルでは小さめの元画像を使う
• 少し品質を下げて処理を軽くする
• タッチジェスチャーで調整しやすいか確認する
• わかりやすい視覚フィードバックを用意する

統合例

WordPress プラグイン統合

// Example: Add crop functionality to WordPress media library
function add_image_cropper_to_media() {
    // Enqueue Image Cropper assets
    wp_enqueue_script('image-cropper', '/path/to/cropper.js');
    wp_enqueue_style('image-cropper', '/path/to/cropper.css');
}
add_action('admin_enqueue_scripts', 'add_image_cropper_to_media');

React コンポーネント統合

import ImageCropper from "./ImageCropper";

function MyComponent() {
  const handleCropComplete = (result) => {
    // Handle cropped image
    console.log("Cropped image:", result);
  };

  return (
    <ImageCropper
      aspectRatio={1}
      outputFormat="jpeg"
      quality={85}
      onCropComplete={handleCropComplete}
    />
  );
}

EC プラットフォーム統合

// Example: Shopify app integration
function setupProductImageCropper() {
  const cropper = new ImageCropper({
    container: "#product-image-editor",
    aspectRatio: 1,
    outputFormat: "jpeg",
    quality: 90,
    onCrop: (result) => {
      uploadProductImage(result.blob);
    },
  });
}