1. Gumletの概要と有料プランの強み
本ガイドは、Webサイトの表示高速化（画像最適化）およびセキュアな動画配信（HLS・DRM）を目的としてGumletの有料プランを導入・運用する日本のWeb担当者およびエンジニア向けの実践ガイドです。
Gumlet は、画像最適化（Image CDN）と動画ホスティング・配信（Video Hosting & Streaming）をワンストップで提供するクラウドサービスです。オリジンサーバー（WebサーバーやS3など）のURLやパスを保持したまま、URLパラメータベースのリアルタイム変換とグローバルCDN配信を実現します。
1.1 無料枠（Free）と有料プランの主な違い
Gumletは「Image CDN」と「Video Hosting & Streaming」でプラン体系が分かれており、無料枠でも検証は可能ですが、商用サイトや会員向けサービスでは有料プランへの移行が不可欠です（最新の詳細は Gumlet Pricing ↗ を参照）。
Image CDN プラン比較
| 項目 | Free | Growth ($32/月〜) | Business ($199/月〜) | Enterprise |
|---|---|---|---|---|
| 月間転送量（Bandwidth） | 30 GB | 300 GB | 2,500 GB | カスタム（無制限対応） |
| 超過転送量単価 | $0.50 / GB | $0.15 / GB | $0.08 / GB | ボリュームディスカウント |
| カスタムドメイン（CNAME） | 非対応 | 2件 | 5件 | 無制限 |
| 連携ソース数（Sources） | 制限あり | 最大30件 | 最大100件 | 無制限 |
| シート数（アカウント） | 1 | 5 | 無制限 | 無制限（SSO / RBAC対応） |
| キャッシュパージ機能 | URL個別指定のみ | URL個別指定 | ソース全体のパージ対応 | ソース全体 / 優先処理 |
Video Hosting & Streaming プラン比較
| 項目 | Free | Creator ($6/月〜) | Growth ($19/月〜) | Business ($99/月〜) |
|---|---|---|---|---|
| ストレージ分数 | 60分 | 1,000分 | 3,000分 | 15,000分 |
| 月間転送量（Bandwidth） | 100 GB | 3,000 GB | 3,000 GB | 3,000 GB |
| Gumletロゴ非表示 | 不可（ロゴあり） | 対応（ホワイトラベル） | 対応 | 対応 |
| ドメイン制限 / リファラー制限 | 非対応 | 対応 | 対応 | 対応 |
| DRM（Widevine / FairPlay） | 非対応 | オプション（+$99/月） | オプション（+$99/月） | 標準またはオプション |
| 動的ウォーターマーク | 非対応 | 非対応 | 非対応 | 対応 |
1.2 Cloudinary / AWS CloudFront直接構築との比較
| 比較軸 | Gumlet（有料プラン） | Cloudinary | AWS CloudFront + 自前構成（Lambda/MediaConvert） |
|---|---|---|---|
| 料金体系・予測性 | 明確（帯域・分数ベース）。超過コストが低廉 | クレジット制。変換処理やストレージ重複で請求が高額化しやすい | 完全従量制。転送量、リクエスト数、Lambda実行費、MediaConvert変換費が個別発生 |
| 導入コスト | 非常に低い（オリジン指定とDNS設定のみで即日稼働） | 中程度（APIやSDKの独自仕様への適応が必要） | 高い（CloudFront、S3、Lambda@Edge、MediaConvert、KMSなどの設計・構築が必要） |
| 画像最適化機能 | 自動WebP/AVIF判別、DPR最適化、URLクエリ操作 | 高度な画像加工（AI補正、複雑なレイヤー合成など） | Lambda@EdgeやCloudFront Functionsを独自開発・保守 |
| 動画・DRM配信 | アップロードだけでHLS化、Widevine/FairPlay鍵管理が全自動 | 動画変換も可能だが課金レートが急速に跳ね上がる | DRMライセンスサーバー契約、KMS暗号化、パッケージング等の専門実装が必要 |
| 運用保守負荷 | 極小（SaaS側でマルチCDNと証明書を全自動管理） | 小 | 大（インフラ監視、証明書更新、Lambdaコードの保守、CDN設定更新） |
2. 画像最適化（Image CDN）の初期セットアップ
2.1 Sources設定手順
Gumletでは、元の画像を保持しているサーバーやクラウドストレージを [Source]（ソース）として登録します。
[Gumlet Dashboard]
│
├─► [Image CDN]（画像CDN）
│ └─► [Sources]（ソース一覧）
│ └─► [Add Source]（ソース追加）パターンA: Web Folder（既存のWebサーバー / WordPress等のHTTP公開元）
- 左側メニューから [Image CDN] > [Sources] を選択し、[Add Source] をクリックします。
- [Source Type]: [Web Folder] を選択します。
- [Base URL]: 既存サイトの画像配置ディレクトリのURLを入力します（例: https://example.com/wp-content/uploads/ または https://example.com/）。
- [Subdomain]: 任意の名称を入力します（例: mybrand と設定した場合、https://mybrand.gumlet.io/ が払い出されます）。
- [Save Source] をクリックします。
パターンB: Amazon S3（非公開S3バケット連携）
- [Source Type] で [Amazon S3] を選択します。
- [S3 Bucket Name]: 対象のバケット名を入力します。
- [S3 Bucket Region]: ap-northeast-1（東京）などを選択します。
- [Access Keys] / [IAM Role]: 推奨はIAMロールによるクロスアカウントアクセス許可、または最小権限（s3:GetObject のみ）を付与したIAMユーザーの [Access Key ID] と [Secret Access Key] を入力します。
- [Test Connection] を実行し、接続成功を確認したら保存します。
2.2 カスタムドメイン（CNAME）設定と自動SSL
有料プラン（Growth以上）では、Gumlet既定の https://xxx.gumlet.io ではなく、自社ドメイン（例: images.example.com）で配信可能です。
設定手順:
- Gumlet管理画面で作成したSourceの詳細を開き、[Source Settings] > [Custom Domain] を開きます。
- [Domain Name] に利用したいFQDNを入力します（例: images.example.com）。
- 自社DNSサービス（Cloudflare、Route 53、お名前.com等）で以下のレコードを追加します。
- Type: CNAME
- Name: images
- Target / Value: 払い出されたGumletサブドメイン（例: mybrand.gumlet.io）
- TTL: 300 または Automatic（※Cloudflareを使用している場合は初期検証時はプロキシを「DNS Only（灰色雲）」に設定）
- Gumlet管理画面に戻り、[Verify DNS] をクリックします。
- 検証完了後、Let's Encrypt等によるSSL/TLS証明書が自動発行され、数分〜15分程度でHTTPS通信が有効化されます。
2.3 主要なURLパラメータ操作と画像変換仕様
基本URL構文:
https://images.example.com/products/sample.jpg?w=800&format=auto&q=80主要パラメータ一覧表:
| パラメータ名 | 指定値の例 | 説明・挙動 |
|---|---|---|
| format (または fm) | auto (推奨), webp, avif, jpeg, png | format=auto を指定すると、ブラウザの Accept ヘッダーを自動判定し、AVIF対応ブラウザにはAVIF、WebP対応にはWebP、非対応環境には元形式を自動配信。 |
| w (または width) | 400, 800, 1200 | 出力画像の幅（ピクセル単位）。 |
| h (または height) | 300, 600 | 出力画像の高さ（ピクセル単位）。 |
| mode | fit (既定), crop, fill | リサイズ時の挙動。crop は指定枠に合わせて切り抜き、fit はアスペクト比を維持して枠内に収めます。 |
| q (または quality) | 1 〜 100 (既定: 80前後) | 圧縮品質。人間の目では75〜80程度で視覚的な劣化なく大幅にファイルサイズを削減可能。 |
| dpr | 1, 2, 3 | Device Pixel Ratio（端末の画面密度倍率）。Retinaディスプレイ対応時に使用。 |
| compress | true | 画像メタデータ（Exif等）を除去し、最適なロッシー圧縮を適用。 |
HTMLでのレスポンシブ実装例 (srcset):
<picture>
<img
src="https://images.example.com/banner.jpg?w=1200&format=auto&q=80"
srcset="
https://images.example.com/banner.jpg?w=400&format=auto&q=80 400w,
https://images.example.com/banner.jpg?w=800&format=auto&q=80 800w,
https://images.example.com/banner.jpg?w=1200&format=auto&q=80 1200w
"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="新商品キャンペーンバナー"
loading="lazy"
decoding="async"
width="1200"
height="675"
/>
</picture>3. WordPress・既存サイトでの導入と実装
WordPressでは、Gumletプラグインを使用するか、テーマの画像URLをGumletの配信URLへ切り替えます。まずは既存画像URLを保持したまま、検証対象のページで表示・LCP・転送量を確認します。
Web Folder連携
WordPressの uploads ディレクトリをSourceとして登録し、既存のオリジンを維持したまま配信URLを組み立てます。
srcsetの検証
表示幅ごとのURLとsizes属性を確認し、端末に対して過大な画像を配信しないようにします。
公開後の計測
実装前後でLCP、画像転送量、キャッシュヒット、表示崩れを同一条件で確認します。
4. 動画配信・DRMの初期設定
Video Hosting & Streamingでは、動画のアップロードからHLS配信、埋め込みプレイヤー、アクセス制御までを管理します。会員向けや研修用途では、ドメイン制限、リファラー制限、DRM、動的ウォーターマークの必要性を用途別に確認します。
- 動画の公開範囲と、許可する再生ドメインを整理する
- DRM Protection、MP4 Download、ウォーターマークの条件をプランと合わせて確認する
- 埋め込み後にスマートフォンを含む実環境で再生・シーク・アクセス制御を確認する
5. コスト抑制と継続運用のポイント
有料プランでは、月間転送量、動画ストレージ分数、超過料金、必要な保護オプションを分けて見積もります。利用量を定期的に確認し、プラン変更・画像品質・配信設定を同じ前提で評価することがコスト抑制につながります。
Gumletの有料プランを確認する ↗