pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

webサイト開発にもすぐ使えるimage作成ツール

画像生成ツール「placehold.it」

webサイト作成のとき、すでに必要な画像があればよいのですがバナーなどまだ決まっていない場合があります。またデザインがくる前に余裕を持って仕上げたいなど思うかもしれません。

そのとき代わりの画像を埋め込みだけの形にしておきたいと思うでしょう。

 

そこで役に立つのが「placehold.itというサービスです。

 

こちら無料のサービスであり、リンクを開くとこのような画面が出ます。

 

f:id:inagex:20130702143716p:plain

 

 

どうやって使うの?

 使い方は簡単でまず<img src="~" />の~の部分に http://placehold.it/300x200 と記入するだけで、横300px縦200pxの仮画像が挿入されます。デフォルトでグレーの色となります。

sample

つまりどんな大きさでも対応できるということです。

またpngやjpgなどのフォーマット、画像内にテキストや色を指定することもできます。

具体的にはみていきましょう。

http://placehold.it/300.pngでpng形式の画像が生成されます。

http://placehold.it/300&text=placehold.it+rocks!で画像内にplacehold.itとrocksが連結された文字列が生成されます。

sample

http://placehold.it/300/0099ff で色がデフォルトのグレーではなく、水色の画像が生成されます。

sample

 

全部合わせるとこんな感じになります。

http://placehold.it/300/ff0033&text=header+content.pngに変更すると、

sample

 

使い方としては

webサイトは基本構成としてheaderやcontent、footerなどがありますが、

それぞれの画像内のテキストに

sample

sample

sample

sample

 

のように区別したりしたらわかりやすく、webサイト作成も効率よく実装できるかなぁと思いました。