スムーズな開発につなげるHTMLコーディング

それでは積み木を作る際に留意すべき点は何でしょうか？
それは積み木の定義を明確にし、取り扱いを簡単にすることです。

積み木は「コンポーネント＝機能をもった部品」と言い換えることができます。
ページはコンポーネントの組み合わせでできています。

たとえば

• 記事ページ＝「見出し」+「説明文」+「画像」
• お問い合わせページ＝「見出し」+「入力エリア」+「送信ボタン」

この場合「」がコンポーネントに当たります。

コンポーネントの輪郭は明確に

レスポンシブ対応サイトの場合、HTMLは一機能につき一種類のみにするのが望ましいです。
PC用メニューとスマホ用メニューがHTML上に存在すると、処理も2回分発生します。
分ける場合は非表示要素の存在を明示し、開発が重複しないような構造、命名ルールを心がけましょう。

データの取得、送信方法によって「input、button」でなければならない場合、「aあるいはその他HTML」でも問題ない場合があります。
作成前に技術仕様を確認しましょう。

参考：WEBSASサイトで使えるボタンの例

いずれも同じデザインのボタンです。用途によって使い分けることができます。

<a class="c-btn--base" href="#" role="button">a</a>
<button class="c-btn--base" type="submit">Button</button>

ユーザーにタグの種類は関係ありません。
デザインは処理内容ではなく、ユーザー体験（アクションとその結果）を第一に行います。

属性により活性、非活性、読み取り専用と用途が分かれます。
送信ボタン押下時にデータを送信するもの、しないものを理解しましょう。

それぞれ属性ごとに異なるデザインを設定できます。
見た目をわかりやすく整えることで、開発時のミスも防ぎます。

デザイン側のスクリプトでIDを使用する場合、事前の確認が必要です。
すでにシステム側で決定している場合はその値を、デザイン側で付与する場合は命名ルールを確認しましょう。

開発側で変更があった場合、デザイン側のスクリプトにも修正が発生します。

DOM要素の取得にはdata属性を使用するなど、システム開発に影響しない手法をオススメします。

開発が進み、よりイメージが明確になると追加のご要望も増えてきます。

お客様

このページだけ見た目を他と変えたい

全体に影響するから構造は変えたくないな。積み木に貼るシールがあればいいのに

開発者

太字にする、少し間隔を開ける。任意の数だけカラムを作成する。など汎用的に利用できるクラスは想定より多めに設定しておきましょう。
デザイン時に使用しないクラスでも開発時に使用する可能性があります。

たとえば

• 幅指定（1%～100%）
• 背景色
• 文字サイズ　など

基本のコンポーネントにクラスを追加するだけでバリエーションが増やせます。

開発者W

灰色のボタンを赤色にするには？（直接スタイルを書き込もう）

4カラムを作成するには？（Webで検索するか）

開発者T

これでは開発者によって色やレイアウトに差が発生します。

ビジュアルでわかりやすくデザインの一覧をまとめたものが必要です。
コンポーネントの一覧、オプションデザインの一覧。
コピー・アンド・ペーストでHTMLが作成できるチートシートです。

成果物と一緒にそのガイドラインとして納品します。
これによりコンポーネントの定義を明確にし、不具合を防ぎます。

限られた時間内を考えると厳しい作業ですが、クオリティを上げるための大事な一手間。
普段の作業から自動化できる箇所を見つけて、+αに割く時間を増やしましょう

参考：WEBSASで使用中のガイドライン