【Web制作の現場】コーディングする際の作業の効率化
そもそも、なぜ効率化をする必要があるのでしょうか。
ここで言う効率化とは「コーディングする際の効率化」になります。
僕の場合、理由は3つあります。
- 自分にしかできない仕事をするため（脳みそを使うため）
- 同じ作業の手間を省くため
- 浮いた時間を他の作業、もしくは勉強にあてるため
です。
作業における効率化は、日々研究を重ねています。
その中で、僕がいままで培ってきた経験から下記の5つを使いこなせると、
大きく作業効率が上がることがわかりました。
これらを組み合わせて作業をすることで、格段に作業がはかどります。
前々から言っていますが、作業は準備が大事。
設計に8割、実装で2割。という時間配分。
段取り八分です。
僕の場合、作業の8割は設計です。
この設計を行う時に「エクセル」を利用します。
本日は、GW特別企画としてｗ
僕のコーディング設計手順をご紹介しましょう。
以外に、アナログ感が重要だったりします。
じっくりとご覧ください。
コーディング設計手順
効率よく仕事をこなすには、何事も準備が必要です。
段取り八分とよく言いますが、ほんとにそう思います。
特にコーディングの場合は、なるべく考える時間を増やした方が圧倒的に作業効率があがります。
設計をすることによって、頭の中でほぼマークアップが終わっている状態になります。
用意するもの
- 蛍光ペンいろいろ
- 付箋いろいろ
- ボールペンいろいろ
- 紙
- ガムｗ
- 広い机
- その他、必要に応じて。
設計手順
設計手順は下記の通り。
これは貴重ですので、ぜひ覚えておいてください！
制作の役に立つはずです。
（１）デザイン(案)をカラーでプリントアウト
コーディング設計は、まずはデザイン(案)をプリントアウトすることから始まります。
紙に直接書き込んで行くことによって、
- 頭の中が整理される
- 知らない間に頭の中でマークアップができるようになる
などのメリットが挙げられます。
(案)と書いているのは、まだデザインがFIXされていない状態であっても、
大枠は基本変わらないことが多いと思います。
ですので、デザイン案の状態であっても、設計を進めることができます。
先行して設計をやるメリットとしては、
- 待ちの状態をなくす
- 積極的に案件に関われる（受身じゃなくなる）
- コーディング上不都合なところが出てきたら早急に相談できる
- 実際にPC上でコーディングする前に不明点を洗い出せる
などが挙げられます。
ということで！
設計の第一歩はデザイン(案)をカラーでプリントアウトということを覚えておきましょうｗ
（２）要素の洗い出し
具体的には下記の要素とパターンを洗い出す。
白版があれば、書き出していく。
プリントアウトしたデザイン案に付箋とマーカーを使って記述していく。
ここでは、今まで勉強してきた「HTMLを構成する7つの基本構成要素」を中心に見ていきます。
- 見出し（ブロック要素）
- 段落（ブロック要素）
- リスト（ブロック要素）
- 表組み（ブロック要素）
- 画像（インライン要素）
- リンク（インライン要素）
- グループ化（ブロック要素・インライン要素）
- 見出し
- h1, h2, h3, h4, h5, h6
- 段落
- p
- リスト
- ul, ol, dl
- 表組み
- table
- 画像
- img
- リンク
- a
- グループ化
- div, span
（３）再度レビューする
一度、全体を見渡せたら再度頭から要素を見ていく。
よくにたモジュール群や重複箇所などが見つかれば、調整。
（４）詳細の値をピックアップ
ここまでくれば、あとは、具体的な数値などを書き込んでいく作業になります。 書き出す値としては、
- 色(画像)
- フォントサイズ
- フォントカラー
- line-height
- 各要素のmargin/padding
- 罫線(px/線種/色)
- 各ブロックのパターン
- その他のパターンがあれば、パターンの洗い出し
など。
（５）ID/CLASSの設定
書き出した要素をもとに、ID/CLASSを設定していく。
（６）マークアップ
モジュールリストを元にマークアップ。
イレギュラーなものをは、その都度検討していく。
という感じです。
長々となりましたが。。。
効率化の第一歩は、考えること。
実装においては、設計をきちんとすること。
これにつきます。
何も考えずにマークアップに入ると、必ず後戻りが発生するのです。
これこそ、時間のムダなんですね。
ですので、実装に入る前にしっかりと考える！
これを覚えておいてくださいね。
次回は、便利ツールのご紹介を行いたいと思います。
お楽しみに！
