個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき

記事を読む

見ている人を魅了するcodrops作成のマウスオーバーエフェクト21

ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21

CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ

記事を読む

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)

レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ

記事を読む

デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60

新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今

記事を読む

無料で利用できる検索フォーム12(CSS3,HTML5,jQuery)

検索フォームはサイトに欠かせない重要な要素の1つになっています。 最近では、アニメーションを用いた

記事を読む

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは

記事を読む

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr

記事を読む

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む