初心者必見！最初のコーディング案件で間違えやすい4つのポイント

2019年06月26日

HTML/CSS

初めての案件って、当然ながら初めてのことだらけなので、ぼくは基本的なことさえもわかっていませんでした。

とくにぼくみたいに独学スタートの人ならなおさらです。ぼくも初めは痛い目を見ながら覚えました。

そんなあなたに向けて、ぼくの初案件の失敗経験をもとに注意すべきことを4つに絞って話していきます。

大前提としてデザインデータをもとにコーディングをする

これを読んでいるあなたは、コーディングのみで仕事を受注したと思うのですが、Webデザインについてのことも軽く触れておいたほうがいいです。

というのも、コーディングはデザイナーがデザインしたデザインデータと呼ばれるものを見ながらコーディングするからです。

ぼくはこのデザインデータの意味を全然理解していなかったがために失敗してしまいました。

デザインデータはただなんとなく色や余白を決めているのではなく、ちゃんとルールに基づいてデザインをしていています。

例えば、「ここの余白は〇pxに統一して、メインの色はこのカラーコードを使う」というようにルールが決まっています。

当時、全然デザインの知識がなかったため、色も余白もなんとなくでコーディングしていました。

見る人が見ればわかるので差し戻しをくらうか、最悪報酬を下げられてしまいます。

なので、まずはデザインデータをもとに忠実に再現するということを頭に入れておいてください。

次は具体的に何を気をつけるかについて話していきます。

先ほども言ったようにデザインデータにはルールが決まっていて、もちろん使うカラーコードも決まっているんです。

だから、「濃い青だから、適当に濃いカラーコードにしよう」っていうのはアウト。

ちゃんとデザインデータからカラーコードを調べます。

調べ方は超簡単です。

photoshopで送られてくるケースが多いのでphotoshopの場合で説明します。

①選択ツールを選び、調べたい場所をクリック

②属性タブの色がついている部分をクリック

③カラーピッカーツールを選ぶ

④カラーコード確認

余白もデザイン通りコーディングします。

①長方形選択ツールを選び、測りたい余白をドラックする

②pxが表示されるので、pxを確認する

wが幅、hが高さなので、横の写真との余白は40pxです。

フォントもデザインデータと同じものを使用します。

こちらの調べ方は

①選択ツールで、調べたい文字を選択します

②文字タブに使っているフォントが表示されるので、そのフォントでフォントファミリーをコーディングしていきます。

教本なんかだと使う画像あらかじめ用意していますが、実際の現場ではそこまで用意してくれません。

それじゃあ、コーディングできないじゃんって思うかもしれませんが、デザインデータから画像を保存することが可能です。

①選びたい写真を選択ツールで選択

②レイヤータブで①で選んだ写真を選ばれていることを確認したら、右クリック(macなら2本指)で「pngとしてクイック書き出し」で名前をつけて保存します。

今紹介した操作ができれば、コーディングだけの案件はなんとかなるので、まずは今紹介した4つの操作とデザインの基本は覚えておきましょう。

余白やカラーコード、画像の書き出しは全て済ませておいて、コーディングだけに集中するって状態にするのが一番早いです。

ぜひ、今話した内容を参考にしてコーディングを頑張ってください。