<p class="thumb"><img src="http://placeholder.pics/svg/592x300/DEDEDE/70422B/ダミー画像を作れるplaceholder.pics" alt="placeholder.pics" /></p>
<p>サイトのモックアップやプロトタイプには、バナー画像や写真素材をダミーで仮に置いておくことも多いかと思います。</p>
<p>素材サイトなどから仮に置いておくこともありますが、それだけでも結構な手間になるので、URLで指定するだけでダミー画像を作成できるサービスを使うこともよくあるかと思います。</p>
<p>今回ご紹介するのは、そんなURLで指定するだけでダミー画像を生成できるサービス。特徴は、画像に日本語のテキストメモを入れられて、背景色をグラデーションにもできる点です。</p><!--more-->


<h3 class="header-label">ダミー画像をURLで生成できる「Placeholder pics」</h3>
<p>「<a target="_blank" href="http://placeholder.pics/">Placeholder pics</a>」は、<strong>ダミー画像をURLで生成できるサービス。</strong></p>
<p>海外サービスでありがちな、日本語を使えない、あるいは国内発のサービスであっても、URLで日本語をエンコードしないといけないという点もクリアしているうえに、ダミー画像の色の指定も自由度が高くなっています。</p>

<h4 class="tips">日本語のラベルを設定できる</h4>
[caption id="attachment_30373" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/05/placeholderpics-jp.png" alt="日本語テキストもダミー画像のラベルに設定できる" width="592" height="424" class="size-full wp-image-30373" /> 日本語テキストもダミー画像のラベルに設定できる[/caption]
<p>国内のダミー画像作成サービスであればクリアしているのが当然な点ですが、海外発でありながら、日本語のテキストを画像に問題なく入れることができます。</p>
<p>あとからここにどんな画像を入れるのかメモしておくにも便利ですね。</p>

<h4 class="tips">背景色を指定、グラデーションにもできる</h4>
[caption id="attachment_30372" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/05/placeholderpics-bg.png" alt="背景色、背景色のスタートとエンドをカラーパレットで指定" width="592" height="370" class="size-full wp-image-30372" /> 背景色、背景色のスタートとエンドをカラーパレットで指定[/caption]
<p>他のサービスになかなか無いのが、この背景色の指定とグラデーションにする機能。あとから入れる写真素材の色合いのイメージを付けておくにも便利かもしれません。</p>


<h4 class="tips">枠線、ラベルの色を変えられる</h4>
[caption id="attachment_30371" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2016/05/placeholderpics-fg.png" alt="枠線とラベルの文字色をカラーパレットで指定" width="592" height="403" class="size-full wp-image-30371" /> 枠線とラベルの文字色をカラーパレットで指定[/caption]


<h4 class="tips">生成するURLもシンプル</h4>
<p>たとえば、</p>
<ul><li>画像サイズ：350×250</li><li>背景色：#154C6Eから#368EC2へのグラデーション</li><li>枠線　：#4FD9FF</li><li>ラベル　：この背景色に近い風景素材を入れる</li></ul>
<p>という指定をするとします。これをダミー画像のURLにすると、以下のようになります。</p>

<code>http://placeholder.pics/svg/350x250/154C6E-368EC2/4FD9FF/あとでこの背景色に近い素材を入れる</code>

<p>日本語のテキストをそのまま打ち込んでも問題なく表示されますので、これが地味に便利です。</p>

<p>興味があるかたは<a target="_blank" href="http://placeholder.pics/">Placeholder pics</a>へどうぞ。</p>
