Back

Web開発者向けトップ5画像プレースホルダーサービス

OpenReplay Team OpenReplay Team

Dec 5, 2025 · 3 min read

Web開発者向けトップ5画像プレースホルダーサービス

プロトタイプを構築中で、デザインシステムにモック画像が必要になり、何年も使ってきたプレースホルダーURLにアクセスしたところ、サービスが停止していたり、遅かったり、2025年になってもHTTPで配信されていたりする。これは思っている以上によく起こることです。

2010年代初頭に人気だった多くのプレースホルダーサービスは、信頼性が低下したり、完全に動作しなくなったりしています。モダンなフロントエンドワークフローで実際に機能する、CDN対応の最新プレースホルダー画像をお探しなら、知っておくべき5つのサービスをご紹介します。

重要なポイント

  • 画像の破損やセキュリティ警告を避けるため、HTTPS対応、CDN配信、アクティブなメンテナンスを行っているプレースホルダーサービスを優先しましょう。
  • 開発中にページ読み込み間で一貫したモック画像を使用するには、シード付きURL(Lorem Picsumのseedパラメータなど)を使用しましょう。
  • 本番環境にデプロイする前に、すべてのプレースホルダー画像を実際の画像または自己ホスト型アセットに置き換えましょう。
  • 外部プレースホルダーサービスを使用する際は、Content-Security-Policyヘッダーを更新しましょう。

プレースホルダーサービスを本番環境対応にする要素

具体的なサービスに入る前に、Webアプリ用の画像プレースホルダーAPIを選択する際に評価すべき点を以下に示します:

  • HTTPS専用: 混合コンテンツの警告はサイトを破壊します
  • CDN/エッジ配信: グローバルで高速なレスポンスタイム
  • アクティブなメンテナンス: 最近のコミットや更新を確認
  • 明確なドキュメント: URLパターンが予測可能であること
  • モダンなフォーマット対応: WebP、AVIF、またはSVGオプション

何年も更新されていない、またはHTTPS対応がないサービスは避けましょう。開発中に使用するフロントエンド画像モックデータが負債になってはいけません。

2025年版 信頼できる5つのプレースホルダーサービス

1. Placehold.co

Placehold.coは、オプションでテキストを含むシンプルな色付きボックスを生成します—クラシックなプレースホルダースタイルを正しく実装しています。

<img src="https://placehold.co/600x400" alt="Placeholder">
<img src="https://placehold.co/600x400/EEE/31343C?text=Hero+Image" alt="Hero">
<img src="https://placehold.co/600x400.webp" alt="WebP format">

主な機能には、WebP対応、カスタムフォント、URL内での16進数カラー指定、ボーダーオプションなどがあります。高速でアクティブにメンテナンスされており、現在信頼性が低下しているvia.placeholder.comの優れた代替品です。

2. Lorem Picsum

Lorem Picsumは、Unsplashから実際の写真を配信するため、リアルなモックアップに最適です。

<img src="https://picsum.photos/800/600" alt="Random photo">
<img src="https://picsum.photos/seed/product/400/300" alt="Consistent image">
<img src="https://picsum.photos/800/600?grayscale&blur=2" alt="Filtered">

seedパラメータを使用すると、ページ読み込み間で同じ画像を取得できます—開発中に一貫したフロントエンド画像モックデータが必要な場合に便利です。クレジット表記は不要です。

3. DummyImage

DummyImageは、テキストベースのプレースホルダーに対して広範なカスタマイズを提供し、一般的な広告サイズや画面比率のプリセットサイズを含みます。

<img src="https://dummyimage.com/728x90/000/fff" alt="Leaderboard ad">
<img src="https://dummyimage.com/16:9x1080" alt="HD ratio">

このサービスは、特定のアスペクト比や業界標準のサイズが必要な場合に特に便利です。

4. placeholders.dev

