個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。
プレースホルダー画像というのは、どんな画像を載せるのか正式に決まっていない場合、ダミー画像を入れておきますが、このダミー画像のことをプレースホルダー画像と呼びます。
これまでもプレースホルダー生成サービスはありましたが、単色だけでした。
しかし、このUnsplashが提供するサービスでは、美しい高画質画像を使ってプレースホルダーを生成できるのです。
利用は、URLをコピペしてサイズを入れるだけ。
これほど簡単なことはありません。
ワイヤーフレームなどに利用してもいいですし、画像がきれいですので、実際のブログやサイトで利用もできますね。
ご参考になれば幸いです。

商用無料の高画質画像をプレースホルダー画像にできてしまう「Unsplash It」

「Unsplash It」は、商用無料の高画質画像をプレースホルダー画像にできてしまうサービスです。
プレースホルダー画像は、正式な画像が掲載されるまでの仮画像を指します。
仮画像ですが、サイズは本番と同じものを準備します。
これまでも、「FPOImg.com」のような、単色のプレースホルダー画像生成サービスはありましたが、実際の写真を利用してのそれはありませんでした。
プレースホルダーといいますが、ハイクオリティな画像ばかりで構成されるUnsplashですから、通常のサイトやブログでもガンガン利用できそうです。

「Unsplash It」の使い方

使い方は簡単で、通常のimgのリンクに、以下のようにサイズを指定して記入するだけのお手軽さです。

最初の数字が横幅、次の数字が高さです。
正方形の画像を使いたい場合は、数字1つを指定すればOK。

See the Pen eNxPJJ by yugusato (@yugusato) on CodePen.

ランダム表示

ランダム表示にも対応しています。
数字の最後に「/?random」とパラメーターをつけやります。

See the Pen JdxmoW by yugusato (@yugusato) on CodePen.

モノクロ表示

モノクロ表示もできます。
数字の前に「g」を入れるだけです。

See the Pen VLgEey by yugusato (@yugusato) on CodePen.

具体的なイメージを表示

具体的な画像を利用したい場合には、?image=0として、数字部分に画像番号を入れます。
画像の番号はここから検索できます。

See the Pen JdxmKJ by yugusato (@yugusato) on CodePen.

そのほかにも、ぼかしを入れたり、構図の変更といったこともURLだけでできてしまうという便利さ。
ワイヤーフレームやデザイン案はもちろん、サイトやブログで使わない手はありません。
Unsplash It

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 10

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

オフラインでも便利なChrome機能拡張おすすめアプリ10

ネットが便利なのは言うまでもありませんが、場所の制約からネット回線につながらないときがあります。

記事を読む

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。 アイコン制作手法も様変わりを見せてお

記事を読む

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま

記事を読む

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール

記事を読む

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Fra

記事を読む

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない

記事を読む

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊

記事を読む

Bootstrapの無料テーマを探すなら一箇所で全部探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」をご紹介しま

記事を読む

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ

記事を読む