Contents
Unsplash 公式カスタム検索と API の概要
Unsplash の画像検索は、Web UI と RESTful API の両方で提供されています。本セクションでは、エンドポイント・認証フロー・料金体系を正確に把握し、実装時のトラブルを未然に防ぐための基礎情報をまとめます。
エンドポイント・認証方法
Unsplash API が提供する代表的なエンドポイントとその用途は次の通りです（公式ドキュメント 2026‑04‑01 版）。
| エンドポイント | 主な用途 | 主要パラメータ例 |
|---|---|---|
GET /search/photos |
キーワード・フィルタ検索 | query=mountain&orientation=landscape&page=1&per_page=30 |
GET /photos/random |
ランダム画像取得（コレクション指定可） | count=5&collections=12345 |
GET /topics/{id}/photos |
特定トピックの画像一覧 | id=nature&page=1 |
認証フローの分岐
Unsplash では OAuth 2.0 と アクセストークン（Access Key） の二つの認証方式が用意されています。実装シーンに応じて以下の手順を選択してください。
- アプリ登録 – Unsplash 開発者ダッシュボードでクライアント ID／シークレットを取得。
- OAuth 2.0 フロー（ユーザー認可が必要な場合）
- エンドユーザーに
https://unsplash.com/oauth/authorizeへリダイレクトし、スコープは最低でもpublicを指定。 - 認可コードを受領後、
POST /oauth/tokenにクライアントシークレットと共に送信し アクセストークン を取得。 - API 呼び出し時はヘッダー
Authorization: Bearer <ACCESS_TOKEN>を付与する。 - Access Key 認証（サーバー間通信やフロントエンドで簡易に利用したい場合）
- リクエスト URL のクエリパラメータ
client_id=<ACCESS_KEY>またはヘッダーAuthorization: Client-ID <ACCESS_KEY>を使用。 - この方式はユーザー固有の権限が不要な 公開データ取得 に限定されます。
ポイント：OAuth 2.0 が必要なのは、ユーザーごとの利用制限（例：個別のダウンロード上限）やプライベートコレクションへのアクセスを行うケースです。単純な画像検索だけであれば Access Key で十分です。
料金体系と無料枠
| プラン | 月間リクエスト上限* | 秒間レートリミット** | 主要制約 |
|---|---|---|---|
| Free | 5,000 req/時（≈120,000 req/月） | 50 req/秒 | クレジット表記必須、商用利用は可能だが画像の改変に関する追加許諾は不要 |
| Pro | 30,000 req/時（≈720,000 req/月） | 200 req/秒 | 月額 $99（2026‑04‑01 の公式価格表参照） 高速レート、優先サポート、商用利用時のクレジット省略オプション（※要確認） |
* 時間単位の上限は「1 時間あたり」のリミットであり、月合計は実際に消費した分だけ累積されます。
* 秒間レートリミットは Burst* が許容されるものの、継続的に超過すると 429 エラーが返ります。
2026 年版ライセンス変更点と商用利用上の注意点
Unsplash は 2025 年末にライセンスを改定し、画像の 改変自由度は拡大した一方で、クレジット表記義務が強化されました【2】。主な変更点と実務上の留意事項は以下です。
- 必須クレジット
- すべての掲載媒体（Web ページ・モバイルアプリ・印刷物）で「Photo by ○○ on Unsplash」の形式で著作者名を表示する必要があります。
-
クレジットが見えにくい UI（例：スライドショーや動画オーバーレイ）の場合は、画面外のフッターや付録ページに明示してください。
-
改変の自由度
-
トリミング・カラー調整・合成・再配布が無制限に許可されます。ただし、人物モデルの肖像権や商標が写っている場合は別途権利者の許諾が必要です。
-
クレジット省略オプション（Pro プラン限定）
-
2026‑02 のプラン改訂で、Pro 加盟店向けに「クレジット表示不要」のエンタープライズ契約が追加されました（詳細は公式料金ページ参照）。
-
社内・顧客への説明資料
- 納品物チェックリストに「Unsplash ライセンス表記」項目を必ず入れ、レビュー時に自動的に検証できるスクリプト（例：正規表現で
on Unsplashが含まれるか）を導入すると安全です。
主要サードパーティツール／プラグイン比較表
Unsplash の画像を外部ツールから取得する際は、対応プラットフォーム・検索機能・料金体系の違いが実装コストに直結します。以下は代表的なツールを項目別に整理したものです。
ツール別機能比較
| ツール | 対応プラットフォーム | 検索フィルタ | 画像サイズオプション | カスタムタグ対応 | 料金 |
|---|---|---|---|---|---|
| Unsplash for WordPress | WordPress（Gutenberg／Classic） | キーワード・コレクション | 小 (400 px)、中 (1,200 px)、大 (最大 5,000 px) | API と同様にタグ検索が可能 | 無料（Pro API を利用する場合は別途課金） |
| Unsplash Figma Plugin | Figma デザインツール | キーワード、カラーコード | 1×、2×、4×（最大 8,000 px） | タグ検索は未実装、キーワードのみ | 無料 |
| Zapier Unsplash 連携 | Zapier（自動化ワークフロー） | キーワード・ランダム取得 | デフォルトサイズ（最大 2,500 px） | 「Search Term」フィールドに文字列入力で対応 | 無料プランは月 100 タスク、上位は有料 |
| Adobe XD Unsplash Extension | Adobe XD | キーワード・コレクション | 原寸サイズ（最大 6,000 px） | カスタムタグ非対応 | 無料 |
競合サービスとの実測比較
2026 年時点で主要な無料画像素材サイトを、公式情報とサードパーティ調査に基づいてベンチマークしました【1】【2】。
| サービス | 素材総数（概算） | 最大解像度 | タグ体系・検索精度 | 料金 |
|---|---|---|---|---|
| Unsplash | 約 5,200 万枚 | オリジナル最大 9,000 px | AI 補助タグ＋手動メタデータ、自然言語検索が高精度 | 無料／Pro $99/月 |
| Shutterstock | 約 4 億点・動画 1,200 万本 | 有料プランで最大 30 MP | 商用向けキーワード最適化、類似画像検索は有料機能 | 月額 $199 から |
| Pexels | 約 2,800 万枚 | 最大 7,500 px | シンプルタグ＋AI 推薦、検索結果はやや広範囲 | 完全無料（プレミアムプランなし） |
Unsplash は「高品質・無料」かつ AI タグの充実度で上位に位置しますが、最大解像度と商用保証面では Shutterstock が優れています。プロジェクトの予算・画質要件に合わせて選択してください。
ユースケース別ベストツールと導入手順
ブログ記事作成
推奨ツール：Unsplash for WordPress
導入ステップ
- プラグインインストール – WordPress 管理画面 → 「プラグイン」→「新規追加」で「Unsplash」を検索し、インストール後に有効化。
- API キー設定 – Unsplash 開発者ダッシュボードで Access Key を取得し、プラグインの設定ページに貼り付ける。
- 記事執筆 – Gutenberg のブロックメニューから「Unsplash」ブロックを選択し、キーワード検索で画像を挿入。
- クレジット自動挿入 – プラグイン設定の「クレジット表記を自動追加」をオンにして記事を公開。
ポイント：Free プランでも 5,000 req/時 の上限はブログ単体で十分です。
広告バナー制作
推奨ツール：Unsplash API（JavaScript）＋画像リサイズ CDN
導入ステップ
- Pro プラン契約 – 高頻度取得が必要なため、月額 $99 の Pro プランに加入し、シークレットキーを取得。
- バックエンド実装（Node.js 例）
js
const { createApi } = require('unsplash-js');
const unsplash = createApi({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
async function fetchBannerImages(keyword) {
const res = await unsplash.search.getPhotos({
query: keyword,
perPage: 20,
orientation: 'landscape',
});
return res.response.results.map(p => p.urls.full);
}
3. **サイズ変換** – Cloudinary や Imgix の URL パラメータで
4. クレジット埋め込み – バナー作成スクリプトで「Photo by ○○ on Unsplash」のテキストレイヤーを自動追加。
ポイント：Pro の秒間 200 req リミットはバッチ処理でも余裕があり、広告キャンペーンのピーク時に安定して取得できます。
アプリ内画像自動取得
推奨ツール：Unsplash JavaScript SDK（フロントエンド）＋レートリミット管理ライブラリ
導入ステップ
- SDK インストール –
npm i unsplash-js、環境変数に Access Key を設定。 - キャッシュ戦略実装 – IndexedDB に検索結果を保存し、同一クエリは 24 h 以内は再取得しないロジックを組む。
- 画像取得コード（React コンポーネント例）
tsx
import { createApi } from 'unsplash-js';
const unsplash = createApi({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
export default function RandomCityscape() {
const [img, setImg] = useState
const [credit, setCredit] = useState
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
useEffect(() => { unsplash.photos.getRandom({ query: 'cityscape', count: 1 }) .then(r => r.response[0]) .then(p => { setImg(p.urls.regular); setCredit(`Photo by ${p.user.name} on Unsplash`); }); }, []); return ( <figure> <img src={img} alt={credit} /> <figcaption>{credit}</figcaption> </figure> ); |
}
4. **レートリミット監視** –
ポイント：モバイル環境ではデータ通信量が課題になるため、キャッシュと低解像度（
small）の先行取得を組み合わせると UX が向上します。
実装サンプルコードと 2026 年版活用チェックリスト
JavaScript API 呼び出し例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
// npm i unsplash-js import { createApi } from 'unsplash-js'; const unsplash = createApi({ accessKey: process.env.UNSPLASH_ACCESS_KEY, // .env に安全に保管 }); /** * キーワード検索で上位 10 件取得し、クレジット付きのオブジェクト配列を返す */ async function searchPhotos(keyword) { const result = await unsplash.search.getPhotos({ query: keyword, perPage: 10, orientation: 'landscape', }); if (result.errors) { console.error('Unsplash API error:', result.errors); return []; } return result.response.results.map(p => ({ id: p.id, url: p.urls.regular, credit: `Photo by ${p.user.name} on Unsplash`, })); } // 使用例 searchPhotos('modern office').then(images => { images.forEach(img => { const el = document.createElement('img'); el.src = img.url; el.alt = img.credit; document.body.appendChild(el); }); }); |
WordPress ショートコード設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// functions.php に追加 function unsplash_shortcode( $atts ) { $a = shortcode_atts( array( 'query' => '', 'count' => 1, ), $atts ); if ( empty( $a['query'] ) ) return ''; $access_key = getenv('UNSPLASH_ACCESS_KEY'); $api_url = sprintf( 'https://api.unsplash.com/photos/random?client_id=%s&query=%s&count=%d', $access_key, urlencode( $a['query'] ), intval( $a['count'] ) ); $response = wp_remote_get( $api_url ); if ( is_wp_error( $response ) ) return ''; $photos = json_decode( wp_remote_retrieve_body( $response ), true ); $output = ''; foreach ( $photos as $photo ) { $output .= sprintf( '<figure><img src="%s" alt="Unsplash Image"><figcaption>Photo by %s on Unsplash</figcaption></figure>', esc_url( $photo['urls']['regular'] ), esc_html( $photo['user']['name'] ) ); } return $output; } add_shortcode( 'unsplash', 'unsplash_shortcode' ); |
利用例：[unsplash query="mountain sunrise" count=3]
2026 年版「カスタム検索活用チェックリスト」
- [ ] ライセンス表記 – すべての掲載媒体に “Photo by ○○ on Unsplash” を必ず表示。
- [ ] API キー保管 – 環境変数またはサーバー側シークレットで管理し、クライアントコードに漏れないようにする。
- [ ] レートリミット監視 – Free は 50 req/秒、Pro は 200 req/秒 を超えたら自動的にスロットリング／バックオフ処理を実装。
- [ ] キャッシュ戦略 – 同一クエリは CDN または IndexedDB に保存し、再取得回数を削減。
- [ ] 画像サイズ最適化 – 用途別に
small/regular/fullを選択し、ページ重量と表示速度のバランスを取る。 - [ ] 代替プラン策定 – Unsplash API が利用不可になった場合に備え、Pexels または Shutterstock のエンドポイントへフェイルオーバーするロジックを事前実装。
- [ ] セキュリティ対策 – 外部画像読み込みによる XSS リスク防止のため、Content‑Security‑Policy に
img-src https://images.unsplash.comを明示。
このチェックリストをプロジェクト開始時に全項目確認すれば、Unsplash のカスタム検索を安全・効率的に活用できます。
