00:01
ウェブデザインに関する用語なんですが、ピクセルパーフェクトという言葉が最近ツイッターで話題になっていました。
ツイッターまとめのツギャッターというサイトでもまとめられていまして、
そこでは、ピクセルパーフェクトは必要なのか HTMLコーダーの考え方まとめというタイトルがついてまとめられていました。
ここでのピクセルパーフェクトは、デザインデータ通りにきっちり1ピクセルのずれもなく、
HTMLとCSSでウェブページとして作り上げる、組み立てるといった意味になります。
ウェブサイトを作るときのワークフローとして、デザイナーがグラフィックツールを使って、
1枚絵としてウェブページのデザインを作って、そのデザインデータをもとに別な人がHTMLとCSSでコーディングしてウェブページとして作り上げるという流れの場合の話ですね。
で、このピクセルパーフェクトの意味がどうやら日本では一般的なようなんですが、多分これは日本独自で定着した使われ方で、本来元々英語では違った意味として使われていたと思います。
英語でのピクセルパーフェクトは、意図せずに滲んだりぼやけたりして見えるような、余計なピクセルが発生していない、くっきりはっきり見えるデザインデータのことを表しています。
じゃあなんで意図せずぼやけたり、余計なピクセルが出るのかというと、元々グラフィックツール、アドビのフォトショップやイラストレーターなどは印刷物を作るために作られていたツールなので、ウェブデザイン用のツールとして使って、最終的に画面で見るためのデータとしてピクセルで表示されるデータとして出力したときに、
いろいろと不具合があったんですね。印刷物の場合は、ミリとかインチを単位にデータを作るわけですが、ウェブページ用のデータだったら単位をピクセルにすることはできます。
ただ、このピクセルにピッタリ合わせるという発想が元々なかったので、図形を配置してみたら、例えばピッタリ100ピクセルの位置に揃ってなくて、100点3ピクセルとか、少数点出ちゃってるみたいなことが平気で起きていたんですね。イラストレーターというソフトの場合。
03:03
そうすると、最終的に画像データとして書き出すときに、改めてピクセルが作られるときに、少数点以下を丸め込むために、本来は黒い1ピクセルの線だったはずが、その横にグレーの線が現れたり、
要するに、ちょっとぼやかすことによって、少数点以下の位置にあるように見せかけるために、わざわざ余計なピクセルが発生するとか、そういう現象が起きていたので、要はウェブページ用にデザインするときに、くっきりはっきり余計なピクセルが出てきて、ぼやけてるようになったりしていないデータを作ることが大変だったんですね。
その時代のデザイナーの先駆者たちが、いろいろなテクニックを生み出して共有してくれたり、アドビのツールもイラストレーター、フォトショップもウェブ向けの機能が強化されていて、今はちゃんと設定をすればピクセルパーフェクトなデータが作りやすくなっています。
なお今はフォトショップイラストレーターでウェブページ用のデザインをする人はだんだん減ってきていて、アドビだとXDという別なツールがありますし、海外ではスケッチというツールがスタンダードになっていますね。
あとフィグマというツールが今日本でも海外でもシェアを伸ばしてきています。こういうツールを使うとピクセルパーフェクトなデータを作るのは簡単というか当たり前という世界に今はなっています。
また日本でのピクセルパーフェクト、デザインデータとコーディングした後のウェブページがぴったり揃うというのは英語ではピクセルパーフェクションあるいはピクセルプッシングとも呼ぶらしいです。
また日本ではピクパと3文字で略して呼んでいる人がいてちょっと面白いなと思いました。ということでピクセルパーフェクトという言葉の2つの意味に関する話でした。
日本で全5章のうち2章分の原稿を書きました。一部のサンプルコードなども書いています。よろしくお願いします。
06:20
CSSは?
なにそれ?だっさ。
なんでや。
メーブルセンスの励まないやん。
