HTML/CSSコーディングの仕事内容をまとめました

Web制作

 

こんにちは、タカキです。

HTML/CSSでコーディングの仕事をまだ受けたことがない方だと、具体的な仕事内容がいまいちわからないと思います。

単にコードを書いてZipで納品・・・くらいにイメージされてる方もいるかもしれませんが、実は意外とやることが多かったりします

 

まだコーディングの仕事を行ったことがない方へ向けて、コーダーの一連の仕事の流れを記載しました。

今後、コーディングの仕事を受注するつもりがある方は是非参考にしてみてください

 

では、以下記事に入ります。

 

デザインカンプの受け取り

仕事を受注したら、デザインカンプというものを受け取ります。

コーディングを行うための設計図みたいなものですね。

デザインカンプを参考にして、HTMLとCSSで見た目を再現していきます。

 

デザインデータの形式で体感的に一番多いのはPhotoshop、次いでillustrator、XDとAdobeツールが主流です。

稀にfigma、Sketchなどのツールもありますが・・・

 

当然ですが、Photoshopで作成されたデータはPhotoshopを用いて開きます。

「コード書くだけだからデザインツールは必要ないや!」と思っている方がいるかもしれませんが、むしろ必須ツールです。

今後コーディングの仕事を受注しようと思っている方は、Adobeツールを購入しておきましょう。

(月額制で結構高いので、必要になってからでもいいかもです。)

 

画像の書き出し

デザインカンプを受け取ったら、まずは画像を書き出します

書き出しとは、デザインカンプに使われている画像を抜き出して、自分のフォルダに保存していく作業です。

新規制作の場合は基本的にコーダー側がこの作業を行います

 

Photoshopやillustrator、XDなどツールによって画像の書き出し方は違います。

 

例えばXDの場合、書き出したい画像を選択して

メニューバーのファイル→書き出し→選択済み

これで選択した画像を書き出すことができます。

 

画像の書き出しも慣れてないと時間がかかる作業です。

各ツールごとのやり方をしっかりと理解しておき、スムーズに終わらせられるようにしておきましょう。

 

データの取得

書き出しが終わったら、次はデザインカンプから各種データを取得していきます

2番目に記載していますが、実際には次のコーディングと並行して行う作業です。

 

取得するデータは主に以下の内容です。

取得データ

・余白

・カラー

・文字データ(フォント、サイズ、行間等)

・テキスト

・オブジェクトサイズ

・オブジェクトの効果(影や透明度)

 

特に余白やサイズはCSSを書いているうちにズレがちです。

ここで手を抜くと後々の調整が面倒なので、しっかり調べながらやりましょう。

 

コーディング

ここからはおなじみHTML・CSSのコーディングです。

HTMLを記述し、デザインカンプから取得したデータを元にCSSで装飾していきます。

 

HTML/CSSが終わればあとはクライアント要求に従い、jQueryやjsでアニメーションを付与していきます。

 

余談ですが、リンクボタンのホバーやリンクのスムーススクロールは指定が無くてもつけて当然、みたいな感じがしてます。

リンクは普通のスムーススクロール、ボタンは困ったらとりあえず以下のCSSみたいなのをつけておけば問題ないと思いますが・・・(クライアントにきちんと確認しましょう)

 

各種検証

一通りのコーディング作業が終わったら、各種検証です。

全行程の中で最も重要な作業になります。

 

まず、データの取得で調べた値と問題がないかチェック

ついでにアニメーションの挙動なども合わせて見ておきましょう

チェック項目

・余白

・カラー

・文字データ(フォント、サイズ、行間等)

・テキスト

・オブジェクトサイズ

・オブジェクトの効果(影や透明度)

・アニメーションの挙動

余白のズレやオブジェクトサイズはChromeの拡張機能「PerfectPiexl」で確認可能です。

一番間違えやすい部分なので特に念入りにチェック。

 

一通りの検証が終わったら、各種ブラウザでチェックしましょう

以下、チェックしておくべきブラウザです。

チェックブラウザ

・IE

・Microsoft Edge

・Chrome

・Safari

・FireFox

特にIE、たまにEdgeもレイアウトが崩れたり、Javascriptがおかしな挙動をすることがあります。

ここら辺は要チェック。

 

ちなみにMac利用者の場合、IEやEdgeで確認することができません。

BootCampでWindowsOSを入れてしまうのが一番いいのですが、スペックの都合上などで難しい場合は事前にクライアントに申し出ておきましょう。

また、擬似的ではありますがMacの開発から確認することが可能です。↓

 

