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

Lorem Picsum / プレースホルダー画像ジェネレーターは、モックアップ、ワイヤーフレーム、プロトタイプ、フロントエンド開発用にピクセルパーフェクトなプレースホルダー画像を作成できる、無料のブラウザベースのツールです。最大4000ピクセルまでの任意の幅と高さを設定し、色を選択し、カスタムテキストを追加すると、キャンバスを使用したプレビューが即座に更新されます。サーバーとの通信がないため待ち時間はありません。PNG、JPG、WEBP、またはSVGとしてダウンロードできるほか、そのまま貼り付け可能なHTML / Markdown / Reactスニペットや、Lorem Picsum、Placehold.co、DummyImageの直リンクURLも取得できます。

プレースホルダー画像とは何ですか？なぜ必要なのですか？

プレースホルダー画像は、ウェブサイトやアプリのデザインおよび開発段階で使用される一時的な画像です。最終的な画像のスペースを確保することで、デザイナーや開発者は実際の写真やグラフィックが用意される前に、コンテンツの配置、レスポンシブ動作のテスト、モックアップの確認を行うことができます。プレースホルダーは、ワイヤーフレーム、プロトタイプ、メールテンプレート、フロントエンドのテストに不可欠です。これらがないと、レイアウトが崩れたり、CSSルールが正しく動作しなかったり、ステークホルダーが完成後のデザインをイメージできなくなります。

主な活用例

• ワイヤーフレームとモックアップ — クライアントに各画像がどのサイズでどこに配置されるかを正確に示します。
• フロントエンドのプロトタイピング — 最終的なアセットが納品される前にレスポンシブレイアウトを開発します。
• CMSのテスト — テスト投稿や製品ページにリアルな画像寸法のデータを入力します。
• メールテンプレート — マーケティングキャンペーン用にバナーや製品画像の枠を確保します。
• ドキュメントとデザインシステム — アスペクト比、余白、ブレークポイントを説明します。
• 遅延読み込み（Lazy-load）のテスト — 画像読み込み戦略をストレステストするために大きな画像を素早く生成します。

Lorem PicsumとPlacehold.coの違いは何ですか？

Lorem Picsum (picsum.photos) は、指定された寸法でランダムな実際の写真を返します。これはリアルなモックアップに最適です。Placehold.coとDummyImageは、中央に寸法が印字された単色の長方形を返します。これはワイヤーフレームや、特定のサイズの画像がどこに配置されるかを正確に示すのに理想的です。このジェネレーターは、両方のスタイルのURLを1か所で作成できるほか、ファイルとしてダウンロード可能な独自のキャンバス描画による単色、グラデーション、チェッカー画像を生成できます。

Retina対応のプレースホルダー画像セットを生成するにはどうすればよいですか？

基本の幅と高さを設定し、「URLとスニペットを生成」をクリックして結果パネルを表示させ、「1x / 2x / 3x をダウンロード」をクリックします。ツールは、高DPIスクリーン用のsrcset属性で使用できる、同じプレースホルダーの1倍、2倍、3倍スケールの3つのコピーを作成します。各ファイルは、[email protected]のような分かりやすい名前でダウンロードされます。

なぜプレビューはサーバーリクエストなしで更新されるのですか？

画像はHTML Canvas APIを使用してブラウザ内で完全に描画されます。幅、高さ、色、またはテキストへのすべての変更は、ネットワークの往復なしで即座に再レンダリングされます。つまり、このツールは高速で、読み込み後はオフラインで動作し、デザインの選択をサーバーに送信することはありません。プレビューに納得したら、同じキャンバスをダウンロード可能なファイルとしてエクスポートしたり、base64データURLとしてコピーしたりできます。

どの画像形式でダウンロードできますか？

生成されたプレースホルダーは以下としてダウンロード可能です：

• PNG — ロスレス、透明度対応。単色や鮮明なテキストに最適。
• JPG — ファイルサイズが小さい。多少の圧縮ノイズが許容される写真のようなコンテンツに最適。
• WEBP — 同等の品質で最高の圧縮率を実現する最新形式。すべてのモダンブラウザでサポートされています。
• SVG — ベクター形式。無限にスケーラブルで、単色やグラデーション背景ならファイルサイズが極小。
• Base64データURL — 画像をインラインテキストとしてコピーし、HTMLやCSSに直接貼り付け可能。

このツールの使い方

