【HTML】マークアップ手順を新人コーダーが実務ベースで解説

フロントエンド

WEB制作会社に入社して5か月のド新人HTMLコーダーです。
最初は保守で小さなマークアップからやらせてもらい、少しずつレベルアップし、先日ついに新規案件のマークアップを担当させて頂きました。
ティザーサイト(comming soon的なサイトの事)でたった1Pしかありませんが、大変勉強になりました。
その時に学んだ実務上でのマークアップ手順をご紹介します。
HTML、CSSの書き方を紹介するものではなく、マークアップの工程を紹介する記事となります。

ディレクター、デザイナーへの確認事項

いきなり制作!とはいきません。コーダーであっても前提を理解している必要があります。

要件の確認

ディレクターに以下の要件を確認します。

  • サイトの目的、CV
  • 閲覧者のターゲット
  • サポートするデバイス、ブラウザ、バージョン
  • 上記のうち、メインとなるデバイス、ブラウザ、バージョン
  • レスポンシブWEBデザイン対応か
  • 内容、機能、システムの有無
  • 使用するCMS、クライアントが更新するページの有無
  • スケジュール、納期

私は元SEなので上記内容は要件定義書にまとまっているべきと思うのですが、 WEB業界標準なのか社内標準なのか不明ですが、要件定義書はありませんでした(^^;)

デザインの確認

デザインデータはデザイナーからフォトショップ形式(psd)で、PC版とスマホ版の2つが渡されました。
基本的には、このデザインデータと全く同じ見た目になるように作っていきます。

動き(インタラクション)の確認

デザインデータは静止画なので、動きについてはデザイナーから口頭で説明を受けました。
指定は以下のようなものでした。

  • ヘッダーは追従するようにして、少しスクロールしたらヘッダーを小さくする
  • スマホの時はフッター固定
  • 文字のホバー時の色
  • 画像のホバー時は半透明

担当したのはシンプルなサイトだったので動きは少なかったですが、カルーセルやスライダー等がある場合にはもっと動きが出てきますね。
インタラクションデザインに関してはコーダーのセンスが問われるところかなぁと思います。

社内のマークアップ規約の確認

ディレクトリ構成や命名規約などのガイドラインを設けている会社が多いと思います。
規約は理解しているつもりでも、うっかりミスがないように、制作に入る前にもう一度読み直します。

粗く作る

細部は無視してざっと全体を作ります。「この構造、この技法で実現可能か?」をまずは確認するためです。
文字サイズ、行間、余白などがデザインと全然異なっていてもこのフェーズでは気にしません。
このフェーズで作りこむ必要があるのは、各ブラウザで実装の差がありそうなところや、自分が自信がないところです。
例えば、「flex使ってみたいけど、IEで動くのかなぁ?自身ないなぁ~」っていう時とか。
JSもブラウザの実装の差が出やすいところなので作りこんでおきます。

粗くテスト

粗く作って、粗くテスト。「テストって完成品に対して行うものじゃないの?」と思うかもしれませんが、 完成度を上げた後に他のブラウザでバグが見つかって作り直し、なんてことになると辛いので、早い段階でざっとテストを行います。

マークアップにおけるテストは以下のような内容でした。

実機確認

ここまでMacOSのchromeのみで作業を行っていたため、サポート対象の環境すべてで観覧してみます。
確認ポイントは以下です。

  • 見た目の崩れがないか
  • ウィンドウ幅が変わったときに崩れがないか
  • 開発者ツールのコンソールにエラーが発生していないか

要件次第ですが、以下のような環境で確認を行う事が多いです。
バージョンは記載していませんが、サポート対象のすべてのバージョンで確認を行います。
これが面倒くさい&大変なところ・・・

デバイス OS ブラウザ
PC Mac OS chrome
safari
firefox
Windows Internet Explorer
Edge

スマホ

iOS safari
  android 標準ブラウザ

やってみると、思った以上にダメなところが出る出る。
「ieでobject-fitが効かない!」
「androidでJSのエラー!letって変数宣言使えないの?!」
ie11とandroid6が先進的なCSS、JSに対応できてない感がありました・・・
早い段階で確認しておいて良かったと思える事ばかりでした。

lintチェック

lintチェックとは、HTMLやCSSの文法ミスや構造的な問題点をツールを使用して静的にチェックすることです。チェッカーは様々ありますが、おすすめは下記です。

アウトラインの確認

アウトラインとはHTMLの文書構造の事で、h1~h6の見出しのレベルに間違いがないか、sectionの区切りに間違いがないかを確認します。これもツールは様々ありますが、おすすめは下記です。
chrome拡張機能 headingsMap

丁寧に作りこみ

あとはデザインにピッタリ一致させる作業のみです。
フォトショップで長さや余白などを計測してCSSを記述していきますが、それでもズレは生じるもの。chromeの拡張機能で、ブラウザの表示とデザインデータの画像を重ね合わせてズレがないか確認します。

chrome拡張機能 PerfectPixel by WellDoneCode

作業していると、デザインデータの間違いと思われるところも発見。
「左揃えにしたいっぽいのに、ひとつだけ1pxはみ出してる・・・」
「カードレイアウトなのに、一つだけカードの余白が他と違う・・・」
こういうものは誤りなのか意図的なデザインなのか、デザイナーに確認した方が良いでしょう。

丁寧にテスト

粗くテストで行った事と同じテストを、今度は丁寧に行います。
すべてのリンクを押下して遷移先やリンク切れの確認も行います。
元SEの私としては、テスト仕様書とエビデンスがあるべきと思うのですが、例のごとく、ありません。
テストに抜け漏れはつきものなので、せめてチェックリストは作った方が良いでしょう。

QA(Quality Assurance:品質保証)

QAと効いて最初、質問-回答の事だと思った私・・・恥ずかしい。
もっとわかりやすくいえばレビューです。他の人にチェックしてもらい、ミスやアドバイスをもらい品質を上げていく作業です。
私の現場では課内のQAと社内のQAの2フェーズあります。
チェックしてくれる人は、先輩コーダー、デザイナー、ディレクターはもちろん、ライター、営業、SEに至るまで。
複数人の、異業種の人の目が入る事で様々な観点からの指摘をもらえて大変良い仕組みです。

まとめ

私が経験したマークアップ工程をご紹介しましたが、方法は会社によって様々だと思います。早い段階で実機確認を行う点やQAのシステムはとても良いと思いましたが、 反面、要件定義書やテスト仕様書などドキュメントの整備は足りないのでは・・・と感じました。

タイトルとURLをコピーしました