HTMLとCSSで、デザインと1pxのずれもなく正確に実装する必要はあるのか？ ピクセル パーフェクトの現状

デザインと1pxのずれもなく、HTMLとCSSで実装することを「ピクセル パーフェクト」と言います。このピクセル パーフェクトは必要なのか、現在の制作で求められているのは何か、ルックアンドフィールに合わせた実装を紹介します。

The State Of Pixel Perfection
by Ahmad Shadeed

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• ピクセル パーフェクトとは
• 2010年頃のWeb制作
• ルックアンドフィール
• コード化された結果がパーフェクトかどうかの判断
• バリエーションとコンテキスト
• 現在の状況
• モダンCSS
• CSSフレームワークの影響
• 好き嫌いではなく、期待通りに
• デザイナーに役立つアドバイス
• デベロッパーに役立つアドバイス
• 終わりに

はじめに

「ピクセル パーフェクト」という言葉を最後に聞いたのはいつですか？
誰と仕事をしているかにもよりますが、最後に聞いたのは今日かもしれないし、数年前かもしれません。

ピクセル パーフェクトとは、デザイナーがモックアップにデザインを反映させ、それを1pxのずれもなく正確に実装することを要求するために作られた用語です。私は今日でもこの言葉をクライアントからまだ耳にします。デザインのモックアップを実装するのにピクセル パーフェクトにする必要があるのでしょうか？

昔のWeb制作と現状のWeb制作を比較してみたいと思います。比較することで、この数年で何が変化したのか、そしてなぜピクセル パーフェクトから離れて考える必要があるのかが分かります。

この記事は、デザイナー、フロントエンドのデベロッパー、クライアント、プロダクトマネージャーを対象にしたものです。

ピクセル パーフェクトとは

ピクセル パーフェクトとは、コード化された成果物がデザインのモックアップと完全に一致していなければならないことを考慮して、HTMLとCSSで実装するプロセスのことです。

左: 元のデザイン、右: HTMLとCSSで実装

元のデザインはSketchで作成されており、コード化された実装はChromeブラウザで表示されています。デザインと実装でいくつか異なる点があります。

• ヘッダの高さ
• ヘッダの下のスペース
• カードの数

こういった相違点は最終的な結果に影響を与え、実装が不完全であると思われがちです。しかし、本当に不完全なのでしょうか？
この疑問は次のセクションで答えます。

2010年頃のWeb制作

10年ほど前に遡ってみると、2010年6月7日にAppleがiPhone 4を発表しました。Statistaの統計によると、2010年のスマホの販売台数は2億9,665万台でした。そして現在の2020年には15億6,000万台に達しています！

2010年では、デザイナーやクライアントから「ピクセル パーフェクトに実装してほしい」という要望が出てもおかしくないかもしれません。ちなみに、タブレットの数は現在よりもはるかに少なく、iPadは2010年4月にリリースされたばかりです。

2010年の当時は、デベロッパーが考慮しなければならないスクリーンサイズの数はそれほど多くなく、1024x768のデスクトップだけでも十分だったかもしれません。しかし、現在では膨大な種類のデバイスがあるため、1024x768だけでは十分ではありません。

つまり、複数のスクリーンサイズに対応する必要がなかった2010年には、ピクセル パーフェクトが可能でした。しかし、現在は何千ものデバイス（スマートウォッチ、電話、タブレット、ラップトップ、デスクトップ、テレビ）があるため、ピクセル パーフェクトは期待通りにはいきません。

ルックアンドフィール

数年前から、ルックアンドフィールという用語を耳にするようになりました。ルックアンドフィールとはWebデザインのコンテキストにおいてUIの観点からWebサイトがどのように見える（ルック）か、機能性やインタラクティブ性の観点からどのように感じられる（フィール）か、ということを意味します。

事例の前に、下記の2つのモックアップをご覧ください。
1つ目はYouTubeで、2つ目はルックアンドフィールを調整してTwitterのような感じにしてみました。

YouTube

ルックアンドフィールを調整してTwitter風にデザイン

私が変更したのは次のとおりです。

• ヘッダの背景とシャドウ
• 検索フォーム
• アイコン
• プライマリ カラー

これらの小さな変更点は、十分に注意していないと欺くことができます。これがルックアンドフィールです。
より詳細な例を見てましょう。

Webサイトで使用するさまざまなデザイン コンポーネントで考えてみましょう。

Webサイトで使用するさまざまなコンポーネント

コンポーネントを見て感じたことはありますか？
私が気がついたのは以下のポイントです。

• 大胆で珍しいタイポグラフィがあります。
• カラーは明るく、フレッシュです。
• ほぼすべての要素にシャドウがあります。
• 角は丸いです。

コンポーネントの中からカードに注目して、良い実装と悪い実装を示します。

左: 元のデザイン、右: HTMLとCSSで実装

左と右の相違点に気がつきましたか？
順番に見てましょう。

1. ボーダーの太さが違います。
2. タグの長さ・位置が違います。
3. 画像の高さが小さい。
4. フォントのサイズが大きい。
5. border-radiusが違う。

これらの違いはカードというコンポーネントの1つですが、全体の結果に大きな影響を与えます。デベロッパーの友人は、これらの違いはわずかであり重要ではない、という言うかもしれません。1つのコンポーネントだけであれば、それが正しいかもしれません。しかし、わずかな違いが大規模なプロジェクトになるとどうなるでしょうか？ このわずかな違いが大きな影響を与えます。

元のデザインとHTMLとCSSで実装を比較してみましょう。

元のデザインとHTMLとCSSで実装を比較

UIデザイナーとしてこれらの違いを無視することはできませんし、私も同感です。スペース、サイズ、配置に一生懸命に実装した結果がこれでは、いけません。
これらの違いを修正することは不可能ではありません。非常に簡単です。しかし、UIの間違いをしていたり、矛盾している理由は、デベロッパーによって異なります。

• デザイン。
• プロジェクトに費やす時間が少ない。
• デベロッパーのデザインとCSSのスキル。
• ディテールへのこだわり。

最終的に元のデザインに近づけるような修正は、デベロッパーができないわけではないと思います。私は、すべてのデベロッパーには考え方があると思います。デベロッパーがデザインと実装の両方を理解していると、デザインと実装の違いが少なくなります。デベロッパーがデザインのスキルを全く持っていない場合は、この差はさらに大きくなってしまいます。

コード化された結果がパーフェクトかどうかの判断

本題に戻りましょう。
コード化された結果がパーフェクトかどうか判断するにはどうすればよいでしょうか？ ルックアンドフィールの考え方を説明したのは、それに倣うためです。パーフェクトなコード結果を目指すのではなく、デザインのルックアンドフィールに合わせることを目指せばいいのです。

カードコンポーネントに戻りますが、今回の違いは許容範囲です。

左: 元のデザイン、右: HTMLとCSSで実装

違いはほんの少しです。

1. タグは小さいですが、問題ありません。
2. グレーの枠線がありません。

これらの細かい点はそれほど重要ではなく、問題はありません。重要なのは、デザインのルックアンドフィールに合わせているかです。
では、詳しく見てみましょう。

デザインやフロントエンドの開発に携わる者として、自分が作ったデザインをコーディングしながら、思わず笑顔になる瞬間があります。それは、2つのタブを開いた瞬間です。

1. 1つ目のタブには元のデザイン、InVisionやFigmaなどです。
2. 2つ目のタブにはマシンのローカルホストが表示されています。

デザインとローカルホストのタブの区別がつかなくなった瞬間、ルックアンドフィールが同じであり、コード化された結果の準備が完了したことを確認できます。準備の意味は、正確に100%同一であるということではなく、2つのタブを移動しても同じように見える・感じるということです。

バリエーションとコンテキスト

結局のところ、コンポーネントの幅はそのコンポーネントが含まれているコンテナ要素に応じて変化する可能性があります。例えば、カードコンポーネントのレイアウトには複数のバージョンがあり、同様にレイアウトのルールもあるはずです。

レイアウトのバリエーション

2つ目のバリエーションが、1つ目のバリエーションとどのように関連しているかに注目してください。見た目は似ていますが、変更点は表示が垂直のスタックではなく、水平になったことです。

さらに、コンポーネントはデザインチームがデベロッパーとコミュニケーションを取らなければならない限界があるはずです。
例えば、下記のようなことを考えてみてください。

カードの幅が広い時はどうする

