![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
皆さんはピクセルパーフェクトで実装しておりますでしょうか?
ピクセルパーフェクトにしているけれどなんか少しズレてしまう・・・
デザイナーから細かい修正が入ってしまってなかなか思うように完成ができない・・・
そんな方も多いのではないでしょうか?
どうして1pxのズレも無く実装をしているのに見た目に違いが出てしまうのでしょうか?
それは昔と現在のWeb制作を比較すると何が変化したか?それによってピクセルパーフェクトの在り方を考える必要があるのが分かります。
ピクセル パーフェクトとは、コード化された成果物がデザインのモックアップと完全に一致していなければならないことを考慮して、HTMLとCSSで実装するプロセスのことです。
しかし、どれだけピクセル通りにしても
・ヘッダの高さ
・ヘッダの下のスペース
その他の要因の相違点によりズレが発生し、実装が不完全と思われがちになります。
2010年頃の日本はiPhone4を発表して間もなくタブレットもはるかに少ない。モニターサイズも現在みたいに様々な大きさがあるわけではなく基本的に1つのモニターサイズを実装していれば十分でした。
その様な背景があったからこそピクセルパーフェクトは可能ですが今現在は何千ものデバイスがある為期待通りのピクセルパーフェクトにはなりません
ルックアンドフィールとはWebデザインにおいてUIの観点からWebサイトがどのように見えるか、機能性やインタラクティブ性の観点からどのように感じられる(フィール)か、ということを意味します。
よくある細かな違いとしては
・ボーダーの太さが違う
・画像の高さが小さい
・フォントのサイズが大きい
・border-radiusが違う
小さなコンポーネントだと問題なくても大規模なプロジェクトとなってくるとその違いが顕著に現れます。
デザイナーとしては全てのデティールに意味を持たせているのでコーダーの勝手な判断で見た目を変える訳にはいかない訳です。
現在はコード化された内容がパーフェクトかどうかを目指すのではなく、デザインツールの見え方にも配慮しながら2つのタブを移動しても同じ様に見える・感じるということが大事になってきます。
デザイナーはコーダーがどのようにコーディングをしてデザインを表現するか分かりませんしコーダー同士でも同じデザインを表現するのに無数のやり方があります。
コーダーの好みの数値にするのではなくルックアンドフィールの観点を取り入れ、本当の意味のピクセルパーフェクトをしていく事が大事になるでしょう。
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?