Lorem Picsumとは？使い方・ダミー画像の設定方法と公開時の注意点

Lorem Picsumの使い方とおすすめ画像はダミー画像に使える！

ホームページ制作の途中で、掲載する写真がまだ決まっていないことは珍しくありません。「写真撮影がこれから」「商品画像が準備できていない」「ページ構成を先に確認したい」という場合、仮の画像を配置してデザインを進めます。このような仮画像を、ダミー画像またはプレースホルダー画像と呼びます。

ダミー画像を簡単に表示できるサービスの一つが「Lorem Picsum」です。

画像をダウンロードして加工しなくても、URLに希望するサイズを指定するだけで、ホームページ上にランダムな写真を表示できます。本記事では、Lorem Picsumの基本的な使い方、固定画像やグレースケール画像を表示する方法、ホームページ公開時にダミー画像を残さない方がよい理由、SEO・AIOを考慮した画像設定について解説します。

Lorem Picsumとは？

Lorem Picsumは、Webサイトやシステムの制作時に利用できるダミー画像サービスです。文章の仮テキストとして使われる「Lorem Ipsum」の画像版にあたり、URLへ横幅と縦幅を指定すると、そのサイズに合った写真が表示されます。

たとえば、横幅600px、縦幅400pxの画像が必要な場合は、次のURLを使用します。

https://picsum.photos/600/400

HTMLへ設置する場合は、以下のように記述します。

<img src="https://picsum.photos/600/400" alt="">

画像を探してダウンロードし、サイズを調整してアップロードする必要がないため、ホームページのレイアウト確認やテストサイトの制作に便利です。

Lorem Picsumがホームページ制作で使われる場面

Lorem Picsumは、主に次のような場面で使用できます。

• 写真素材が届く前にページ構成を確認する

• 画像が入った場合のレイアウトを確認する

• パソコンとスマートフォンの表示を検証する

• 一覧ページへ複数の仮画像を配置する

• Webシステムの画像表示機能をテストする

• デザイン案を顧客へ確認してもらう

• 画像サイズや縦横比を検討する

ダミー画像を設置すると、実際の写真がまだなくても、完成後のページ構成をイメージしやすくなります。

ただし、Lorem Picsumは基本的に制作・検証時に使用するサービスです。企業のホームページを本番公開するときは、自社の商品、スタッフ、施設、施工、サービスなどを伝える正式な画像へ差し替える必要があります。

Lorem Picsumの基本的な使い方

横幅と縦幅を指定する

URLの末尾に、横幅と縦幅を指定します。

https://picsum.photos/横幅/縦幅

横幅600px、縦幅400pxの場合は以下です。

https://picsum.photos/600/400

HTMLへ設置する場合は次のように記述します。

<img src="https://picsum.photos/600/400" alt="">

正方形の画像を表示する

正方形の場合は、一つの数値だけでも指定できます。

https://picsum.photos/500

この場合、500px×500pxの画像が表示されます。

ブログや商品一覧、スタッフ紹介など、同じ比率の画像を並べたレイアウトの確認に使用できます。

表示する画像を固定する方法

通常のURLでは、アクセスするたびに異なる画像が表示される場合があります。同じ画像を固定して表示したい場合は、画像IDまたはseedを使用します。

画像IDを指定する

特定の画像を表示する場合は、URLに画像IDを加えます。

https://picsum.photos/id/237/600/400

基本形式は以下です。

https://picsum.photos/id/画像ID/横幅/縦幅

IDを固定しておくと、ページを再読み込みしても同じ画像を表示できます。デザイン確認中に画像が変わると、色や明るさによってページの印象が変わってしまいます。顧客へデザイン案を確認してもらう場合は、画像IDを固定する方が適しています。

seedを指定する

任意の文字列をseedとして指定する方法もあります。

https://picsum.photos/seed/wreath/600/400

同じseedを使用すると、基本的に同じ画像を表示できます。

ページやコンテンツごとに異なる文字列を設定すれば、複数の固定ダミー画像を管理しやすくなります。

https://picsum.photos/seed/service01/600/400
https://picsum.photos/seed/service02/600/400
https://picsum.photos/seed/service03/600/400

グレースケール画像を表示する方法

URLの末尾に?grayscaleを追加すると、画像をグレースケールで表示できます。

https://picsum.photos/600/400?grayscale

画像の色に影響されず、レイアウトや文字の読みやすさを確認したいときに便利です。

Webデザインの初期段階では、写真の色が強すぎると、ページ構成より画像の印象に意識が向いてしまうことがあります。グレースケールを使用すれば、情報の優先順位や余白を確認しやすくなります。

