どや!?一番簡単に好きなサイズのダミー画像を作成できるジェネレータ

19 4月

  • このエントリーをはてなブックマークに追加

一番簡単に好きなサイズのダミー画像を作成できるジェネレータ
Webサイト制作をするときに、まず作成するのがワイヤーフレーム。
ワイヤーフレームを作成するときダミー画像が必要になってきますが、いちいち作成するのはテマですよね。ダミー画像を動的に作成してくれるツールはたくさんありますが、一番簡単で分かりやすい『Dummy Image』を今回ご紹介。

Dummy Imageで出来ること

  • サイズの指定
  • 背景色/テキストの色の指定
  • 画像フォーマット
  • カスタムテキスト

実際に使ってみる

実際に使ってみると、とても簡単に作成できます。

①入力欄の説明

入力欄の説明

『size』『Background Color』『Foreground Color 』『Format』『Text』
のそれぞれのボックスに数値を入れると上に表示されている画像が自動で変更反映されます。

  • 『size』・・・・画像のサイズが変更できます。
  • 『Background Color』・・・・背景色が変更出来ます。16進コードで設定できます。
  • 『Foreground Color 』・・・・文字色が変更出来ます。16進コードで設定できます。
  • 『Format』・・・・画像の形式が変更できます。gif、png、jpgから選ぶことが出来ます。
  • 『Text』・・・・好きな文字を入れることが出来ます。

②実際に使ってみよう

例えば、『size』を300×150、『Background Color』を黄色、『Foreground Color 』赤、
『Format』をgifにすると・・・・

300×150の画像作成

こんな感じになりました。

③画像を使用する方法

画像を使う場合は画像の下に表示されているURLをクリックすることで使用できます。
URLをみてわかるとおり慣れてしまえば、直接URLを編集することで、様々なダミー画像を作成することが出来ます。

URLの説明

こんな感じの設定でできます。
画像に好きな文字を入力するときは、URLの最後に&text=◯◯◯◯◯を入力することで、変更できます。

http://dummyimage.com/500×250/000/fff&text=デザインどや!?をよろしく!

とても簡単に作成できますので是非活用してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL