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


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

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

placehold.jp

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 からランダムに画像を生成してくれるサービスです。

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

Lorem Picsum が生成した画像
<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 が生成した画像

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 が生成した画像

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

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

PlaceIMG

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

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

PlaceIMG で生成した画像
https://placeimg.com/640/480/animals
https://placeimg.com/640/480/arch
https://placeimg.com/640/480/nature
https://placeimg.com/640/480/people

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

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

他にもたくさん

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

VSCode は拡張機能が便利

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

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

via. Placeholder Images – Visual Studio Marketplace

まとめ

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

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。