プログラミング

Web制作で便利なダミー画像作成ツール|実案件や学習に

 

イケゾー
この記事は、こんな人におすすめ!
・ダミー画像を使ってコーディングしたい
・クライアントから画像が提供されないので、仮の画像を入れておきたい

 

このような疑問にお答えします。

 

本記事の内容

  • ダミー画像を簡単に作成できるツールを紹介

 

筆者情報

Ikezooo

  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人

 

Web制作中に、画像が用意できていないことはよくあります。
ダミー画像があれば作業も進みますし、完成形の雰囲気も感じられます。

そこで使えるダミー画像の作成方法を解説していきます。

それでは、どうぞ!

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

 

Web制作で便利なダミー画像作成ツール

ダミー画像作成ツールは、URLを指定するだけで簡単にダミー画像を作成できます。
画像のサイズや種類の指定もできるので、とても便利なツールです。

 

例えば、ダミー画像を配置したい箇所に、下記の<img>タグを貼り付けると、

HTML
<img src="https://placehold.jp/150x150.png">

 

 

こんなダミー画像を表示させることができます。
画像サイズは、URLの末尾 ...jp/150x150の部分で変更できます。

クライアントから画像が届かなくて作業が進まない・・・ということが無くなりますね。

画像があると作業がはかどるね♪
イケゾー

 

おすすめのダミー画像作成ツール

ツールごとに、作成できる画像の条件が異なります。

  • 画像サイズ
  • 画像デザイン
  • 画像の種類(拡張子)
ひとつずつ紹介します♪
イケゾー

 

Placehold.jp

  • 画像サイズ URLで指定
  • 画像デザイン 単色背景と文字
  • 画像の種類(拡張子) PNGとJPEG

 

ちょっと無機質ですが、ダミー画像としてはちょうど良いです。
>>公式サイトはこちら

 

HTML
<img src="http://placehold.jp/24/cc9999/993333/600x100.png">

 

HTML
<img src="http://placehold.jp/24/cccccc/ffffff/250x50.png?text=placehold.jp"">

 

 

Lorem Picsum

  • 画像サイズ URLで指定
  • 画像デザイン 画像を選択。グレースケールとぼかし
  • 画像の種類(拡張子) PNGとJPEG、WEBP

 

用意された画像の中から、表示する画像を選びます。
サイトイメージに近いものを選べば、より雰囲気が出ますね。
>>公式サイトはこちら

 

HTML
<img src="https://picsum.photos/id/1/400/300">

 

HTML
<img src="https://picsum.photos/id/1/400/300?grayscale"">

 

HTML
<img src="https://picsum.photos/id/1001/400/300?grayscale"">

 

もっと詳しく
【無料で商用利用可】イラスト / 画像 / アイコン サイトのまとめ

続きを見る

 

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

 

まとめ

ダミー画像作成ツールは、URLを指定するだけで簡単にダミー画像を作成できます。
画像のサイズや種類の指定もできるので、とても便利なツールです。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング
-