ABOUT
「DI-CODING」（ディーアイ・コーディング）とは、
デザイン先行型のWebサイト制作に特化したコーディング方法で、
DIは、「意匠（Design）の注入（Injection）」を意味します。
自ら作成した汎用的な語句による「命名雛形」に対し、
サイトごとの異なるデザインを「後入れ」することで、
コーディングの効率化がおこなえます。
たとえば主要コンテンツのナビゲーションの名前を「.gnav-main」と定めた場合、サイトごとにナビゲーションの形状や色は変わっても、「.gnav-main」の役割は同じです。
つまり役割や機能に与えた命名そのものは、異なるサイトで再利用できます。
こういった「命名の雛形」を準備しておくことで、サイト構築ごとに似たような名前を一から考案してファイルを準備する必要が無くなります。
「命名はサイトによりけり」と思っていても、よくよく洗い出すと「頻繁に使うもの」は限られており、その数はサイト種別ごとに必ず「頭打ち」します。
「DI-CODING」は、デザインされた部品の提供をおこなうタイプの「CSSフレームワーク」を逆の発想で捉えたものです。
デザインパーツの雛形をつくるのではなく、業務の特性に応じた「汎用的な命名」を確定させることで、「デザインの後入れ」を可能にします。
あなたの環境や慣例に基づいて作成した「命名雛形」と、それを含むスターターキットの存在は、今後制作する全てのサイト構築において制作速度向上の効果を発揮します。
STEP
DI-CODINGをおこなうためのステップは以下の３つです。
List Up
デザイン先行型のサイトでよく登場する役割や部品をリスト化します。
コーポレートサイトの場合を例にすれば、ヘッダーのロゴやサイト名、電話番号などの問い合わせ情報、コンテンツの案内のためのメインナビゲーション、サブナビゲーション、ローカルナビゲーション、パンくずリスト、フッター用のロゴやサイトマップ、コピーライトなどです。
上記で挙げたものは、ほぼコンテンツ以外のサイト定型部分にあたり、これらは制作者の経験上、「顧客が何を必要とするのか」や「大体のサイトで必要なものは何か」として熟知していると思います。
自身の環境において、これらの要素や役割をリストアップし、どのようなデザインであっても対応できるよう汎用的に命名してください。
Make KIT
独自のスターターキット（制作用の命名雛形）を作成します。
いつも使用しているCSS設計手法があるならば、ステップ１で作成したリストをもとに、その設計手法内部に制作用のパーツ群を作成します。
Sassなどのプリプロセッサを利用しているのであれば、想定される最大数を準備します。
「@import」のみを記述した「importerファイル」を作成し、ファイル内でimport文をコメントアウトすることにより、「不要なものはCSSへの出力をしない」といった制御が簡単におこなえるからです。
定型部分の汎用的なHTMLファイルの雛形も付属させると、CSSプロパティの記述からコーディングを開始できるようになります。
Works
実際のサイト制作で、「命名雛形」が組み込まれたスターターキット（DI-KIT）を活用します。
デザインを見合わせて必要な設計をおこない、部品の設計に差し掛かった時、ステップ2で作成した中に「該当する役割のパーツ」があれば利用し、なければ追加します。
実制作を通じて新たに有用なものが見つかった場合には、汎用化してキットに組み込みます。
これを繰り返す事により、常に効率化のための改善がおこなわれる事になります。
BENEFIT
これらのアプローチにより、時間経過と共にチームメンバーの認識が一致しはじめ、
イニシャルの制作速度が向上し、運用フェーズでの読み解き時間が短縮できるようになります。
これらは顧客のベネフィット向上や、
制作者の「望まない間接時間」のカットにそのまま繋がります。