パスワードを忘れた? アカウント作成
14416033 story
インターネット

1ピクセルも違わずに完璧なデザイン再現を求めるピクセルパーフェクト論争 84

ストーリー by nagazou
調整者にはなりたくないな 部門より
HTMLコーディングするときに、クライアントから送られてきた元デザインを1ピクセルも違わずにコーディングすることを「ピクセルパーフェクト」と呼ぶそうだ。このピクセルパーフェクトという考え方に関する議論がTwitter上で起こっていたようだ(Togetter)。

発端から議論の流れについては、Togetterにまとめられたものを見ていただきたいが、ざっと見る限りは、一枚絵としてまとめたデザインを完全に再現することを求めるデザイナー側の主張と、システム環境によるブラウザやOS、画面サイズやフォントの違いなどを考慮せずに、デザインの再現性だけを求められても、とするコーダー側の主張で論争が起きている模様。

ただし、コーダー側も特定の環境で単にピクセルパーフェクトをするというだけなら難しくはないとする声もある。しかし実際にサイト運営をして、デザイナーの意図通りのものを維持できるのか、そもそもそういう運営・運用を考慮してデザインが為されているのかといった点も終わらない論争と化している理由であるようだ。

個人的には榊原昌彦さんのnoteの記事が問題点の要旨や問題点、そもそものピクセルパーフェクトという考え方がまとまっていて分かりやすい(榊原昌彦|note)。
この議論は賞味期限が切れたので、アーカイブ化されています。 新たにコメントを付けることはできません。
  • by asanagi (22217) on 2020年09月25日 12時22分 (#3894825) 日記

    Web未経験のデザイナーの方から、最初に来るデザインはピクセルパーフェクトと言うか、レイヤー付き一枚絵を渡されることが多いです。
    PCもスマホも使っていても、具体的にどうなのかまでは意識しないでしょうね。
    それをたたき台にしてレスポンシブなりUAなりに展開するので、バカみたいな納期でもない限り揉めることありません。

    芸術家の方に、絶対的に同じ色を要望されたことはありました。

    • 当方はグラフィックデザイナーなのですが、
      例えば、グラフィックデザイナーとしてウェブコンテンツのデザインを一枚絵で求められた場合
      コーディング側から見て気をつけて欲しいポイントはありますか?
      ピクセル整数倍などはもちろんですが・・・
      親コメント
      • by asanagi (22217) on 2020年09月25日 13時07分 (#3894880) 日記

        私としては、あらかじめCSSのプロパティを意識してて
        メモ付きの説明があるか、デザイナーの頭に入っていると大変助かります。

        背景画像があったら、それがcoverなのか、2枚あって左右に引っ付いてるのかとか
        要素が並んでた場合、flexbox的に言うとどういう設定なのかとか
        その要素が、画像、Webフォント、SVG、のどれで作られているのか
        あと色にはFFFFFFなカラーコードがついてると嬉しいです。

        理想はコーディング側にあらかじめ聞いておくことですが、なかなかままなりません。
        私はどっちかと言うとバック寄りなので、デザイナー側にコーダー寄りであることを求めすぎてるかもしれません。

        親コメント
        • ありがとうございます
          たしかに要素の種類をいちいち確認しないといけないのは大変ですね。
          発注者である代理店に仕様を聞いても要領を得ないこともあり、
          コーダー様とお話したいと思っておりましたが、難しいケースも多く・・・・
          参考にさせていただきます。
          親コメント
          • by Anonymous Coward on 2020年09月25日 14時40分 (#3894960)

            発注側にwebの特性をデザイン視点から伝えてもらえると嬉しい
            あとはこだわる箇所が明確だとスムーズ

            最悪なのが発注側が実装側にやたらと
            デザインコンセプトを維持してほしい要望が続いて
            本来デザイナーの仕事を実装側がセンス無いのにずーっとやらされること

            言い方は悪いですが
            大抵はデザイナーの作り逃げ状態なので

            親コメント
      • by Anonymous Coward on 2020年09月25日 13時39分 (#3894910)

        コーディング側からじゃなくてユーザー側からだけど、
        おしゃれ(笑)なサイトでよく見かける低コントラストで極小文字のデザインは
        徹底的に排除して欲しい。薄い灰色の背景に、ちょっと濃い灰色の小さい文字とか、
        ぱっと見かっこよく見えるかもしれないが、ユーザビリティは最悪。

        親コメント
      • by Anonymous Coward

        拡大縮小したらどうなるとか以前にアクセシビリティとかデータとしての利用方法を考慮しろと。
        神エクセルは電子文書として価値ないのと同じ。
        根本的にデザインを解ってないように見える。

    • by nim (10479) on 2020年09月25日 12時56分 (#3894864)

      「このボタンの縁取りはDIC584にしてください!」
      「ロゴの背景はシルバー箔押しで!」

      親コメント
  • 仕事をする気がない奴は排除で問題なし。趣味なら勝手にしていいよ。

    • by Anonymous Coward

      仕事している世界が底辺層すぎると話題を理解することすらできないのか

      • by Anonymous Coward
        お前は話題どころか単語も理解できてないようだがな
        デザイナー(Designer)がその名前の通り「設計」を行っているならば、実現すべき機能が要件として定義されているはずで、実装者はそれを満たすような実装をする。見た目のズレがどこまで許容されるかどうかもそれに含まれる。
        デザイナーという名前に反する単なるグラフィッカーが作った「絵」を再現することが要件ならばそりゃそうなるよってだけ。
        • by Anonymous Coward

          こんなとこでケンカはじまってて草

        • by Anonymous Coward

          3:2と16:9と9:16は最低無いとね。
          # フローティングなら、基準と許容比率書いてもらわないと。

        • by Anonymous Coward

          もう慣用的にデザイナー≒図案を作る人みたいな意味になってんだから、
          今更、実質グラフィッカーのデザイナーに「デザイナーなんだろ?その名の通り『設計』しろよ」とか言ってもしゃーないだろw

          • もう慣用的にデザイナー≒図案を作る人みたいな意味になってんだから、今更、実質グラフィッカーのデザイナーに「デザイナーなんだろ?その名の通り『設計』しろよ」とか言ってもしゃーないだろw

            ふと、インテリジェント・デザイン [wikipedia.org]論で言う「知性有るデザイナー」が「実装や設計や製造の事を考えてない図案を描いたヤツ」の意味なら「仮に、反進化論者の言うように、進化論は間違いで、生物は神か何かが設計したのなら、何故、生物の体は、かくも行き当たりばったりに作られているのか??」の説明が付くかも……って馬鹿なネタが脳裏に……。

            親コメント
  • webを使うユーザーの立場で発言するならピクセルのズレは気にしない。
    OSやブラウザが何種類かあれば全部デザイン揃えるのは無理でしょう。
    webデザインは「次ページへの移動ボタンの場所」「キャンセルボタンの場所」など機能の方がずっと大事。
    デザイナー側とコーダー側の論争は、ずれても良いと言うコーダー側を支持したいですね。

  • んな注文をするんだったら、コーディングを他人任せにするよりも、紙の出版物で喩えるなら、小説家の京極夏彦みたいに「自分の著書の組版を自分でやる」位のスキルを身に付ける方が、長い目で見りゃ手っ取り早いんじゃね??

  • by likeamagic (32922) on 2020年09月25日 18時58分 (#3895157)

    これだけ賑やかなタレコミなのに
    X68kのグラディウスの話のネタがないということは
    スラドも若者が多いっていうことなのか、
    それとも自分がおっさんすぎるってことなのか。

    #腹は切らなかったらしい。

  • by Anonymous Coward on 2020年09月25日 12時44分 (#3894853)

    ○アーティスト(芸術家)気取り

  • by Anonymous Coward on 2020年09月25日 13時46分 (#3894914)

    ピクセルパーフェクトって、ゲームの RTA においてはピクセルまで位置を調整することを指すのですが、一般にはこういった意味で使われているんですね
    Web で調べても、今回の話題の方しか出てこない……

  • by Anonymous Coward on 2020年09月25日 12時12分 (#3894813)

    ではまず再現する必要のあるOS、画面サイズ、フォントサイズ、ウインドウサイズ、画面拡大率の組み合わせと、
    それぞれの組み合わせの際の正確な表示内容を、デザイナーさんからご提出願います。

    • by Anonymous Coward on 2020年09月25日 12時29分 (#3894832)

      先にやりましょうって回答するのは悪手では。

      親コメント
    • by Anonymous Coward

      昔からよく知られている(?)、「屏風からトラを出していただければ捕らえてみせましょう」問題なのね

    • by Anonymous Coward

      ではまず再現する必要のあるOS、画面サイズ、フォントサイズ、ウインドウサイズ、画面拡大率の組み合わせと、
      それぞれの組み合わせの際の正確な表示内容を、デザイナーさんからご提出願います。

      あまい!

      パネル特性が違えば1ピクセルの見え方も異なります。

      デザイナー様の超感覚をもってすれば当然その違いは明らかです。

      しっかりとメーカー、型番、ロット番号、シリアル番号も確認の上
      デザイナー様にご提供いただくことが重要です。

      # ぱらのいあ~

      • by Anonymous Coward

        ディスプレイには色調調整機能やオフセットが備わっているのが一般的だし、OS側にも同じような設定項目がある
        その組み合わせを網羅するところまでが必要ではなかろうか

      • by Anonymous Coward

        実際、その辺が落としどころになるのはよくある話で
        「デザイナー様のマシンで綺麗に見えてるからOKですよね。他はWindowsなので仕方ないですねー」
        ってところでしょう
        そもそもデザイナーは開発会社の下請けであるパターンが多いので発言権ないと思うんだけどね
        客がこのデザイナー使ってって言った場合に問題が収集つかなくなるわけで

    • by Anonymous Coward

      そう言うのって、いちばん最初の打ち合わせの時に決めないの?
      スマホ用なのかPC用なのかとか、どのブラウザに対応するのかとか。
      全部!って言われたら、それなりの時間と費用を要求するとか!?

  • by Anonymous Coward on 2020年09月25日 12時13分 (#3894814)

    mapタグで対処すればいいじゃない
    http://www.htmq.com/html5/map.shtml [htmq.com]

    # え!?色見はさすがにパネル特性揃えていただかないと。。。

  • by Anonymous Coward on 2020年09月25日 12時17分 (#3894818)

    High DPIだと小さく表示されると思うんだが、どうしてPixelにこだわるんだろう?
    640x480のDOSの時代じゃないんだからさあ、実寸でやろうぜ。

    • by Anonymous Coward on 2020年09月25日 12時28分 (#3894831)

      記事の榊原昌彦さんのページで話は済んでますね。

      ようはデザイナーや発注者に公差を設計・評価する能力がないから、
      ピクセルパーフェクトというわかりやすい尺度になるわけだ……

      親コメント
    • by Anonymous Coward

      日本語だと 寸分たがわず って意味合いになると思うけどピクセルは象徴的なたとえだよ

      たしかにちょっとレイアウトやフォントが変わるだけで途端にダサくなるのは分かるけど
      ことhtmlになると非常にやっかい

  • by Anonymous Coward on 2020年09月25日 12時27分 (#3894830)

    HTMLも1枚画像で作っときゃいいでしょ。
    レスポンシブ?じゃあスマホ用にも1枚画像を作るんで。

    • by eru (12367) on 2020年09月25日 12時35分 (#3894841) 日記

      何故か文章までも全て画像の記事があるのはそういう理由だったのか。
      # 可搬性とかまったく考慮してないんだなぁ。
      # ある日突然その画像フォーマットが使えない事態になったらどうするのだろうか…
      # まぁ、HTMLなんかもそんな事態が起きないとも限らないわけだけど。

      親コメント
      • by Anonymous Coward

        > # ある日突然その画像フォーマットが使えない事態になったらどうするのだろうか…

        新しいフォーマットの画像ファイルに置き換えるだけで済みそうだし、むしろ楽なんじゃね?

    • by Anonymous Coward

      それ、20年ぐらい前に在籍してた会社のやり方…

      # まして無圧縮bmpを貼ってたという暴挙:)

  • by Anonymous Coward on 2020年09月25日 12時32分 (#3894839)

    (少なくとも私が関与した場面では)クライアントはピクセルパーフェクトなんて望んでいないよ・・・
    一番重要なのはクライアントが何を望んでいて何が必要なのかということ。

    • by Anonymous Coward

      ウチも望んでないわ。
      そんな事に時間かけるくらいなら、工期短くして値段下げてくれた方がどれだけ嬉しいか。

    • by Anonymous Coward

      >一番重要なのはクライアントが何を望んでいて何が必要なのかということ。
      というのを契約に盛り込めないのが、使えないマネージャや営業の結果なわけで……

      それを技術者やデザイナーに責任転嫁されましても。

  • by Anonymous Coward on 2020年09月25日 12時43分 (#3894851)

    要求されているのはデザインを実装することじゃなくて見た目の再現だからね。
    たいがいは振る舞いだって考慮されてないだろ。

    それはそれとして、絵描きをデザイナーって呼ぶのはなんでだろう。

  • by Anonymous Coward on 2020年09月25日 13時03分 (#3894875)

    レイアウトとか苦しんでゲロ吐いた思い出が、胃酸とともに蘇る

  • by Anonymous Coward on 2020年09月25日 13時05分 (#3894878)

    DTPソフト化したワープロと同じ道だな
    HTML2.0知らないお子様の議論

typodupeerror

UNIXはただ死んだだけでなく、本当にひどい臭いを放ち始めている -- あるソフトウェアエンジニア

読み込み中...