教育コンテンツの制作現場から
境祐司
教育デザイナーとして学校、企業の講座企画、講演などの活動をおこなう。著書「改訂新版 Webデザイン基礎」(技術評論社)、「XHTMLマークアップ&スタイルシート リフォームデザインガイドブック」(ソシム)など
url: admn.air-nifty.com/books/
第4回
実践！サイト制作のアセット管理
－デザインのルールを決める－
前回はモダンパブリッシャーの概要について紹介した。プロフェッショナルツールではないが、CSSの段組ロジックやブラウザ対策をブラックボックスにして、ページビルディングを自動化。構造と見栄えを分離しながら、自由度の高いデザインワークを実現している。業務用のCMSもROI（投資対効果）の観点から、ページビルディングの大半を自動化している。この仕組みをつくるにはデザインのルール体系が必要となる。今回はWebデザインのルールについて取り上げてみた。
Webデザインツールからルールを学ぶ
Webページのスタイル「ルール」がどのようなものか知るには、市販されている専用アプリケーションソフトを検証すればよい。AdobeのDreamweaverやGolive、IBMホームページビルダーなどのメジャーソフトは、デザイン作業プロセスの多くを自動化している。CSSデザインを支援するツール群を見れば、どのようなルールを採用しているのか確認することができる。
Dreamweaver、モダンパブリッシャー（RapidWeaver、Sandvox）、CSSエディター（CSSEdit）という順に検証してみよう。
Dreamweaverのルール
Dreamweaver 8にはプロパティインスペクタや[CSSスタイル]パネル、CSSルール定義ダイアログボックス、コードインスペクタなどのツールが搭載されている【1】。CSSルール定義ダイアログなどは、プロパティ名ではなく日本語で表記されており、直感的に使うことができる。ただし、CSSの基礎知識がないと活用できない。つまり、初心者向けというより、扱いやすい初歩的な支援ツールととらえたほうがよい。プロフェッショナルツールとして評価されているアプリケーションらしい仕様になっている。
【1】Dreamweaver 8のCSSルール定義ダイアログ
モダンパブリッシャーのルール
Realmac Software「RapidWeaver」の仕様は初心者向けに合わせてあり、Dream
weaverほどの自由度はないが直感的なデザイン作業が実現されている。2カラムのレイアウトをする場合でも、スライダーバーや入力ボックス、チェックボックスなどのインターフェイスを操作するだけである【2】。
【2】RapidWeaver（Columns）のページレイアウト設定画面
Karelia Software「Sandvox」はツールバーのメニュー項目を選択しながらページを構築していく。メニュー項目は文字情報だけではなくアイコンも表示されており、「目で見て選択する」というユーザーフレンドリーなツールになっている【3】。
【3】Sandvoxのページオブジェクト（基本ページとページレット）メニュー
また、正しい（X）HTMLが記述されているかチェックするためのバリデータ機能も搭載されており、初心者向けとはいえ「Web標準」を意識するユーザーに対して配慮している【4】。
※RapidWeaverとSandvoxはMac OSX用のアプリケーションソフト
【4】Sandvoxのバリデータ（W3C仕様チェック）機能
CSSエディタのルール
macrabbit「CSSEdit」はCSSを記述するための専用エディタである【5】。Dreamweaver 8に搭載されているコードヒント（タグや属性の候補をドロップダウンリストで表示してくれる機能）と同様のものが使用でき、CSSエディタとして十分に活用できるが、視覚的なルール定義も行える。セレクタをフォルダで分類、グループ化できるため、ページの構造を視覚化することが可能なのだ。デザインが複雑になりCSSの記述が増えるほど威力を発揮する。さらにDreamweaverのCSSルール定義ダイアログボックスに相当する「専用インターフェイス」に切り替えて作業することもできる【6】。各スタイルのルール化もよくデザインされており、使いやすい。
【5】CSSEditでは複数の関連したセレクタをグループ化してメンテナンス性を高めることが可能
【6】CSSEditのスタイル設定インターフェイス
CSSの記述ルール（セレクタやプロパティ、値、「:」と「;」、カッコ、コメントなどの書き方規則）はアプリケーションソフトの環境設定を見ることで確認できる【7】。CSSEditの場合はとてもシンプルだが、わかりやすい。見やすい構文カラーは手打ち作業だけではなく、閲覧チェックにおいても重要である。
【7】CSSEditの環境設定（CSS構文カラーの設定）
オリジナルのルールを反映する
モダンパブリッシャーは初心者向けのツールだが「Web標準」に準拠しており、厳格なXHTMLおよびCSSをパブリッシュする。ひな型に沿って「ある程度、限定された範囲の中で編集する」のが特長だが、ひな型やプラグイン（直感的なデザインを実現するためのインターフェイス）を開発することも可能だ【8】。
【8】RapidWeaverのテーマ開発用ひな型「Blank Theme Template」(Tutorial 3.5.rwtheme)のファイル構成
小規模であれば、クライアントから依頼された案件をモダンパブリッシャーのワークフローで実行することもできる。プロジェクトに沿ったデザインルールさえ決定できれば、ひな型および専用のインターフェイスを用意して組み込めばよい。高機能CMSとは比較にならないが、CSSページビルディングの自動化が実現する。
RapidWeaverをオーサリングエンジンとして利用し、オリジナルのデザインルールを組み込む方法を紹介しておこう。RapidWeaverの「Theme（テーマ）」と呼ばれるページデザインのひな型を作成するには、「Blank Theme Template（ファイル名:Tutorial 3.5.rwtheme）」を利用する【9】。以下のサイトからダウンロードできる。
【9】「Blank Theme Template」のファイル一覧表
Theme Development :www.realmacsoftware.com/rapidweaver/manual/index.php?
n=AdvancedTechniques.ThemeDevelopment
この中には、XHTMLやCSSのテンプレートファイル、および格納フォルダなどが含まれている。構成は以下の通りである。CSSファイル「styles.css」をCSSEditで開くと、11のCSSモジュールがフォルダで分けられ視覚的な作業が可能となる（なお、プラグインを開発するための「RapidWeaver Plugin SDK」も提供されている）【10】。
【10】styles.cssをCSSEditで開くとCSSルールが視覚化される
オリジナルデザインルールをオーサリングエンジンで利用
作業完了後は組み込みである。オリジナルのテーマファイルTutorial 3.5.rwthemeを「RapidWeaver/Contents/Resources/Install/」にドラッグする。手順は簡単だ。RapidWeaverアイコンを右クリック、メニューから[パッケージの内容を表示]を選択、Contentsフォルダ>Resourcesフォルダ>Installフォルダの中に入れる。
RapidWeaverを起動してThemeアイコンをクリックすると、表示されるtheme viewerにオリジナルデザインのサムネール画像が組み込まれている。クリックすれば、すぐに適用される【11】。
【11】RapidWeaverのtheme viewer(左)にページデザインのサムネール画像が表示される
ここまで準備できたら、あとは（X）HTMLやCSSをまったく知らない人でも自由にカスタマイズしていくことができる。このようにデザインのルール化を十分に検討しておけば、ページビルディングの自動化はそれほど難しいものではない。ページデザインのバリエーションが少ない小規模なサイト構築でも効果がある。安価なCMSと連動させることも可能である。
本記事は『Web STRATEGY』2006年9-10 vol.5からの転載です
この号の特集など、ほかの記事の紹介はこちら！
『Web STRATEGY』最新号の情報はこちら！
Amazon.co.jpでの購入はこちら！
定期購読はMdN Squareで！
境祐司教育デザイナーとして学校、企業の講座企画、講演などの活動をおこなう。著書「改訂新版 Webデザイン基礎」(技術評論社)、「XHTMLマークアップ&スタイルシート リフォームデザインガイドブック」(ソシム)など
url: admn.air-nifty.com/books/
第4回
実践！サイト制作のアセット管理
－デザインのルールを決める－
前回はモダンパブリッシャーの概要について紹介した。プロフェッショナルツールではないが、CSSの段組ロジックやブラウザ対策をブラックボックスにして、ページビルディングを自動化。構造と見栄えを分離しながら、自由度の高いデザインワークを実現している。業務用のCMSもROI（投資対効果）の観点から、ページビルディングの大半を自動化している。この仕組みをつくるにはデザインのルール体系が必要となる。今回はWebデザインのルールについて取り上げてみた。
Webデザインツールからルールを学ぶ
Webページのスタイル「ルール」がどのようなものか知るには、市販されている専用アプリケーションソフトを検証すればよい。AdobeのDreamweaverやGolive、IBMホームページビルダーなどのメジャーソフトは、デザイン作業プロセスの多くを自動化している。CSSデザインを支援するツール群を見れば、どのようなルールを採用しているのか確認することができる。
Dreamweaver、モダンパブリッシャー（RapidWeaver、Sandvox）、CSSエディター（CSSEdit）という順に検証してみよう。
Dreamweaverのルール
Dreamweaver 8にはプロパティインスペクタや[CSSスタイル]パネル、CSSルール定義ダイアログボックス、コードインスペクタなどのツールが搭載されている【1】。CSSルール定義ダイアログなどは、プロパティ名ではなく日本語で表記されており、直感的に使うことができる。ただし、CSSの基礎知識がないと活用できない。つまり、初心者向けというより、扱いやすい初歩的な支援ツールととらえたほうがよい。プロフェッショナルツールとして評価されているアプリケーションらしい仕様になっている。
【1】Dreamweaver 8のCSSルール定義ダイアログ
モダンパブリッシャーのルール
Realmac Software「RapidWeaver」の仕様は初心者向けに合わせてあり、Dream
weaverほどの自由度はないが直感的なデザイン作業が実現されている。2カラムのレイアウトをする場合でも、スライダーバーや入力ボックス、チェックボックスなどのインターフェイスを操作するだけである【2】。
【2】RapidWeaver（Columns）のページレイアウト設定画面
Karelia Software「Sandvox」はツールバーのメニュー項目を選択しながらページを構築していく。メニュー項目は文字情報だけではなくアイコンも表示されており、「目で見て選択する」というユーザーフレンドリーなツールになっている【3】。
【3】Sandvoxのページオブジェクト（基本ページとページレット）メニュー
また、正しい（X）HTMLが記述されているかチェックするためのバリデータ機能も搭載されており、初心者向けとはいえ「Web標準」を意識するユーザーに対して配慮している【4】。
※RapidWeaverとSandvoxはMac OSX用のアプリケーションソフト
【4】Sandvoxのバリデータ（W3C仕様チェック）機能
CSSエディタのルール
macrabbit「CSSEdit」はCSSを記述するための専用エディタである【5】。Dreamweaver 8に搭載されているコードヒント（タグや属性の候補をドロップダウンリストで表示してくれる機能）と同様のものが使用でき、CSSエディタとして十分に活用できるが、視覚的なルール定義も行える。セレクタをフォルダで分類、グループ化できるため、ページの構造を視覚化することが可能なのだ。デザインが複雑になりCSSの記述が増えるほど威力を発揮する。さらにDreamweaverのCSSルール定義ダイアログボックスに相当する「専用インターフェイス」に切り替えて作業することもできる【6】。各スタイルのルール化もよくデザインされており、使いやすい。
【5】CSSEditでは複数の関連したセレクタをグループ化してメンテナンス性を高めることが可能
【6】CSSEditのスタイル設定インターフェイス
CSSの記述ルール（セレクタやプロパティ、値、「:」と「;」、カッコ、コメントなどの書き方規則）はアプリケーションソフトの環境設定を見ることで確認できる【7】。CSSEditの場合はとてもシンプルだが、わかりやすい。見やすい構文カラーは手打ち作業だけではなく、閲覧チェックにおいても重要である。
【7】CSSEditの環境設定（CSS構文カラーの設定）
オリジナルのルールを反映する
モダンパブリッシャーは初心者向けのツールだが「Web標準」に準拠しており、厳格なXHTMLおよびCSSをパブリッシュする。ひな型に沿って「ある程度、限定された範囲の中で編集する」のが特長だが、ひな型やプラグイン（直感的なデザインを実現するためのインターフェイス）を開発することも可能だ【8】。
【8】RapidWeaverのテーマ開発用ひな型「Blank Theme Template」(Tutorial 3.5.rwtheme)のファイル構成
小規模であれば、クライアントから依頼された案件をモダンパブリッシャーのワークフローで実行することもできる。プロジェクトに沿ったデザインルールさえ決定できれば、ひな型および専用のインターフェイスを用意して組み込めばよい。高機能CMSとは比較にならないが、CSSページビルディングの自動化が実現する。
RapidWeaverをオーサリングエンジンとして利用し、オリジナルのデザインルールを組み込む方法を紹介しておこう。RapidWeaverの「Theme（テーマ）」と呼ばれるページデザインのひな型を作成するには、「Blank Theme Template（ファイル名:Tutorial 3.5.rwtheme）」を利用する【9】。以下のサイトからダウンロードできる。
【9】「Blank Theme Template」のファイル一覧表
Theme Development :www.realmacsoftware.com/rapidweaver/manual/index.php?
n=AdvancedTechniques.ThemeDevelopment
この中には、XHTMLやCSSのテンプレートファイル、および格納フォルダなどが含まれている。構成は以下の通りである。CSSファイル「styles.css」をCSSEditで開くと、11のCSSモジュールがフォルダで分けられ視覚的な作業が可能となる（なお、プラグインを開発するための「RapidWeaver Plugin SDK」も提供されている）【10】。
【10】styles.cssをCSSEditで開くとCSSルールが視覚化される
オリジナルデザインルールをオーサリングエンジンで利用
作業完了後は組み込みである。オリジナルのテーマファイルTutorial 3.5.rwthemeを「RapidWeaver/Contents/Resources/Install/」にドラッグする。手順は簡単だ。RapidWeaverアイコンを右クリック、メニューから[パッケージの内容を表示]を選択、Contentsフォルダ>Resourcesフォルダ>Installフォルダの中に入れる。
RapidWeaverを起動してThemeアイコンをクリックすると、表示されるtheme viewerにオリジナルデザインのサムネール画像が組み込まれている。クリックすれば、すぐに適用される【11】。
【11】RapidWeaverのtheme viewer(左)にページデザインのサムネール画像が表示される
ここまで準備できたら、あとは（X）HTMLやCSSをまったく知らない人でも自由にカスタマイズしていくことができる。このようにデザインのルール化を十分に検討しておけば、ページビルディングの自動化はそれほど難しいものではない。ページデザインのバリエーションが少ない小規模なサイト構築でも効果がある。安価なCMSと連動させることも可能である。
本記事は『Web STRATEGY』2006年9-10 vol.5からの転載です
この号の特集など、ほかの記事の紹介はこちら！
『Web STRATEGY』最新号の情報はこちら！
Amazon.co.jpでの購入はこちら！
定期購読はMdN Squareで！
