- Webマーケティング
- 2021.07.25
コーディングを学習する中で「ピクセルパーフェクト」という言葉に出会ったことのある方は多いのではないでしょうか?
ピクセルパーフェクトとは、デザインカンプから1px(ピクセル)もズラさずにコーディングする考え方のことです。
ネット上では「ピクセルパーフェクトを目指したほうが良い」「ピクセルパーフェクトは不要」と両方の意見があり、どう考えたら良いのか迷う方もいることでしょう。
そこでこの記事では、Webコーダーはピクセルパーフェクトを目指すべきなのか、現役コーダーの対談をもとに解説します!
ピクセルパーフェクトに対するコーダーの見解が知りたい方は、ぜひご覧ください!
結論:ピクセルパーフェクトを目指すべき!
結論として、Webコーダーはピクセルパーフェクトを目指すべきです。
Webコーダーは、Webデザイナーが作ったデザインカンプをWebサイトとして完璧に表現する役割を担っています。
よって、「ピクセルパーフェクトを目指す」という姿勢は、プロのWebコーダーとして当たり前に持っておきたい考え方です。
1pxもズラさずにコーディングするかどうかという点は検討の余地があるものの、仕事をするうえでの姿勢として、まずはデザインをしっかり再現するという意識は持っておきましょう!
発注者がWebコーダーに求めるポイント
発注者は、Webデザイナーが作成したデザイン通りにコーディングしてもらえることを期待しています。
デザインカンプからかけ離れたコーディングがされていると、発注者側は修正の指示を出す手間がかかってしまいます。
「デザインを再現する姿勢のないWebコーダーだ」と思われ、今後依頼がもらえなくなる可能性もあるでしょう。
Web制作は、コーディングまでに多くの工程があります。
クライアントへのヒアリングに始まり、方向性を決めるために何度もミーティングを重ねたうえでデザインを作成。そしてコーディング作業に移っているのです。
前工程のことも考えて、集大成としてコーディングがあると考えられるWebコーダーは、Web制作のことを理解している人材だと感じてもらえるでしょう。
デザインカンプに問題点があるときはどう進める?
ピクセルパーフェクトを目指す姿勢が重要とはいえ、デザインカンプ自体がコーディングしづらいものである場合もあります。たとえば、次のような場合です。
- 小さいウィンドウのパソコンでサイトを見たときに、表示が崩れてしまう数値を使っている
- 問い合わせフォームの入力欄に、スマートフォンで入力していると画面が拡大されてしまう数値を使っている
- 保守性を考えると数値を変えたほうが良い
このような場合は、Webコーダーの考えだけで変更するのではなく、まずはWebデザイナーに確認や提案をすることが大切です。
デザインカンプはWebデザイナーが意図をもって作成しているため、良かれと思って勝手に変更してしまうとトラブルにもつながりかねません。
良いサイトを作ることを共通の目的としてコミュニケーションを取るようにすると、WebデザイナーとWebコーダーのすれ違いは解消されていくでしょう。
一緒に良いものを作ろうという気持ちにもつながるので、互いに歩み寄る姿勢は大切だと思います。
クライアントが求めるピクセルパーフェクトの基準
Webコーダーはピクセルパーフェクトを目指すべきではありますが、クライアントによってその基準は異なります。
たとえば、A社はデザインカンプに忠実にコーディングしてほしい、B社はそこまでピクセルパーフェクトにこだわっていないというように、現場ではピクセルパーフェクトの基準が幅広いのです。
だからといって、ピクセルパーフェクトの基準がゆるい会社とだけ仕事をしたり、手を抜いたりするのはWebコーダーとしてあってはなりません。
どのようなクライアントでも、デザインの再現度を担保するのはコーダーの重要な役割なので、自分の中で一定の品質を守れるように、ポリシーをもって業務にあたりましょう。
手を抜いていることが伝わると信用を失ってしまうので、自分の中での基準を作ることが大切ですね!
まとめ:基本はピクセルパーフェクトを目指そう!
ピクセルパーフェクトは賛否両論ありますが、品質担保に関わる部分なので、基本は目指すべきです。
デザインカンプを忠実に再現することはWebコーダーの重要な役割であり、自分の考えだけで変更するのは望ましくありません。
ただ、経験を積んでいくなかで保守性の観点から、デザインカンプと違う数値でコーディングしたい場合も出てくるので、都度Webデザイナーとコミュニケーションを取ってすり合わせることも必要になります。
ピクセルパーフェクトはクライアントによって求める基準が異なるため、自分なりの水準を持って品質を担保できるようにしましょう。
【PR】未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ!
東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分!Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき!品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください!
はにわまんさん(@haniwa008)
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。