美しいダミー画像を生成できるUnsplash Itというサービスを知りました。
これを利用すると、WEB制作時に何かと便利なダミー画像を、かなり簡単に呼び出すことができて、使い勝手がよかったので紹介です。
目次
Unsplash Itとは
Unsplash Itは、美しい著作権放棄（CCライセンス）画像で、ダミー画像を手軽に作る事ができるツールです。
綺麗なCC画像を多数配布している、Unsplashが運営しているサービスです。
URLを指定するだけで、ダミー画像を生成することができるので、誰でも簡単に使えるのではないかと思います。WEB制作で、画像使った動作テストをしたいときや、サイトの立ち上げ時のテストや、などに何かと重宝しそうです。
ダミー画像といえば、以前スクリプトでSVGのダミー画像を生成する「Holder.js」を紹介しました。
ただ、「Holder.js」の場合は、ソース上でスクリプトファイルを呼び出す必要がありました。
けれども、Unsplash Itの場合は、スクリプトファイルなどは一切必要としないので、かなり気軽に使えます。
Unsplash Itの使い方
Unsplash Itは、URLを決まった形で呼び出すことで利用します。
基本的な使い方
基本的な使い方として、IMGタグに以下のようにURLを指定することでダミー画像を簡単に生成することができます。
<img src="https://unsplash.it/画像の横幅/画像の高さ">
使用例
<img src="https://unsplash.it/680/450">
ダミー画像は、使用した画像の大きさに応じて選ばれるようです。これは予想なんですが、アスペクト比が近い画像が選ばれるのではないかと思います。
正方形画像の呼び出し
以下のように指定すると、指定した長さに応じて正方形画像を生成します。
<img src="https://unsplash.it/正方形の一辺の長さ">
使用例
<img src="https://unsplash.it/400">
この機能は、テーマ作成初期段階時のダミーサムネイルなどにも利用できそうです。
ダミー画像のランダム表示
サイズ指定のあとに?randomを指定することで、リロードのたびに違う画像を呼び出したりもできます。
<img src="https://unsplash.it/680/450?random">
毎回違った画像を呼び出したい時に。
グレースケール画像の生成
画像のサイズを指定する前に/g/を挿入することで、画像をグレースケールにすることができます。
<img src="https://unsplash.it/g/680/452">
決まった画像を使用する
画像のサイズ指定のあとに、?image=画像番号と指定することで、決まった画像を呼び出すこともできます。
<img src="https://unsplash.it/680/450?image=763">
画像番号は、以下から参照することができます。
この記事を書いた時点では、764種類の画像が利用できるようです。
意図通りの画像を呼び出したい時などに。
画像にぼかしをかける
画像サイズ指定のあとに、?blurとつけることで、画像にブラー（ぼかし）をかけることができます。
<img src="https://unsplash.it/680/454?blur">
ぼかし機能は、ヘッダーの背景画像とかによさそうです。
切り取り位置指定
パラメータに?gravityを指定することで、もし元画像を切り取る場合は、切り取り位置を指定して画像を生成することができます。
パラメータ値は、north, east, south, west, centerの中から選べます。
以下のように書くと利用できます。
<img src="https://unsplash.it/680/454?gravity=east"> <img src="https://unsplash.it/680/454?gravity=west"> <img src="https://unsplash.it/680/454?gravity=north"> <img src="https://unsplash.it/680/454?gravity=south"> <img src="https://unsplash.it/680/454?gravity=center">
以下のように同じ画像になるようにして比べるとわかりやすいかも。
<img src="https://unsplash.it/200/200?image=763&gravity=west"> <img src="https://unsplash.it/200/200?image=763&gravity=center"> <img src="https://unsplash.it/200/200?image=763&gravity=east"> <img src="https://unsplash.it/200/200?image=535&gravity=north"> <img src="https://unsplash.it/200/200?image=535&gravity=center"> <img src="https://unsplash.it/200/200?image=535&gravity=south">
元画像
元画像
いろいろな機能を合わせて使う
例えば、ランダム（random）、グレースケール（/g/）、ぼかし（blur）、Crop Gravity（gravity）を同時に利用するときは、以下のようにURLを指定します。
<img src="https://unsplash.it/g/680/450?random&blur&gravity=east">
パラメータを組み合わせれば、複数機能もあわせて利用することができます。
WEB制作時のダミー広告としての利用例
僕は、WEB制作などをしている時に、ダミー広告を作成するときにダミー画像をよく利用しています。
以下にダミー広告用の設定タグを掲載しておきます。
レクタングル（大）
<img src="https://unsplash.it/336/280?random">
レクタングル
<img src="https://unsplash.it/300/250?random">
ビッグバナー
<img src="https://unsplash.it/728/90?random">
※この表示では幅が680pxに合わせて表示されています。
バナー
<img src="https://unsplash.it/468/60?random">
ラージモバイルバナー
<img src="https://unsplash.it/320/100?random">
ラージスカイスクレーパー
<img src="https://unsplash.it/300/600?random">
ただ、美しい写真なので、広告っぽさはないかもしれません。
まとめ
このように、Unsplash Itを利用すると、かなり簡単にダミー画像を作ることができます。
このツールは、事前準備が全く必要ないので、かなり手軽に利用することができます。
WordPressサイト立ち上げ時に、「ダミー記事とダミー画像を挿入して表示確認」をする人も結構多いと思いますが、そういった時のダミー画像生成ツールとして、かなり重宝しそうです。
