せっかくなら、スタイリッシュなプレースホルダーを使って、きれいなモックアップを作りたい。そんな時に。
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=3 のように指定して、1 ~ 10の範囲でblurの強さが調節できます。グレースケールとblurの併用
https://picsum.photos/480/320?grayscale&blur=3
↑このようにオプションを & でつなぐと、併用ができます。
この記事のまとめ
今回は、1行のコードでスタイリッシュなプレースホルダー画像を使用することのできるWebサービス、
Lorem Picsum について、
使い方をざっくりと書きました。
プレースホルダー画像を利用できる同様のWebサービスは他にも多々ありますが、
個人的にはこの Lorem Picsum が、
写真のクオリティやオプションの豊富さなどの面で、気に入っています。
この Lorem Picsum というWebサービス自体がまさにそうなのですが、
世界中のクリエイターが、世界中の誰かのために、優れたサービスを
生み出してくれている現代という時代。
素晴らしいサービスと、そのクリエイティブ精神に感謝と敬意を持って
享受させてもらいながら、
自身もまた、新しい価値を生み出すために日々、前に進んでいきたいですね。
※この記事は内容の品質向上を目的に随時、記事の修正、更新を行う場合があります。