Placeholder Image Generator
指定サイズ・色・文字のダミー画像をブラウザ内で生成。デザインモックアップに最適。
プリセットサイズ
#cccccc#666666プレビュー
プレビューは画面幅に合わせて縮小表示されます。ダウンロード画像は 600 x 400px です。
How to Use the Placeholder Image Generator
Enter the width and height you need, or choose a common preset. Pick background and text colors, then add a custom label if needed. When the text field is empty, the canvas displays the current dimensions automatically. Select PNG, JPEG, or WebP and download the full-size result, or copy a self-contained HTML img tag with the image embedded as a data URL.
プレースホルダー画像ジェネレーターの使い方
幅と高さを入力するか、用途に合うプリセットを選びます。背景色・文字色・任意のテキストを 指定すると、Canvas上のプレビューがリアルタイムで更新されます。文字が空欄の場合は 「幅 × 高さ」を自動表示します。出力形式を選び、画像をダウンロードするか、data URLを 埋め込んだimgタグをコピーしてください。
よくある活用例
デザインモックアップでの活用
写真やバナーが未完成でも、実際の表示枠と同じ縦横サイズのダミー画像を置けば、余白や 視線誘導を先に確認できます。背景色とラベルを画面ごとに変えると、素材の用途も判別しやすくなります。
レスポンシブレイアウトのテスト
300 x 200、1200 x 630、1920 x 1080など比率の異なる画像を作り、CSSの object-fit、aspect-ratio、ブレークポイント切り替えを実データ投入前に検証できます。
README・ドキュメントのバッジ代わり
短いステータス名や機能名を入れた小さな画像を保存し、READMEや社内ドキュメントで セクション見出し・バッジ代わりに利用できます。色を揃えると資料全体の識別性も上がります。
Why browser-only?
Services such as placehold.co and Lorem Picsum return images from external servers. This tool draws every pixel locally with the Canvas API, so sizes, colors, labels, and generated image data are never sent to a third party. It is suitable for confidential product mockups and works without an image-generation API or server round-trip.
placehold.coやLorem Picsumのような外部サービスとは異なり、本ツールの画像生成はCanvas APIで 完全にブラウザ内完結します。入力内容や生成画像をサーバーへ一切送信しないため、未公開製品や 機密性の高い画面のモックアップでも安心して利用できます。
よくある質問
生成したプレースホルダー画像は商用利用できますか？
はい。本ツールが生成した画像に利用制限はなく、商用のデザインモックアップやWeb制作にも無料で利用できます。ただし、入力した文字に第三者の権利が含まれる場合は、その権利を確認してください。
生成できる画像の最大サイズに制限はありますか？
入力できる幅と高さはそれぞれ最大8192pxです。実際に生成できるサイズはブラウザのCanvas APIと端末のメモリにも依存するため、大きな画像で失敗する場合はサイズを小さくしてください。
背景が透過したPNGに対応していますか？
現在は対応していません。指定した背景色でCanvas全体を塗りつぶしてから画像を生成するため、PNGを選んだ場合も背景は不透明になります。
関連ツール / Related Tools
開発をもっと効率的に
PR