無料高品質画像サイトUnsplashとそのAPIの紹介

 UnsplashというCC0ライセンスなフォトストックサイトがあります。良い感じのサイトで、APIも便利だったので、紹介いたします。

広告

CC0ライセンスとは

 CC0ライセンスとは、商用利用、再配布その他諸々含めてかなりの範囲のことが許可されているライセンスです。
 詳しくは以下の記事などをお読みください。

Unsplashとは

 Unsplashとは、CC0のフォトストックサイトです。要するに、CC0ライセンスで提供されている写真が、色々とストックされています。
 機能としては、個人的にログインしてサイト内の画像でコレクションを作ったり、アカウントを作れば写真を投稿することができたりと、多少SNSのような部分も存在したりします。
 もちろん、検索BOXからは、単語(日本語に対応しているかは分かりませんが、多分英語のほうが無難だと私は思います)を入力して検索も可能です。
 そして特色としては、CC0ライセンスであるのは勿論、どの写真も、審査を経ていることもあり、一定のクオリティがあること。かなり綺麗なものばっかりです。
 いくつか写真をのせてみます。





 この通り、美しい写真が色々あります。また、偶にどこかのブログに使われているような画像もあったりと、日本でも人気があるみたいです。私もヘッダ画像を一部ここから使わせてもらっています。

 画像については、ライセンスが完全にCC0で、Unsplash独自の付帯規則もありませんから、Pixabayなどに転載されている画像を使っている場合もあるかもしれません(CC0ライセンス下の画像は転載も自由です)。
 なおUnsplashにログインするなどしてサービスを使用する場合は、そのサービスに関して普通にサービスを利用するとき程度の規約が付いてきます。

 まあ要するにまとめると、写真をダウンロードして使うぶんにはだいたい何をしても自由なのが、Unsplashです。
 再配布をしてもいいし、加工をしてもいいし、無断転載をしてもいい。この記事のように画像を引っ張ってきてしまってもいいのです。
 ただ、利用規約によると、「そのままの画像を有料で再配布するのはCC0ライセンスを決めた以上とめようがないが、やめてほしい」といった旨が書いてありましたので、画像をそのまま優良販売とか、そういったことはやめておいたほうがいいでしょう。何らかの加工をするとか、自作の製品内の一部としてだけ画像を使用するとか、そういう、加工を経ていたほうがいいか、と思います。

写真の探し方

  1. Unsplashのトップページを開きます。
  2. 一番上にある検索窓から検索したい言葉(英語)で検索すると、それにヒットする画像が出てきます。

 大まかには、これだけです。なおトップページを開いた時点で、色々な写真が下部に並んでいますから、そこにいいものがあればクリックでいいかもです。

 画像のダウンロードも簡単で、画像を選んでクリックするとその画像が拡大されて表示される(戻るには左上の写真アイコンクリックかブラウザで「戻る」で戻れると思います)ので、その右上にある「DOWNLOAD」を押せばDLできます。なお写真であるからか、だいたいjpeg形式です(PixabayはPNGのものもある)。

Unsplashの他の機能

 画像ストックサイトとして、画像を提供する以外の機能としては、前述のとおり、まず会員登録により提供される様々な機能があります。
 これらをリストにしてみますと、以下みたいな感じ。

  • 画像の評価機能
  • 画像の右上にあるハートマークを押して、「いいね!」な気持ちを伝えることができます。
  • ブックマーク・コレクション機能
  • 非公開・公開ブクマどちらにするか選択可能
  • 写真投稿機能
  • 会員登録すれば写真を投稿できます。ただし、それがUnsplashのCC0画像として掲載されるかには審査がある模様。

 特に個人的にはコレクション機能が好きです。ほかの人のコレクションを覗くのは勿論、自分のコレクションを公開し、またAPI(後述)で使うことができるのです。

Unsplash Source

 さてこれだけでも便利なUnsplashですが、さらにAPIがあります。
 実は、上の画像もこのAPIで提供されているサービスであり、シンプルな画像提供APIでもあるUnsplash Sourceを使って表示しています(Unsplashへのリンクは自前です。)。
 詳しくはこちらに載っていますが、英語ですので、読むのも苦労するかもしれません。ですので、自分用の日本語訳もかねて使い方を以下で少し紹介いたします。

ランダムに画像を取得する

 ランダムに画像を取得する場合、https://source.unsplash.com/randomというURLから画像を取得できます。アドレスの末尾に/640×480などというかたちで文字列を付け足すことで、サイズを指定することもできます。
 imgタグで表示する場合は、以下のようにして利用が可能です。

<img src=”https://source.unsplash.com/random”>

 すると、下のような写真がランダムに出てきます(上のソースに幅指定400pxを足したもの。再読み込みすると、下の画像も変わります)。

特定のユーザの写真からランダムに画像を取得する

 特定のユーザの投稿写真からランダムに画像を取得するには、
https://source.unsplash.com/user/ユーザ名
 というアドレスを使います(ユーザ名は場合によって変更)。勿論末尾にサイズ指定も可能。
 画像タグで使うなら、

<img src=”https://source.unsplash.com/user/ユーザ名”>

という感じ。

 例として幅400pxにして、Roman Kraft(@romankraft)さんの投稿写真を表示するように設定してみますと、以下のようになります。投稿写真からランダムで、となっているので、このページを再読み込みすると、勿論この画像も変化します。

