こんにちわ。未経験プログラミング初心者だった本職薬剤師の私が先日初案件を頂きました。それはもう壮絶な体験だったのですが、今回は初案件前に私が勉強しておいてよかったこと逆にそれまでにつかっておけばよかったことをご紹介します。
私の初案件の内容
まず最初に私の初案件の内容です。私が人生初めて受けた案件はHP１ページのコーディング(LP案件)です。予め作るデザインはデザインカンプとして配布され、決まっているものでした。いわゆる制作会社案件でした。
やっておいてよかったこと クリスタ☆チャレンジ中級
コーディングの無料カンプ配布 クリスタチャレンジはこちらから
初めてデザインカンプを見て、真っ先にこれならできるなと思わせてくれたのはクリスタチャレンジの中級をやっていたことが本当に大きかったです。
クリスタ☆チャレンジの中級を○○日でやっていたから、多分LP1ページならこのくらいでできるかな？
という目安にもなりました。
それに、今回の案件がXDのデザインだったので、クリスタ☆チャレンジでXDカンプからのコーディングを練習していたのが活きました。
初級は本当に簡易的なのですが中級ができれば一般的なLPのコーディングはできると思います。
しかも、中級ならyoutubeにて動画解説が詳しくついているので全く手が出ない人でも最初は動画を見ながらコーディング勉強することができます。
上級はまだ私も動画見ながらしか挑戦したことがないので、後日チャレンジしてみます。
やっておけばよかったこと パーフェクトピクセル
あまりweb制作に詳しくないお客様相手ならいいのですが、今回は何を隠そう制作会社の案件…デザインカンプにほぼそっくりに作らなければいけませんでした…
1㎜のずれも許されない…
実は、XDのデザインカンプをみれば距離は確認することができるのですが、
AdobeXDの数字を正しく入力しても実はずれている！！
それに気が付かず、私は大変な思いをしてしまいました…(´；ω；`)ｳｩｩ
私はこれまでそっくりに作るコーディングの練習はしてきませんでした。
そこで、使うツールがこちら
Googlechromeの拡張機能「welldonecode」こちらをダウンロードするととっても便利。
パーフェクトピクセルを使うと、デザインの画像と自分のコーディングしたページを重ねることにより
デザインの違いを視覚的に確認することができます。
使い方はとても簡単なのですが、私は初めてでてこずったので紹介します。
Googlechromeでダウンロードすると、上のタグにピンクのマークが出るのでそこをクリック
こちらの中に、比べるもとの画像を入れます。
XとYは０に設定すると、左上ぴったりにセットされます。
三段目の数字は最初0.66666になっているのですが、
これは１にしましょう。等倍になります。一番下の透明度は右に行くほどデザインカンプ、左に行くほどもともとのwebページの表示になります。
もし、これから制作会社を相手にコーディングをしていくことがある人がいたら必ずこちらを使いこなせるようにしていたほうがいいと思います。
コメント