ぼかした画像を表示する方法

URLの末尾に?blurを追加すると、ぼかしのある画像を表示できます。

https://picsum.photos/600/400?blur

ぼかしの強さは、1～10の数値で調整できます。

https://picsum.photos/600/400?blur=5

背景画像のレイアウトや、画像の上に文字を配置するデザインを確認する場合に便利です。

グレースケールとぼかしを組み合わせる

複数の指定を組み合わせることもできます。

https://picsum.photos/id/870/600/400?grayscale&blur=2

固定画像をグレースケールにし、軽くぼかした状態で表示する例です。

JPG・WebP形式を指定する方法

JPG形式で表示する場合は、URLに.jpgを追加します。

https://picsum.photos/600/400.jpg

WebP形式を指定する場合は、.webpを追加します。

https://picsum.photos/600/400.webp

WebPは、画質を保ちながらファイル容量を抑えやすい画像形式です。ただし、Lorem Picsumを本番サイトの画像配信サービスとして使うのではなく、実際の公開時には正式な画像を自社のサーバーや管理している配信環境へ設置することをおすすめします。

同じサイズで複数の画像を表示する方法

同じサイズの画像を複数設置すると、ブラウザーのキャッシュによって同じ写真が表示されることがあります。

複数のランダム画像を表示したい場合は、randomパラメータに異なる数値を指定します。

<img src="https://picsum.photos/400/300?random=1" alt="">
<img src="https://picsum.photos/400/300?random=2" alt="">
<img src="https://picsum.photos/400/300?random=3" alt="">

施工実績、商品一覧、スタッフ一覧など、複数の画像が並ぶページの表示確認に利用できます。

Lorem Picsumを本番公開時に残さない方がよい理由

Lorem Picsumは制作中の確認には便利ですが、企業ホームページの正式な画像として残すことはおすすめできません。

企業やサービスの魅力が伝わらない

表示される写真は、自社の商品、スタッフ、店舗、設備、実績とは関係のない画像です。見た目がおしゃれでも、顧客が知りたい情報を伝えることはできません。

ホームページで使用する画像は、装飾ではなく、サービスの内容や企業の信頼性を伝える情報の一部です。

表示内容を完全に管理できない

外部サービスの画像を直接読み込む場合、サービス側の仕様変更や障害などの影響を受ける可能性があります。本番公開するホームページでは、自社が管理できる画像ファイルを使用する方が安全です。

画像と文章の内容が一致しない

検索エンジンや生成AIは、ページの文章、画像の周辺情報、alt属性などを組み合わせて内容を理解します。文章と関係のないダミー画像が残っていると、ユーザーにとって分かりにくいだけでなく、ページの内容を正確に伝えるうえでも適切ではありません。

企業の独自性が出ない

同じダミー画像や素材写真は、別のホームページでも使われる可能性があります。実際のスタッフや商品、店舗、設備、制作物などの写真を使用することで、その企業にしかない情報を伝えられます。

ホームページ画像のSEO対策

本番用の画像へ差し替えるときは、見た目だけでなくSEOや表示速度にも配慮します。

内容が分かるファイル名にする

IMG0001.jpgやimage01.jpgではなく、画像の内容が分かる簡潔なファイル名を設定します。

例：

dental-clinic-reception.webp
website-production-meeting.webp
hotel-guest-room.webp

ファイル名だけで検索順位が大きく変わるわけではありませんが、画像の内容を整理・管理しやすくなります。

適切なalt属性を設定する

alt属性は、画像が表示されない場合や、スクリーンリーダーを利用するユーザーへ画像の内容を伝えるための情報です。

<img src="website-production-meeting.webp"
     alt="ホームページ制作の構成を確認する打ち合わせ">

画像の内容とページ上での役割を、簡潔に説明します。

キーワードを不自然に並べるのではなく、その画像を見られない人にも意味が伝わる文章にします。

装飾だけを目的とした画像には、空のalt属性を設定します。

<img src="decoration.webp" alt="">

画像サイズを最適化する

必要以上に大きな画像を掲載すると、ホームページの読み込みが遅くなります。

• 表示場所に合った寸法へ調整する

• WebPやAVIFなどを検討する

• 画質を確認しながら圧縮する

• パソコンとスマートフォンに適した画像を用意する

• 画面外の画像には適切な遅延読み込みを使用する

画像はホームページのデータ容量を大きくする要因の一つです。画質と表示速度のバランスを考えて設定します。

アイキャッチ画像とOGP画像を設定する

ブログ記事やサービスページには、内容を表すアイキャッチ画像を設定します。

