はじめに

さあ、作るぞ！その前に！

実際に作り出す前に、確認と決め事、準備を行うのは大事。

特にチームで制作を行う場合、ここを怠ると後で苦しみます、確実に。

特にマークアップその前に、と言った感じの話が多いです。

ざっくりですが、まとめ。

制作前に決めたいこと

どこまで対応するのか、どこまでは切り捨てるのかを決めます。これは案件によって変わってきますね。
また、開発環境もこの時点でしっかり足並みを揃えておきます。

着地点を決めた上で制作しないとコーディングの際にズレが発生したり、
無駄な努力も発生します。
やること、やらないことを決めちゃいます。

コーディングの記述にルールを決めます。

マークアップする人が増えれば増えるほど、癖が後々思いもしない
不具合を起こします。
防ぐためにもしっかり書き方はなるべく細かいところまで統一します。

以下に参考になりそうなガイドラインも載せておきます。

Google HTML/CSS Style Guide まとめ - 天下のGoogleさんのガイドラインの和訳

コーディングガイドライン HTML5版 ver1.0 - 大阪の制作会社Qriptのガイドライン、分かりやすい

簡単なサイトの場合や、
BootstrapなどのCSSフレームワークを使う場合のclass名をつけるだけで
UIが壊れる場合以外は、
カンプをチェックし、問題なければマークアップしていきます。

ユーザーして移動していく導線を決めます。

特に、大規模に複雑なサイトになる程導線も複雑になります。
しっかり具現化しておくことが重要です。

サイト内に入れる文章です。

クライアントからもらえる場合はいいのですが、
カタログ、雑誌からこちらでリライトする場合もあります。

先に考えてメモ帳などにまとめておいた方が、後からコピペで貼り付けるだけなので
コーディングの手を止めて考えなくていいので楽だと思います。

やりながら考えるとしんどいです。

今は便利なものがありまして、モジュール一覧ページの自動生成ツールがあります。

残念ながら、まだ試せてませんが、まとめておきます。

Hologram — Style Documentation Build System

いかがでしたでしょうか？
準備あれば憂いなし、という言葉があるように制作においとも準備が必要です。
もちろんすでに会社で働いている方には当たり前のことばかりでしょうが。

面倒かも知れませんがこれらの事前準備は、作業中に中断してのミーティングを減らすため、
必ず結果的に効率も上がります。

私はスクールに通っている頃から、実際の制作現場を想定して準備を行い、
チームで制作を心がけていました。
今学ばれている方はこれらを踏まえての制作をすることでより実戦に近い経験を得られるのではないでしょうか。