簡単なURL指定でダミー画像を召喚できる「Placehold.it」の使い方

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

サイトのモックアップ作成時にダミー画像があると何かと便利です。

画像は、適当な画像をCC0ライセンスサイトなどからダウンロードしてきても良いのですが、集めて大きさを加工するのが結構めんどくさかったり。1から作成するのもなおさら面倒くさいですし。

そんな時に、URLを指定するだけで好みの大きさのダミー画像を生成できる、「Placehold.it」が手軽で便利です。

スポンサーリンク
レクタングル(大)広告

Placehold.itとは

Placehold.it

Placehold.itま、シンプルなダミー画像生成サービスです。

例えば、以下のようなURL指定で350×150pxの画像を作成することができます。

そして、以下のようにイメージタグのsrc属性にURLを指定すれば、画像として表示させることもできます。

このように、サイト作成初期時にはもってこいの、シンプルなダミー画像を生成することができます。

Placehold.itの使い方

Placehold.itはURLを決まった形で、呼び出すことでダミー画像を生成します。

基本的な使い方

Placehold.itでは、以下のようにURLを呼び出すと、幅と高さを指定して画像を生成することができます。

使用例

正方形画像の呼び出し

以下のように指定すると、指定した長さに応じて正方形画像を生成します。

使用例

画像の色指定

ダミー画像に色指定をする場合は、画像のサイズ指定のあとに、背景色、文字色と指定します。

使用例

画像にテキストを指定する

textパラメータにテキストを指定すると、画像ないテキストを自由に変更することができます。

使用例

画像のファイル形式を指定する

ファイル形式を指定するには、.png、.jpg、.jpegなどの拡張子を、以下のように含めます。

サイトでは、.gifの説明もありましたが、試してみると利用できないようです。尚、デフォルトのフォーマットははpng画像です。

使用例

広告サイズのダミー画像

僕は、ダミー画像はよく広告サイズのものを利用するのでメモがてら載せておきます。

レクタングル(大)

レクタングル

ビッグバナー

※この画像は、カラム幅680pxに縮小されて表示されています。

バナー

ラージモバイルバナー

ラージスカイスクレーパー

まとめ

Placehold.itは、このようにURLに文字列をちょこと指定するだけで、とても簡単にダミー画像を呼び出すことができます。

ダミー画像といえば、以前以下のようなスクリプトを紹介しました。

ローカルでのWordpress開発がはかどるったらもう、ダミー画像生成スクリプト「Holder.js」の使い方
先日、ローカルの開発環境で使えるダミー画像生成スクリプトがあるのを知りました。 試しに使用してみたら、思った以上に使い勝手がよ...

こちらは、高機能で複雑な設定もできるのですが、スクリプトファイルをHTMLドキュメントファイル内で呼び出す必要があります。

URLで呼び出すものなら、CC0画像利用した以下のようなものもあります。

美しいCC0写真でダミー画像を作成するなら「Unsplash It」が超手軽
美しいダミー画像を生成できるUnsplash Itというサービスを知りました。 これを利用すると、WEB制作時に何かと便利なダミー画像を、...

ただこちらは、画像は美しいのですが、文字が入らないので、画像情報を表示させることはできません。

ですので、今回紹介したPlacehold.itは、スクリプト設定をする必要はなく、画像にテキスト情報も表示できる、とても使い勝手の良いダミー画像生成ツールともいえるかもしれません。

『簡単なURL指定でダミー画像を召喚できる「Placehold.it」の使い方』へのコメント

  1. 名前:ふかみんみん 投稿日:2015/08/20(木) 14:10:17 ID:c048df1b5

    これメチャクチャ便利ですね!作成してるサイトのダミー画像で使わせていただきます!

  2. わいひら 名前:わいひら 投稿日:2015/08/20(木) 14:30:41 ID:a6102082b

    そうなんですよ!
    スクリプトも読み込まなくて良いですし、URLに必要な文字列も直感的で覚えやすいですし。
    これまで使ってきた中では、一番使い勝手がいいです。