Advertisement

 

「準備はまだできていないけど、仮のダミー画像を入れておきたい」ウェブ制作中にそんな場面に遭遇することもあるでしょう。

 

この記事では、ダミー画像を手軽に生成できるジェネレーター、オンラインツールをまとめてご紹介します。

 

 

そもそもダミー画像とは?

 

ウェブ制作中に、「画像の準備はできていないけど、とりあえずレイアウトの確認だけでもしたい」、というときに利用する仮の画像、これが「ダミー画像」です。

 

画像のサイズはもちろん、スタイルなどもimgタグに直接記述するだけで、ダミー画像を表示できます。

 

試しに以下のようにimgタグを記述してみると、

 

 

 

ほんの少しの指定を行うだけで、サイトの雰囲気にあった色合いのダミー画像を用意することができます。サイズ指定も手軽なので、お気に入りのダミー画像ジェネレーターをひとつ見つけておくのも良いでしょう。

 

 

おすすめダミー画像生成オンラインサービスまとめ

イラストをつかった新しいダミー画像生成ツールDoodle Ipsum

Doodle_Ipsum-2

 

写真画像も良いですが、手描きイラストをつかったダミー画像はいかがでしょう。Doodle Ipsumでは、10種類のイラストスタイルをえらぶことができるダミーイラスト画像を生成してくれるサービスです。

 

 

基本的に、画像サイズを指定すれば表示可能です。

 

 

640x400pxでサイズ指定した状態がこちら。

 