ユーザのいいね(likes)からランダムに画像を取得

 特定のユーザのいいね(likes、なおlikes=いいねは雰囲気で訳しました)からランダムに画像を取得することも可能です。
 この場合は、
https://source.unsplash.com/user/ユーザ名/likes
 という形式でアドレスを指定することで、画像が取得できます。末尾にサイズ指定を追加することも可能。imgタグのsrcにこれを指定することで、色々な人の「いいね(like)」リストからランダムに画像を取得できます。ユーザ名はユーザページのアドレスの、@以下の部分を使います。
 画像タグで使うなら、

<img src=”https://source.unsplash.com/user/ユーザ名”>

という感じ。

 試しに、たくさんの画像についてlikeをしているYao Fuさんという方のlinkesから、これを使って幅400pxで画像をランダムで表示するようにタグを設定したものが下です。当然これも再読み込みすると変化します。

コレクションからランダムに画像を取得

 Unsplashには、コレクションというものが存在します。それぞれのユーザが画像をコレクションするもので、コレクションしたい、と思った画像を自分のコレクションの中に追加しつつ、その公開非公開を設定できます。マイリストのようなものと考えてもいいかもしれません。

 このときに使うアドレスは、
https://source.unsplash.com/collection/コレクションID
です。コレクションIDは、アドレスの末のほう、コレクション名の前に示されているようです。これも、末尾にサイズ指定が可能です。

<img src=”https://source.unsplash.com/collection/コレクションID”>

 以下は例に、幅400pxを指定しつつ、このコレクションからランダムにとってくるようにしました。再読み込みするとランダムになっているのが分かると思います。

カテゴリからランダム

 カテゴリからランダムに取得するには、
https://source.unsplash.com/category/カテゴリ名
という形式のアドレスを使います。
 Unsplashで指定できるカテゴリは、こちらによると、buildings, food, nature, people, technology, objectsを指定できるみたいです。

画像タグで使うならこんな感じ。

<img src=”https://source.unsplash.com/category/カテゴリ名”>

 試しにこれまでのように、technologyで指定した画像タグを記述してみると、以下のようになります。

検索結果からランダムに画像を取得する

 基本的に、検索でカテゴリなどから絞り込むには、
?キーワード,キーワード
 を今までのアドレスの末尾につけます。キーワーとが単一のときは?キーワードです。
 また、ただ「https://source.unsplash.com/?キーワード」とするだけでは検索結果は表示されないので、
https://source.unsplash.com/featured/?キーワード
 とすることになります。この場合、検索結果の中からフィーチャーされたもの(選ばれたもの、と説明されていました)をランダムに取得できます。
 
 画像タグで使うならこんな感じ。

<img src=”https://source.unsplash.com/featured/?キーワード”>

このタグを使って、photoというキーワードで検索をかけてみると、下のようになります。width=”400″を指定。ランダム取得なので、再読み込みすると変化します。

特定の写真を取得する

 特定の写真を取得することもできます。
 使う画像取得アドレスは、
https://source.unsplash.com/画像ID/横幅x縦幅
です。画像IDは個別に写真を表示させたときの、末尾あたりにあります。横幅と縦幅はオプション。

 タグで使うならこんな感じ。

<img src=”https://source.unsplash.com/画像ID/横幅x縦幅”>

 例として、私の好きな画像を下に表示しておきます。こんな感じで、Unsplash内の気に入った画像をAPIを通して取得することができるのです。

オプションについて

サイズの指定

 先のほうでも書きましたが、アドレスの後半に【/横幅x縦幅】というかたちでサイズの指定を加えることができます。

期間の指定

 あたらしめの写真を表示したいときは、各指定の後に、/dailyもしくは/weeklyを追加しておくことで、
それぞれ一日以内、もしくは一週間以内にフォトストックに加えられたものの中からランダムに画像を取得することができます。

検索クエリ

 先ほど書いたとおり、アドレス末尾に【?キーワード】の形で(複数指定の場合は【,】で区切る)検索キーワードを追加することで、ランダムに取得される範囲を絞り込むことができます。

CodePenで作ってみたExample

CodePenで作ってみた例が以下になります。このPenはコードを書き換えることができますので、試しにForkするなどして色々していただければいいかと。

See the Pen Unsplash Source Example by suquiya kirico (@suquiya) on CodePen.

ディベロッパ用APIについて

 提供されているAPIについて、Unsplash Sourceだけではなく、もっとJSONが返されたりするような、高級なAPIがありますが、これはディベロッパー登録が必要です。本格的に自分でサービスを提供したいとか、製品の中に組み込みたいとか、そういう人はそちらを選ぶべきかと。
 公式には、「製品に利用する場合は、高トラフィックな場合へのサポートと、さらにロバストな機能を持った公式APIを使うことをお勧めします」とありますので、そんな感じかしら。この場合のロバストは、もっとしっかりしているとか、JSONなどで詳しい特徴を取れるとか、そう言った機能かと思います。
 なおその場合はもちろんAPIの使用規則はあるので、それを読んでから登録するのが必須です。

その他コメントなど

 今回は、良質CC0写真の集まるサイトであるUnsplashを紹介いたしました。個人的に、とてもおすすめのサイトです。登録も無料なので、気軽にしてしまってもいいかもしれません。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA