プレースホルダー画像
プレースホルダー画像生成の無料オンラインツール。サイズ・背景色・テキストを指定してモックアップ用ダミー画像を作成。ブラウザ処理。
lockファイルはサーバーに送信されません
Ctrl+D を押してこのページをブックマークしてください
プレースホルダー画像生成ツールは、開発とデザイン用の仮画像を作成する無料オンラインツールです。 サイズ、背景色、テキスト、フォントをカスタマイズしてワイヤーフレームやモックアップに活用します。 ブラウザ内で処理されます。
プレースホルダー画像の使い方は?
- 画像サイズ（幅×高さ）を入力します。
- 背景色、テキスト色、表示テキストを設定します。
- 生成ボタンをクリックして画像をダウンロードするか、URLをコピーします。
プレースホルダー画像に関するよくある質問
プレースホルダー画像はどこで使いますか？
Web開発で実際の画像が準備される前のレイアウト確認、ワイヤーフレーム、プロトタイプ、デザインモックアップなどに使用されます。
カスタムテキストを画像に表示できますか？
はい、デフォルトでは画像サイズが表示されますが、任意のテキストに変更できます。テキストの色やフォントもカスタマイズできます。
本番のサービスにプレースホルダー画像を残したままにすると何が起きますか？
灰色の四角が1つ残っているだけで、訪問者はサイトが未完成だと感じ、商品ページなら購入をためらいます。検索面でも損です。Google画像検索に色のないプレースホルダーがインデックスされ、商品の構造化データのimageフィールドがこのURLを指していると、リッチリザルトの資格を失うことがあります。公開前にplaceholderやvia.placeholderといった文字列でコード全体を一度検索してみてください。
レイアウトがずれないようにするには、プレースホルダーをどのサイズで作るべきですか？
実際に入る画像とまったく同じ縦横比で作る必要があります。画像があとから読み込まれてサイズが変わると下の内容が押し下げられ、Googleが計測するCLS（累積レイアウトシフト）のスコアが悪化します。ピクセル寸法まで同じである必要はありませんが、比率は必ず合わせ、imgタグにwidthとheightの属性を書いてブラウザが先に場所を確保できるようにしてください。
プレースホルダー画像を上手に活用するには?
- 実際に入る写真と同じ比率で作ると、差し替えたときにレイアウトがずれません。
- 画像内に1200×630のようにサイズを書いておくと、チームでの仕様確認が早く済みます。
- 仮画像でもalt属性は空にせず、最終的に何を載せるかを書いておきましょう。