仮バナー・模擬バナー・ダミー画像・ダミーバナーを作らないで設置できる！

サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな？という場面で好きな画像サイズを即配置できる便利サイトです。

好きなサイズでバナーがHTMLだけでどんどん作成できるので仮のバナーや模擬バナーといったダミーバナーを作れます。

使い方も超絶簡単なので覚えておいて損はありませんよ！

ダミーバナーの作り方

こちらのサービスを利用して仮バナーを作成していきます。

通常の画像を挿入するように記述します。

<img src="http://placehold.it/350x150">

という感じですぐに表示できるので便利です！

サイズの指定

<img src="http://placehold.it/[幅]x[高さ]">

幅と高さの部分に任意の数値を指定するとそのサイズの画像が自動で生成される仕組みになっています。

色の指定

通常の指定ではバナーの色はグレー一色ですが、背景色と文字色の指定もできます。

http://placehold.it/300x150/FF0000/fff

http://placehold.it/300x150/[背景カラーコード]/[文字カラーコード]

カラーコードに指定できるのは16進数のカラーコードです。

文字列の指定

通常は指定された文字列が表示されますが、任意の文字列を表示させる事もできます。

http://placehold.it/300x150/FF0000/fff/?text=hello

http://placehold.it/300x150/FF0000/fff/?text=[文字列]

ちなみに日本語のような2バイト文字は無理に決まっていますので注意しましょう。

画像形式の指定

通常の拡張子はpngとして書き出されますが、jpgやgifにも対応しています。

http://placehold.it/300x150/FF0000/fff.gif

http://placehold.it/300x150/FF0000/fff.jpg

主要のバナーサイズ一覧

バナーテストを行う時に頻発しそうな主要バナーのサイズ一覧です。

• 300 x 250 レクタングル（中）
• 336 x 280 レクタングル（大）
• 728 x 90 ビッグバナー
• 160 x 600 ワイド スカイスクレイパー
• 468 x 60 バナー
• 234 x 60 ハーフバナー
• 120 x 600 スカイスクレイパー
• 120 x 240 縦長バナー
• 300 x 600 スカイスクレイパー（大）
• 970 x 90 ラージ ビッグバナー
• 250 x 250 スクエア
• 200 x 200 スクエア（小）
• 180 x 150 レクタングル（小）
• 125 x 125 ボタン
• 320 x 50 モバイル ビッグバナー

大川家具 東馬 オフィスチェア バナー

posted with カエレバ

東馬

Amazon

楽天市場

Yahooショッピング

まとめ

こういったサービスを利用するとデザインテストが効率的に行えるのではないでしょうか？今までそれぞれに合った画像をわざわざ生成していましたが、このサービスを知ってからはコーティングスピードが上がりました。

画像はplacehold.itの方でキャッシュが聞いているようなので、表示スピードも早いのが嬉しいですね。

今日も知識欲は止まらない。