実装時もデザイン時も！プレースホルダ画像サービスまとめ

こんにちは森田です。
今回は実装時もデザイン時もよく使うプレースホルダ画像サービスをまとめました。

まだ画像が決まっていないサイトなどでURLを入れるだけで仮の画像を生成してくれる便利なサービスでいつも大変助かっています。

placehold.jp

placehold.jp はドメインからもわかるように国産のサービスです。
サイズやテキストなどを画像に生成できて便利です。

株式会社ソフテル さんが提供してくださっています。

以下のような形でブラウザからコピーしたURLを img 要素に入れて使います。

<img src="https://placehold.jp/200x200.png" width="200" alt="">

placehold.jp はサイズ、背景色、文字サイズ、テキストなどを指定することができます。

https://placehold.jp/{文字色}/150x100.png
https://placehold.jp/{背景色}/{文字色}/150x100.png
https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png
https://placehold.jp/250x50.png?text={表示したい文字列}

Lorem Picsum

Lorem Picsum は Unsplash からランダムに画像を生成してくれるサービスです。

アイキャッチやメインビジュアルなどで仮だけど何か単色ではない画像を入れたい時に使っています。

<img src="https://picsum.photos/200/300" alt="">

id を付ければ同じ画像を指定することもできます。

https://picsum.photos/id/237/200/300

グレースケールやぼかしも付けられます。

個人的にはぼかしを調整できるのが大変好みです。
画像にあまり意識を奪われずに使うことができます。

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

placedog.net

placedog.net は犬の画像のプレースホルダサービス🐶

犬派の私はよく使います。URLを記憶しています。

placedog.net もサイズ指定やグレースケール、ぼかしや反転など様々なフィルターが使えます。

https://placedog.net/500/g - (g/greyscale) Adds the greyscale filter.
https://placedog.net/360/480/pixelate - (p/pixelate) Applies a pixelation filter with a strength of 5.
https://placedog.net/900/650/b - (b/blur) Applies blur filter with a strength of 10.
https://placedog.net/280/invert - (i/invert) Inverts the image.
https://placedog.net/950/640/s - (s/sepia) Adds a sepia effect, giving that vintage look.
https://placedog.net/950/640/bn - (bn/brightness) Increases brightness by 100.
https://placedog.net/950/640/contrast - (ct/contrast) Increases contrst by 70.

ランダムで色んな犬の画像が出る指定もできて犬派の私は癒されています。

https://placedog.net/640/480?random

上部の画像もランダム指定しているのでリロードすると違うワンちゃんになります🐶

placekitten

placekitten は子猫のプレースホルダサービス🐱

弊社の猫派のメンバーはよく使っています。

placekitten はシンプルにサイズ指定とグレースケールの指定のみとなっているみたいです。

http://placekitten.com/200/300
or: http://placekitten.com/g/200/300

PlaceIMG

PlaceIMG は動物や建物、自然、人などジャンルを指定することで、そのジャンルのプレースホルダ画像を生成できるサービスです。

EC などジャンルが決まっているサイトで便利です。

https://placeimg.com/640/480/animals
https://placeimg.com/640/480/arch
https://placeimg.com/640/480/nature
https://placeimg.com/640/480/people

また grayscale と sepia を付けることで白黒とセピアにすることもできます。

https://placeimg.com/640/480/people/grayscale

他にもたくさん

他にも面白いプレースホルダ画像サービスは沢山あります。
一部を紹介します。ほぼネタになってしまいますが。。

• 熊
• 髭の男性
• 肉
• ニコラス・ケイジ
• スティーヴン・セガール

VSCode は拡張機能が便利

実装中にプレースホルダ画像を使いたい時は、VSCode 拡張のPlaceholder Images が便利です。

コマンドパレットからサービスやサイズを選択すればコード上にURLを挿入してくれます。

まとめ

エンジニアもデザイナーも便利なプレースホルダ画像サービスを紹介しました。
1つでも覚えておくと便利です。