ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webサイトやアプリのデザインを考える際に使われるのがプレイスホルダーと呼ばれるモック的な画像です。単純にサイズを明記しただけのものもありますが、多少は情報があった方がそれっぽくなります。

今回紹介するPlaiceholderは既存の画像をベースにプレイスホルダー化するライブラリです。

Plaiceholderの使い方

画像をぼかしてプレイスホルダーにします。

モザイクのサイズを粗くした場合。

CSS設定で設定方法を取得できます。

Plaiceholderの結果はCSSの他、SVGやBASE64、ReactのcreateElementなどで取得できます。CSSであれば元の画像によらず適用できるので、自由な画像を当てはめつつも、ぼかすことで情報量を下げるという使い方が可能です。

PlaiceholderはTypeScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

Studio | Plaiceholder

joe-bell/plaiceholder: Beautiful image placeholders, without the hassle ?

 

MOONGIFTの関連記事

  • DevRel
  • Com2