1. サイズを選択： ピクセル単位で幅と高さを入力するか、アバター、バナー、ヒーロー、Twitterカードなどのサイズプリセットの1つをクリックします。
2. 背景スタイルを選択： 平坦な色なら「単色」、2色のブレンドなら「グラデーション」、透明スタイルを模すなら「チェッカー」を選択します。
3. 色を設定： カラーピッカーを使用するか、16進数コードを直接入力するか、クイックパレットのスウォッチをクリックします。
4. カスタムテキストを追加（任意）： 空白にすると寸法が自動的に表示されます（例：600 × 400）。
5. ライブプレビューを確認： キャンバスは入力のたびに更新されます。送信ボタンを押す必要はありません。
6. ダウンロードまたはURL生成： 即座にファイルが必要な場合は「画像をダウンロード」を、直リンクURLやコピペ用コードが必要な場合は「URLとスニペットを生成」をクリックします。

クイックサイズリファレンス

最良の結果を得るためのヒント

• アスペクト比を固定してリサイズすると、同じ比率を維持できます。これはレスポンシブセットの作成に便利です。
• チェッカーパターンを使用すると、透明なオーバーレイをデザインする際、透明度がどのようにレンダリングされるかをシミュレートできます。
• コントラストの高い色（明るい背景に暗いテキストなど）を選択すると、寸法のラベルが読みやすくなります。
• テキストは短く — 長いラベルは自動的に縮小されますが、4〜12文字程度が最もきれいに見えます。
• 鮮明なスケーリングにはSVG — 複数のサイズで表示されるデザインの場合、SVGはどのズームレベルでもシャープです。
• 本番環境にはWEBP — 同品質のJPGより約30%小さく、ブラウザのサポートも優れています。

生成された画像を商用プロジェクトで使用できますか？

このツールのキャンバスジェネレーター（ダウンロードする単色プレビュー）で作成されたカスタム画像は100%あなたの所有物であり、制限なくどこでも使用できます。Lorem Picsum の写真はUnsplashライセンスの下でライセンスされており、商用および個人利用で無料です。Placehold.co や DummyImage も無料で使用できますが、プロダクション資産としてリリースする前に、各サービスの最新の規約を必ず確認してください。

よくある質問

最大画像サイズはありますか？

このツールは1辺最大4000 × 4000ピクセルまでの寸法をサポートしており、高DPIのヒーロー画像や4Kディスプレイを含む、ほぼすべての実世界のユースケースをカバーしています。ブラウザ側で処理を行うため、非常に大きなキャンバスの場合、古いデバイスではプレビューが一時的に遅くなることがあります。

透明なプレースホルダーを生成できますか？

はい。PNGまたはSVGとしてダウンロードし、背景モードで「チェッカー」を使用すると、透明度のレンダリングを視覚化できます。完全に透明なものをダウンロードするには、背景色とセカンダリカラーを同じ値に設定し、PNGを選択してください。

Photoshop、Figma、Sketchなどで画像は使えますか？

もちろんです。PNG、JPG、WEBP、SVGはすべて、現代のあらゆるデザインツールでサポートされている標準的な画像形式です。ダウンロードしたファイルをキャンバスにドラッグ＆ドロップするか、CSSのインライン背景としてデータURLを直接使用してください。

Placehold.coのURLを直接入力するのではなく、このツールを使う理由は？

3つの理由があります。(1) URLを確定する前にライブで視覚的なプレビューを確認できること。(2) HTML、Markdown、JSX、CSS、BBCodeのコードを同時にワンクリックでコピーできること。(3) オフラインでの使用や、サードパーティのサービスに依存できないプロジェクト用に、セルフホスト可能なファイルをダウンロードできることです。

モバイルデバイスでも動作しますか？

はい、インターフェース全体がスマートフォンやタブレットの画面に適応します。キャンバスのプレビューは画面に合わせてスケーリングされ、コントロールは垂直に並び、すべてのダウンロード / コピーアクションはモバイルのクリップボードAPI経由で動作します。

多くのサイズを一括生成できますか？

「Retinaセット」ボタンを使用すると、現在のサイズの1倍、2倍、3倍をワンクリックでダウンロードできます。その他のバッチについては、各プリセットチップをクリックしてダウンロードしてください。キャンバスは60fps以上で再レンダリングされるため、反復作業は非常に高速です。

関連ツール

• 画像リサイザー — 既存の写真を任意の幅・高さにリサイズします。
• 画像コンプレッサー — 本番環境に公開する前にファイルサイズを縮小します。
• 配色ジェネレーター — プレースホルダー用のパレットを選択します。
• CSSグラデーションジェネレーター — 背景用のグラデーションをデザインします。

追加リソース

• Lorem Picsum — 無料のランダム写真サービス
• Placehold.co — モダンなプレースホルダーサービス
• MDN: img 要素と srcset
• Lorem ipsum — プレースホルダーコンテンツの歴史