Web制作学習017【ピクセルパーフェクトを学ぶ】2021.07.9~
今日は学習開始16週目のお話。
ピクセルパーフェクトと言って、
デザイン通りに完璧に再現するコーディングについてです。
ピクセルパーフェクトに意味を見いだせなかった
Web制作という仕事の中にも
いろいろな役割があって、
その中でぼくが目指しているのは、
コーディングをする人です。
Webページのデザインがあって、
そのデザインはAdobeのXDとかPhotoshopとかで作られています。
そのデザインの通りに正確にコーディングするのが、
ピクセルパーフェクトというものです。
学習中の制作課題で、
たとえばフォントの種類とかフォントのサイズとか
そういうところですらあまり興味が持てず、
無視することが多かったのです。
なので、
元のデザインから１ピクセルもズレのないデザインを作る
なんてまったくやる気が出ません。
１ピクセルずれているからといって、
それがなんになるんでしょう？
とはいえもしコーディングを仕事にするなら、
必須スキルなので、
とにかくやってみることにしました。
課題が見えないうちは、簡単なものに取り組むべし
なぜやる気が出ないかというと、
そこに意味を見出せないから。
そんな状態で学べるわけはないのですが、
何事もまずはやってみることが大切。
やってみて気づくこともあります。
というわけでやることに決め、
教材選びをしました。
そこではじめに手をつけたのがこちら。
手順が丁寧に解説されているので、
よいなと思いました。
でもやっているうちに、
より簡単か課題を見つけ乗り換えました。
とてもシンプルで、
ごくごく簡単なWebページ。
とてもよい教材でした。
やってみて気づいた【デザインした人の意図を考えると面白い】
実際にやってみると、
けっこう夢中になってできました。
デザインを見ながら、
「このナビメニューはどういう形で整列されているんだ？」
と考えながらやると、
なかなか面白かったです。
その意図がわからないと、
なかなかのストレスなのですが、
わかると面白い。
ピクセルパーフェクトを目指すときに、
便利なものがあります。
Google Chromeの拡張ツールに、
PerfectPixelというものがって、
これを使うと、
ブラウザ上で自分がコーディングしたものとデザインとを
重ね合わせることができます。
便利は便利だけど、
これがあると余計にパーフェクトが求められるような気がして、
ちょっといやです。
まとめ
今日は学習開始16週目で、
ピクセルパーフェクトを学んだ
というお話でした。
もともと敬遠していたものの、
実際にやってみると面白い部分もありました。
自分でデザインを作る
という経験も必要だなと感じました。
学ぶたびに課題が増えていきます。
おまけ
これまで学習中、
iPhoneのアプルでサイクルタイマーを使っていました。
これけっこうバッテリーを消費してしまうので、
充電しそびれると午後のウーバーイーツに支障が出ていました。
最近Macのアプリを探していて、
これを使い始めました。
なかなかよいです。
この記事が気に入ったらサポートをしてみませんか？