カードの幅が広くなりすぎると、画像も広くなってしまいます。料理サイトにとって、レシピ画像は非常に重要であり、画像を美しく表示させなければなりません。カードの幅が広すぎると、画像のディテールが失われたり、一部が欠けるかもしれません。この問題は他のコンポーネントには関係ないかもしれませんが、私が言いたいことは、デザイナーがデザインをする時には限界がある、ということです。そうすることで、あまり驚きを与えずに、実装された結果に期待を持たせることができます。

現在の状況

CSSはこの10年間で大きく進化し、さまざまなレイアウトを実装するための多くの方法を提供してくれました。レスポンシブデザインは、今日のWebデザインのデフォルトになっています。レスポンシブなWebサイトで作業する場合、ピクセルパーフェクトという用語を使用することはできません。それは論理的ではないからです！

ルックアンドフィールの観点から考えると、より論理的です。Webサイトのスタイルは決まっていて、デベロッパーの目標は同じスタイル・ルックアンドフィールで異なるスクリーンサイズに対応できるように実装することです。私はWebデザインをゼロから実装することについて3部構成の記事を書きましたが、ヘッダを実装している時にさまざまなスクリーンサイズに対応した実装方法を偶然見つけました。

さまざまなスクリーンサイズに対応したヘッダを実装する方法

デベロッパーがたった1つのコンポーネントに対してどれだけ多くのバリエーションを作らなければならないかに注目してください。このような状況でピクセルパーフェクトという言葉は無意味です。

モダンCSS

このセクションでは、柔軟で流動的なウェブサイトを構築することができる最新のCSSテクニックのいくつかを紹介します。あなたがすでに知っている場合は、このセクションを無視してください。

CSS Grid

CSS Gridは2017年3月にサポートされた、グリッドを簡単に使用できる非常に強力なツールです。

このたった2行のCSSで、利用可能なスペースに基づいてその中のアイテムのサイズを変更できる動的なグリッドを実装できます。

ビューポート単位

CSSでビューポートの幅を基準にして要素のfont-sizeを定義することは、10年前には夢のようなことでした。今日では、ビューポート単位で簡単にできます。

CSSの比較関数 min(), max(), clamp()

CSSの比較関数は主要なブラウザでサポートされるようになったので、コンポーネントの最小値と最大値を定義したり、特定のルールに基づいて流動的に変化させることができるようになりました。
参考: CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説

例えば、スクリーンサイズによってborder-radiusの値を変更したいとします。

このCSSで、border-radiusの最小値は7pxに、最大値は20pxになります。真ん中の2vwは推奨値です。ビューポートの幅を変更すると、それに応じてborder-radiusが変化します。

上記のようなCSSのテクニックは、今日わたし達が使用できる一部に過ぎません。10年前の実装方法と今日の実装方法の違いは、下記のようになります。

上: 10年前の実装方法、下: 今日の実装方法

10年前はスクリーンサイズが決まっており、ピクセルパーフェクトな実装を行う傾向がありました。しかし、今日のモダンなテクニックには関係ありません。

CSSフレームワークの影響

Webアプリのデザインを納品し、実装チームがそれをBootstrapで実装するとしましょう。実装チームから最初に実装されたページを見せてもらうと、いくつかのデザイン要素がBootstrapのデザインを継承していることが分かりました。

例えば、下記は上がデザインされたボタンで、下が実装されたボタンです。

一部のデザインがなぜかBootstrapと同じ

一部のデベロッパーは、ボタンの元のデザインのディテールを無視しても問題ないと考え、ボタンのカラーを変更しただけで、ホバーとフォーカスはBootstrapに依存しています。ディテールはシンプルなものであっても、その小さな違いが他のサイトと差別化するこができます。スタイルをカスタマイズすることは簡単ですが、こういったディテールを無視して実装する理由が理解できません。怠け者なのでしょうか？ それともデザイナーがコンポーネントにボタンの各ステータスまで十分に提供してなかったのでしょうか？

はっきり言っておきますが、フレームワークを使用することが悪いということではありません。フレームワークが効果的に機能するのであれば、それは非常に素晴らしいことです。それよりも重要なことは、ディテールを残さずに、ニーズに合わせてカスタマイズして使用することです。

好き嫌いではなく、期待通りに

デザイナーとして、コンポーネントと別のコンポーネントの間に32pxのスペースを設定すると、非常に分かりやすく、一目瞭然になります。しかし、一部のデベロッパーは勝手に30pxにし、その日の仕事を終える人がいます。デベロッパーはデザイン素材と測定値を手に入れているとして、何が彼の期待通りの仕事を妨げているのでしょうか？

