【便利ツール】URLを貼るだけ!Web制作で爆速でダミー画像を用意できるおすすめサービス3選
Web制作のコーディングをしていて、「まだ画像素材はないけど、とりあえずレイアウトを組みたい!」という場面はよくありますよね。 わざわざ仮の画像をPhotoshopなどで作って、プロジェクトフォルダに保存して…というのは非常に手間がかかります。
そんな時に大活躍するのが、URLを指定するだけでダミー画像を表示してくれるジェネレーターサービスです!
HTMLの <img> タグの src 属性に特定のURLを書くだけで、好きなサイズの画像を自動生成してくれます。今回は、おすすめのダミー画像サービスを3つご紹介します!
デモ動作
See the Pen 便利なダミー画像サービス3選 by mikanbako (@mikanbako) on CodePen.
demo: 便利なダミー画像サービス3選
メリット・各サービスの特徴
ダミー画像サービスを使うメリット
これらのサービスを使う最大のメリットは、「画像をローカル(プロジェクトフォルダ)にダウンロード・保存しなくて良い」という点です。 400x300 などのサイズをURL内で書き換えるだけで、即座にそのサイズの画像が生成されるため、コーディングのスピードが格段に上がります。
状況に応じた使い分け
・Placehold.co / DummyImage.com
正確なサイズ感が知りたいワイヤーフレーム作成時や、バナーの仮置きなど「情報を邪魔したくない時」に最適です。色やテキストもURLで簡単に変更できます。
・Lorem Picsum
「実際の写真が入った時の雰囲気(完成イメージ)」を見せたい時に非常に重宝します。ランダムで美しい写真が表示されるため、サイトが一気におしゃれに見えます。
補足:各サービスリンク
より詳しい仕様については、以下の公式ドキュメントをご参照ください。
まとめ
今回は、Web制作の効率を劇的に上げてくれる「ダミー画像ジェネレーター」を3つご紹介しました。
コーディングの初期段階では、デザイン素材が揃っていないことも多々あります。そういった時に作業の手を止めず、URL一つで仮のレイアウトをサクサク組めるようにしておくことは、実務においても非常に大切なスキルです。
これからも、技術的なコードの書き方だけでなく、こういった「開発をスムーズにする便利なツール」も積極的に活用していきたいと思います!