ホームページやWebサイトの制作時に、「まだ画像素材が用意できていないけれど、レイアウトは確認したい。」という場面はよくあります。

そんなときに便利なのが、ダミー画像を手軽に生成できる無料ツール「Placehold.jp」です。画像サイズ・色・テキストを指定でき、デザインのモックアップやテスト用の画像としてすぐに使えます。

WordPressをはじめ、さまざまなホームページ制作の現場で役立つため、本記事でご紹介します。

WordPressテーマ「PANDORA」
WordPressテーマ「PANDORA」
レイアウト自由自在なブログ・メディアを構築。

placehold.jpとは?

placehold.jpのイメージ

placehold.jpは、指定したサイズ・色・文字のダミー画像を生成できる無料ツールです。ホームページやWebサイトの制作時に仮設置するダミー画像をつくれます。

placehold.jp

使い方

次のようなダミー画像があれば、制作初期段階などでも「ここに横〇〇px × 縦△△pxの画像を配置する」というイメージでサイト設計を進められます。

ダミー画像

ダミー画像のサンプル

以下で使い方をご紹介します。

サイズ指定のみで使う

placehold.jpの基本的な使い方はとてもシンプルです。

以下のように、画像サイズ(横幅×高さ)をURLに指定するだけでダミー画像を生成できます。

https://placehold.jp/300x200.png

上記のURLにアクセスすると、幅300px・高さ200pxのグレー背景の画像が表示されます。次のようにHTMLの<img>タグで囲めば、Webページ内にもかんたんに表示できます。

<img src="https://placehold.jp/300x200.png" alt="ダミー画像">

まずはこの使い方を押さえておくだけで、すぐにダミー画像を活用できます。

また、サイト内には以下のように、よく使うサイズを選択して生成できるようにも配慮されています。

placehold.jpのサイズ選択メニュー

背景色・文字色・テキストなどを変更する

もしグレーの背景色や、文字色やテキストを変更したい場合は、下記箇所(Advanced)から調整できます。

placehold.jpのAdvanced設定

幅や高さを指定した上で、以下のような項目を指定可能です。

  • フォーマット(png/jpg)
  • 文字サイズ
  • 文字色
  • 背景色
  • 表示文字

それぞれ指定した場合、以下のようなURLが生成されます。

https://placehold.jp/80/3d4070/ffffff/1470x500.jpg?text=header

サイトのデザインや視認性を考慮して自由に調整がききますね。

スタイルシートを使って装飾する

必要に応じて、ダミー画像専用のスタイルシートも利用できます。ここに任意のCSSを入力することで、ダミー画像に反映可能です。

placehold.jpのスタイルシート箇所

たとえば、初期値で用意されているスタイルシートをそのまま適用すると、上記のように表示されます。サイトのデザインによっては、角を丸くする等の調整もできるので便利です。

どんな時に使える?活用シーンをご紹介

placehold.jpは、次のようなシーンで活用できます。

仮画像でレイアウトを組みたいとき

完成画像がなくても、仮画像を使ってデザインや配置の調整を進められます。テキストとのバランスやサイズ感を事前に確認できるので、全体のレイアウトの確認時に活用できます。

クライアントにイメージを伝えたいとき

画像が空欄だと全体のイメージが掴みにくくなりますが、ダミー画像を入れることで完成イメージをわかりやすく提示できます。ワイヤーフレームや提案資料の質を上げたい時にも使えます。

ダミー画像のテキストを編集して、「ここにスタッフの写真」などとしておくと、さらに提案資料の質をアップできますね。

CSSや動きを確認したいとき

スライダーやフェードインといった画像を使った動きの確認にも使えます。仮画像でテストできるので、待ち時間なく制作を進められます。

利用時の注意

placehold.jpの画像は、外部URLで読み込む形式になっていますので、オフラインでは表示されない点に注意が必要です。

もし制作物に同梱したり、ローカル環境での作業を想定する場合は、画像を一度保存して使うのがおすすめです。生成されたダミー画像を右クリックして「画像を保存」すればOK。そのまま画像フォルダに入れて通常の画像と同じように扱えます。

画像そのものに明確な再配布制限の記載はありませんが、制作物に同梱する場合は、念のため運営元に確認するのが無難です。
>> placehold.jp 利用規約 | ダミー画像生成 モック用画像作成

まとめ

placehold.jpは、ダミー画像を手軽に作成できる無料サービスです。サイズや色、テキストを自由に指定してつくれて便利ですね。

仮の画像でサイト全体を確認したいときや、クライアントにイメージを伝えたいときなど、ホームページ制作の現場でぜひご活用ください。

placehold.jp

売上が上がるネットショップが
WordPressで作成できる。
WordPressテーマ「RIKYU」
WordPressテーマ「RIKYU」
あらゆるジャンルのネットショップが作成可能。
WordPressテーマ「common」
WordPressテーマ「common」
デジタルコンテンツのECサイトがつくれる。
WordPressテーマ「Ankle」
WordPressテーマ「Ankle」
かわいいネットショップを簡単作成。
WordPressテーマ「EGO.」
WordPressテーマ「EGO.」
2大カートプラグイン対応のECサイトを構築。