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