無料で使えるおしゃれなダミー画像生成サービス【Lorem Picsum】

ウェブ制作やデザインのモックアップ作成時に、「とりあえず画像を入れたい」と思うことはありませんか？そんなときに役立つのがLorem Picsum（https://picsum.photos/）。高品質な写真を簡単に埋め込める無料のダミー画像生成サービスです。この記事では、Lorem Picsumの魅力や使い方を紹介します。

Lorem Picsumとは？

Lorem Picsumは、無料写真ストックサイト「Unsplash」の画像を活用したダミー画像生成ツールです。URLを指定するだけで、指定サイズのランダムな画像や特定の画像をウェブページに表示できます。ダミーテキストの「Lorem Ipsum」にちなんで名付けられた、まさに「写真版Lorem Ipsum」です。

特徴

無料かつ商用利用可能：Unsplashの画像を使用し、MITライセンスで提供。
簡単な操作：URLにサイズやオプションを追加するだけで画像を生成。
カスタマイズ性：グレースケール、ぼかし、特定の画像ID指定など柔軟な設定。
高速で軽量：画像をダウンロードせずに直接埋め込み可能。

Lorem Picsumの使い方

Lorem Picsumの基本的な使い方は非常にシンプル。以下のURL形式を使って、HTMLのタグやCSSの背景画像に設定するだけです。
1. ランダムな画像を表示
画像の幅と高さを指定して、ランダムな画像を取得します。

<img src="https://picsum.photos/300/200" alt="ランダム画像">

ランダム画像

例：https://picsum.photos/300/200 → 幅300px、高さ200pxの画像

正方形の場合は1辺の長さだけ指定：https://picsum.photos/200 → 200x200pxの画像

ページをリロードするたびに異なる画像が表示されるので、モックアップ作成時に視覚的な変化を楽しめます。

2. 特定の画像を指定

画像IDを使って特定の画像を表示可能。IDはLorem Picsumのギャラリーで確認できます。

<img src="https://picsum.photos/id/237/300/200" alt="特定画像">

特定画像

例：https://picsum.photos/id/237/300/200 → ID237の画像を300x200pxで表示

3. グレースケールやぼかしを追加

オプションをURL末尾に追加して、画像にエフェクトを適用できます。
グレースケール：?grayscale
ぼかし：?blur

<img src="https://picsum.photos/300/200?grayscale" alt="モノクロ画像" />
<img src="https://picsum.photos/300/200?blur" alt="ぼかし画像" />

モノクロ画像
ぼかし画像

例：https://picsum.photos/300/200?grayscale → モノクロを適用
例：https://picsum.photos/300/200?blur → ぼかしを適用

4. ファイル形式の指定

JPGやWebP形式を指定可能。URL末尾に.jpgや.webpを追加します。

<img src="https://picsum.photos/200/300.webp" alt="WebP画像" />

WebP画像

例：https://picsum.photos/300/200.webp → WebP形式の画像

Lorem Picsumの活用シーン

ウェブ開発：HTML/CSSのレイアウト確認やプロトタイプ作成。
デザイン：モックアップやプレゼン資料におしゃれな仮画像を挿入。
テスト：画像読み込み速度のテストやレスポンシブデザインの検証。
ポートフォリオ：仮の画像で視覚的なバランスを整える。

注意点

表示速度：画像は毎回サーバーから取得されるため、ページ読み込みが遅くなる場合があります。キャッシュ対策（?random）を適切に使用しましょう。
著作権：Unsplashの画像は商用利用可能ですが、利用規約を確認してください。
ランダム性の限界：ランダム画像は意図しない印象を与える可能性があるため、特定の画像IDを活用するのがおすすめ。

まとめ

Lorem Picsumは、ダウンロード不要で高品質なダミー画像をすぐに使える便利なサービスです。ウェブ開発やデザインの効率を上げたい方にとって、必須のツールと言えるでしょう。サイズ指定やエフェクトのカスタマイズも簡単なので、ぜひ試してみてください！
公式サイト：https://picsum.photos/