この他にも、?bg=[HEXコード(#なし)]で背景色を指定したり、?shape=circleで丸く切り抜いたり、

 

 

sat=-100で白黒グレイスケールにイラストをしたり、

 

blur=[数値]でイラストをぼかす指定も可能です。

 

 

日本語対応、 国産ダミー画像ジェネレーター Placehold.jp

placehold.jp

 

設定は簡単な程よい、というひとは日本語で設定できる国産ダミー画像生成ツールPlacehold.jpがおすすめです。使い方もとてもシンプルで、画像の縦横サイズを指定するだけで完了。

 

640x400pxのダミー画像を表示した状態がこちら。サイズが一目で確認できるのも良いですね。

 

背景や文字の色、サイズの変更も可能となっています。

 

さらにCSSが利用可能なので、グラデーションや角丸などスタイリングを自由に追加できるのも嬉しいポイントです。

 

 

シンプルが一番、老舗ダミー画像生成ツール Placeholder

Placeholder_com__Placeholder_com_–_The_Free_Image_Placeholder_Service_Favoured_By_Designers

 

とにかくシンプルなツールが使いたいというひとは、Placeholder.comはいかがでしょう。基本的な使い方はとてもシンプルで、他サイト同様にサイズを指定するだけ。

 

 

その他にも背景や文字の色を指定することもできます。

 

まず背景色、続けて文字色を/で区切り、?text=[英語テキスト]で文字を指定できます。

 

 

 

ロゴ画像がないときに便利な Logo Ipsum

 

ウェブサイト制作でよくありがちな 「ロゴが準備できていない」問題。Logo Ipsumでは、さまざまなスタイルで作成されたロゴデザイン40種類以上が揃っており、クリック一発でSVGファイル形式でダンロードできます。

 

 

「シンボル」や「文字をつかったロゴ」「曲線カーブロゴ」など、ロゴの人気スタイルを手軽に利用できます。ここらへんのシンボルマークは、重宝する機会も多いはず。厳密にはダミー画像ではありませんが、用途が似ているためメモ。

 

 

映画やゲーム、音楽アルバムカバー、ファッションなどEコマース作成に Lorem.Space

Lorem_space_-_placeholder_image_generator

 

映画やゲーム、音楽アートカバー、ファッション、本の表紙、靴、時計、家具とジャンルの写真をランダムで表示できるダミー画像生成ツール Lorem.Space

 

実際に使われている映画ポスターなど、著作権的に問題のありそうなため、テスト開発環境でのみの利用がベター。

 

 

ジャンルに続けて、w=[幅]h=[高さ]を指定しましょう。

 

 

美しい写真をランダム表示 Lorem Picsum

Lorem_Picsum

 

「美しいスタイリッシュな画像を表示したい」というときに便利なLorem Picsum

 

/id/[画像ID]で、リストから特定の写真を表示したり、?grayscaleで白黒バージョンに、?blurをURLの最後に加えれば、画像にぼかしを加えることも。

 

Lorem Picsumのダミー画像

 

人気フリー写真ストックサイトUnsplash公式ダミー画像生成ツール Unsplash Source

Unsplash_Source___A_Simple_API_for_Embedding_Free_Photos_from_Unsplash

 

老舗フリー写真ストックサイトUnsplashで公開されている写真を、ダミー画像として生成してくれる、公式ダミー画像ツールUnsplash Source

 

基本的な使い方は、画像サイズを指定してあげるだけ。

 

さすがUnsplash公式ということもあり、「コレクション内の画像を表示」したり、「特定のユーザーの画像のみを表示」、「自分のお気に入り画像をランダム表示」など嬉しい機能ばかり。

 

開発向けにUnsplash APIも公開されています。

 

この記事は、2016年12月7日に公開された記事を再編集しています。新しいサービスを16個を追加し、サービスが終了しているものは削除し、合計57個のフリー写

 

 

ダミー画像のカテゴリを手軽に切り替え PlaceIMG

 

PlaceIMGも、他のダミー画像生成ツール同様に、ランダムで写真を表示してくれるジェネレーターです。個人的に気に入っている点として、「表示する画像のジャンルを選択できる」ところ。

 

ボタンをクリックするだけで切り替えできるので、用途に合ったダミー画像を手軽に扱うことができます。

 

640x400pxのダミー画像を表示した状態がこちら。

PlaceIMGのダミー画像

 

 

AIアートパターンを利用した Generative Placeholders

Generative_Placeholders

 

Generative Placeholdrsは、AIによって描かれたアート作品「ジェネレーティブアート(Generative Art)」を活用したダミー画像生成ツール。

 

他では見かけないおしゃれなパターンスタイルが特長で、あらかじめ用意された100種類の配色カラーパレットを指定することも可能です。

Generative_Placeholders-2

 

 

640x400pxの「Mondrian」スタイルのダミー画像がこちら。

 

 

猫好きにはたまらない猫オンリーのPlaceKitten

{placekitten}_-_Placeholder_kitten_images_for_developers

 

placekittenは、かわいい子猫限定のダミー画像生成ツール。猫好きのひとにはたまらない、癒し系サービス。

 

640x400pxのダミー画像を表示した状態がこちら。

placekittenのダミー画像

 

 

野生のクマ、集めました。placebear

{placebear}

 

上記サービスに触発された、「クマ」を集めたダミー画像生成ツール。/gで白黒グレイスケールに。

 

640x400pxのダミー画像を表示した状態がこちら。

placebearのダミー画像

 

 

ベーコン好き集まれ PlaceBacon

baconmockup___Meaty_Placeholder_Images

 

なぜ?と思ってしまう、ベーコンに特化したダミー画像生成サイト PlaceBacon。とにかくベーコンが好きでたまらないという、食いしん坊なひとに。

 

 

まだまだある!面白ダミー画像生成ツールまとめ

紹介を迷いましたが、個人的にツボだったので保存メモとして。どれも著作権がクリアでないため、あくまで個人向けのテスト、デモ開発での利用に留めておきましょう。

 

  • PlaceCage – 俳優ニコラスケイジだけを集めた、ミーム的ダミー画像ツール。/gif/を加えると、GIFアニメーション表示
  • Fill Murray – 往年のアメリカ俳優フィル・マーレイの画像だけを集めたダミージェネレータ。
  • Steven SeGALLERY – 俳優スティーブン・セガールの画像を集めたダミー画像。「沈黙シリーズ」好きのあなたに。
  •