スタイリッシュなプレースホルダーが使用できるWebサービス [ Lorem Picsum ]

スタイリッシュなプレースホルダーが利用できるWebサービスを使用するイメージ

せっかくなら、スタイリッシュなプレースホルダーを使って、きれいなモックアップを作りたい。そんな時に。

Webデザインのお仕事をしていると、
Webサイトのサンプルを見せる時や、Webアプリのモックアップを見せる時、
写真が入る部分に仮画像を当て込むことがよくありますよね。

そんな時に、いかにも「ダミー画像です」という写真が入っているより、
綺麗な、クオリティの高い写真が入っていた方が、見る人の印象は良くなるというもの。

そこで今回ご紹介するのが、スタイリッシュなプレースホルダーを、簡単なたった1行のコードで提供してくれる
Lorem Picsum というWebサービスです。
公式サイトを見ると
制作者は Sweden と California のエンジニアの方2名がクレジットされており、
ライセンスは MIT、
プレースホルダーの素材写真は
Unsplash(クオリティの高い、世界中の写真家からの素材が使用できるサイト)のものを使っている、とのことです。

基本的な使い方

https://picsum.photos/id/1003/480/320

↑上の例の通り、

https://picsum.photos/id/{画像のナンバー}/{横サイズ}/{縦サイズ}

というシンプルな指定です。
{画像のナンバー} 部分ですが、次のURLに、指定できる画像の一覧があります。
Lorem Picsum -Images

これを、imgタグのsrcに指定してあげれば、スタイリッシュなプレースホルダー画像が使用できるというわけです。

プレースホルダーのサンプル
↑ 実際に読み込んで見た例です。

ランダムにイメージを読み込む

https://picsum.photos/480/320

↑画像のナンバーを指定せず、プレースホルダー画像をランダムに読み込む事もできます。その場合、上記のように

https://picsum.photos/{横サイズ}/{縦サイズ}

と指定します。これで、ランダムなプレースホルダー画像が使用できます。

プレースホルダーをランダムに読み込むサンプル
↑ 実際に読み込んで見た例です。リロードする度、画像が変わる事がわかるかと思います。

グレースケールのプレースホルダー画像にする

https://picsum.photos/480/320?grayscale

↑グレースケールで画像を使用する場合は、末尾に ?grayscale オプションを加えるだけです。

プレースホルダーをグレースケールで読み込むサンプル
↑ 実際に読み込んで見た例です。グレースケールにするだけで、ぐっと雰囲気が出ますね。

プレースホルダー画像にblurをかける

https://picsum.photos/480/320?blur

↑画像にやわらかめのぼやけを入れて使用する場合は、末尾に ?blur オプションを指定します。

プレースホルダーにblurをかけて読み込むサンプル
↑ 実際に読み込んで見た例です。こちらも、独特の雰囲気が得られますね。なお、こちらの ?blur オプションは、
?blur=3 のように指定して、1 ~ 10の範囲でblurの強さが調節できます。

グレースケールとblurの併用

https://picsum.photos/480/320?grayscale&blur=3

↑このようにオプションを & でつなぐと、併用ができます。

オプションを併用したサンプル
↑ 実際に読み込んで見た例です。

この記事のまとめ

今回は、1行のコードでスタイリッシュなプレースホルダー画像を使用することのできるWebサービス、
Lorem Picsum について、
使い方をざっくりと書きました。

プレースホルダー画像を利用できる同様のWebサービスは他にも多々ありますが、
個人的にはこの Lorem Picsum が、
写真のクオリティやオプションの豊富さなどの面で、気に入っています。

この Lorem Picsum というWebサービス自体がまさにそうなのですが、
世界中のクリエイターが、世界中の誰かのために、優れたサービスを
生み出してくれている現代という時代。

素晴らしいサービスと、そのクリエイティブ精神に感謝と敬意を持って
享受させてもらいながら、
自身もまた、新しい価値を生み出すために日々、前に進んでいきたいですね。

※この記事は内容の品質向上を目的に随時、記事の修正、更新を行う場合があります。