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

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

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

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

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

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

「Unsplash It」の使い方

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

[html]

[/html]

最初の数字が横幅、次の数字が高さです。
正方形の画像を使いたい場合は、数字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アソシエイト・プログラムの参加者です。

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

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む

画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」

CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる

記事を読む

HTMLメールの無料テンプレートをお探しなら「無料で利用できるオープンソースなHTMLメールテンプレートコレクションサイト」

HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」

HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール

記事を読む

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレータ

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

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

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

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

記事を読む

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider.com」

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

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

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

記事を読む

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

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

記事を読む