ABOUT

「DI-CORDING」(ディーアイ・コーディング)とは、
デザイン先行型のWebサイト制作に特化したコーディング方法で、
DIは、「意匠(Design)の注入(Injection)」を意味します。

自ら作成した汎用的な語句による「命名雛形」に対し、
サイトごとの異なるデザインを「後入れ」するこで、
コーディングの効率化がおこなえます。

DI-CORDING イメージ図

例えば、主要コンテンツのナビゲーションの名前を「.gnav-main」と定めた場合、サイトごとにナビゲーションの形状や色は変わっても、「.gnav-main」の役割は同じです。
つまり、役割や機能に与えた命名そのものは異なるサイトで再利用できます。

こういった「命名の雛形」を準備しておくことで、サイト構築ごとに似たような名前を一から考案し、ファイルを準備する必要が無くなります。

「命名はサイトによりけり」と思っていても、よくよく洗い出すと「頻繁に使うもの」は限られています。 また、その数はサイト種別ごとに必ず「頭打ち」します。

「DI-CORDING」は、デザインされた部品の提供をおこなうタイプの「CSSフレームワーク」を逆の発想で捉えたもので、デザインパーツの雛形をつくるのではなく、業務の特性に応じた「汎用的な命名」を確定させることで、「デザインの後入れ」を可能にします。

自身の環境や慣例に基づいて作成した「命名雛形」と、それを含むスターターキットの存在は、今後制作する全てのサイト構築において制作速度向上の効果を発揮します。

STEP

DI-CODINGをおこなうためのステップは以下の3つです。

1

List Up

デザイン先行型のサイトでよく登場する役割や部品をリスト化します。

例えば、コーポレートサイトの場合であれば、ヘッダーのロゴやサイト名、電話番号などの問い合わせ情報、コンテンツの案内のためのメインナビゲーション、サブナビゲーション、ローカルナビゲーション、パンくずリスト。フッター用のロゴやサイトマップ、コピーライトなどです。

上記で挙げたものは、ほぼ、コンテンツ以外のサイト定型部分のもので、これらは制作者の経験上「顧客が何を必要とするのか」や、「大体のサイトで必要なものは何か」は熟知していると思います。
自身の環境において、これらの要素や役割をリストアップし、どのようなデザインであっても対応できるような汎用的な命名を定めます。

2

Make KIT

独自のスターターキット(制作用の命名雛形)を作成します。

いつも使用しているCSS設計手法があるならば、その内部に、ステップ1で作成したリストをもとに、制作用のパーツ群を作成します。
Sassなどのプリプロセッサを利用しているのであれば、想定の最大のものを準備します。
importerファイルにおいて、プリプロセッサのコメントアウトをおこなう事により、不要なものはCSSへの出力をしない。といった制御が簡単におこなえるからです。

定型部分の汎用的なHTMLファイルの雛形も付属させると、CSSプロパティの記述からコーディングを開始できるようになります。

3

Works

実際のサイト制作で、「命名雛形」が組み込まれたスターターキット(DI-KIT)を活用します。

デザインを見合わせて必要な設計をおこない、部品の設計に差し掛かった時、ステップ2で作成したものの中に「該当する役割のパーツ」があれば、それを利用し、なければ追加します。

実制作を通じて新たに有用なものが見つかった場合には、汎用化してキットに組み込みます。
これを繰り返す事により、常に効率化のための改善がおこなわれる事になります。

BENEFIT

これらのアプローチにより、時間経過と共にチームメンバーの認識が一致しはじめ、
イニシャルのサイト制作速度が向上し、運用フェーズでの読み解き時間が短縮できるようになります。

DI-CORDING イメージ図

これらはそのまま、顧客のベネフィット向上や、制作者の「望まない間接時間」のカットに繋がります。