【インタビュー】

Webデザイナーは"デザインの目的"を明確にせよ - Adobe Dreamweaver担当者

1 急遽決定したDreamweaver CS5でのHTML5/CSS3サポート

    杉山貴章  [2010/08/18]

    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(下)のそれぞれに最適化していることがわかる

    関連したタグ

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン