プレースホルダー画像ジェネレーター

プレースホルダー画像とは、最終的な写真やアートワークが準備できていない間に使われる仮の画像のことです。通常は指定したピクセルサイズの単色の長方形で、寸法がラベルとして表示されることが多く、例えばグレーの600×400ボックスに「600 × 400」と表記されます。デザイナーや開発者がモックアップ・ワイヤーフレーム・プロトタイプに使用することで、実際の画像が揃う前でもレイアウトが完成して見えます。ダミー画像、仮画像、モック画像とも呼ばれます。

画像を <img> タグで参照します。最も自己完結した方法はデータURIで、ホストするファイルが不要です。例: <img src="data:image/svg+xml,…" width="600" height="400" alt="プレースホルダー">。このサイトの「<img>」タブをクリックして「コピー」すれば、データURIと対応する幅・高さが入力済みの完全なタグがクリップボードにコピーされ、そのまま貼り付けるだけです。ダウンロードしたファイルを通常通り参照することも可能です。例: <img src="/img/placeholder-600x400.png">。

はい、しかもより高いプライバシー保護が得られます。placehold.co・via.placeholder.com・dummyimage.com はすべてサーバーから画像を配信するため、ネットワークリクエストが発生し、レート制限にかかる場合があり、それらのサービスがどのページから画像がリンクされているかをトラッキングすることを意味します。UtiloKitはプレースホルダー画像をすべてブラウザ内で生成するため、リクエストはデバイスの外に出ることはありません。ダウンロード可能なファイルまたは自己完結型のデータURIが得られ、オフラインでも機能し、外部サービスが停止しても壊れません。

プレースホルダー画像は、ウェブサイト・アプリのモックアップ・ワイヤーフレーム・メールテンプレート・デザイン引き渡し・実際の素材がまだ作成中のフロントエンド開発などに使用されます。正確なレイアウトスペースを確保することで（レイアウトシフト/CLS防止）、レスポンシブブレークポイントのテストが容易になり、CMSテンプレートやコンポーネントライブラリのデモコンテンツとして活用できます。開発中に1280×720の単一ボックスをグリッド内のすべての動画サムネイルの代替として使用することで、本番素材を待たずにチーム全体でレイアウトを確認できます。

画像が入るスロットの正確なピクセルサイズに合わせてください。そうすることで実際の画像が読み込まれた際にレイアウトがずれません。よく使われるサイズ: SNS・OGシェア画像用1200×630、Instagram正方形用1080×1080、動画サムネイル用1280×720、アバター用256×256、フルワイドヒーローバナー用1920×1080、リーダーボード広告用728×90。ここにあるサイズとアスペクト比プリセットを使ってワンクリックで設定するか、最大4000pxまでカスタムの幅と高さを直接入力してください。

「テキスト」フィールドにラベルを入力します。例えば「ヒーロー画像」「アバター」「広告スロット300×250」などです。空欄のままにすると、画像は自動的にサイズをラベルとして表示します（例: 「600 × 400」）。テキスト色とフォントサイズも設定できるため、モックアップ内のスロットが何を表しているかが一目でわかります。最終的な素材なしでクライアントが各画像エリアの役割を理解する必要があるデザインレビューで特に役立ちます。

テキスト付きの単色ボックスにはSVGが通常最適です。数百バイトと非常に軽量で、どんなサイズでも鮮明に表示され、データURIとしてクリーンに貼り付けられます。Web開発に最も実用的です。ラスターファイルが必要な場合や透明度が必要な場合はPNG、写真形式が求められる場合はJPG、最小のラスターファイルサイズにはWebPを使用してください。このツールは4つすべての形式でエクスポートでき、Webワークフローで最も実用的なSVGがデフォルトになっています。

Lorem Picsum（picsum.photos）はランダムな実際の写真を配信するため、リアルな画像が必要な場合に最適ですが、毎回サードパーティのサーバーから異なる写真が読み込まれます。このツールは指定したサイズ・色・ラベルで決定論的な単色ボックスを生成します。予測可能で軽量、ブラウザ内でオフライン生成されるため、何もアップロードされず、読み込みごとに結果が変わることもありません。リアルな写真のモックアップにはPicsumを、クリーンで管理しやすいレイアウトプレースホルダーにはこのツールをご利用ください。

placehold.co のようなホスト型サービスは、サーバーがリクエストごとに画像を生成するため placehold.co/600x400 のようなURLを提供します。このツールはサーバーなしでブラウザ内で完全に動作するため、ホットリンクURLの代わりに、<img> src や CSS url() に貼り付けられる自己完結型のデータURIと、ダウンロード可能なSVG・PNG・JPG・WebPファイルを提供します。ネットワークリクエストなし、レート制限なし、オフラインでも機能します。

背景色を #e2e8f0 のような薄いグレーに設定し、テキストを #475569 のような中間グレーにすると、定番のニュートラルなプレースホルダー外観になります。グレーカラーパレットプリセットを選択すると両方の色が一度に適用されます。サイズを選んでダウンロードするだけです。グレーは「意図的に空白」であることを示すため、レビュー中にプレースホルダーが周囲のデザインと視覚的に競合することがありません。これはFigma・Sketch・ほとんどのデザインシステムがプレースホルダースロットに使用している標準的な慣例です。

はい、完全に対応しています。このツールはiPhoneのSafariやAndroidのChromeを含む最新のブラウザで動作します。サイズを設定し、色を選び、テキストを追加して、スマートフォンから直接データURIをダウンロードまたはコピーできます。デバイスでレスポンシブレイアウトを確認しながら、スクリーンショットやデザイン引き渡しのために画像スロットをすばやく埋める必要があるときに特に便利です。アプリのインストールは不要で、モバイルブラウザでページを開くだけです。

アスペクト比プリセット（1:1・4:3・3:2・16:9・2:1・9:16）を選択すると、幅に合わせて高さが自動的に更新されます。例えば幅1280で16:9を選択すると1280×720になります。「アスペクト比を固定」をオンにすると、どちらかの寸法をスケーリングしても比率が保たれます。ブレークポイントをまたいで固定比率を維持しなければならないレスポンシブ画像スロットや、すべての画像サムネイルが同じ比率である必要があるカードグリッドのデザインに最適です。

はい、すべての画像が無料で、登録・透かし・アカウント・使用制限はありません。1日あたりのダウンロード数に制限があったり、メール登録が必要なオンライン画像ツールとは異なり、このツールには一切の制限がありません。placehold.co・dummyimage.com・via.placeholder.com のプライバシーに配慮した代替手段です。それらのサーバーにホットリンクする代わりに、画像をローカルで生成してファイルまたはデータURIを完全に所有できます。サードパーティの稼働状況に依存する必要もありません。