各種ブラウザの次は、スマートフォン版のチェックです

PC上でもスマホサイズに縮める事はできますが、検証の際は必ず実機でチェックしましょう

実機でしか発生しない思わぬトラブルが潜んでいたりします。

 

以下、スマホ版でよくあるトラブル内容です。

スマホ版のよくあるトラブル

・PCでクリックできるところがスマホのタップだと反応しない

・スマホで効いてたCSSがPCだと効いてない

・スマホで見るとレイアウトが違う部分がある

・画像がぼやけて見える(解像度が高いiPhoneにありがち)

↓具体例

 

見た目に問題無かったら、次は中身です。

内部チェック項目

・サイト内のリンクは適切か

・altは記述されているか

・デベロッパーツールでエラーが発生してないか

・HTMLの記述ミス(閉じタグ抜けなど)

・CSSの記述ミス(不要なプロパティがあるなど)

サイト内リンクは間違っていると大問題です。必ずリンクはチェックしましょう。

 

altについては、基本的に指定されないのでこちらで設定する必要があります。

背景やアイコンなど、単体で意味をなさない画像以外にはきちんと設定してあげましょう。

 

HTMLやCSSの記述については、間違っていても見た目上問題ないことは普通あります。(デベロッパーツール のエラーも同様)

ただ、もしわかっている人に中身を見られたら、コーディングの品質が問われる部分です。(全く知識がないクライアントなら普通に通っちゃいますが・・・)

 

コーダーとしての質を保つためにも、この部分は目を光らせて検証しましょう。

以下、HTML、CSSの検証サービスをまとめたのでご参照ください。

 

検証サービス

・HTMLのエラーを確認する「HTMLエラーチェッカー

・HTML構文をチェックする「W3C HTML 検証サービス

・CSSの構文をチェックする「W3C CSS 検証サービス

・使ってないCSSを削除する「Un CSS Online

検証作業は慣れないうちだと、コーディングが終わったあとの疲労で手を抜きがちです。

ただ、クライアントからの信用を得られるかはこの作業にかかっています

一番大事な作業なので、気を引き締めて取り掛かりましょう!

 

納品(サーバーアップロード)

作業が終わったら、いよいよ納品です。

大抵はサーバーへアップロード、たまにZipファイルにして納品する形式もあります。

 

Zipファイルの場合ただ圧縮して渡すだけなので、今回はサーバーアップロードの手順について解説します。

 

本サーバー、もしくはテストサーバーへ作成したデータをアップロードします。

※場合によっては、テストサーバーへアップ→各種検証→本サーバへアップ と順番が前後します

 

まずはクライアントからサーバー情報をいただきます。

納品形式がサーバーアップの場合、だいたい向こうからFTPサーバー情報というものが送られてきます。

FTPサーバー情報

・FTPサーバー(ホスト)

・ユーザー名(アカウント)

・パスワード

 

こちらの情報を用いて、FTPソフトを使用してクライアントのサーバーと接続します。

今回は無料のFTPソフト「FileZilla」を例にして解説します。

 

まずはFileZillaを立ち上げます。

画面上部にあるホスト・ユーザー名・パスワードに入力してサーバーに接続します。(今回は僕のサーバーに接続しています)

 

入力して接続を押します。これでクライアントのサーバーへ接続が完了しました。

 

作成したデータをアップロードするフォルダを選択します。

 

どこにアップしたらいいかわからない場合は、クライアントに聞くかググりましょう。

エックスサーバーであれば、「エックスサーバー  サイト アップロード 場所」みたいな感じでググれば以下のようなページが出てきます。

https://support.xserver.ne.jp/faq/service_ftp_setting_upload.php

 

アップロード先のフォルダを選択したら、次は自分が作成したデータのあるフォルダを選択します。

 

FileZillaの場合、アップしたいファイルをダブルクリックするか、

右クリック→ファイルをアップロード

これでアップ完了です。

 

アップが完了したら、実際のサイトに行って確認をしましょう。

※もし反映されていない場合、キャッシュが残っている可能性があります。

キャッシュを削除してから再度読み込みましょう

 

無事反映されていたら納品完了です。

テストサーバーへのアップロードだった場合、各種検証に戻ってスマートフォンの実機などで確認作業を行いましょう。

 

まとめ

コーディングの仕事の流れ、いかがだったでしょうか。

HTML/CSSを書ければいいだけではなく、実は他にも意外とやることが多かったりします。

画像の書き出しやサーバーアップなど、いきなり作業すると戸惑いがちなので事前にしっかり予習しておきましょう╭( ・ㅂ・)و