ワイヤーフレームやデザインカンプ用のダミー画像簡単生成

一人事務所を大阪で営む税理士のブログ | ワイヤーフレームやデザインカンプ用のダミー画像簡単生成

ワイヤーフレームからデザインカンプを起こす際に、正確なサイズの画像を使ってサイトの構成を考えたいときがあります。

そういったときには、ちょうどよいサイズの画像を配置していくと、CSSの具合が見やすいです。

表示サイズで変更していってもいいのですが、もともとそのサイズで表示じている画像を配置すれば、表示サイズ調整をする必要がありません。
こんなときに便利なのが、Placehold.jpです。

使い方をみてみましょう。

一人事務所を大阪で営む税理士のブログ | ワイヤーフレームやデザインカンプ用のダミー画像簡単生成

*板とそのサイズ

 

もくじ

サイズを指定して使う

Placehold.jpでは、URLでサイズを指定することで画像を使うことが可能です。

たとえば、640×480のサイズがほしい場合、

http://placehold.jp/640x480.png

と書きましょう。

これだけで次の画像を使えます。

一人事務所を大阪で営む税理士のブログ | ワイヤーフレームやデザインカンプ用のダミー画像簡単生成

aタグのソースに書けばこれでダミー画像を使えます。

 

 

色を変えてみる

次に文字サイズの色、背景色を変更する方法を見てみます。

サイズの前にrgbで色を指定することで文字サイズの色をまずは変更できます。

先程の画像サイズを入れたURLの前にスラッシュで区切ってrgbを加えましょう。

https://placehold.jp/ff0000/640x480.png

 

結果はこちらの通りです。
ちゃんと赤くなっていますね。

一人事務所を大阪で営む税理士のブログ | ワイヤーフレームやデザインカンプ用のダミー画像簡単生成

ちなみに、HTMLでredなどとして色を指定できますが、こちらではだめです。
このようなコードです。

https://placehold.jp/red/640x480.png

 

実行しても、文字サイズの色の指定がないのと状況が変わらないです。

一人事務所を大阪で営む税理士のブログ | ワイヤーフレームやデザインカンプ用のダミー画像簡単生成

これに加えて、背景の色も変更できます。

FFE5E5あたりのピンクっぽい色を背景にします。
この場合、先程FF0000として赤色のURLを入れたところの前にスラッシュで、FFE5E5を加えます。

こうです。

https://placehold.jp/FFE5E5/ff0000/640x480.png

 

結果を実行すると、背景色がピンクになっています。

一人事務所を大阪で営む税理士のブログ | ワイヤーフレームやデザインカンプ用のダミー画像簡単生成

 

文字サイズを変えてみる

さらにフォントサイズを指定できます。
背景色に指定した内容の前にスラッシュで文字のフォントサイズ入れ込みます。

例えば、32を入れ込むとこんなURLです。

https://placehold.jp/32/FFE5E5/ff0000/640x480.png

結果として、フォントサイズが32になりました。
上記の例示よりも小さめです。

一人事務所を大阪で営む税理士のブログ | ワイヤーフレームやデザインカンプ用のダミー画像簡単生成

 

このように画像を指定できれば、わざわざひとつひとつをつくらなくても、コードを頭の中で書けば画像の背景色やサイズなど簡単に指定できます。
ささっとコードを仕上げたいときに、上手に使ってみてください。

もくじ