TOP > ニュース&トピックス

ニュース&トピックス

 
 

TOPICS トピックス



(2)Dreamweaver CS4とプログレッシブ・エンハンスメント


プロツールとしてチューンナップされたDreamweaver CS4


Webデザイナーおよびマークアップエンジニアの業界標準ツールとして使用されているAdobe Dreamweaverの最新バージョンCS4は、Flashほど目立った新機能はないが、実際の制作現場で役立つ編集機能のアップデートや Subversion(ファイルのバージョン管理)クライアント機能搭載、UIの改良などによって、オーサリングツールとしてのユーザビリティが格段に向上した。国内の中小企業サイトの多くは、プロではない人たち(社内の担当者や職員など)が制作しており、IBMホームページ・ビルダーが事実上の標準ツールになっている。Dreamweaverはプロフェッショナル向けの製品であり、“お手軽”モードのような自動作成機能は搭載されていない。つまり、HTMLおよびCSSの基本的な知識を持っていないと使いこなすことは難しいといえるだろう。CS4では、JavaScriptの動作を「ライブビュー」で確認できるようになり、コーディングツールとしても強化された。複雑・高度化するWebサイト制作に(プロフェッショナル仕様のレベルで)対応した唯一のツールといっても過言ではない。


前向きのWebデザインを実践する


Dreamweaver CS4関連では4つのセッションとふたつのハンズオンが実施された。今回は、Dreamweaverの機能紹介やオペレーション・ノウハウよりも、Webサイト制作の新しいトレンドに注目。初日の午後におこなわれた菊池崇氏による「CSS 3と『プログレッシブ・エンハンスメント』。これからのWebに求められること。」は、まさにWebデザインの将来を考えるうえで参考になったセッションであった。実は、2008年11月に東京で開催されたWeb関連の国際カンファレンス「Web Directions East」でジェレミー・キース氏(Clearleft)やダン・セダーホルム氏(SimpleBits)、エリック・メイヤー氏などのトップエキスパートたちが、講演のなかで「プログレッシブ・エンハンスメント」について論じていたので、海外の動向には注視していたのである。


29日(木)に開催された菊池崇氏によるセッション「CSS3と『プログレッシブ・エンハンスメント』。これからのWebに求められること。」

菊池氏による講演では、「プログレッシブ・エンハンスメント」という設計思想の始まり、他の設計思想との違い、実例などが示され、CSS 3による制作効率の向上、視覚表現の可能性などを具体的なデモを交えながら解説。後半には、AppleのWebサイトに使われているナビゲーションバーを、画像を一切使わずCSS 3のみで再現するという実演をおこなった。CSS 3の機能とその表現力の素晴らしさを実践例としてみることができた。このデモのポイントは、IE 6などのレガシーなブラウザで閲覧してもアクセシビリティを損なうことはない、ということである。プログレッシブ・エンハンスメントの考え方は、あくまで“前向き”であり、CSS 3のような最新テクノロジーを活用できる環境があるなら、積極的に採用していく。ただし、未対応のブラウザでも操作不能や情報が欠けたりすることはないようにデザインするのである。


AppleのWebサイト(http://www.apple.com/)上部に配置されているグローバルナビゲーションをCSS 3で再現したデモンストレーション。画像は使わずCSS 3の記述だけで表現している



プログレッシブ・エンハンスメントについて書かれたA List Apartの記事「Understanding Progressive Enhancement」が概念理解の参考になる(http://www.alistapart.com/articles/understandingprogressiveenhancement/

マルチスクリーンのWebデザインを意識する


基調講演のレポートでも記したとおり、Webの閲覧環境はPCだけではなく、携帯電話からスマートフォン、携帯ゲーム機、ネット対応の家電など、急速に増えつつある。アドビシステムズは強力なエコシステムを構築し、あらゆるデバイスに対応した開発環境を提供するというビジョン実現に取り組んでいる。私たちが最新の技術を駆使して最高のエクスペリエンスを提供しようと考えたとき、注意しなければいけないのはローエンドかつレガシーな環境への配慮だ。ただ、ここでも「プログレッシブ・エンハンスメント」の設計思想がヒントになる。後ろ向きのデザインではなく、前向きのデザイン。Web制作でいえば、 IE 6などの古いブラウザに合わせるのではなく、標準ブラウザを基準にして実装、最新のブラウザにはCSS 3などの新しい技術を積極的に採用していく。ただし、IEで閲覧したときも最新の技術が適用されないだけで、情報はきちんと提供できる。この考え方は、すでに進行しつつある「シングルからマルチスクリーン」という変革に対して、私たちが今から実践できることではないだろうか。



[著者プロフィール]
境祐司(インストラクショナルデザイナー)●企業の教育プラン、マネジメント、講演、書籍執筆など。学校法人阿佐ヶ谷学園 高度情報化研究所所長。著書に『スタイルシートデザインのネタ帳』(監修)MdN、『速習Webデザイン Dreamweaver CS3』技術評論社、『Webデザイン&スタイルシート逆引き実践ガイドブック』ソシム、『Flash逆引きデザイン辞典』(共著)翔泳社、『Making a Rule for Web Design』ソーテック社、『CSSビジュアルデザイン・メソッド』毎日コミュニケーションズなど。
url. http://admn.air-nifty.com/monkeyish_studio/
Lifestream. http://friendfeed.com/monkeyish/



>>> Adobe MAX Japan 2009レポート(1)
>>> Adobe MAX Japan 2009レポート(2)
>>> Adobe MAX Japan 2009レポート(3)
>>> Adobe MAX Japan 2009レポート(4)


 
 
出版物のアフターケア

MdNの求人募集

MdN の求人情報

4コマまんが

ログイン

メールアドレス
パスワード

  • MdN編集部 ブログ課 MdN BLOG β
  • MdN書籍部の編集日記
  • MdNメールマガジンの登録・解除
  • 世界のガジェット総合ポータル ガジェットギャラリー