これを思い出させてくれたHåvardに感謝します。

デザイナーに役立つアドバイス

意思の決定

デベロッパーとして、あるコンポーネントをどのように実装するか決める必要があるとします。下記のモックアップをご覧ください。

上: 元のデザイン、下: 実装方法

デザインによるとボタンの高さは45pxです。45pxをどのように実装しますか？
多くのデベロッパーは、下記のようにするでしょう。

この場合、高さを固定値にして使用するのは正しくありません。代わりに、垂直パディングまたはmin-heightを使用してボタンの高さが45pxになるように実装します。ピクセル値を単に同じ値にするのではなく、どのようにその高さをつくるのか考え方が重要です。

繰り返しますが、これを思い出させてくれたHåvardに感謝します。

スペースとサイズを一定に保つ

自分が手がけたデザインの実装結果に注意を払うのはフェアではないし、同時にスペースとサイズにもあまり注意を払っていません。一貫性は非常に重要です。フロントエンドのデベロッパーを混乱させる例を紹介します。

ページによってスペースが違う

スペースが一貫していないのはなぜでしょうか？
この問題はデザインファイルでよく発生します。混乱を招き、デベロッパーにとって時間の無駄になります。

コンポーネントの状態に関する作業

コンポーネントには多くの状態（ステータス）を用意できます。デベロッパーはすべての状態を必要としますが、1つのステータスしかない状態で作業することがあるかもしれません。ヘッダを例に見てみましょう。デザイナーはスマホ版とデスクトップ版を提供し、これで十分だと思いました。

しかし、その中間の状態はどうなるでしょうか？
つまり、スマホとデスクトップの間でヘッダがどのように見えるべきか？ その中間のデザインケースについて記事を書いたのでチェックしてみてください。
参考: レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法

デザイナーが提供した状態とデベロッパーが必要な状態のデザイン

できる限り実際のコンテンツを使用する

デベロッパーを幸せにしたいのであれば、実際のコンテンツを使用し、例えば非常に長いテキストを使用した場合にどうなるかを説明する必要があります。

ダミーではなく、実際のコンテンツを使用してデザインする

この例では、人物の名前が長くなっています。デザインではそれをどのように扱うべきでしょうか？ テキストを省略しますか？ このようなことを事前に決定しておくことは大切です。

できるだけ早くコミュニケーションをとる

自分が取り組んでいることに疑問がある場合は、クライアント、デベロッパー、リーダーなどに尋ねてください。プロジェクトの終了間際まで疑問を残さないようにしましょう。コミュニケーションが多ければ多いほど、問題は少なくなり、将来の時間を節約できます。

デベロッパーに役立つアドバイス

ディテールに気がつくように目を鍛える

一晩で、UIのディテールを把握するために鍛えることは不可能なので、日々トレーニングをして上達するしかありません。自分自身を鍛えることで、より早く上達できます。そのためのアドバイスがいくつかあります。

• 例えば、Twitterなどの人気があるサイトのUIをクローンして、できるだけ近いものにしてみましょう。その精度については必ず、フィードバックをもらうようにします。
• 習うより慣れろ。 HTMLとCSSでデザインを実装すればするほど、ディテールに目が行き届くようになります。
• Can't Unseeをプレイします。UIデザインのディテールに関する知識に挑戦する楽しいゲームです。
  参考: デザインを見る目と判断する知識を備えているか、勉強にもなるUIデザイン検定問題 -Can't Unsee

ブラウザでルーラーを使用する

ブラウザで配置を確認する時は、デフォルトでまだ提供されていません。しかし、ルーラーを追加する機能拡張を使用することができます。Chrome用のルーラー、Firefox用のルーラーなどがその役目を果たします。

配置の確認に、ルーラーを使用する

検索ボックスとアバター画像が揃っていません。揃っていない原因は何であれ、誰でもこのような問題に気がつくわけではないということを覚えておいてください。

終わりに

ふーっ、長い記事でしたね。
私にとってピクセルパーフェクトは死語で、今の時代には関係ありません。代わりに、一貫したサイズとスペースを使用し、デザインのモックアップに従ってルックアンドフィールを維持することにフォーカスをあてています。この記事があなたのお役に立てたなら幸いです。

コメントや提案があれば、@shadeed9までお願いします。

クレジット

• アイコン by Adib Sulthon, flaticon