サイトのモックアップ作成時にダミー画像があると何かと便利です。
画像は、適当な画像をCC0ライセンスサイトなどからダウンロードしてきても良いのですが、集めて大きさを加工するのが結構めんどくさかったり。1から作成するのもなおさら面倒くさいですし。
そんな時に、URLを指定するだけで好みの大きさのダミー画像を生成できる、「Placehold.it」が手軽で便利です。
目次
Placehold.itとは
Placehold.itは、シンプルなダミー画像生成サービスです。
例えば、以下のようなURL指定で350×150pxの画像を作成することができます。
そして、以下のようにイメージタグのsrc属性にURLを指定すれば、画像として表示させることもできます。
<img src="http://placehold.it/350x150">
このように、サイト作成初期時にはもってこいの、シンプルなダミー画像を生成することができます。
Placehold.itの使い方
Placehold.itはURLを決まった形で、呼び出すことでダミー画像を生成します。
基本的な使い方
Placehold.itでは、以下のようにURLを呼び出すと、幅と高さを指定して画像を生成することができます。
<img src="http://placehold.it/画像の横幅x画像の高さ">
使用例
<img src="http://placehold.it/300x200">
正方形画像の呼び出し
以下のように指定すると、指定した長さに応じて正方形画像を生成します。
<img src="http://placehold.it/正方形の一辺の長さ">
使用例
<img src="http://placehold.it/300">
画像の色指定
ダミー画像に色指定をする場合は、画像のサイズ指定のあとに、背景色、文字色と指定します。
<img src="http://placehold.it/300x200/背景色/文字色">
使用例
<img src="http://placehold.it/300x200/e8117f/fff">
画像にテキストを指定する
textパラメータにテキストを指定すると、画像内テキストを自由に変更することができます。
<img src="http://placehold.it/300x200/?text=テキスト">
使用例
<img src="http://placehold.it/300x200/?text=Dummy"> <img src="http://placehold.it/300x200/45619d/fff/?text=Color+and+text">
画像のファイル形式を指定する
ファイル形式を指定するには、.png、.jpg、.jpegなどの拡張子を、以下のように含めます。
<img src="http://placehold.it/300x200拡張子">
サイトでは、.gifの説明もありましたが、試してみると利用できないようです。尚、デフォルトのフォーマットはpng画像です。
使用例
<img src="http://placehold.it/300x200.png"> <img src="http://placehold.it/300x200/719b3b/fff.jpg/?text=Format">
広告サイズのダミー画像
僕は、ダミー画像はよく広告サイズのものを利用するのでメモがてら載せておきます。
レクタングル（大）
<img src="http://placehold.it/336x280/"> <img src="http://placehold.it/336x280/517094/fff">
レクタングル
<img src="http://placehold.it/300x250/"> <img src="http://placehold.it/300x250/009a57/fff">
ビッグバナー
<img src="http://placehold.it/728x90/"> <img src="http://placehold.it/728x90/e67928/fff">
※この画像は、カラム幅680pxに縮小されて表示されています。
バナー
<img src="http://placehold.it/468x60/"> <img src="http://placehold.it/468x60/c6001c/fff">
ラージモバイルバナー
<img src="http://placehold.it/320x100/"> <img src="http://placehold.it/320x100/d95d97/fff">
ラージスカイスクレーパー
<img src="http://placehold.it/300x600/"> <img src="http://placehold.it/300x600/90673e/fff">
まとめ
Placehold.itは、このようにURLに文字列をちょこと指定するだけで、とても簡単にダミー画像を呼び出すことができます。
ダミー画像といえば、以前以下のようなスクリプトを紹介しました。
こちらは、高機能で複雑な設定もできるのですが、スクリプトファイルをHTMLドキュメントファイル内で呼び出す必要があります。
URLで呼び出すものなら、CC0画像利用した以下のようなものもあります。
ただこちらは、画像は美しいのですが、文字が入らないので、画像情報を表示させることはできません。
ですので、今回紹介したPlacehold.itは、スクリプト設定をする必要はなく、画像にテキスト情報も表示できる、とても使い勝手の良いダミー画像生成ツールともいえるかもしれません。
これメチャクチャ便利ですね！作成してるサイトのダミー画像で使わせていただきます！