米Microsoftはデザインツール群Expressionファミリーとして、2006年1月に技術評価版の制作向けツール「Microsoft Expression Graphic Designer（以下Graphic Designer）」と「Microsoft Interactive Designer（以下Interactive Designer）」を、続いて日本のマイクロソフトも2006年9月12日にはウェブサイトオーサリングツール「Microsoft Expression Web」を公開した（Expressionのサイトはこちら）。それぞれ技術評価版やベータ版のダウンロードは無償だ。正式版の発売時期や価格は未定である。

■表現力のある描画ツール

　Graphic Designer（旧コードネームAcrylic）はベクター、ビットマップ兼用のグラフィックツールだ。図形やフリーハンドのイラストをベクターパスで作成できる。パスで図を描く使用感はアドビシステムズのIllustratorと同じだが、パスで描いた図はラスタライズを実行するとビットマップとして補正やフィルタが適用可能になる。Illustratorの場合、ビットマップは配置画像として扱われ、直接編集はできない。それをやる場合Photoshopとの連携機能が必要になる。


Microsoft Expression Graphic Designerで作成したビジュアルのサンプル

　Graphic Designerは同一ツール内でビットマップを部分的に消去するような編集がかけられる。Macromedia Fireworksも同じ事ができるので、使い勝手としてはそちらの方が近い。Graphic Designer独特の特徴としては、各種グラデーションパターンやテクスチャーといった備え付けの効果が豊富な点と、ブラシストロークの表現力が高い点がある。特にストロークはハネやかすれの細かい調整が可能なうえにベクトルデータなので細かい修正にも対応する。高度なイラスト制作用に利用できるレベルだ。


特徴的なブラシストロークの例。ハネやインクの透明感を生かしたイラストが作れる

　機能をウェブなどのメディア向けグラフィックの作成に絞っているため、メニュー構成もシンプルになっている。図形に条件を与えてサイズや色をランダム化する機能や、ワープメッシュによるビットマップデータの変形機能もあり、短時間で見栄えの良いグラフィックを作るのには十分だ。


トーンカーブと合体したレベル補正の操作画面。ビットマップデータ向けの補正機能を複数搭載している

　アドビシステムズのCS製品群と比較したいところだが、CS製品群が印刷やウェブなどデザイン全般に使える機能を搭載しているのに対し、Expressionファミリーは機能をかなりウェブサイト制作向けに絞っているので単純に比べるのは難しい。同ファミリー全てXAML形式というXML言語で書かれたデータの書き出し機能を持っており、Windowsファミリーの.Netサービス群が新しく採用する予定のWinFXという根幹技術と連動するメディアが制作できるという。

　Graphic Designerで作成したインターフェースをInteractive Designerでリッチコンテンツ化し、レイアウトを動的に更新する仕組みはWindowsのアプリケーションサーバーが行うという流れが予想される。既に定評のあるWindowsによるウェブサービスへ、手軽にルックアンドフィールをもたらせることが強みのようだ。

■レイアウト画面が機能的なWeb

　Microsoft Expression Web （旧Microsoft Expression Web Designer）はHTMLとCSSをWYSIWYGスタイルで編集できるツールである。HTML4.01StrictからXHTML1.1までのスキーマを選択でき、不適合なコードがあれば互換性チェッカーによってコードをハイライト表示できる。 既存のCSS編集専用ツールと同様に、スタイルをプレビューしながらプロパティを設定する形で編集作業が進められ、最終的にできたスタイルをHTMLのレイアウト画面にドラッグドロップして適用する。


Microsoft Expression Web のCSSルール作成

　同じ形式のツールではアドビシステムズのDreamweaverが広く普及しているが、操作性はかなり近い。CSS編集画面を比較すると、Dreamweaver8（セレクタのCSSルール定義画面）が各プロパティを（背景色）（繰り返し）のように日本語で表記しているのに対し、 Expression Webでは(background-image)(background-repeat)とCSSのままの表記をルール定義に採用している。生のソースに慣れたユーザーなら、こちらのほうが使いやすいかもしれない。また、ページ編集画面のデザインビューでは、ブロックレベルタグでマークアップした部分をひとまとめで選択できるため、部分的な要素の入れ替え操作などが便利だ。

　

デザインビューでレイアウトした素材を選択すると、ブロックレベル要素のタグでマークアップした範囲全体が操作できる

　この機能がないツールでは、デザインビューの操作で終了タグが消えてしまうなど、ソースに何らかの影響が出るのは避けられなかった。WYSIWYGツールを使いながら結局コードは直接入力していたユーザーも、これなら信頼できるのでは。また、デザインビューのレンダリング状態はInternet Explorer7が基準となっているようだ。そのため、デザインビューの確認時は意図したレイアウトになっていても、IE6で確認すると余白の解釈にズレが生じる部分も出る。筆者としては制作の主力ツールとするならIE7が普及した後、としたい。

　またW3CのWCAG（Web Content Accessibility Guidelines）と米国リハビリテーション法508条（Section508）に基づいたアクセシビリティ基準に対応しており、読み上げブラウザへの対応度などを確認できる。マイクロソフトのツールだけに、ASP.NETとの連係してデータベースのテーブルをHTMLレイアウトの上に直接配置する操作が可能だという。