Unsplash

WordPressでUnsplash画像を無料活用 – APIキー取得からSEO最適化まで

ⓘ本ページはプロモーションが含まれています

お得なお知らせ

スポンサードリンク
デザイン本が読み放題

Figma・UI/UX・配色の深いノウハウを

動画・記事の断片情報より、1冊の体系書籍のほうが圧倒的に速い。Kindle Unlimited対象のデザイン書籍が豊富です。

Kindle Unlimited 30日無料▶ Audible|デザイン発想本を耳で▶

▶ デザイン→エンジニアリングの橋渡しに興味があれば プログラミング / エンジニア転職 もどうぞ。


タイプ別にすぐ選べる

クリエイティブの引き出し、どう増やす?

Figma・UI/UX・配色・タイポグラフィ。"手を動かす"学びと"発想力を磨く"学びは、使うサブスクが違います。

▷ Figma・UI/UX・配色の具体テクニックを体系化したい実務デザイナー

Kindle Unlimited 30日無料|デザイン本読み放題▶

▷ ブランド・発想・ディレクション系のインプットを"耳で"増やしたい人

オーディオブックAudible

※無料期間中の解約で料金発生なし

▶ デザイン→エンジニアリングの橋渡しに興味があれば プログラミング / エンジニア転職 もどうぞ。


スポンサードリンク

Unsplash の利用規約と API ガイドライン – 全体像と実装のポイント