SNSで共有された場合に表示するOGP画像も、ページ内容に合った画像を指定します。サイトロゴだけを一律に表示するより、各ページのテーマが分かる画像を用意する方が内容を伝えやすくなります。

ホームページ画像のAIO・AI検索対策

ChatGPTやGoogle AIなどに企業やサービスの情報を正しく理解してもらうには、画像だけに情報を任せないことが重要です。

画像で伝えている内容を文章でも説明する

施工写真、治療設備、商品、客室、制作事例などを掲載する場合は、その画像が何を表しているのかを本文やキャプションでも説明します。

画像だけを並べるよりも、次の情報を文章として掲載する方が、ユーザーとAIの両方に内容が伝わります。

• 何を撮影した画像か

• どのような特徴があるか

• どのサービスに関係するか

• どのような結果や実績を示しているか

• どこで提供しているか

実績画像には具体的な情報を添える

制作実績や施工実績では、画像とともに以下の情報を掲載します。

• 顧客の業種

• 制作・施工した内容

• 対応地域

• 課題

• 提案内容

• 実施後の変化

画像を「証拠となる情報」として、文章と組み合わせることが重要です。

画像の周辺情報を一致させる

画像のファイル名、alt属性、キャプション、見出し、本文の内容を一致させます。

SEOやAIOのために同じキーワードを繰り返すのではなく、ユーザーが画像の意味を正確に理解できる状態をつくります。

ダミー画像を使う際のチェックリスト

制作中にLorem Picsumを使用する場合は、公開前に以下を確認しましょう。

• ダミー画像が本番サイトに残っていないか

• 正式な画像へすべて差し替えたか

• 画像の使用許諾や権利を確認したか

• ファイル名を整理したか

• alt属性を設定したか

• 画像を適切なサイズに調整したか

• スマートフォンでもきれいに表示されるか

• 画像の読み込みが遅くないか

• 画像と本文の内容が一致しているか

• アイキャッチ・OGP画像を設定したか

公開前の確認項目として管理しておくと、ダミー画像の差し替え漏れを防げます。

Lorem Picsumについてよくある質問

Lorem Picsumは無料で使えますか？

Lorem Picsumは、URLにサイズを指定してダミー画像を表示できるサービスです。利用時は、公式サイトの最新情報や画像提供元の情報も確認してください。

Lorem Picsumの画像を固定できますか？

画像IDまたはseedを指定すると、同じ画像を表示できます。顧客へデザイン確認を依頼する場合や、色の違いによる印象の変化を防ぎたい場合に便利です。

Lorem Picsumの画像は本番サイトでも使えますか？

技術的には表示できますが、企業やサービスと関係のない画像になるため、基本的には制作・検証時のダミー画像として使用し、公開前に正式な画像へ差し替えることをおすすめします。

ダミー画像にalt属性は必要ですか？

制作中の装飾的なダミー画像であれば、空のalt属性を設定できます。本番公開時は、正式な画像の内容と役割に合わせて適切なalt属性を設定します。

Lorem Picsumの画像が表示されない場合はどうすればよいですか？

URL、画像サイズ、画像ID、パラメータの記述を確認してください。外部サービスのため、通信環境やサービスの稼働状況によって表示できない場合もあります。

画像まで含めてホームページを設計することが重要

ホームページ制作では、写真や画像も重要なコンテンツです。

同じページ構成でも、使用する写真によって、企業の印象やサービスの伝わり方は大きく変わります。

株式会社リースエンタープライズでは、ページ構成やデザインだけでなく、掲載する画像の選定、写真撮影、画像加工、表示速度、SEO・AIOを含めてホームページを設計します。

「ホームページにどのような写真を用意すればよいか分からない」「現在のサイトが素材写真ばかりで自社の魅力を伝えられていない」「画像の表示が遅い」といった課題もご相談ください。

ホームページ制作・Webサイト制作

制作実績

AIO対策・AI検索最適化

Lorem PicsumとSEO・AIO対策を共存させる

Lorem Picsumは、URLにサイズを指定するだけでダミー画像を表示できる便利なサービスです。

画像IDやseedによる固定表示、グレースケール、ぼかし、JPG・WebP形式の指定などにも対応しています。

一方で、ダミー画像はあくまで制作途中の確認用です。

企業ホームページを公開する際は、正式な写真へ差し替え、ファイルサイズ、alt属性、本文との関連性、SEO・AIOまで考慮して設定することが重要です。

ホームページの画像選定やリニューアルについてお困りの場合は、株式会社リースエンタープライズへお気軽にご相談ください。

ホームページ制作について相談する