未経験の私が初案件をするうえで役に立ったこと

こんにちわ。未経験プログラミング初心者だった本職薬剤師の私が先日初案件を頂きました。それはもう壮絶な体験だったのですが、今回は初案件前に私が勉強しておいてよかったこと逆にそれまでにつかっておけばよかったことをご紹介します。

目次

私の初案件の内容

まず最初に私の初案件の内容です。私が人生初めて受けた案件はHP1ページのコーディング(LP案件)です。予め作るデザインはデザインカンプとして配布され、決まっているものでした。いわゆる制作会社案件でした。

やっておいてよかったこと クリスタ☆チャレンジ中級

コーディングの無料カンプ配布 クリスタチャレンジはこちらから

初めてデザインカンプを見て、真っ先にこれならできるなと思わせてくれたのはクリスタチャレンジの中級をやっていたことが本当に大きかったです。

クリスタ☆チャレンジの中級を○○日でやっていたから、多分LP1ページならこのくらいでできるかな?

という目安にもなりました。

それに、今回の案件がXDのデザインだったので、クリスタ☆チャレンジでXDカンプからのコーディングを練習していたのが活きました。

初級は本当に簡易的なのですが中級ができれば一般的なLPのコーディングはできると思います。
しかも、中級ならyoutubeにて動画解説が詳しくついているので全く手が出ない人でも最初は動画を見ながらコーディング勉強することができます。

上級はまだ私も動画見ながらしか挑戦したことがないので、後日チャレンジしてみます。

やっておけばよかったこと パーフェクトピクセル

パーフェクトピクセルのダウンロードはこちらから

あまりweb制作に詳しくないお客様相手ならいいのですが、今回は何を隠そう制作会社の案件…デザインカンプにほぼそっくりに作らなければいけませんでした…

1㎜のずれも許されない…

実は、XDのデザインカンプをみれば距離は確認することができるのですが、

AdobeXDの数字を正しく入力しても実はずれている!!

それに気が付かず、私は大変な思いをしてしまいました…(´;ω;`)ウゥゥ
私はこれまでそっくりに作るコーディングの練習はしてきませんでした。

そこで、使うツールがこちら

Googlechromeの拡張機能「welldonecode」こちらをダウンロードするととっても便利。

パーフェクトピクセルを使うと、デザインの画像と自分のコーディングしたページを重ねることにより
デザインの違いを視覚的に確認することができます。

使い方はとても簡単なのですが、私は初めてでてこずったので紹介します。
Googlechromeでダウンロードすると、上のタグにピンクのマークが出るのでそこをクリック

こちらの中に、比べるもとの画像を入れます。

XとYは0に設定すると、左上ぴったりにセットされます。

三段目の数字は最初0.66666になっているのですが、

これは1にしましょう。等倍になります。一番下の透明度は右に行くほどデザインカンプ、左に行くほどもともとのwebページの表示になります。

もし、これから制作会社を相手にコーディングをしていくことがある人がいたら必ずこちらを使いこなせるようにしていたほうがいいと思います。




よかったらシェアしてね!

この記事を書いた人

調剤薬局にてフルタイムの薬剤師をしながら副業でバナー&サムネイル制作、web制作&お薬相談。ココナラ売り上げ実績70件以上。個人向けblogサイト構築から美容系サロンのサイト、コーポレートサイト、ペライチサイト作成実績あり。初心者でも安心な丁寧なやり取りを心がけております。お仕事の依頼も随時受付中です。

コメント

コメントする

CAPTCHA


目次
閉じる