CSS概要編

-6 ワークフロー

サイト作成の前に

このような状況の中、今後 多くの企業において、旧来の仕様で作成されたサイトの文書構造を見直して アクセシビリティに配慮したり、ページをメンテナンスしやすい仕組みに作り上げたりというリフォーム工事の様なプロジェクトが増えるといわれています。

サイト制作の発注者は、当然サイトを発信するターゲットを決めていることでしょうが、それと同時に、「サイトの仕様」や「のちのちのサイトの方向性」なども念頭に置いておく必要があるかもしれません。
「サイトの仕様」というのは、例えば、高齢者・障害者への配慮、あるいは 見やすさ使いやすさの指針です。それが決まれば レイアウトなどのデザインの方向性も定まります。
また、楽しさや驚きといった感情に訴えるリッチコンテンツへの指針を考えるケースもあるでしょう。そこから 動画やサウンドといったエレメントをどう位置づけていくかが検討されていきます。
また、集客・宣伝のための検索エンジン対策なども この「決めるべき仕様」に含まれます。

それら発注者の要望を加味しつつ、制作者は「作成すべきサイトの仕様」を考えます。
そこで、前述してきたような「構造言語」をどうするか、「表現言語」をどうするか、そのような方針が決まってきます。
また、「のちのちのサイトの方向性」をどうしたいかにより すべての方針も変わってくることでしょう。
Web環境の変化にも対応できるようにすることがサイトの方向性であれば、Web標準準拠を第一の理念にすべきでしょうし、また 各ページごとにデザインが変化するコンテンツの場合には CSSの使用メリットは少ないので避けた方がよいでしょう。

サイト作成のワークフロー

上記のような 事前の制作方針の検討は重要です。
旧来の手法での作成の方がより良いというケースも 当然あり得るわけです。
Web標準には様々なテクノロジーが含まれているため、XHTML+CSSで作成しさえすれば「標準」ということでは決してないのです。

また、CSSで工夫さえすれば「標準」なのではないということも言うまでもありません。
あくまでも正しいXHTMLの存在の上にCSSの意義があるからです。CSSを効率的かつ有意義に記述するためにも 構造を意識したマークアップが必要となってきます。

マークアップというのは、文書を構成している要素の意味を コンピュータープログラムに伝えるための作業です。
文書を構成している要素というのは、見出しや段落、強調箇所などの情報単位のことです。
「ここは記事の見出し」「この文章で強調したい部分はここ」と、コンピュータープログラムに対し伝えるわけです。
これは、前述したような「アクセシビリティの良いページ」を作るために欠かせない実践的な作業です。

また、伝えたい内容というのは、このマークアップ作業時にすべて組み立てられるはずですので、後は それをCSSによって味付けしていくだけといえます。
各コンテンツの配置、装飾、またクロスブラウザなデザインにするためのCSSハックの設定など、制作フローの多くは CSSの設定と調整に費やされるでしょう。

サイト全体のリニューアルというのは、サイト規模が大きければ大きいほど時間的にも費用的にも大変です。
ですが、部分的に従来のHTML構造を見直しながら、それに応じたCSSを積み重ねていく、そのようなコンポーネント化を実施することで、折々に発生するメンテナンス作業を格段に効率化することが可能です。

また、例えば、ひとつのCSSファイルを手直しするだけで、全くページデザインの違うページに直ちに変更することも可能なので、ユーザーに常に新鮮な感動を与えることも容易になります。
制作サイドにとって、構造と見栄えを分離することの最大のメリットがこのメンテナンス性の向上と言えます。

Web標準のメリットとは

CSS概要編のまとめとして Web標準のメリットをまとめます。

1 メンテナンス性の向上
(X)HTMLで構造化しCSSで視覚表現を統一的にコントロールすることで、ページ制作の負担が大幅に軽減される。

2 アクセシビリティの向上
正しい(X)HTMLとCSSで制作することで、様々なブラウジング環境に対応したWebページにすることができる。

3 SEO(検索エンジン最適化)対策
適切なマークアップにより「人間だけでなくコンピューターにもわかりやすいページ」を作ることができる。

4 ファイルサイズの低減とサーバスペースの節約
合理的なソースの記述により、サーバ負荷が軽減する。

5 後方互換性と前方互換性の確保
過去の環境での表示の確保と、将来的な再利用性や運用性がかなりの程度担保される。

Web標準に準拠したページを作成するということが、ただ単に策定された仕様に忠実に則るという意味ではなく、このようにあらゆる立場・環境において合理的であるということがお分かりいただけたなら幸いです。