1ピクセルも違わずに完璧なデザイン再現を求めるピクセルパーフェクト論争 84
ストーリー by nagazou
調整者にはなりたくないな 部門より
調整者にはなりたくないな 部門より
HTMLコーディングするときに、クライアントから送られてきた元デザインを1ピクセルも違わずにコーディングすることを「ピクセルパーフェクト」と呼ぶそうだ。このピクセルパーフェクトという考え方に関する議論がTwitter上で起こっていたようだ(Togetter)。
発端から議論の流れについては、Togetterにまとめられたものを見ていただきたいが、ざっと見る限りは、一枚絵としてまとめたデザインを完全に再現することを求めるデザイナー側の主張と、システム環境によるブラウザやOS、画面サイズやフォントの違いなどを考慮せずに、デザインの再現性だけを求められても、とするコーダー側の主張で論争が起きている模様。
ただし、コーダー側も特定の環境で単にピクセルパーフェクトをするというだけなら難しくはないとする声もある。しかし実際にサイト運営をして、デザイナーの意図通りのものを維持できるのか、そもそもそういう運営・運用を考慮してデザインが為されているのかといった点も終わらない論争と化している理由であるようだ。
個人的には榊原昌彦さんのnoteの記事が問題点の要旨や問題点、そもそものピクセルパーフェクトという考え方がまとまっていて分かりやすい(榊原昌彦|note)。
発端から議論の流れについては、Togetterにまとめられたものを見ていただきたいが、ざっと見る限りは、一枚絵としてまとめたデザインを完全に再現することを求めるデザイナー側の主張と、システム環境によるブラウザやOS、画面サイズやフォントの違いなどを考慮せずに、デザインの再現性だけを求められても、とするコーダー側の主張で論争が起きている模様。
ただし、コーダー側も特定の環境で単にピクセルパーフェクトをするというだけなら難しくはないとする声もある。しかし実際にサイト運営をして、デザイナーの意図通りのものを維持できるのか、そもそもそういう運営・運用を考慮してデザインが為されているのかといった点も終わらない論争と化している理由であるようだ。
個人的には榊原昌彦さんのnoteの記事が問題点の要旨や問題点、そもそものピクセルパーフェクトという考え方がまとまっていて分かりやすい(榊原昌彦|note)。
Web未経験のデザイナー (スコア:4, 参考になる)
Web未経験のデザイナーの方から、最初に来るデザインはピクセルパーフェクトと言うか、レイヤー付き一枚絵を渡されることが多いです。
PCもスマホも使っていても、具体的にどうなのかまでは意識しないでしょうね。
それをたたき台にしてレスポンシブなりUAなりに展開するので、バカみたいな納期でもない限り揉めることありません。
芸術家の方に、絶対的に同じ色を要望されたことはありました。
Re:Web未経験のデザイナー (スコア:1)
例えば、グラフィックデザイナーとしてウェブコンテンツのデザインを一枚絵で求められた場合
コーディング側から見て気をつけて欲しいポイントはありますか?
ピクセル整数倍などはもちろんですが・・・
Re:Web未経験のデザイナー (スコア:4, 興味深い)
私としては、あらかじめCSSのプロパティを意識してて
メモ付きの説明があるか、デザイナーの頭に入っていると大変助かります。
背景画像があったら、それがcoverなのか、2枚あって左右に引っ付いてるのかとか
要素が並んでた場合、flexbox的に言うとどういう設定なのかとか
その要素が、画像、Webフォント、SVG、のどれで作られているのか
あと色にはFFFFFFなカラーコードがついてると嬉しいです。
理想はコーディング側にあらかじめ聞いておくことですが、なかなかままなりません。
私はどっちかと言うとバック寄りなので、デザイナー側にコーダー寄りであることを求めすぎてるかもしれません。
Re:Web未経験のデザイナー (スコア:1)
たしかに要素の種類をいちいち確認しないといけないのは大変ですね。
発注者である代理店に仕様を聞いても要領を得ないこともあり、
コーダー様とお話したいと思っておりましたが、難しいケースも多く・・・・
参考にさせていただきます。
Re:Web未経験のデザイナー (スコア:1)
発注側にwebの特性をデザイン視点から伝えてもらえると嬉しい
あとはこだわる箇所が明確だとスムーズ
最悪なのが発注側が実装側にやたらと
デザインコンセプトを維持してほしい要望が続いて
本来デザイナーの仕事を実装側がセンス無いのにずーっとやらされること
言い方は悪いですが
大抵はデザイナーの作り逃げ状態なので
Re:Web未経験のデザイナー (スコア:1)
コーディング側からじゃなくてユーザー側からだけど、
おしゃれ(笑)なサイトでよく見かける低コントラストで極小文字のデザインは
徹底的に排除して欲しい。薄い灰色の背景に、ちょっと濃い灰色の小さい文字とか、
ぱっと見かっこよく見えるかもしれないが、ユーザビリティは最悪。
Re: (スコア:0)
拡大縮小したらどうなるとか以前にアクセシビリティとかデータとしての利用方法を考慮しろと。
神エクセルは電子文書として価値ないのと同じ。
根本的にデザインを解ってないように見える。
Re:Web未経験のデザイナー (スコア:1)
「このボタンの縁取りはDIC584にしてください!」
「ロゴの背景はシルバー箔押しで!」
Re:Web未経験のデザイナー (スコア:1)
シルバー箔押しはグレーにしかできないような・・・というかロゴの背景の領域どうなってん?
Re:Web未経験のデザイナー (スコア:1)
DIC584 は蛍光ピンクなんですよ。
CMYKでの指定値もあるけど全然色が違うわけですよ。
(でも案外 sRGB だと色が合うかも)
Re:Web未経験のデザイナー (スコア:1)
おそらく素材元となる紙媒体と合わせてのDIC指定でしょう?
コーダー様にお渡しする際に気を使うべきとはおもいますが
発色の悪いCMYKでできない鮮やかな発色を求めての指定なのだと思いますので
sRGBなら発色もいいしクライアント的には問題なさそう。
デザイナーが設計する気がないパターンですな (スコア:3, 参考になる)
仕事をする気がない奴は排除で問題なし。趣味なら勝手にしていいよ。
Re: (スコア:0)
仕事している世界が底辺層すぎると話題を理解することすらできないのか
Re: (スコア:0)
デザイナー(Designer)がその名前の通り「設計」を行っているならば、実現すべき機能が要件として定義されているはずで、実装者はそれを満たすような実装をする。見た目のズレがどこまで許容されるかどうかもそれに含まれる。
デザイナーという名前に反する単なるグラフィッカーが作った「絵」を再現することが要件ならばそりゃそうなるよってだけ。
Re: (スコア:0)
こんなとこでケンカはじまってて草
Re: (スコア:0)
3:2と16:9と9:16は最低無いとね。
# フローティングなら、基準と許容比率書いてもらわないと。
Re:デザイナーが設計する気がないパターンですな (スコア:1)
16:10 とか、 21:9 とか、18:9 とかも(約分しろよ……)
Re: (スコア:0)
もう慣用的にデザイナー≒図案を作る人みたいな意味になってんだから、
今更、実質グラフィッカーのデザイナーに「デザイナーなんだろ?その名の通り『設計』しろよ」とか言ってもしゃーないだろw
Re:デザイナーが設計する気がないパターンですな (スコア:2)
ふと、インテリジェント・デザイン [wikipedia.org]論で言う「知性有るデザイナー」が「実装や設計や製造の事を考えてない図案を描いたヤツ」の意味なら「仮に、反進化論者の言うように、進化論は間違いで、生物は神か何かが設計したのなら、何故、生物の体は、かくも行き当たりばったりに作られているのか??」の説明が付くかも……って馬鹿なネタが脳裏に……。
ユーザー立場で、コーダーを応援したい (スコア:2)
webを使うユーザーの立場で発言するならピクセルのズレは気にしない。
OSやブラウザが何種類かあれば全部デザイン揃えるのは無理でしょう。
webデザインは「次ページへの移動ボタンの場所」「キャンセルボタンの場所」など機能の方がずっと大事。
デザイナー側とコーダー側の論争は、ずれても良いと言うコーダー側を支持したいですね。
他のモノに例えるなら…… (スコア:2)
んな注文をするんだったら、コーディングを他人任せにするよりも、紙の出版物で喩えるなら、小説家の京極夏彦みたいに「自分の著書の組版を自分でやる」位のスキルを身に付ける方が、長い目で見りゃ手っ取り早いんじゃね??
Re:他のモノに例えるなら…… (スコア:2)
グラディウス (スコア:2)
これだけ賑やかなタレコミなのに
X68kのグラディウスの話のネタがないということは
スラドも若者が多いっていうことなのか、
それとも自分がおっさんすぎるってことなのか。
#腹は切らなかったらしい。
× デザイナー(設計者) (スコア:1)
○アーティスト(芸術家)気取り
Re: (スコア:0)
デザインとかファッションとかスポーツとか、日本じゃ間違って使ってる人多いからなー・・・
Re:× デザイナー(設計者) (スコア:2)
DTP(紙媒体)とウェブとアートが混同されてしまってるからな。
職能として別物なんだが。
ピクセルパーフェクトって(オフトピ) (スコア:1)
ピクセルパーフェクトって、ゲームの RTA においてはピクセルまで位置を調整することを指すのですが、一般にはこういった意味で使われているんですね
Web で調べても、今回の話題の方しか出てこない……
コーダー「よろしい、やりましょう」 (スコア:0)
ではまず再現する必要のあるOS、画面サイズ、フォントサイズ、ウインドウサイズ、画面拡大率の組み合わせと、
それぞれの組み合わせの際の正確な表示内容を、デザイナーさんからご提出願います。
Re:コーダー「よろしい、やりましょう」 (スコア:1)
先にやりましょうって回答するのは悪手では。
Re: (スコア:0)
昔からよく知られている(?)、「屏風からトラを出していただければ捕らえてみせましょう」問題なのね
Re: (スコア:0)
ではまず再現する必要のあるOS、画面サイズ、フォントサイズ、ウインドウサイズ、画面拡大率の組み合わせと、
それぞれの組み合わせの際の正確な表示内容を、デザイナーさんからご提出願います。
あまい!
パネル特性が違えば1ピクセルの見え方も異なります。
デザイナー様の超感覚をもってすれば当然その違いは明らかです。
しっかりとメーカー、型番、ロット番号、シリアル番号も確認の上
デザイナー様にご提供いただくことが重要です。
# ぱらのいあ~
Re: (スコア:0)
ディスプレイには色調調整機能やオフセットが備わっているのが一般的だし、OS側にも同じような設定項目がある
その組み合わせを網羅するところまでが必要ではなかろうか
Re: (スコア:0)
実際、その辺が落としどころになるのはよくある話で
「デザイナー様のマシンで綺麗に見えてるからOKですよね。他はWindowsなので仕方ないですねー」
ってところでしょう
そもそもデザイナーは開発会社の下請けであるパターンが多いので発言権ないと思うんだけどね
客がこのデザイナー使ってって言った場合に問題が収集つかなくなるわけで
Re: (スコア:0)
そう言うのって、いちばん最初の打ち合わせの時に決めないの?
スマホ用なのかPC用なのかとか、どのブラウザに対応するのかとか。
全部!って言われたら、それなりの時間と費用を要求するとか!?
Re:コーダー「よろしい、やりましょう」 (スコア:1)
打ち合わせの時に決めて、完成したはずなのにNGを出されるのです。
そしてどの場合にどの程度許容するかをデザイナーは細かく定義してくれません。
Re:コーダー「よろしい、やりましょう」 (スコア:2)
それどころか「俺はそんなこといってない!こういったはずだ!」ってちゃぶ台返しすらある
きちんと書面に残ってるのに何言い出すんだこいつはと思っても、指摘したところで聞き入れられる可能性はゼロ。
ψアレゲな事を真面目にやることこそアレゲだと思う。
ならいっそ (スコア:0)
mapタグで対処すればいいじゃない
http://www.htmq.com/html5/map.shtml [htmq.com]
# え!?色見はさすがにパネル特性揃えていただかないと。。。
High DPIは? (スコア:0)
High DPIだと小さく表示されると思うんだが、どうしてPixelにこだわるんだろう?
640x480のDOSの時代じゃないんだからさあ、実寸でやろうぜ。
Re:High DPIは? (スコア:1)
記事の榊原昌彦さんのページで話は済んでますね。
ようはデザイナーや発注者に公差を設計・評価する能力がないから、
ピクセルパーフェクトというわかりやすい尺度になるわけだ……
Re: (スコア:0)
日本語だと 寸分たがわず って意味合いになると思うけどピクセルは象徴的なたとえだよ
たしかにちょっとレイアウトやフォントが変わるだけで途端にダサくなるのは分かるけど
ことhtmlになると非常にやっかい
それなら (スコア:0)
HTMLも1枚画像で作っときゃいいでしょ。
レスポンシブ?じゃあスマホ用にも1枚画像を作るんで。
Re:それなら (スコア:2)
何故か文章までも全て画像の記事があるのはそういう理由だったのか。
# 可搬性とかまったく考慮してないんだなぁ。
# ある日突然その画像フォーマットが使えない事態になったらどうするのだろうか…
# まぁ、HTMLなんかもそんな事態が起きないとも限らないわけだけど。
Re: (スコア:0)
> # ある日突然その画像フォーマットが使えない事態になったらどうするのだろうか…
新しいフォーマットの画像ファイルに置き換えるだけで済みそうだし、むしろ楽なんじゃね?
Re: (スコア:0)
それ、20年ぐらい前に在籍してた会社のやり方…
# まして無圧縮bmpを貼ってたという暴挙:)
ツカエナイ技術者 (スコア:0)
(少なくとも私が関与した場面では)クライアントはピクセルパーフェクトなんて望んでいないよ・・・
一番重要なのはクライアントが何を望んでいて何が必要なのかということ。
Re: (スコア:0)
ウチも望んでないわ。
そんな事に時間かけるくらいなら、工期短くして値段下げてくれた方がどれだけ嬉しいか。
Re: (スコア:0)
>一番重要なのはクライアントが何を望んでいて何が必要なのかということ。
というのを契約に盛り込めないのが、使えないマネージャや営業の結果なわけで……
それを技術者やデザイナーに責任転嫁されましても。
DesignじゃなくLook&FeelのLook (スコア:0)
要求されているのはデザインを実装することじゃなくて見た目の再現だからね。
たいがいは振る舞いだって考慮されてないだろ。
それはそれとして、絵描きをデザイナーって呼ぶのはなんでだろう。
IE5, 6 (スコア:0)
レイアウトとか苦しんでゲロ吐いた思い出が、胃酸とともに蘇る
ワープロと同じ道 (スコア:0)
DTPソフト化したワープロと同じ道だな
HTML2.0知らないお子様の議論