【Adobe CS5】『Dreamweaver』『Fireworks』などウェブデザイン関連製品の新機能をハイライト

『Dreamwever CS5』

4月12日に発表されたアドビ システムズのデザイン製品群『Creative Suite 5』では、ウェブデザイン関連の新製品がまとめて『Adobe CS5 Web Premium』としてリリースされます。ここでは、『Web Premium』を構成する製品のうち、ウェブデザイナーが使用するアプリケーションをピックアップして新機能をご紹介します。

・CSSとPHPの対応を強化した『Dreamweaver CS5』
ウェブ向けのオーサリングツール『Dreamweaver CS5』では、スタイルシート(CSS)を用いたサイトの編集機能の強化、『WordPress』などブログメディアのコンテンツ管理システム(CMS)のデザイン作業で連携が必須となる、PHPのスクリプトを扱う機能の強化を図っています。

『Dreamwever CS5』のCSS編集機能

「CSSインスペクト」モードでは、ページのビジュアルから選択した個所が参照するCSSファイル、CSSに記述されたパラメータをパネルで確認でき、パネル上でパラメータを変更したり、CSSの有効/無効を切り替えることができます。

「ライブビュー」モードでは、現在公開されているサイトのURLを入力することにより、そのサイトのCSSを確認することもできます。他サイトを参考にこれからCSSを学ぶデザイナーには役立ちそう。新規ドキュメントを作成する場合には、CSSに関する日本語ヘルプも充実しています。

『Dreamweaver CS5』のPHP編集機能

PHPを扱う機能では、動的に生成されるものを含むPHP関連ファイルをすべて表示し、確認と修正が可能。コード画面でスクリプトを編集する場合、コードヒント機能によりクラスや関数の候補を提示したり、PHPの日本語ヘルプを参照することができます。

・ブラウザ依存は『BrowserLab』でチェック

『BrowserLab』で並べて比較

『Dreamweaver』本体にはブラウザのレンダリングエンジンを搭載しているため、「ライブビュー」のモードでブラウザ上の表示を再現することが可能ですが、CSSを使ったデザインで問題になるのが、ブラウザの種類やバージョンに依存してレイアウトや表示が異なること。こうしたブラウザ依存のチェックには、『CS5』から追加されたオンラインサービス『Adobe CS Live』に含まれる『BrowserLab』が利用できます。

『BrowserLab』で重ねて比較

『BrowserLab』は、ブラウザの互換性を検証できるオンラインサービス。複数台のパソコンや複数種類のブラウザを用意することなく、ウェブの制作環境1台で複数ブラウザでの表示チェックが可能になります。『Dreamwever』から起動することにより、テストサーバー上のコンテンツや、ローカル上のコンテンツをチェックすることも可能。対象とするブラウザを選択して、並べて表示を比較したり、重ねて表示の違いを確認することができます。

3月時点での対応ブラウザは下記のとおり。オンラインでサービスを提供することにより、今後リリースされるブラウザの新バージョンへのタイムリーな対応が期待できそうです。

Windows XP
Firefox 2.0/3.0/3.05、Internet Explorer 6.0/7.0/8.0、Chrome 3.0
Mac OS X
Safari 3.0/4.0、Firefox 2.0/3.0/3.05

・テンプレートとベクター編集が充実の『Fireworks CS5』

『Fireworks CS5』のテンプレート

ベクターとビットマップに対応したウェブ向けグラフィックツール『Fireworks CS5』では、デフォルトで26種類のテンプレートを用意。パソコンの各種画面サイズに合わせたテンプレートのほか、『iPhone』の画面サイズに合わせたテンプレートも用意されています。

『Fireworks CS5』の「ストロークの整列」機能

ベクターのグラフィック編集では、太さのある線について端点を起点にして線が内側、外側、中央に配置するように編集する「ストロークの整列」機能や、線を破線にするプロパティ、拡大するとエッジがぼやけていた部分を同じ色でシャープに描画する「ピクセルにスナップ」の機能などが追加されました。

ほかにも、選択したテキストと同じ属性のテキストを検索、ハイライトしてまとめて属性を変更できるテキスト編集機能、オーサリングツール『Flash Catalyst』と互換性のあるFXG2.0形式のファイル書き出し、色や濃度(色合い)、グラデーション、パターンに名前を付けた『スウォッチ』と呼ばれるパレットをプロジェクト内で共有する機能などが追加されています。

・最新デバイスに対応する検証環境『Device Central CS5』
携帯電話やスマートフォンなどデバイス上でのウェブ表示を検証する環境『Device Central CS5』では、多様化するウェブの表示環境に対応する機能を追加しています。

『Flash』の実行環境は最新のプレーヤーであるFlash Player 10.1とFlash Lite 4に対応。スマートフォンのインタフェースとなる加速度センサや地理位置情報、マルチタッチの動作も再現します。

デバイスの表示サイズや実行環境に関するデバイスプロファイルの情報は、ユーザーがカスタマイズしてユーザー間で共有できる機能を追加。今後登場する新端末についても、タイムリーに検証環境を追加・共有することが目的です。

■関連記事
アドビ システムズがデザイン・開発向けソフト製品群『CS5』を発表
【Adobe CS5】より使いやすくより易しく『Flash Professional CS5』はクリエーターの未来を開く
【Adobe CS5】バージョン15はダテじゃない!『Illustrator CS5』はベクターを超えたベクター!?

  1. HOME
  2. ガジェ通
  3. 【Adobe CS5】『Dreamweaver』『Fireworks』などウェブデザイン関連製品の新機能をハイライト

shnsk

宮原俊介(エグゼクティブマネージャー) 酒と音楽とプロレスを愛する、未来検索ブラジルのコンテンツプロデューサー。2010年3月~2019年11月まで2代目編集長、2019年12月~2024年3月に編集主幹を務め現職。ゲームコミュニティ『モゲラ』も担当してます

ウェブサイト: http://mogera.jp/

TwitterID: shnskm

  • ガジェット通信編集部への情報提供はこちら
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。