【便利ツール】URLを貼るだけ!Web制作で爆速でダミー画像を用意できるおすすめサービス3選

Web制作のコーディングをしていて、「まだ画像素材はないけど、とりあえずレイアウトを組みたい!」という場面はよくありますよね。 わざわざ仮の画像をPhotoshopなどで作って、プロジェクトフォルダに保存して…というのは非常に手間がかかります。

そんな時に大活躍するのが、URLを指定するだけでダミー画像を表示してくれるジェネレーターサービスです!

HTMLの <img> タグの src 属性に特定のURLを書くだけで、好きなサイズの画像を自動生成してくれます。今回は、おすすめのダミー画像サービスを3つご紹介します!

デモ動作

See the Pen 便利なダミー画像サービス3選 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい!(別タブで開かれます)

メリット・各サービスの特徴

ダミー画像サービスを使うメリット

これらのサービスを使う最大のメリットは、「画像をローカル(プロジェクトフォルダ)にダウンロード・保存しなくて良い」という点です。 400x300 などのサイズをURL内で書き換えるだけで、即座にそのサイズの画像が生成されるため、コーディングのスピードが格段に上がります。

状況に応じた使い分け

Placehold.co / DummyImage.com
正確なサイズ感が知りたいワイヤーフレーム作成時や、バナーの仮置きなど「情報を邪魔したくない時」に最適です。色やテキストもURLで簡単に変更できます。

Lorem Picsum
実際の写真が入った時の雰囲気(完成イメージ)」を見せたい時に非常に重宝します。ランダムで美しい写真が表示されるため、サイトが一気におしゃれに見えます。

補足:各サービスリンク

より詳しい仕様については、以下の公式ドキュメントをご参照ください。

Placehold.co
DummyImage.com
Lorem Picsum

まとめ

今回は、Web制作の効率を劇的に上げてくれる「ダミー画像ジェネレーター」を3つご紹介しました。

コーディングの初期段階では、デザイン素材が揃っていないことも多々あります。そういった時に作業の手を止めず、URL一つで仮のレイアウトをサクサク組めるようにしておくことは、実務においても非常に大切なスキルです。

これからも、技術的なコードの書き方だけでなく、こういった「開発をスムーズにする便利なツール」も積極的に活用していきたいと思います!

Prev
Next