URLの指定でシンプルなダミー画像を作成できる「Placeholder.com」

URLにパラメータというのかオプションを付けるとダミー画像のサイズ、画像形式、文字を入れる（英数字）、背景色、文字色を指定できます。

Placeholder.com: Placeholder Images Done For You [JPG, GIF, PNG & WEBP]を使うとURLを指定するだけでシンプルなダミー画像を生成できて、お手軽です。

サイトを利用する際にはルールがあるようなので注意してください。

The Golden Rules

URLなのでHTMLなどで画像として表示したりできます。

使い方

基本は「https://via.placeholder.com/」というURLにパラメータを指定していきます。

画像サイズの指定

画像サイズの指定は必ず最初にしておかないとダメです。

https://via.placeholder.com/250

という風に数字を指定すると「250×250」の正方形の画像が生成されます。

https://via.placeholder.com/250×100

数字の後に英語の「x（エックス）」を付けたあとに数字を指定するとそれが高さになります。

「250×100」の画像が生成されます。

背景色と文字色

「https://via.placeholder.com/画像サイズ/背景色/文字色/」の指定になります。

https://via.placeholder.com/300/cab8d9/6c2735/

だとこういう感じの画像ができます。

色のコードは「WEB色見本 原色大辞典 – HTMLカラーコード」などを参考にしてみてください。

6桁の数字の前についている「#」を除けば大丈夫です。

背景色をデフォルトのままにしておきたい場合

https://via.placeholder.com/300//000

背景色を指定する部分を何も入力しないで「https://via.placeholder.com/画像色//文字色」のような形にすれば大丈夫です。

//と続けさせるとデフォルトの背景色のままになります。

文字を入れる（英数字のみ）

デフォルトだと「画像サイズ」と「Powered by HTML.COM」という文字が入っていますが、好きな文字を入れることができます。

https://via.placeholder.com/400×200?text=tomato+51

画像サイズを指定したあとに「?text=」のあとに表示したい文字を入力します。

「+」が空白になります。

画像形式を指定

デフォルトだと「.png」ですが変更することができます。

画像形式を指定する方法はいくつかあります。

画像サイズ、背景色、文字色のどれか1つのパラメータの最後の部分に形式を指定すればその画像形式になります。

利用できる形式

  • 「.gif」（サイトに記述がありますが私の場合は.pngのままでした）
  • 「.png」
  • 「.jpg」 or 「.jpeg」
  • 「.webp」

https://via.placeholder.com/300.png/cab8d9/6c2735/

https://via.placeholder.com/300/cab8d9.jpg/6c2735/

https://via.placeholder.com/300/cab8d9/6c2735.webp/

こんな感じでそれぞれのパラメータの最後の部分に形式を指定するとその形式のダミー画像をすぐに生成してくれます。

上のURLは例なので、例と同じ部分に同じ形式じゃなくても違う形式でも自由に指定すれば大丈夫です。

すべて組み合わせる

すべてのパラメータを組み合わせることができます。

「https://via.placeholder.com/700×100.jpg/0d0015/ffa100/?text=Think+rich,+look+poor.」

このパラメータで画像を生成するとこんな感じになります。

WEBツール・サービスジェネレータ

Posted by トマトの彗星