placeholders.devはCloudflare Workers上で動作し、エッジからSVGプレースホルダーを最小限のレイテンシで配信します。

<img src="https://images.placeholders.dev/?width=400&height=300&bgColor=%23f0f0f0&textColor=%23333" alt="SVG placeholder">

SVG専用のアプローチにより、どのサイズでも鮮明なレンダリングが可能ですが、ラスター形式が必要な場合は他のサービスを使用する必要があります。

5. DiceBear(アバター用)

DiceBearは決定論的なアバタープレースホルダーを生成します—同じシードは常に同じアバターを生成します。

<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=user@example.com" alt="User avatar">

20種類以上のスタイルが利用可能です。このサービスは、一貫したプレースホルダーアバターが必要なユーザープロフィールシステムに最適です。

実用的な考慮事項

パフォーマンス: 本番環境からサードパーティAPIに大量のリクエストを送らないでください。開発中はプレースホルダーを使用し、デプロイ前に実際の画像または自己ホスト型アセットに置き換えましょう。

CSPヘッダー: 外部プレースホルダーサービスを使用するには、Content-Security-Policyの更新が必要です:

Content-Security-Policy: img-src 'self' https://placehold.co https://picsum.photos;

ライセンス: Lorem Picsumのような写真ベースのサービスは、Unsplash画像を使用しています(ほとんどの場合、無料でクレジット表記不要)。商用プロジェクトでは常に利用規約を確認してください。

ローカル代替案: オフライン開発やプライバシーに配慮したプロジェクトの場合、CanvasやSVGを使用してクライアント側でプレースホルダーを生成するか、シンプルなローカルサービスを実行することを検討してください。

適切なサービスの選択

ニーズ最適な選択
シンプルな色付きボックスPlacehold.co
リアルな写真Lorem Picsum
特定のサイズ/比率DummyImage
エッジパフォーマンス、SVGplaceholders.dev
ユーザーアバターDiceBear

トップの画像プレースホルダーサービスは共通の特徴を持っています:アクティブなメンテナンス、HTTPS、CDN配信、明確なドキュメント。サービスを評価する際は、GitHubのアクティビティを確認し、ターゲット地域からのレスポンスタイムをテストしましょう。

まとめ

ニーズを満たす最もシンプルなオプションを選択してください。本番環境前にプレースホルダーを置き換えましょう。そして代替案をブックマークしておきましょう—信頼できるサービスでも時々ダウンすることがあります。適切なHTTPS対応とCDN配信を備えたアクティブにメンテナンスされているサービスを選択することで、開発ワークフローを妨げる画像の破損というフラストレーションを回避できます。

よくある質問

いいえ、プレースホルダーサービスは開発とプロトタイピング専用に設計されています。レート制限、時折のダウンタイム、または高負荷時のパフォーマンス問題がある可能性があります。本番環境にデプロイする前に、必ずプレースホルダーを実際の画像または自己ホスト型アセットに置き換えてください。

2010年代初頭の多くのプレースホルダーサービスは、時間とともにメンテナンスが失われたサイドプロジェクトでした。ドメインが期限切れになったり、サーバーがオフラインになったり、HTTPS対応が削除されたりします。これが、最近のGitHubアクティビティを持つアクティブにメンテナンスされているサービスを選択することが重要な理由です。

シードパラメータをサポートするサービスを使用してください。Lorem Picsumでは、URLパスにシード値を追加でき、DiceBearではシードクエリパラメータを使用します。同じシードは常に同一の画像を返すため、開発中のページ読み込み間での一貫性が確保されます。

はい、サイトがContent-Security-Policyヘッダーを使用している場合、img-srcディレクティブにプレースホルダーサービスのドメインを追加する必要があります。そうしないと、ブラウザが外部画像をブロックします。プレースホルダーを本番アセットに置き換える際は、これらのエントリを削除することを忘れないでください。

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..

OpenReplay

More articles from OpenReplay Blog