高品質なダミー画像を作成できるWebサービス「Unsplash It」

ダミー画像が作成できるWebサービスについて下記の記事を書いたことがあったんですが、先日久しぶりにのぞいてみたら、一部サイトが使えなくなってたりと少し情報が古くなってしまっているようです。

Web制作に役立つダミー画像生成Webサービスまとめ

画面のモックやワイヤーフレームを作る時に、さくっとダミー画像を付けられると便利ですよね。 そんなダミー画像を作…

blog.ko31.com

というわけでその代わりというわけではないですが、先のサービスに取って代わるかもしれない今オススメのダミー画像作成Webサービスをご紹介したいと思います。

「Unsplash It」

• Unsplash It

クオリティー抜群な写真がたくさんあって、しかも CC0 ライセンスなので商用利用も可能なフリー素材を提供している「Unsplash」という超イケメンなサイトがあるのですが、その Unsplash の写真からダミー画像を生成できる Web サービスが「Unsplash It」です。

基本的な使い方はとても簡単です。画像サイズを含めたURLを指定するだけで、簡単に高品質な写真のダミー画像を表示することができます。

例えば、500×200のサイズを指定して表示させる場合はこのような感じ。

[html]
<img src="https://unsplash.it/500/300">
[/html]

サイズを一つだけ指定すると縦横同じサイズになります。

[html]
<img src="https://unsplash.it/400">
[/html]

サイズ指定以外にも、色々なオプションの指定が可能です。

最後に「?random」を付けると、表示される画像が毎回ランダムで変わります。

[html]

[/html]

パスに「/g/」を入れると写真がグレースケールに。

[html]
<img src="https://unsplash.it/g/500/300">
[/html]

「?image」パラメータに写真のIDを指定して、表示したい写真を特定することもできます。写真のIDはこちらのページから確認してください。

[html]
<img src="https://unsplash.it/500/400?image=433">
[/html]

「?blur」を指定すると写真にぼかしがかけられます。

[html]
<img src="https://unsplash.it/400/400/?blur">
[/html]

「?gravity」オプション（north, east, south, west, centerから指定）で、元画像から切り出す方向が指定できます。

[html]
<img src="https://unsplash.it/500/400/?gravity=east&image=350">
<img src="https://unsplash.it/500/400/?gravity=west&image=350">
[/html]

「/list」の指定で画像リストの取得なんてことも。（URLにアクセスするとjson形式でリストデータが返されます。）

[html]

[/html]

まとめ

どれもきれいでカッコイイ写真ばかりなので、デザイン性の高いサイトやWebサービスのモック作りなどにばっちりはまるんじゃないでしょうか。