コラム

制作部ディレクターの小川です。 入社以来、初めてのコラム執筆なので、手探りですがよろしくお願いします。

ディレクター職位ではありますが、主にHTMLのマークアップと、そこからの装飾と機能実装などを業務としているので、「仕様変更に臨機応変に対応するには」というテーマで書いていこうと思います。

ずばり、仕様変更に対応するには、それなりの引き出しと対応できるスケジュール、それと作ったものをひっくり返されても耐えられる悟りの心が必要です。 引き出しの数については、それこそ同業他社様のブログコンテンツ等を日ごろから収集し、実践しておくことも必要かと思います。

また、各仕様変更に対応するデザイナーは焦り、不安、怒り、疑問、寝不足などドロドロしたものを、自身のフィルターを通して美しい成果物を作成します。 対応してくれたデザイナーに対する労いの気持ちも必要です。

まあ、そもそもですが、なるべく仕様変更を発生させないよう、事前にクライアントと十分なコミュニケーションを実施し、コンセンサスを得ていることが大切です。

…

終わってしまいました。

…

すみません。 仕様変更にも種類や程度があり、一概には言えないので、もう少し掘り下げてみます。

■HTML×CSSレベルで仕様変更に備えるには Webページを作成するにあたって、伝えたい内容はHTML、装飾はCSSに分けることは常識ですがそのHTMLが適切にマークアップされていることが重要です。

正しくマークアップすることによりHTMLは、class名やID名が最小限で済み、見通しが良くなり、CSSも記述しやすくなります。

HTMLでいうマークアップは簡単に言えば大見出し、中見出し、小見出しそして本文などの文書構造の意味を持たせることになります。 ほとんどのテキストにはどんな役割があり、それを適切に記述することがマークアップになります。 HTMLの基礎ですね。

キレイに装飾することも大切ではあるのですが、それ以前にテキストの意味を適切に記述することが大切なのです。

適切にマークアップするには、まずクライアントがそのページで、何を伝えたいのか理解することが必要です。 主に弊社ではページ作成の指示は、パワポなどの構成表でいただいていますが大体構成表は仮の段階であることが多いです。 また、テストアップ・公開までのスケジュールが迫っていることも多く、早くデザイン～実装してしまいたいですが、まずはじっくり内容を文書構造として理解し、整理することが必要です。

■臨機応変に対応する具体的な方法 メンテナブルなCSSの方法については様々ですが、端的な技術的な方法よりは、設計概念を学ぶ必要があります。 一般的にオブジェクト指向を取り入れたOOCSS、BEM、SMACSSという3つのCSS設計概念があります。 これについては次回、改めてアウトプットしていきたいと思います。