このサイトはJavaScriptがオンになっていないと正常に表示されません

制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ

thumb_dummy

Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう!

ダミーテキスト(英文)


Lorem Ipsum
ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。


Dummy HTML snippets for webdesigners
HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ&ドロップでカスタマイズできます。類似サイトのHTML-Ipsumではタグ付きダミーテキストが一覧表示されています。

ダミーの名前

dummy3
Random name generator
英語圏の名前をランダムで表示してくれます。コメントやテスティモニアルのダミーに使ってます。

ダミーテキスト(和文)


日本語 Lorem ipsum
夏目漱石「私の個人主義」や宮沢賢治「セロ弾きのゴーシュ」等からランダムにダミーテキストを生成してくれます。自分で文章を指定することも可。バラグラフごとの文の数や先頭の全角スペースの有無の指定など、細かい設定ができます。


ダミーテキストジェネレータ
日本でよく見る「この文章はダミーです。」の連続や、「坊っちゃん」「徒然草」等の作品からダミーテキストを生成。

ダミーの名前


ランダム名前ジェネレータ(日本人名)
日本人の名前をランダム表示してくれるサイトもあるのかなーと探したら見つかりました。とてもシンプル。

ダミー画像

ダミー画像はWebサイトを制作中、画像が必要な場所に指定したサイズでスペースをあけておくために使用します。お気に入りのジェネレーターが見つかったら、あらかじめスニペットとして登録しておくと捗ります。

シンプルなダミー画像

Placehold.it

以前はDummyImage.comをよく使っていましたが、表示が遅かったり、表示されなかったりという事があったので、Placehold.itに乗り換えました。サイズ・色・テキスト・フォーマットの指定可能。

例: このコードを書くと、下の画像が表示されます。

<img src="http://placehold.it/640x340/27709b/ffffff">

他にも

でも同様に使えます。

シンプルなダミー画像(日本語)

Placehold.jp

上記のものと同様、シンプルなダミー画像を生成してくれる国産ジェネレーター。よく使うバナーサイズもプリセットとして用意しているのでとっても便利!

例: このコードを書くと、下の画像が表示されます。

<img src="http://placehold.jp/640x340.png">

カテゴリー有り、モノクロOK

lorempixel

スライダーを動かしてサイズを指定。人物・動物・食べ物等のカテゴリーから選択でき、カラーかモノクロかを指定できます。

例: このコードを書くと、下の画像が表示されます。

<img src="http://lorempixel.com/640/340/sports/">

カテゴリー有り、セピア・モノクロOK

PlaceIMG

こちらもカテゴリー選択可。セピアやモノクロも指定できます。

例: このコードを書くと、下の画像が表示されます。

<img src="http://placeimg.com/640/340/people/sepia">

Flickrのダミー画像

flickholdr

Flickrからダミー画像をランダムに生成。すべて商用利用OKの画像とのこと。タグを指定することもできます。種類は豊富ですが、表示が遅いです…。

例: このコードを書くと、下の画像が表示されます。

<img src="http://flickholdr.com/640/340/food">

犬のダミー画像

PlaceDog.com

わんちゃんのダミー画像を生成するサイト。犬派のあなたはぜひ。サイズの前に「g」を入れるとモノクロになります。

例: このコードを書くと、下の画像が表示されます。

<img src="http://placedog.com/640/340">

猫のダミー画像

{placekitten}

猫ちゃんのダミー画像を生成するサイト。猫派のあなたはぜひ。サイズの前に「g」を入れるとモノクロになります。

例: このコードを書くと、下の画像が表示されます。

<img src="http://placekitten.com/g/640/340">

ユーザーのアバター画像

dummy7
User Inter Faces
サイズや形を指定して、ユーザーの顔写真の一覧が作成できます。こちらはHTMLに埋め込むタイプではなく、スクリーンショット画像を撮影し、デザインモックアップに挿入して利用します。

他にもおすすめジェネレーター等があれば教えてくださいね! ;)

Advertisement

シェアする

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

関連する記事

コメント

ページトップへ戻る

Web関連記事・お知らせ

もっと表示

Web制作テクニック

もっと表示

インスピレーション・デザイン

もっと表示

Twitter 人気のつぶやき

もっと表示

サイト内検索

本書きました

Webクリエイターズガイドブック

Twitter

Facebookページ

中の人ってこんな人

このブログの中の人、Manaです。

イギリス・ロンドン在住のWebデザイナー+Webデベロッパー:Manaです。 日本で2年間グラフィックデザイナーとして働いた後、バンクーバーにあるWeb制作の学校を卒業。 その後各国でWebデザイナーとして修行中。カナダ→オーストラリア→カナダ→イギリス←いまここ。 さらに詳しく知りたいという方はこちらへ。 個人的などうでもいいことはこちらでつぶやいてます。

  • ランダム
  • 新着記事