Webサイト制作 – ダミー画像が必要な時に便利なサイトまとめ
Webサイト制作 – ダミー画像・ダミーテキストが必要な時に便利なサイトまとめ
デザインやワイヤーフレーム制作に必要なダミー画像・ダミーテキスト（lorem ipsumなど）。
今回は、ダミー画像を生成してくれる便利なWEBサービスをいくつかリンク。
ダミーテキストはこちらの記事へ 『Webサイト制作 – ダミーテキストが必要な時に便利なサイトまとめ』
- Placehold.jp｜ダミー画像生成 モック用画像作成
- GIFPNG – 素早く簡単にお好みのダミー画像生成・モック用画像作成
- Dynamic Dummy Image Generator – DummyImage.com
- Fake images please?
- Dummy Image Generator
- lorempixel – placeholder images for every case
- PlaceIMG | Easy FPO and Dummy Images for Any Project
- Dummy Image Generator | fine placeholder images for web designers
- Placehold.it
Dummy Image
Placehold.jp｜ダミー画像生成 モック用画像作成
日本語のサイトで使いやすい。
Basicタブでは幅と高さの指定をして画像を生成するのボタンをクリックすると、画像とURLが生成される。
また「よく使う正方形」「バナーによくあるサイズ」「Web制作でよく使うサイズ」としてセットされた画像サイズから選ぶこともできる。
上記画像の【Advansed】タブではフォーマット形式、文字サイズなどの変更が出来る。
日本語の入力も出来るのでとても便利なおすすめな画像ジェネレーターです。
Dummy Image
GIFPNG – 素早く簡単にお好みのダミー画像生成・モック用画像作成
コメントにてBullさんにご紹介頂いた多言語対応ダミー画像生成サイトです。
画像のサイズ・カラー指定の基本と、細かい指定が可能な「境界線パラメータ」「テキストパラメータ」があり、かなり良いです！
基本的な使い方は以下の記述。
|
1 |
<span class="token tag"><span class="token punctuation"><</span>img <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.gifpng.com/{width}x{height}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
以下は横幅300px、background-color=333、テキストcolor=fff、の指定。
|
1 |
<span class="token tag"><span class="token punctuation"><</span>img <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.gifpng.com/300/333333/ffffff<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
境界線などほかにもいろいろあるので詳しくは公式へ。
GIFPNG http://www.gifpng.com/
Dummy Image
Dynamic Dummy Image Generator – DummyImage.com
英語のサイトですが、シンプル簡単、日本語の表示も出来て使いやすいです。
フォーマット形式も選べます。
Dummy Image
Fake images please?
英語のサイトですが、こちらも直感的にわかりやすいと思います。
上記のように画像サイズ・カラーなどを使用するサイズに指定してリンクするだけです。
Dummy Image
Dummy Image Generator
英語サイトですが使い方は簡単。
こちらはボーダーの有り無し、色を指定できます。
Dummy Image
lorempixel – placeholder images for every case
無色ではなく実画像を使いたい場合はここがおすすめ。
「Use the Placeholder Generator…」から画像サイズ、カテゴリを選んで、カラー・グレースケールの画像を実際に確認も出来ます。
「都市」「食品」など全部で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
などの指定方法でリンクできます。
こちらも実画像を使用したい時におすすめ。
サイズ指定、カテゴリ5種類、カラー・グレースケール・セピアから選択すると上部にURLが生成されます。
また「GENERATE THE IMAAGE」ボタンをクリックすると実際に画像の確認・ダウンロードが出来ます。
＊画像サイズの変更について
私の環境ではGoogleChromeを使うと数値の入力が出来ませんでした。IE,Firefoxについては問題なく数値入力が出来ました。
こちらも実画像を利用したいときに便利。
左サイドから「画像の表示枚数」「サイズ」「フォーマット」「サイズの表示ありなし」「カテゴリ」を選択して表示されたものをダウンロードして使います。
Bigger Imagesから幅2040などもすぐにダウンロードできて便利ですね。
Google Chrome Plugin
Placehold.it
最後にこちらはGoogle Chromeの拡張機能となります。
すごく簡単、便利で素早くダミー画像が作れます。
画像はリンク、ダウンロードが選べて、テキストには日本語入力が可能です。
利用頻度多い方はおすすめです。
ダミー画像サービスへのリンクは以上です。
関連記事
Web制作-ブラウザチェック（レスポンシブデザイン）に便利なツール
Web制作-ブラウザチェック（レスポンシブデザイン）に便利なツールとサービス Webサイトを制作したら、対象となるデバイス・ブラウザで正しく表示され動作するかの確認が必要です。 すべてのデバイスで実際にサイ […]
Web表示速度のためにCSS/JavaScriptを軽量化しよう
Web表示速度のためにCSS/JavaScriptを軽量化しよう Webサイト制作に必要なCSS/JavaScriptファイル。 作業しやすいように、後で見てもわかりやすいようにコメント・改行・余白をいれて作りますが、そ […]
Web表示速度のために画像最適化サービスを使おう
Web表示速度のために画像最適化サービスを使おう WEBサイト制作にかかせない画像。 サイトの表示が遅かったりサーバー圧迫の原因となる画像はできる限り軽量化しておきたいものです。 ここでは画像の劣化を最小限に最適化してく […]
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント
http://www.gifpng.comは日本語、多国語も出来るのでおすすめします。
Bullさんご紹介ありがとうございます！
記事に追加させていただきます!