Adobe Systemsが今春リリースしたAdobe Creative Suite 5(以下、CS5)は、同社が提供する最新のデザインツールを集めた統合パッケージである。同パッケージには、写真やイラストなどの基礎コンテンツの作成から、映像編集やDTP、Webサイトデザインに至るまで、デザイン分野におけるあらゆるニーズを満たすツールがラインナップされている。その中で、視覚的なデザインやCMSとの連携機能などによって標準規格に準拠したWebサイト構築をサポートするのがAdobe Dreamweaver CS5である。今回は同製品の開発およびプロダクトマーケティングを担当している同社Webセグメント グループプロダクトマネージャーのDevin Fernandez氏と、Adobe Systems Engineering プロダクトマネージャのChristian Halbach氏にお話を伺った。

右はAdobe SysemsのWebセグメント グループプロダクトマネージャを務めるDevin Fernandez氏、左はドイツのAdobe Systems Engineering GmbHに所属するCSグループ プロダクトマネージャのChristian Halbach氏

Fernandez氏によると、Dreamweaver CS5のリリースにおけるポイントとしては主に以下の3つのフィーチャーを挙げることができるという。

• CSSビジュアライゼーション
• CMS(Contents Management System)のサポート
• コーディングサポート

CSSのビジュアライゼーションはFirefox向けのデバッグツール拡張である「Firebug」をベースとしたもので、CSSファイルやCSSのパラメータを視覚的に編集できる機能を提供する。コーディングサポートではPHPのスクリプト機能が追加されており、スクリプトを編集やコードヒントなどが利用できる。CMS関連では新たにWordPressがサポートされたほか、Xoopsのサポート機能なども強化されている。これらのDreamweaver CS5の新機能や操作方法については、Adobe TVで公開されている各種チュートリアルなどで詳しく見ることができる。

Adobeでは、当初から上記のポイントに重点を置いて開発を進めてきた。しかし、ローンチの直前になって市場の状況にある変化が訪れた。それがHTML5およびCSS3へのニーズの増加である。同社ではこのニーズに応えるため、Dreamweaver CS5によるHTML5およびCSS3のサポートを拡張機能として無償提供することを決めたという。これが「Google I/O」カンファレンスで発表され、5月19日よりダウンロード配布が開始された「Adobe HTML5 Pack」である。

Fernandez氏は、HTML5 Packの開発における重点項目について次のように語っている。

「当初はHTML5およびCSS3によってWebサイトデザインのプロセスがどのように変わっていくのか、その具体的な形は見えていませんでした。しかしマルチスクリーンのデザインに対する影響力の大きさだけは核心が持てるものだったので、これがHTML5 Packの重要なポイントになりました」

実際、HTML5 Packではさまざまなディスプレイに対応したWebサイトデザインをサポートする便利な機能が提供されている。その代表がマルチスクリーンプレビューとメディアクエリで、これはサイズの異なる3つディスプレイ(たとえばスマートフォンとタブレットPC、デスクトップPCの組合せ)向けにそれぞれ個別のCSSを定義し、それをひとつの画面で同時にプレビューできるというもの。これによって、さまざまなデバイス向けにデザインが最適化されたWebサイトを構築できるようになる。HTML5 Packではそのほかにも、HTML5およびCSS3向けのコードヒントや、ライブビューでのvideo/audioタグのサポートなど、HTML5に準拠したWebサイト構築をサポートする諸処の機能が提供される。

Adobe HTML5 Packでは、ワンソース/マルチデバイスのデザインも可能になる。プレビュー画面を見ながらデザインできるだけでなく、個別のデバイスに対しての微調整も可能。右の画面では、メニューバーが、スマートフォン(上左)、タブレット(上右)、デスクトップPC(下)のそれぞれに最適化していることがわかる