SONICMOOV Googleページ

【無料】高品質な画像を手軽に扱える Unsplash Source の使い方

【無料】高品質な画像を手軽に扱える Unsplash Source の使い方

  • このエントリーをはてなブックマークに追加

まりぞーです(∩°ω°∩)
高品質なCC0の画像を無料で手軽に扱えるUnsplash Sourceというサービスをとっても気に入ったのでご紹介します。

ちなみにCC0は、パブリックドメインと呼ばれるライセンス形態で、写真家や取り扱っているサイトの許可を得ることなく、商業目的を含めて写真を無料で複製、改変、配布、使用できることを意味しています。

Unsplash Sourceとは

無料画像が使えるUnsplash Source

Unsplash Source

Unspalash Sourceは、もともと運営元のUnsplashが既に配信している画像をAPIという形で利用できるようにしたのがUnspalash Sourceとなります。

APIを利用することにより、高品質なかっこいい画像をランダムで表示させたり、カテゴリ別、画像サイズの指定、カメラマン別に表示、キーワード別に画像を表示させたりすることができます。

高品質な無料写真を配信しているUnsplash

また、プレースホルダー(ダミー)の画像を書き出したりせずにそれっぽい画像を置けるので便利です。
類似サービスUnsplash Itというのがありますが、繋がりにくかったりするのでUnsplash Sourceほど力を入れていないのかもしれません(´°ω°`)

続きを読む

使い方

基本(ランダム)

画像をランダムで表示させますが、このページを更新すると自動で切り替わるサンプルが見れます。

ランダムで画像を表示

HTML

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

カテゴリ指定

指定できるカテゴリ

  • buildings
  • food
  • nature
  • people
  • technology
  • objects

food

食物に関連する写真

nature

自然に関する写真

HTML

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

サイズ指定

320×100

320x100の写真

640×640

640x640の写真

HTML

<img src="https://source.unsplash.com/category/[画像の横幅]x[画像の高さ]">

検索キーワード指定

rock,river

キーワード別に画像や写真を表示

craft

クラフトに関連する画像

HTML

<img src="https://source.unsplash.com/featured/?rock,river">

まとめ

いかがでしょか!
他にもUnsplashユーザ情報や更新日時に基づいた絞り込みなどいろいろ指定できるので、詳細は公式サイトで確認してみてください。

それでは、よいUnsplashライフを(°ω°)ノ

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

まりぞー(マークアップエンジニア)

ゆるキャラとFPSゲームとおいしい食べものが好きですヽ(゜ω゜)ノ

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation