Blog

ブログ

WEB制作のダミー画像に使える!「Lorem Picsum」の使い方とおすすめ画像

最終更新日:|公開日:

ダウンロード不要!ダミー画像がすぐ作れる「Lorem Picsum」

どうも、ぺとらです。

WEB制作時にダミー画像を用意するのが面倒くさいと感じたことはありませんか?

「画像をダウンロードして、サイズ調整して……いやいや、ダミー画像にそこまで手間をかけたくない!!

・毎回ダウンロードするのが面倒くさい!
・ダミー画像でもサイズは調整したい!
・なるべくおしゃれなダミー画像を使いたい!
・できれば無料で!!!!!!!

そんなあなたにおすすめのサービスが「Lorem Picsum」です。

■目次

Lorem Picsumについて

「Lorem Picsum(https://picsum.photos/)」はフォトサービス「Unsplash」の画像を利用したWEBサービスで、無料のダミー画像を使うことができます。

[基本的な使い方]

URLを埋め込むだけでダミー画像が表示されます。
URLに画像サイズを入れることで、指定したサイズを取得することが可能です。

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

正方形の場合はこう。

https://picsum.photos/縦横px

URLの先頭に [ seed ] を追加するとランダムで表示することが可能です。

https://picsum.photos/seed/picsum/200/300

URLの末尾に [ ?grayscale ] を追加するとグレースケールで画像を表示することが可能です。

https://picsum.photos/300/300?grayscale

URLの末尾に [?blur ] を追加するとぼやけた画像で表示することが可能です。

https://picsum.photos/200/300/?blur

ぼやけ具合も「=1〜10」の数値を指定することで指定できるのでとても便利ですね!

https://picsum.photos/200/300/?blur=5

URLの末尾に [ .jpg ] を追加でJPG形式で表示することもでき、

https://picsum.photos/200/300.jpg

[ .webp ] を追加でWebP形式で表示することもできるようです。

https://picsum.photos/200/300.webp

基本的にURLの箇所を触るだけなので気軽に使えてとても便利ですよね。

Lorem Picsumおすすめ画像のID

ここで使いやすそうなおすすめの画像IDを備忘録としてまとめてみました。
URLに含まれる画像IDを変更すると特定の画像を表示することが可能ですよ。

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

■PC・スマホなど

■その他

■風景

最後に

もし後々一括でダミー画像を触った箇所を一括で変更したい場合(共通のダミー画像にしたいなどのケース)は、正規表現で置換などがおすすめかもしれません。

<img src=”https://picsum.photos/200/300?random=2″>

上記であれば、ドメイン部分までは同じだと思うので、それ以下を任意として検索すれば当てはまるかなと思います!


<img src=”https://picsum.photos/(.+?)”>

いかがでしたでしょうか。
また制作に便利なサービスがあれば紹介してみたいと思います。

弊社では制作時にはなるべくお客様の業種やお求めの雰囲気あったダミー画像を選ぶように心がけています。HP制作のご依頼、相談は随時受付中です!是非お気軽にお問い合わせくださいませ!
それではまた、次回お会いしましょう! アデュー!!

ぺとら
ライター:

ぺとら

トランシルバニア星雲・トランスセクシャル星出身。 Manson(マリリン・マンソン)に憧れ、地球に舞い降りた銀河系WEBデザイナーで、「vertical-align: middle;(バーティカルアラインミドル)」という響きが格好良すぎてマークアップエンジニアにもなった。好きな地球人のタイプは、Jeff Goldblum(ジェフ・ゴールドブラム)。
見積りシミュレーション オンライン打ち合わせ