はじめに
さあ、作るぞ！その前に！
実際に作り出す前に、確認と決め事、準備を行うのは大事。
特にチームで制作を行う場合、ここを怠ると後で苦しみます、確実に。
特にマークアップその前に、と言った感じの話が多いです。
ざっくりですが、まとめ。
制作前に決めたいこと
制作仕様書
どこまで対応するのか、どこまでは切り捨てるのかを決めます。これは案件によって変わってきますね。
また、開発環境もこの時点でしっかり足並みを揃えておきます。
- PC どのブラウザのどのバージョンまで対応するのか
- スマホ 対応機種を設定、なるべく実機で確認
- HTML、CSSのバージョンはどうするのか
着地点を決めた上で制作しないとコーディングの際にズレが発生したり、
無駄な努力も発生します。
やること、やらないことを決めちゃいます。
コーディングルール
コーディングの記述にルールを決めます。
- インデントするのか
- インデントは何スペース分か
- class、IDのルール決め
- コメントの入れ方
マークアップする人が増えれば増えるほど、癖が後々思いもしない
不具合を起こします。
防ぐためにもしっかり書き方はなるべく細かいところまで統一します。
以下に参考になりそうなガイドラインも載せておきます。
参考になりそうなガイドライン
Google HTML/CSS Style Guide まとめ - 天下のGoogleさんのガイドラインの和訳
コーディングガイドライン HTML5版 ver1.0 - 大阪の制作会社Qriptのガイドライン、分かりやすい
新人コーダーに知っておいて欲しい命名則の考え方[画像・ID・class名]｜クロノドライブ - 具体的な命名規則の例が表にされていて非常に参考になる
デザインカンプ
簡単なサイトの場合や、
BootstrapなどのCSSフレームワークを使う場合のclass名をつけるだけで
UIが壊れる場合以外は、
カンプをチェックし、問題なければマークアップしていきます。
遷移図
ユーザーして移動していく導線を決めます。
特に、大規模に複雑なサイトになる程導線も複雑になります。
しっかり具現化しておくことが重要です。
webライティング
サイト内に入れる文章です。
クライアントからもらえる場合はいいのですが、
カタログ、雑誌からこちらでリライトする場合もあります。
先に考えてメモ帳などにまとめておいた方が、後からコピペで貼り付けるだけなので
コーディングの手を止めて考えなくていいので楽だと思います。
やりながら考えるとしんどいです。
スタイルガイド自動生成ツール
今は便利なものがありまして、モジュール一覧ページの自動生成ツールがあります。
残念ながら、まだ試せてませんが、まとめておきます。
FrontNote -Node.js StyleGuide Generator-
Hologram — Style Documentation Build System
まとめ
いかがでしたでしょうか？
準備あれば憂いなし、という言葉があるように制作においとも準備が必要です。
もちろんすでに会社で働いている方には当たり前のことばかりでしょうが。
面倒かも知れませんがこれらの事前準備は、作業中に中断してのミーティングを減らすため、
必ず結果的に効率も上がります。
私はスクールに通っている頃から、実際の制作現場を想定して準備を行い、
チームで制作を心がけていました。
今学ばれている方はこれらを踏まえての制作をすることでより実戦に近い経験を得られるのではないでしょうか。