Unsplash が提供する高品質なフリー画像は、商用・非商用問わず多くのサイトで活用されています。本セクションでは、クレジット表記の必須要件API のリクエスト上限・商用利用条件 を中心に、最新情報と実装時の注意点をまとめます。公式ドキュメントは随時更新されるため、本文中で紹介するリンク先が古くなった場合は必ず Unsplash の開発者ポータル(https://unsplash.com/developers) を直接確認してください。


クレジット表記の基本要件

Unsplash の画像を使用する際に守らなければならない唯一の条件は、写真家へのクレジット表示 です。以下のフォーマットで掲載すれば、ライセンス遵守となります。

  • 推奨フォーマット
    Photo by {Photographer Name} on Unsplash

  • HTML の実装例

このクレジットは、画像をページに埋め込むたび(記事本文・サイドバー・アイキャッチなど)に表示し続ける必要があります。プラグインで自動付与できる設定がある場合は、「クレジット自動付与」 を有効化すると便利です。

ポイント:クレジットは画像そのものではなく、HTML 上のテキストとして残すことが求められます。削除したり隠したりしないよう注意してください。


API キー取得手順と Facebook 連携の実態

Unsplash の API を利用するには、開発者ポータルで Access KeySecret Key を取得します。以下は最新の取得フローです(2026 年時点)。

ユーザー登録からキー取得までの流れ

  1. Unsplash にサインアップ
    公式サイト右上の「Join」ボタンからメールアドレスまたは Google・Apple のいずれかの SNS アカウントで登録します。

  2. メール認証
    送信された確認メールのリンクをクリックし、アカウントを有効化します。

  3. 開発者ダッシュボードへアクセス
    ログイン後、右上メニューから Developers → Your Applications を選択します。

  4. 新規アプリケーション作成
    「Create a new application」をクリックし、以下の情報を入力します。

  5. アプリ名(例:My WP Site)
  6. 説明文(簡潔に用途を書くだけで可)
  7. コールバック URL(WordPress 用は https://example.com/wp-admin/ が一般的)

  8. キーの発行
    作成完了後に Access KeySecret Key が表示されます。これらを WordPress のプラグイン設定画面に貼り付ければ、基本的な画像検索がすぐに利用可能です。

注意点:以前は「Facebook 連携」が推奨と記載されていましたが、現在のポータルでは必須でも強制でもなく、任意で設定できるだけです。Facebook アカウントを持っていない場合でも問題なくキーは取得できます。

OAuth が必要になるケース

シナリオ 必要な認証
ユーザーごとのコレクション取得 OAuth 2.0(ユーザー同意)
「いいね」や「ダウンロード」イベントを記録 OAuth が必須
複数サイトで同一キーを共有し、利用状況を個別に把握したい OAuth 推奨

WordPress のプラグイン(例:Instant Images)では設定画面に「Client ID / Secret」入力欄が用意されているため、取得した Secret Key を貼り付けるだけで OAuth フローを完了できます。


WordPress 用 Unsplash プラグインの選び方と導入手順

Unsplash の公式 WordPress プラグインは 提供されていません。そのため、信頼性や機能面で評価が高い有志プラグインを中心に比較し、適切なものを選択します。

有力プラグインの特徴比較

Unsplash 画像を WordPress に組み込む代表的プラグインは Instant ImagesWP Unsplash(非公式)です。以下の表はそれぞれの主要項目をまとめたものです。

概要:各プラグインの開発元・更新頻度・対応機能を比較し、導入判断材料とします。

項目 Instant Images(有志) WP Unsplash(非公式)
開発元 個人/コミュニティ 同上
更新頻度 1〜2か月ごとにリリース 約半年に一回
主な機能 - 画像検索・プレビュー
- メディアライブラリへ直接保存
- クレジット自動付与
- 検索結果のカスタムサイズ指定
- キャッシュ期間設定
サポート体制 WordPress.org フォーラム + GitHub Issues 同上
無料/有料 基本機能は無料、プレミアムプランあり 完全無料(広告なし)

インストールと基本設定手順

  1. WordPress 管理画面 → プラグイン → 新規追加
  2. 検索ボックスに「Instant Images」または「WP Unsplash」と入力し、目的のプラグインを「今すぐインストール」→「有効化」します。

  3. 設定画面へ移動設定 > Instant Images など)

  4. Access KeySecret Key を貼り付ける
  5. キャッシュ期間:12 時間以上を推奨(サーバー負荷軽減)
  6. クレジット自動付与 にチェック → HTML に自動挿入

  7. 保存 して設定完了。以降、投稿編集画面のメディアライブラリに 「Unsplash」タブ が表示されます。

ポイント:公式プラグインが存在しないため、有志プラグインを選ぶ際は更新頻度とサポート実績を必ず確認してください。


投稿エディタでの画像検索・挿入フロー

プラグイン有効化後、ブロックエディタ(Gutenberg)やクラシックエディタから簡単に Unsplash 画像を取得できます。以下は実際の操作手順です。

メディアライブラリに追加された「Unsplash」タブの使い方

  1. 投稿編集画面で 「メディアを追加」 ボタン → サイドバーに表示される Unsplash タブを選択。
  2. 初回利用時は API キーが正しく認証されているか確認するポップアップが出ます。エラーが出た場合はキーの入力漏れやキャッシュクリアを試してください。

ヒント:タブが見当たらないときは、プラグインを一度無効化→再有効化し、ブラウザのキャッシュも削除すると解決します。

キーワード検索から画像挿入までの流れ

カテゴリ 推奨キーワード例 取得時のポイント
風景 mountain sunrisecoastal view 高画質(1920×1080)を優先
ビジネス office workspaceteam meeting 人物が写る場合は必ずクレジット表示
テクノロジー code snippetcloud computing PNG が必要なら URL に format=png を付加
  1. キーワードを入力 → Enter で検索開始。
  2. サムネイルが表示されたら 「プレビュー」 ボタンで拡大確認。
  3. 使用したい画像の 「挿入」 をクリックすると、ブロックエディタに <img> タグが自動で埋め込まれます。
  4. アイキャッチに設定したい場合は、プレビュー右上の 「アイキャッチに設定」 ボタンを選択してください。

まとめ:検索 → プレビュー → 挿入(→必要ならアイキャッチ)という 3 ステップで完了します。


パフォーマンスと SEO の最適化

Unsplash 画像は CDN 経由で配信されるため、サーバーに保存しなくても高速表示が期待できます。ただし、SEO とページ速度を最大限に引き出すにはいくつかの追加設定が必要です。

外部リンク方式(ローカル保存なし)の実装例

プラグインの 「画像をローカル保存しない」 オプションを有効化すると、以下のようなタグが生成されます。

  • src は Unsplash の最適化済み CDN URL
  • loading="lazy" により遅延読み込みが自動付与され、ページレンダリングが高速化

重要:外部画像でも必ず alt 属性 を設定し、検索エンジンに内容を伝えるようにしましょう。

速度改善のベストプラクティス

  1. Unsplash CDN の活用
    Unsplash 自体が高速 CDN を提供しているため、追加設定は不要です。大量画像を扱う場合は Cloudflare 等と併用するとさらに効果的です。

  2. lazy‑load の二重設定回避
    WordPress 本体でも loading="lazy" が自動付与されますが、プラグイン側で無効化したい場合は以下コードを functions.php に追加します。

  1. 画像サイズの最適化
    プラグイン設定で 「自動リサイズ」 を有効にし、w=800(幅 800px)程度に制限するとモバイル端末でも快適に表示できます。

まとめ:Unsplash CDN + lazy‑load + 適切な幅指定で、サーバー保存なしでも SEO に支障のない高速ページを実現できます。


API 使用量のモニタリングとエラーハンドリング

リクエスト上限は 1 時間あたり 5,000 回(2026 年時点)です。超過すると 429 Too Many Requests が返され、画像取得が失敗します。以下に監視方法と実装例を示します。

ダッシュボードでの使用量確認手順

  1. Unsplash 開発者ポータルにログインし、左メニューから Your Applications → 対象アプリを選択。
  2. Analytics タブで「Requests per hour」や「Total requests」のリアルタイム統計が表示されます。

WordPress 側でもプラグイン設定画面に 「API 使用状況」 ウィジェットがあり、現在のリクエスト数と残量(例:4,720 / 5,000)を確認できます。

ポイント:月初めにキャッシュ期間や検索キーワードを見直すだけで、使用量削減につながります。

超過時の対策コード(PHP/WordPress 用)

  • バックオフ戦略:429 が返ったら一定時間待機し、最大 3 回まで再試行します。
  • ログ出力:エラーはサーバーログに残すことで、後日原因解析が容易になります。

まとめ:ダッシュボードで使用量を定期的にチェックし、429 エラー時はバックオフリトライで自動復旧させる実装がベストプラクティスです。


法的表記例とプライバシーポリシーへの追記

Unsplash 画像の利用についてサイト運営者側で明示すべき情報は、クレジット表示の要件画像取得元 URL の2点です。以下に、プライバシーポリシーや利用規約へ組み込む際のサンプル文を掲載します。

プライバシーポリシーへの記載例

当サイトでは、無料写真素材サービス「Unsplash」(https://unsplash.com) が提供する画像を使用しています。各画像には「Photo by {撮影者名} on Unsplash」のクレジットを付与し、Unsplash のライセンス条件に従って掲載しております。

利用規約への記載例

第○条(画像の使用)
本サイトが掲載するすべての写真は、Unsplash(https://unsplash.com)から取得したものです。各画像には「Photo by {撮影者名} on Unsplash」のクレジットを表示し、Unsplash の利用規約に基づき商用・非商用問わず使用します。

ポイント:上記のように URL とクレジット要件だけを書けば、法的な透明性が確保できます。必要に応じて画像ごとのリンクを個別に設定しても構いません。


まとめ – 安全・高速に Unsplash を活用するためのチェックリスト

項目 確認ポイント
アカウント登録 メール認証完了、Facebook 連携は任意
API キー取得 Access Key と Secret Key を保管し、プラグインに設定
クレジット表記 Photo by {Photographer} on Unsplash が必ず表示されているか
プラグイン選定 公式提供はなし → 更新頻度・サポートが充実した有志プラグインを使用
パフォーマンス設定 CDN + lazy‑load + 適切な画像幅(例:800px)
リクエスト監視 開発者ダッシュボードの Analytics と WP のウィジェットで残量確認
エラーハンドリング 429 時はバックオフ再試行、ログ出力を実装
法的表記 プライバシーポリシー・利用規約に Unsplash 使用の旨を追記

上記項目を順守すれば、Unsplash の高品質な画像を 商用サイトでも安全かつ高速に 埋め込むことができます。公式情報は随時変わる可能性がありますので、実装前に必ず最新の Unsplash 開発者ドキュメントをご確認ください。

スポンサードリンク

お得なお知らせ

スポンサードリンク
デザイン本が読み放題

Figma・UI/UX・配色の深いノウハウを

動画・記事の断片情報より、1冊の体系書籍のほうが圧倒的に速い。Kindle Unlimited対象のデザイン書籍が豊富です。

Kindle Unlimited 30日無料▶ Audible|デザイン発想本を耳で▶

▶ デザイン→エンジニアリングの橋渡しに興味があれば プログラミング / エンジニア転職 もどうぞ。


タイプ別にすぐ選べる

クリエイティブの引き出し、どう増やす?

Figma・UI/UX・配色・タイポグラフィ。"手を動かす"学びと"発想力を磨く"学びは、使うサブスクが違います。

▷ Figma・UI/UX・配色の具体テクニックを体系化したい実務デザイナー

Kindle Unlimited 30日無料|デザイン本読み放題▶

▷ ブランド・発想・ディレクション系のインプットを"耳で"増やしたい人

オーディオブックAudible

※無料期間中の解約で料金発生なし

▶ デザイン→エンジニアリングの橋渡しに興味があれば プログラミング / エンジニア転職 もどうぞ。


-Unsplash