Web制作ラボ

ブラウザ上に画像を透過して表示!PerfectPixelのご紹介

Web制作ラボ

「webサイト制作もそれなりに慣れてきたし、クラウドソーシングサイトで案件を受注してみよーかな(または受注した!)」

という初心者の皆様のため、今回はwebサイト制作案件に取り掛かる前に準備しておいて頂きたい「PerfectPixel(パーフェクトピクセル)」というブラウザツールをご紹介します。

「webサイト制作案件」といっても様々

今回は以下の様な案件を想定します。

  • 静的サイトの制作(Wordpressの様にphpを使った動的サイトでは無い)
  • デザインを考える必要は無い(デザインカンプは既にクライアントが準備済み)
  • 渡されたデザインカンプを可能な限り再現したwebサイトを構築

既に完成されたデザインに沿ってコードを打っていくだけなので、コーディング案件と呼んでいます。

「ランディングページ」「コーポレートサイト(トップページ+下層数ページ)」の制作案件として目にする事の多い業務内容です。

この様な静的ページの制作案件はHTML、CSS、jQueryの知識があれば対応可能な物が多く、比較的初心者の方でも受注を狙っていける案件になります。

PerfectPixel(パーフェクトピクセル)

コーディング案件の納品物の良し悪しは「いかにデザインデータに近いサイトを制作したか」という部分で評価されます。

画像を見てパーツのサイズや色、paddingやmarginを調整したつもりになっていても、よ~く見るとサイズが違ったり、位置がズレていたりするものです。

そんな時に頼りになるのが今回ご紹介する「PerfextPixel」

perfect-pixel

対応ブラウザ:Chrome、Firefox、Opera
対応画像形式:png、jpg、gif 確認済み

HTMLやCSSのコーディング結果を表示させたブラウザの上にデザインデータを重ね、透過させられるツールです。画面右のスライドを左右に動かすことで、ブラウザの上に重ねている画像の透明度を調整可能。

なおスライドの右端が透過度0パーセント(重ねている画像だけが見える状態)です。これを左端に動かすほど透過度100パーセント(画像非表示の状態)に近づいていきます。中間で止めることで、ブラウザと画像の内容が同時に確認できます。

上記の使用画面だと、ブラウザ側のトップ画像以下がズレている事が確認出来ました。

導入方法

PerfectPixelをインストールできるブラウザはChrome、Firefox、Operaです。
ダウンロードページにはそれぞれ以下から飛びましょう。

Chrome版PerfectPixelダウンロードページ

FireFox版PerfectPixelダウンロードページ

Opera版PerfectPixelダウンロードページ

以下、Chromeでのインストール手順になりますが、他のブラウザでも殆ど同じです。

ダウンロードページへ飛んだら、 【Chromeに追加】のボタンをクリック。

【「PerfectPixel by WellDoneCode(pixel Perfect)」を追加しますか?】と記載された小窓が開くので【拡張機能を追加】のボタンをクリック。

するとブラウザの右上の方に、PerfectPixelのアイコンが追加されます。


ダウンロードしたページ内だとアイコンが白黒の状態ですが、これは「このサイト内では使用できません」の意味です。他のサイトへ移動すればピンク色に変わりますのでご安心下さい。

ということで、使用する準備が出来ました。

次は実際の使い方について見ていきましょう。

使い方

クライアントから頂いたデザインカンプファイル(フォトショップのpsdファイルや、イラストレーターのaiファイルが多いです)を、まずはpng、jpeg、gifなど形式へ変換しましょう。

次に、変換したファイルのプロパティで、横幅のサイズを確認します。

そして制作中のサイトをブラウザで表示し、キーボードーの「F12キー」を押してデベロッパーツールを起動。

上で確認した横幅「1600px」に表示サイズを合わせたら、右上のピンク色のボタンをクリック!

ブラウザ上に下記赤枠の小窓が出現します。

この小窓にデザインデータをドロップすれば画像がブラウザ上に表示されます。

画像は表示されましたが、サイズが少し小さいですね。

小窓を見ると、表示サイズが「0.5」(2分の1表示)になっていました。
これを「1」に打ち直して・・・。

同じサイズになりました。

あとは画像とバッチリ重なるようにコーディングを進めていくのみです!

おわりに

今回はコーディング案件に大活躍なPerfectPixelのご紹介でした。

デザインとのズレが見られるほか、同じ画面上でデザインデータとコーディング結果の確認が出来るので、目線が右往左往しなくて良いのも最高ですね。

是非あなたのコーディングにも役立てて頂ければ幸いです。

トップページへ戻る