【Web制作初心者向け】コーディング以外に必要な技術

こんにちは、フリーランスでWeb制作をしているKosakuと申します。

今回はWebコーダーとしての勉強をひと通り終え、これから実際のコーディング案件を受注していきたいという人に向けて、

実際に僕が案件を進める際に感じた、HTML/CSSなどのコーディング技術以外に必要なことを紹介します。

先に結論からいうと、

が必要です。

それではひとつずつ解説していきます。

デザインデータから画像や数値を取得できること

コーディングの学習時におこなったであろう模写コーディングでは、Webサイトから画像データやサイズなどの数値を取得してきたかもしれません。

しかし、実際の案件では、デザインデータはpsdデータ(Photoshop)やaiデータ(Illustrator)などで提供されることがほとんどです。

コーディングをおこなうには、画像の切り出し方法やフォントサイズや余白などの取得方法を知っている必要があります。

psd、aiデータを無料で扱えるXDを勉強した人も多いと思いますが、デザインデータを正確に再現するためにはPhotoshopやIllustratorが必要です。

これらのツールは有料ですが、これからコーダーとして案件を受けていくのであれば必須といえるものなのでこれを機に購入しましょう。

デザインデータにはPhotoshopとllustratorのどちらもよく使われるため、Adobe CCのコンプリートプランの購入がおすすめです。

コンプリートプランは学生であれば「アカデミックプラン」という年間約25000円のお得なプランで購入できますが、学生でない場合は年間約71000円です…。

しかし、学生でなくてもアカデミックプランを購入する方法があります。

それはデジハリが販売している「Adobeマスター講座」を購入することです。

これはデジハリの提供しているオンライン動画講座にPhotoshopの1年間使えるアカデミックプランが付属しているというものです。

講座は特に受ける必要はないため、Adobe CC目当てで購入する人が多いようですね。

1年間しか使えないという縛りはありますが、29800円でAdobe CCのコンプリートプランが使用できる、学生以外の人が最安値で購入できます。僕もこれを購入して使っています。

以下のURLから購入可能です。

実際の案件ではコーディングができたら納品をすることになります。

その際に、サーバにアップして納品という形式でお願いされることもあります。

サーバにファイルをアップするために、FTPソフトなどの使い方を覚えておきましょう。

また、「コーディングをチェックするため、自前のサーバにアップしてくれ」と頼まれることもあるので、レンタルサーバを契約しておくと便利です。

実際の案件を進めるにあたって、工数や金額の見積もりができることが大切です。

工数の見積もりを誤ると納期に間に合わないかもしれません。

そういった事態を避けるためにも、自分のコーディングレベルを把握しておきましょう。

普段からコーディングにかかる時間を計っておくことで、デザインデータを見たときにどのくらい時間がかかるかがわかるようになってきます。

また、工数を把握しておくことで、受注金額が適当なものかを判断できるようになります。

実際の案件では、今回紹介したようにコーディング以外の知識や技術が必要となります。

今回紹介した

などの知識が、初めての案件を乗り越えてる助けになれば幸いです。