ダミー画像のWebサービスといえばPlacehold.itが有名ですが、Unsplash.itという良さそうなサービスがあったのでメモっておきます。Placehold.it はシンプルなグレーのボックスの表示に、Unsplash.it は写真の表示にといったように、目的別に使い分けたら便利そうです。
ちなみに、Unsplash.itで使われている画像について、「さいごに」で注意点を書いています。Unsplash.itを利用する際は注意点を十分に理解した上で利用することをおすすめします。
Placehold.it > シンプルなダミー画像の表示
グレーボックスでシンプルにダミー画像を挿入したい場合などに最適。
たとえば、初期段階のプロトタイプ制作でレイアウト・デザインを確定させたい場合など、余計なところに気を向けさせないように画像などの要素は極力シンプルに表現した方が良い場合があります。そういった場合には、背景色とテキストのみで画像を表現するPlacehold.it が最適です。
できること
- サイズの指定
- 文字列の表示
- 背景とテキストの色の指定
- 画像フォーマットの指定
用例
サイズの指定
[width]x[height]でサイズを指定します。
<img src="http://placehold.it/781x400">文字列の表示
URLの最後に?text=[任意のテキスト]で表示するテキストを指定します。スペースを入れたい場合は、単語と単語を「+」でつなぎます。
<img src="http://placehold.it/781x400?text=Yes+we+can">背景とテキストの色の指定
[背景]/[テキスト]の色をHEXカラー で指定します。
<img src="http://placehold.it/781x400/e8117f/ffffff">画像フォーマットの指定
gif、png、jpg、jpegから選べるそうです。あんまり意味ない気がするけど。デフォルトはgifだそうで。
<img src="http://placehold.it/781x400/e8117f/ffffff.jpg">
Advertisement
Unsplash.it > 写真の表示
ダミー画像に写真を使いたい場合に最適。
Unsplash.com （商用利用も可能な無料画像共有サイト）から、写真を引っ張ってこられます。プロトタイプ制作でレイアウト・デザインが固まってきた段階で、写真を入れてデザインを確認したいときに便利そうです。ランダムに画像を表示させたり、1,000枚近くある画像の中から指定して表示させたりもできます。
できること
- サイズの指定
- ランダムに画像を表示
- 一覧 の中から画像を指定して表示
- 画像にエフェクトを追加（白黒、ぼかし、重力の中心の指定など）
用例集
サイズの指定
[width]/[height]でサイズを指定します。
<img src="https://unsplash.it/781/400">
ランダンムに画像を表示
URLの最後に?randomをつけると、リロードするたびに違う画像が表示されます。つけないと、リロードしても同じ画像が表示されるみたいです。
<img src="https://unsplash.it/781/400?random">
一覧の中から画像を指定して表示
URLの最後に?image=でイメージのIDを指定します。IDは一覧ページ から確認できます。
<img src="https://unsplash.it/781/400?image=903">
画像にエフェクトを追加
<!-- 白黒にする -->
<img src="https://unsplash.it/g/781/400/">
<!-- ぼかす -->
<img src="https://unsplash.it/781/400/?blur">
<!-- 画像の重力の中心を指定する -->
<img src="https://unsplash.it/781/400/?gravity=north">
重心の指定はnorth、south、east、west、centerから選べます。
さいごに
以上、写真が表示できる画像ダミーのWebサービス「Unsplash.it 」のご紹介でした。
最後にUnsplash.itで使われているUnsplash.com の写真について書いておきます。規約（Terms） にざっと目を通してみたところ問題なさそうなんですけどね。なにせユーザがアップロードする画像を利用することになるのでリスクがゼロではないことを理解しておく必要があります。そういう意味では、Unsplash.itを使う際も、あくまで自己責任だということを覚えておく必要があります。
これはリスクに対する考え方によって異なると思いますが、個人的には、プロトタイプの検証のために「内部的に」使うだけなら問題ないと思いますが、公開するウェブサイトやアプリに利用するのは避けた方が良いと考えています。写真をアップロードした方にコンタクトして、もろもろを確認して使用するというのもありですけどね（あとは、Unsplash.comにアップしてない他の作品を見せてもらって購入するとか）。ちなみに、リスクに対する考え方は、英語ですけどこの辺 が参考になりました。
Unsplash.comについて
Unsplash.comは商用利用も可能な無料画像をシェアするウェブサイトで、アップロードされた画像はCreative Commons Zero (CC0: Public Domain Dedication) のもとに扱われるようになっています。このCC0というライセンスは、ほぼなにをしてもOKというゆるいもので、いくつか注意点はあるものの、Unsplash.comにアップロードされた画像は、かなりの自由度で利用が可能ということになります。
画像をアップロードするためにはユーザ登録が必要で、その際に同意の必要がある「Terms 」には、以下のような文があって、ユーザがアップロードする写真はユーザがその全ての権利を持っていることを確認しています。また、アップロードした写真は、ユーザへの見返りなしに自由に使われることも明記されています。
You are solely responsible for all Pictures that you make available through the Website. Accordingly, you represent and warrant that: (i) you either are the sole and exclusive owner of all Pictures that you make available through the Website or you have all rights, licenses, consents and releases that are necessary to grant to Company the rights in such Pictures, as contemplated under this Agreement; and (ii) neither the Pictures nor your posting, uploading, publication, submission or transmittal of the Pictures or Company’s (or other Users) use of the Pictures (or any portion thereof) will infringe, misappropriate or violate a third party’s patent, copyright, trademark, trade secret, moral rights or other intellectual property rights, or rights of publicity or privacy, or result in the violation of any applicable law or regulation. Further, you do hereby acknowledge that all Pictures may be viewed, used, reproduced, modified or otherwise dealt with by all Users or others, without any compensation to you.
そもそもサイトの趣旨が明確だし、ここまで規約にも書かれているから、あとは悪意がある個人がアップロードしたものか完全に意図せずに他人の権利を侵害していた場合を除けば問題なさそうです。
あとは運営企業 がそういった画像を検知して対処するためにどういったことをやっているかにかかってますかね。写真家の方々のセルフ・プロモーションに使えると思いますし、うまく機能しているのであれば良いサービスだと思うので頑張って欲しいですね。
番外編
他にも、以下あたりがそこそこ良さそうだったので、念のためメモっておきます。
2017年5月8日に公開され、2021年8月31日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。