コーディングに時間がかかっている・・・そんな悩みはないでしょうか。
タイピングが速ければ、それなりにスピードも上がりますが、段取りをしっかりと把握しておくことで、さらに時間を短縮することができます。
私は5年間コーディング担当者としてやってきたので、段取りとスピード術についてご紹介します。

デザインデータを分析してシミュレーションをする

デザインデータを受けとって慌ててコーディングをすると、返ってやり直しの作業が発生して時間がかかってしまうことも・・・。
まずはどのような情報があり、どのようにコーディングすれば効率が良くなるのかを考える必要があります。

デザインルールの把握

Web制作では、テーマやコンセプトもってデザインを作成してますので、色やフォントに統一感があります。
フォントサイズ、フォントファミリー、テーマカラーは何を使っているのか確認しておきましょう。
デザインデータを見て把握しても良いですが、デザイナーに直接聞いたほうが早いのでお勧めです。
これらの情報はコーディングする際に、デフォルトの設定として記述します。

共通化するパーツを見定める

一つ一つのページを丁寧に作り込んでいたら時間がかかりますので、再利用できるパーツを見定める必要があります。
特殊なレイアウトでない限り「ヘッダー・フッター・サイドバー」は全てのページで再利用できます。
その他にも「見出し・ボタン」も同じ装飾のデザインになっているケースが多いです。
これらのパーツを一つのコードとして共通化することで、時間を短縮することができます。

セクション（章・節・項）を明確にする

コンピューターがホームページの情報を読み取りやすくするために、本のように階層構造を意識してコーディングをする必要があります。
一番おすすめなのが、デザインをプリントアウトしてセクション毎に鉛筆で囲んだりするとシミュレーションのトレーニングになります。

画像データの把握

コーディングする際は、画像を書き出しする作業も発生します。
マークアップで表現できないデザインは、画像で書き出しする必要もあります。どの拡張子（JPG・PNG・SVG）で書き出しするのかも考えておく必要があります。

共有されてない情報はすべて聞いておく

デザインデータ以外にも、共有されてない情報はたくさんあると思います。
以下にコーディング担当者が気になるポイントをまとめてみました。

• ヘッダーは追従するのか
• ブレイクポイントに指定はあるのか
• アニメーションの指定はあるのか
• マウスオーバー時の指定はあるのか
• 文字数に変更はあるのか

他にも色々とあると思いますが、構築に必要な情報はすべて把握しておきましょう。

HTMLをまとめてマークアップ

シミュレーションしたレイアウトを、HTMLでマークアップします。
ここで注意が必要なのは「途中でCSSを触らない」ことです。
「HTML → CSS → HTML → CSS」と、各セクションごとにCSSでスタイルをあてながらコーディングをすると、画面間の視線の動きが増えて時間がかかってしまうことがあります。
一気にHTMLを書いてしまって、次にCSSを書くことを推奨します。

命名規則を事前に決めておく

クラス名を先に決めておかないと、コーディングの途中で悩んでしまうので、スムーズに作業をすることができません。
HTML / CSS命名規則で有名なのが「OOCSS・BEM・SMACSS」です。
弊社では、これらの設計の良いとこどりをした「FLOCSS」を使っています。
これらのルールを活用することで、時間が短縮され、管理性、拡張性も補ってくれます。

記述量を減らす「Emmet（エメット）」の活用

コードエディターの拡張機能で「Emmet（エメット）」というものがあります。
例えば次のようなことができます。

「div」と入力してタブキーを押します。

すると、上記のようにタグで囲まれた状態で出力されます。
このように少ないタイピングで、必要なタグを生成できるので時間を短縮することができます。

CSSでスタイルをあてる

HTMLのマークアップが終わったらCSSでレイアウト部分をスタイリングしていきますが、ここではSassを利用した方が効率的です。
Sassを簡単に説明すると、CSSを管理しやすくしたもので、記述量を減らすことができます。
このSassはCSSに変換して出力する必要があるため、Gulp（ガルプ）の知識も必要になります。
SassとGulpの環境準備に手間はかかりますが、コーディングのスピードは上がりますので是非導入してみてください。

1〜3週してスタイルをあてると効率が良くなる

一つ一つのパーツをブラウザで表示確認しながらスタイルをあてていくと時間がかかってしまいます。
一度でスタイルを仕上げるのではなく、1〜3週を目安にスタイルをあてるほうが、効率が良くなることもあります。
例えるなら、次のような段取りとなります。

• 1週目：表示確認をせずに、ざっくりとしたレイアウトを作成する
• 2週目：フォントサイズやセクションの余白を整える
• 3週目：細かい装飾の作り込みをする

2〜3週目は表示確認しながら進めてOKです。
1週目の完成率が高いほど、2〜3週目は時短することができます。

JavaScriptでアニメーション部分の実装

JavaScriptは実装と検証を繰り返しながら行うこともあり、時間がかかることも踏まえて最終段階に対応します。
また細かい調整がある場合は、お客様とオンラインで表示確認をしならが進めた方が、効率が良いこともあります。

コピペできるスニペットを貯蓄しておく

Web制作で使われるJavaScriptアニメーションは、毎案件同じような実装が多いです。
スクロールアニメーション、ドロワーメニュー、アコーディオンメニュー、トップへ戻るボタンなど。
毎回コードを書いていたら時間がかかるので、頻繁に使うコードはコピペで済むようにストックしておきましょう。

ブラウザー確認・修正

コーディングしたデータをブラウザー（Chrome・Safari・Firefox・Edge・iPhone等）で確認します。
ブラウザーによってレイアウトが崩れていたりするので、入念にチェックをしてください。

チェックを念入りに行うことで時間短縮に繋がる

ブラウザーの表示確認は少々時間がかかりますが、しっかりと確認をせずに提出してしまうと、逆に仕事の量が増えてしまうこともあります。
修正作業はもちろん発生しますが、相手との連絡のやりとりも必要になるので、余計に時間がかかって作業に集中することが困難になってしまいます。
しかも相手は修正指示書を作成しなくてはいけないので、双方にとってデメリットしかありません。
修正が一つでもなくなるように念入りにチェックを行いましょう。

まとめ

コーディングの段取りとスピードを上げる方法についてまとめてみました。
ここで紹介した以外にも、便利なツールを活用したり、エディターの拡張機能をフルに活用すると、さらにスピードを上げることもできます。

ここまで読んで頂きましてありがとうございます。
よかったら参考にしてみてください。