【無料＆URL貼るだけ】Web制作に使えるダミー用画像、モックアップ用画像生成サービス
「ココに画像が入る予定なんだけど、写真選びは後にしたい」
「お客様の写真選びを待ってる間に、コーディングだけ進めておきたい」
そんな時に、いい感じのアタリ画像をimgタグごと発行していくれるサービスをご紹介。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
【王道】Placeholder.com
Placeholder.comは、ページ内のガイド通りにコードを書く事で、好みのダミー画像を生成する事ができるサービスです。
設定可能項目
・画像サイズ
・背景色と文字色
・画像フォーマット
・テキスト
サンプル
サイズ指定
<!-- 幅300px*高さ200pxのダミー画像 -->
<img src="https://via.placeholder.com/300x200" />サイズ指定（正方形）
<!-- 幅150px*高さ150pxのダミー画像 -->
<img src="https://via.placeholder.com/150" />画像フォーマット指定
以下から選択できます。
・gif
・jpg
・jpeg
・png
<!-- pngフォーマットのダミー画像 -->
<img src="https://via.placeholder.com/300x200.png" />
テキスト挿入
<!-- テキストを「Web Design」に（スペースは「+」で指定） -->
<img src="https://via.placeholder.com/300x200.png?text=Web+Design" />
背景色×文字色
<!-- 背景色(#6F635F)、文字色(#FFF)の順にスラッシュ区切りで指定 -->
<img src="https://via.placeholder.com/300x200/6F635F/FFF.png" />
【カンタン設定】Dynamic Dummy Image Generator
Dynamic Dummy Image Generatorは、サイト内で必要パラメーターを入力して、生成されたimg要素をコピペするだけで使用する事ができます。
設定可能項目
・画像サイズ
・背景色と文字色
・画像フォーマット
・テキスト
【写真が使える｜カテゴリや色調選択も】PlaceIMG
PlaceIMGは、実際の写真を利用する事ができるサービスです。
写真に関しては、おおよそのカテゴリー（動物、自然など）と色調（白黒・セピア）の選択ができます。
こちらも、サイト内で条件を入力するだけで、コピペ用のコードを生成してくれます。
設定可能項目
・画像サイズ
・写真のカテゴリー
・写真の色調
サンプル
<!-- 幅400*高さ300px ＆ 動物 ＆ セピア（画像はランダムに変わります） -->
<img src="https://placeimg.com/400/300/animals/sepia" />【写真が豊富に選べる｜色調選択も可能】Lorem Picsum
Lorem Picsumも、多彩な写真選定を行う事ができます。
設定可能項目
・画像サイズ
・写真のカテゴリー
・写真の色調
ランダム表示
<!-- 幅400*高さ300px（写真はサイト側が無作為にチョイス） -->
<img src="https://picsum.photos/seed/picsum/400/300" />画像指定
写真にナンバリングされているIDを使うと、写真を指定する事ができます。
IDは関連のページから調べなくてはいけないので、ちょっと使い勝手は悪そうです。
<!-- 幅400*高さ300px ＆ IDナンバー#10 -->
<img src="https://picsum.photos/id/10/400/300" />グレースケール
<!-- 幅400*高さ300px ＆ IDナンバー#10 ＆ グレースケール -->
<img src="https://picsum.photos/id/10/400/300?grayscale" />ブラー
<!-- 幅400*高さ300px ＆ IDナンバー#10 ＆ ブラー -->
<img src="https://picsum.photos/id/10/400/300?blur" />
<!-- ブラーの強さを1から10で調整できます（以下は2を指定した例） -->
<img src="https://picsum.photos/id/10/400/300/?blur=2" />全部載せ
<!-- 幅400*高さ300px ＆ IDナンバー#10 ＆ グレースケール ＆ ブラー -->
<img src="https://picsum.photos/id/10/400/300?grayscale&blur=5" />
【お仕事中の息抜きに？】その他のサービス
ここからはちょっと遊びの要素が強いサービスです。
クライアント＆案件によっては、使用しない方がいいかも。
ネコ縛り：placekitten
placekittenは、ネコ限定でランダムに写真が選定されるサービスです。
設定できるのは画像サイズのみになっています。
<!-- 幅400*高さ300pxのネコ画像 -->
<img src="http://placekitten.com/400/300" />
イヌ縛り：placepuppy
placepuppyはイヌ限定。
<!-- 幅400*高さ300pxのイヌ画像 -->
<img src="https://place-puppy.com/400x300" />
クマ縛り：placebear
placebearはクマ限定。
こーゆーサービス作るの、流行ってたんでしょうか。
<!-- 幅400*高さ300pxのクマ画像 -->
<img src="https://placebear.com/400/300" />
ベーコン縛り：baconmockup
最後にご紹介するbaconmockupはベーコン限定です。
<!-- 幅400*高さ300pxのベーコン画像 -->
<img src="https://baconmockup.com/400/300" />
まとめ
写真は選ぶのに時間がかかったり、お客様の意向もあったりで、後回しになる事が結構ありますよね。
そんな時にはこうしたサービスを利用して、コーディング作業などできる所から終わらせてしまいましょう。
ちょっとくたびれた時は、制作中のページをネコだらけ、もしくはベーコンだらけにすると気分転換になるかもしれません。
