デザインによる表現を大切にしたマークアップをしているときに頭の中で考えていることをまとめました。
共通のCSSを利用するのかを判断
1.Webページのデザインから情報設計の意図を逆引きし、役割ごとにグループ化します。
2.既存のフレームワークの中から、同じ役割を担っているパーツを探します。
もし、同じ役割を担っているパーツがあった場合は、ビジュアル表現を再現できるかを検討します。
同じビジュアル表現ができる場合にはフレームワークを転用あるいはCSSの一部をオーバーライドします。
3.他のサイトでも使えたら便利なんじゃないかというパーツではないか？
既存のフレームワークにはないが、すべてのサイトで共通して利用することが可能な場合にはフレームワークに新しく実装します。この際には、このサイト特有のデザイン意図を排除した部分のみをフレームワークに実装し、このサイト特有のデザイン意図はCSSをオーバーライドして実装します。
4.他のサイトでは使えないけど、このサイトでは使えるんじゃないか？
別のサイトでの再利用性は低いが当サイト内で再利用する可能性がある場合はサイト内共通パーツとして実装します。id名やclass名を親からの継承から外します。
5.このページでしか使えないパーツ
このページのこの場所にあることに価値があるパーツの場合はこのページ用のid名やclass名で実装します。
上記で、フレームワークを転用するか新規に実装するのかという点と、id名とclass名が決まります。
ビジュアルと情報の切り分け
imgタグ？background？
このデバイス上での『ビジュアル表現』なのか、ユーザーに認識してほしい『情報』なのかによって、imgにすべきか、backgroundにすべきかを判断します。
どの要素にpaddingやmarginを付ける？
デザイナーの意図する余白感、空気感から各要素のトーン＆マナーを設定していきます。
* paddingやmarginはどの要素に持たせるか？
* line-heightの範囲なのかpaddingの範囲なのか？
今後の更新を想像し、拡張性を与える
- どこがどのように更新される可能性があるのか？
- パーツが増える、減る、書き換えられるに耐久できるか？
- marginはrightとbottomだけを指定することで大枠対処できる。
具体的にHTMLを記述する
・文言間違えがないか確認しながら入力する。
実際のHTML&CSSの記述と考える時間のバランス
順番どおりにやるなら
- デザインをじっくりと眺めて役割ごとのグループを考える。
- デザインデータに余白を書き込んで、デザイナーの意図を認識してみる。
- いくつかのまとまりごとにHTMLとCSSを作成しながら、ブラウザで動作確認する。
正直、１．と２．の時間がマークアップじゃないじゃんという感じはする。けど、実際ここが重要。外部の人間だとここをやってくれないからめちゃくちゃなものやあとから更新できないものが上がってくる。
実業務としてやるなら
- デザイン上の文字情報をテキストファイルに書き写す。書き写しつつ、頭の中でマークアップを思考。
- 書き写し途中で固まった部分はHTML化。そのままCSSもメモ書きで記述。画像もスライス。
- それがひと段落着いたら１．に戻る。
- ある程度できてきたら、ブラウザでCSSの動作確認。CSSを本詰めする。