連載:Webオーサリングツールを使ってみよう(1)

有償版3大Webオーサリングツールの特徴とは?

セカンドファクトリー 新谷剛史

2007/3/1

Webオーサリング専用の開発ツールのホームページ・ビルダー、Dreamweaver 8、Expression Webを解説。CSSによるレイアウトや表現力で優れているのはどれだ

 毎年、AjaxやWeb2.0のような、それまでのサイト/システム制作に変化をもたらすトピックスが登場する。たとえWeb制作者の負荷を上げる要素であったとしても、積極的に現場へ取り入れなければならないことも多いはずだ。しかし、だからといってこれまでのサイトやシステム制作が不要になるわけではない。

 これまでのWebサイトやWebシステムの制作が 「当たり前のもの」となり、新しいものや考え方が加わっていく、ということが多い。そのため、効率よく作業をこなすことで新しい手法を学び、取り入れる時間を作り出さなくてはならないのだ。

 ここでは効率よく作業をこなすべき要素として、制作効率の向上が常に求められているHTMLやCSSなどの「静的なWebサイト制作」について考えていく。アプリケーションへの理解を深めることにより、作業時間を削減できるWebサイト構築環境の情報や、制作環境の動向や必要性が伝われば幸いだ。

 「専用の開発ツールが使われる理由」を再確認する

 HTMLやCSSといった静的Webコンテンツの開発を行っている方はどのようなソフトを使用して開発を行っているだろうか。

 テキストエディタを使用されている方、アプリケーションの開発環境でそのままHTMLも制作されている方、今回取り上げるAdobe Dreamweaver 8Microsoft Expression WebIBM ホームページビルダーなどのWebサイト構築環境を使用している方などさまざまな方がいるだろう。

 HTMLやCSSをコーディングすることだけを考えた場合には、テキストエディタやアプリケーション構築環境で制作しても当然問題はない。「どうせ完成したHTMLやCSSは、表示確認のためブラウザでチェックをしなければならないから」という(もっともな)理由もあり、特にCSSに対して弱かった1、2世代前のWebサイト構築環境を使ったことのある方の中には、いまはあえてテキストエディタを使用されている人もいるだろう。

 しかし、アクセシビリティ対応やHTMLからデザイン要素を分離してCSSでレイアウトする、といったことが定着してきたこともあり、Webサイト構築環境の進化、その中でも特にCSSへの対応とデザインビューの進化が進んでいる。

 有償版のWebオーサリングツールは、もともとHTMLのタグコーディングを行うために用意された制作環境であり、HTMLを制作することだけを考えたらテキストエディタやアプリケーション構築環境以下ということはない。すでに、Webサイト構築環境を「積極的に使わない理由」はないはずだ。

 さらに最近強化されたCSSへの対応まで考えると、「上手に使いこなせばアプリケーションの購入費用を上回る効率化」ができるようになっており、慣れなどの特殊な事情がない限りはDreamweaver 8やExpression WebなどのWebサイト構築環境の使用を積極的に検討してよいのではないだろうか。

 また、Dreamweaver 8やExpression Webでは、HTMLのほかにASP.NETなどWebアプリケーションのソースを開くこともできる。もちろんコーディングも可能だが、「コードの入ったファイルを、非プログラマでも安心して確認でき、必要に応じてコードを変更できる」という点に注目すべきだ。どの部分であれば修正できるのか、といったことがプログラマ以外のスタッフでも理解できるということは、作業の効率化を個人ではなく全体レベルで図ることができるからだ。

 もう1点、Dreamweaver 8やExpression WebなどのWebサイト構築環境だから可能なこととして、「コードのチェック」が可能なことにも注目しておきたい。多くのWebサイト構築環境ではソースコードのバリデーションチェックやリンクチェックなどが可能だ。ソースコードのチェックについてはコーディング中にリアルタイムに可能なものもあり、バグの少ないコーディングを助けるさまざまな工夫がされているのだ。

1/4

 INDEX
連載:Webオーサリングツールがわかる(1) 
Page1
インタラクティブメディアのビッグバン│「専用の開発ツールが使われる理由」を再確認する
  Page2
「ホームページ・ビルダー」が向いている方向性を考える│「Dreamweaver 8」とは?│「Expression Web」とは?
  Page3
今回の課題:「CSSによるレイアウト」│Dreamweaver 8でCSSによるレイアウトを行う例│Dreamweaver 8でプロパティやクラス・IDを追加するには
  Page4
Expression WebでCSSによるレイアウトを行う例│CSSの再現性はどちらが優れているの?

 関連記事



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間