ホームページやWebサイトの制作時に、「まだ画像素材が用意できていないけれど、レイアウトは確認したい。」という場面はよくあります。
そんなときに便利なのが、ダミー画像を手軽に生成できる無料ツール「Placehold.jp」です。画像サイズ・色・テキストを指定でき、デザインのモックアップやテスト用の画像としてすぐに使えます。
WordPressをはじめ、さまざまなホームページ制作の現場で役立つため、本記事でご紹介します。
目次
placehold.jpとは？
placehold.jpは、指定したサイズ・色・文字のダミー画像を生成できる無料ツールです。ホームページやWebサイトの制作時に仮設置するダミー画像をつくれます。
使い方
次のようなダミー画像があれば、制作初期段階などでも「ここに横〇〇px × 縦△△pxの画像を配置する」というイメージでサイト設計を進められます。
ダミー画像のサンプル
以下で使い方をご紹介します。
サイズ指定のみで使う
placehold.jpの基本的な使い方はとてもシンプルです。
以下のように、画像サイズ（横幅×高さ）をURLに指定するだけでダミー画像を生成できます。
https://placehold.jp/300x200.png
上記のURLにアクセスすると、幅300px・高さ200pxのグレー背景の画像が表示されます。次のようにHTMLの<img>タグで囲めば、Webページ内にもかんたんに表示できます。
<img src="https://placehold.jp/300x200.png" alt="ダミー画像">まずはこの使い方を押さえておくだけで、すぐにダミー画像を活用できます。
また、サイト内には以下のように、よく使うサイズを選択して生成できるようにも配慮されています。
背景色・文字色・テキストなどを変更する
もしグレーの背景色や、文字色やテキストを変更したい場合は、下記箇所（Advanced）から調整できます。
幅や高さを指定した上で、以下のような項目を指定可能です。
- フォーマット（png/jpg）
- 文字サイズ
- 文字色
- 背景色
- 表示文字
それぞれ指定した場合、以下のようなURLが生成されます。
https://placehold.jp/80/3d4070/ffffff/1470x500.jpg?text=header
サイトのデザインや視認性を考慮して自由に調整がききますね。
スタイルシートを使って装飾する
必要に応じて、ダミー画像専用のスタイルシートも利用できます。ここに任意のCSSを入力することで、ダミー画像に反映可能です。
たとえば、初期値で用意されているスタイルシートをそのまま適用すると、上記のように表示されます。サイトのデザインによっては、角を丸くする等の調整もできるので便利です。
どんな時に使える？活用シーンをご紹介
placehold.jpは、次のようなシーンで活用できます。
仮画像でレイアウトを組みたいとき
完成画像がなくても、仮画像を使ってデザインや配置の調整を進められます。テキストとのバランスやサイズ感を事前に確認できるので、全体のレイアウトの確認時に活用できます。
クライアントにイメージを伝えたいとき
画像が空欄だと全体のイメージが掴みにくくなりますが、ダミー画像を入れることで完成イメージをわかりやすく提示できます。ワイヤーフレームや提案資料の質を上げたい時にも使えます。
ダミー画像のテキストを編集して、「ここにスタッフの写真」などとしておくと、さらに提案資料の質をアップできますね。
CSSや動きを確認したいとき
スライダーやフェードインといった画像を使った動きの確認にも使えます。仮画像でテストできるので、待ち時間なく制作を進められます。
利用時の注意
placehold.jpの画像は、外部URLで読み込む形式になっていますので、オフラインでは表示されない点に注意が必要です。
もし制作物に同梱したり、ローカル環境での作業を想定する場合は、画像を一度保存して使うのがおすすめです。生成されたダミー画像を右クリックして「画像を保存」すればOK。そのまま画像フォルダに入れて通常の画像と同じように扱えます。
>> placehold.jp 利用規約 | ダミー画像生成 モック用画像作成
まとめ
placehold.jpは、ダミー画像を手軽に作成できる無料サービスです。サイズや色、テキストを自由に指定してつくれて便利ですね。
仮の画像でサイト全体を確認したいときや、クライアントにイメージを伝えたいときなど、ホームページ制作の現場でぜひご活用ください。
WordPressでサイトを制作するとき、お客さん（クライアント）へのヒアリングは欠かせません。 「サイトの目的やデザイン、どんな機能を求めているのか。」など。クライアントと制作サイドとの認識違いを防ぎ、スムーズで正確な納品を実現するためです。 スケジュールや仕様のズレも事前に減らせるの...
WordPressで作成できる。
