Webサイト制作 – ダミー画像が必要な時に便利なサイトまとめ


Webサイト制作 – ダミー画像・ダミーテキストが必要な時に便利なサイトまとめ

デザインやワイヤーフレーム制作に必要なダミー画像・ダミーテキスト(lorem ipsumなど)。
今回は、ダミー画像を生成してくれる便利なWEBサービスをいくつかリンク。
ダミーテキストはこちらの記事へ 『Webサイト制作 – ダミーテキストが必要な時に便利なサイトまとめ』

 

  1. Placehold.jp|ダミー画像生成 モック用画像作成
  2. GIFPNG – 素早く簡単にお好みのダミー画像生成・モック用画像作成
  3. Dynamic Dummy Image Generator – DummyImage.com
  4. Fake images please?
  5. Dummy Image Generator
  6. lorempixel – placeholder images for every case
  7. PlaceIMG | Easy FPO and Dummy Images for Any Project
  8. Dummy Image Generator | fine placeholder images for web designers
  9. Placehold.it

 

Placehold.jp|ダミー画像生成 モック用画像作成

日本語のサイトで使いやすい。
Basicタブでは幅と高さの指定をして画像を生成するのボタンをクリックすると、画像とURLが生成される。

また「よく使う正方形」「バナーによくあるサイズ」「Web制作でよく使うサイズ」としてセットされた画像サイズから選ぶこともできる。

placehold_jp


上記画像の【Advansed】タブではフォーマット形式、文字サイズなどの変更が出来る。

日本語の入力も出来るのでとても便利なおすすめな画像ジェネレーターです。

gifpng-ダミー画像生成サービス

コメントにてBullさんにご紹介頂いた多言語対応ダミー画像生成サイトです。
画像のサイズ・カラー指定の基本と、細かい指定が可能な「境界線パラメータ」「テキストパラメータ」があり、かなり良いです!

基本的な使い方は以下の記述。

以下は横幅300px、background-color=333、テキストcolor=fff、の指定。

境界線などほかにもいろいろあるので詳しくは公式へ。

GIFPNG http://www.gifpng.com/

 

 

 

dummyimage_com

英語のサイトですが、シンプル簡単、日本語の表示も出来て使いやすいです。
フォーマット形式も選べます。

Dummy Image

Fake images please?

fakeimg_pl

英語のサイトですが、こちらも直感的にわかりやすいと思います。

fakeimg_pl

上記のように画像サイズ・カラーなどを使用するサイズに指定してリンクするだけです。

Dummy Image

Dummy Image Generator

getdummyimage_com

英語サイトですが使い方は簡単。
こちらはボーダーの有り無し、色を指定できます。

lorempixel_com

無色ではなく実画像を使いたい場合はここがおすすめ。

「Use the Placeholder Generator…」から画像サイズ、カテゴリを選んで、カラー・グレースケールの画像を実際に確認も出来ます。
lorempixel_com

「都市」「食品」など全部で13カテゴリーあり、カラー、白黒が選べる。

固定画像かランダム画像かも選べる。

使い方はリンクですが、以下のようになります。

400X200サイズの画像をランダムで表示。
http://lorempixel.com/400/200
400X200サイズの画像をグレースケールでランダム表示。
http://lorempixel.com/g/400/200
400X200サイズの画像をスポーツカテゴリからランダム表示。
http://lorempixel.com/400/200/sports
400X200サイズの画像をスポーツカテゴリから一枚を固定表示。
http://lorempixel.com/400/200/sports/1
400X200サイズの画像をスポーツカテゴリからダミーテキスト付きでランダムに表示。
http://lorempixel.com/400/200/sports/Dummy-Text
などの指定方法でリンクできます。

placeimg_com

こちらも実画像を使用したい時におすすめ。

サイズ指定、カテゴリ5種類、カラー・グレースケール・セピアから選択すると上部にURLが生成されます。

また「GENERATE THE IMAAGE」ボタンをクリックすると実際に画像の確認・ダウンロードが出来ます。

placeimg_com

*画像サイズの変更について

私の環境ではGoogleChromeを使うと数値の入力が出来ませんでした。IE,Firefoxについては問題なく数値入力が出来ました。

dummy-image-generator_com

こちらも実画像を利用したいときに便利。
左サイドから「画像の表示枚数」「サイズ」「フォーマット」「サイズの表示ありなし」「カテゴリ」を選択して表示されたものをダウンロードして使います。

dummy-image-generator_com

Bigger Imagesから幅2040などもすぐにダウンロードできて便利ですね。

Google Chrome Plugin

Placehold.it

最後にこちらはGoogle Chromeの拡張機能となります。
すごく簡単、便利で素早くダミー画像が作れます。
画像はリンク、ダウンロードが選べて、テキストには日本語入力が可能です。
利用頻度多い方はおすすめです。
placehold
ダミー画像サービスへのリンクは以上です。


この投稿へのコメント

  1. Bull said on 2016年5月17日 at 3:01 AM

    http://www.gifpng.comは日本語、多国語も出来るのでおすすめします。

    • MizuKazu said on 2016年5月19日 at 10:22 AM

      Bullさんご紹介ありがとうございます!
      記事に追加させていただきます!

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL