こんにちは!Romantistでデザイナーをしている土屋です!
普段デザインやコーディングをしていると、デザインカンプと実際のWEBページの見た目にズレが生じてしまうことってよくありますよね。
そうしたズレの確認や修正に、時間と手間がかかってしまうこともしばしばです。
そこで今回は、そんな手間を解消するためのChrome拡張機能「Perfect Pixel」をご紹介します。
「Perfect Pixel」は、Googleが提供するChromeの拡張機能の1つです。
この拡張機能を使うと、ブラウザ上の任意の場所に画像を透かして表示させることができます。
デザインカンプをブラウザ上に重ねて表示させることで、デザインと実際のWEBページを簡単に比較することができます。
拡張機能の導入方法は簡単です。
chrome ウェブストアのページにアクセスし、下記画像の、『Chromに追加』をクリックしてください。
その後、『拡張機能を追加』をクリックしてください。
すると、アドレスバーの右側にアイコンが表示されるようになりました!
みなさんお待ちかね、PerfectPixelの使い方について説明していきます。
まず、確認したい実際のWEBページにアクセスします。
そしてアイコンをクリックすると、こちらのバーが画面上に表示されます。
また、上記画像ではバーが閉じた状態なので、左の+をクリックして開いてください。
開いたら、赤枠内に確認したいデザインカンプの画像をドラッグ&ドロップで持ってくるか、赤枠内をクリックし、画像を選択しましょう。
透過されたデザインカンプの画像がWEBページ上に表示されました!
また、赤枠の部分で画像の位置やサイズを調整することができます。
レイヤーの配置を「中」にし、画像のスケールを「0.5」から「1」に変更しましょう。
不透明度がデフォルトで、50%になっていますが70%くらいにすると、デザインカンプとWEBページの区別がつきやすくなるかなと感じました。
自分のわかりやすいように調整してみてください^^
そして、WEBページを確認すると、、、
このように、デザインカンプの画像と実際のWEBページを照らし合わせることができました! ものすごくズレていることが一目瞭然なのではないでしょうか、、
「Perfect Pixel」はディベロッパーツールを使いながら使用することもできるので、デザインカンプとWEBページ照らし合わせながらズレを調整し、コーディングの参考にすることができます。
実際に、ロゴのサイズや位置の調整をしてみました。
いかがだったでしょうか。
「Perfect Pixel」を使うことで、視覚的にもわかりやすくズレをチェックでき、ズレ知らずのWEBサイトにグッと近づくことができたんじゃないでしょうか。
完璧だろうと思っていても、気付けないズレがあったり、そんなズレに気づかせてくれることができるんですね♪
実際に使ってみて、ズレの確認の効率化だけではなく、フォントの違い、フォントサイズ、文字の太さ、行間、などなど細かな自分の「ミス」の気づきにもなりました。
その気づきを意識してこれからのコーディングでも、作業をしていきたいです!
また、PCサイト用のデザインカンプなら、PCサイトのみの調整となるので、画面サイズを変えると、レイアウトが崩れてしまうといったこともあると思います。
レスポンシブ対応も完璧にするときは、ブレイクポイントごとにデザインを作ってあげて調整することが必要かなと思いました。
「Perfect Pixel」などの便利なツールを使いながら、一緒に質の高いサイト作成を目指していきましょう!