ここ数年のWebデザインの驚異的な進歩により、ウェブサイトはすぐに時代遅れになってしまうことがあります。テクノロジーの進化に追随し、ウェブサイトを新鮮で魅力的なものにするにはどうすればいいでしょうか？AdobeのDreamweaver CCは、その両方を実現するためのツールを提供していますが、以前のバージョンよりもデザインとコードの距離が縮まっていると感じる人もいるかもしれません。
四角い箱はもう不要
Dreamweaver CCの最も顕著な機能強化は、新しいCSSデザイナーです。これは、オブジェクトに適用されるCSS属性を視覚的に分かりやすく表示します。Dreamweaver CS6では、より基本的なパネルで調整を行うことができましたが、例えばオブジェクトの境界線の半径の項目を見て、「上、右、下、左」と考えて設定の順序が正しいか確認する必要があるかもしれません。
Dreamweaver CCでは、半径の設定を示す丸い角のボックスが表示され、その内側に寸法が表示されます。設定は個別に調整することも、ボックス中央のロックアイコンをクリックして設定を一括変更することもできます。ただし、ボックスの角は変更されません。変更を確認するには、数値、ライブビューでのデザインビュー、またはブラウザでの確認が必要です。
しかし、最も厄介なのは、CSSデザイナーウィンドウで行った変更には「元に戻す」と「やり直し」が適用されないことです。実際、デザインパネルで変更を加えた後、CSSデザイナーで別の変更を行い、その後「元に戻す」を実行すると、デザインビューで行った変更が元に戻ってしまいます。
以前は、Dreamweaver CS6の可変グリッドレイアウト機能を使用して、デスクトップ、タブレット、スマートフォンのブラウザで動作するレスポンシブなページを作成する場合、グリッドに新しく追加された各要素に固有のIDを割り当てる必要がありました。しかし、Dreamweaver CCでは、要素を追加するときにグローバルHTMLクラスを割り当てるオプションが用意されているため、後でいずれかの要素のCSSプロパティを調整すると、そのクラスを使用しているすべての要素に反映されます。Dreamweaver CCでは、可変グリッドレイアウト用の「挿入」メニューに、さらに多くのHTML5コンポーネントが用意されています。
CSSデザイナーは、視覚的なレイアウトでの作業を好む人、つまりコードのみで作業しない人にとって、Webデザインをより身近なものにするかもしれません。しかし、私はデザインビュー（同時にコードビューも開いて）での作業を好むものの、この広大な新しい作業領域にも集中する必要があることに気づきました。実際、デザインビューとCSSデザイナーの両方を見ていることが多くなり、コードのどこにいるのか分からなくなってしまいました。
ウェブフォントの楽しみ
Dreamweaver CC では、Web フォントも使いやすくなりました。ダイアログボックスには、Adobe Edge Web Fonts ライブラリで使用できるすべてのフォントが表示されます。このオープンソースのフォントリポジトリには、Adobe TypeKit と Google Web Fonts のフォントが含まれています。ただし、Adobe TypeKit のすべてのフォントが含まれているわけではなく、オープンソースのフォントだけが含まれています。それでも、選択できる大きなコレクションが提供されており、その種類により、Arial、Times、Courier など、古くなったフォントを新しいおしゃれなフォントに置き換えるのがはるかに簡単になります。また、フォントはオープンソースであるため、好きなサイトで好きな期間だけ使用できます。ただし、Edge Web Fonts ライブラリのフォントは Dreamweaver CC がなくても無料で使用できます。Adobe はフォントの使用に必要なコードも提供しています。
Creative Cloud サブスクリプションでは、Dreamweaver CC を 2 台のコンピューター（または OS X と Windows のデュアルブート Mac）にインストールできるため、Creative Cloud アカウントを使用して、アプリケーションとサイトの設定をコンピューター間で同期できます。Adobe によると、まもなく Web フォント設定も同期される予定で、2 台目のコンピューターでファイルを開くと、1 台目のコンピューターで指定したフォントが再度設定することなく表示されます。
Dreamweaver CCが真のクラウドアプリケーションであれば、完全にクラウド上に配置され、各マシンにアプリケーションをダウンロードする必要はなく、貧弱なコンピュータのCPUパワーではなく、サーバーファームのCPUパワーを利用するはずです。そして、サブスクリプションアカウントを使えば、どこからでも、どのマシンでも、どのOSでもログインできるはずです。しかし、現実はそうではありません。
より大きなモニターを購読する
Adobe によれば、Dreamweaver CC のアップデートされたインターフェースはより直観的でスムーズなワークフローを提供し、より少ないクリック数で作業を完了できるとのことです。ある意味ではそれは正しいかもしれませんが、巨大な CSS デザイナー パネルの追加は Dreamweaver のインターフェースに詰め込むものがさらに増えたことを意味します。その量は非常に多く、24 インチ モニターで全画面表示しているときでさえ、アプリケーション内で絶えずウィンドウを拡大したり縮小したりする必要がありました。また、2.3GHz Core i7 CPU を搭載した 2011 MacBook Pro でも、Windows ベースのワークステーションでも、複雑なレイアウトではアプリケーションがかなり遅く感じました。Adobe によると、レンダリング エンジンがパフォーマンスの問題を引き起こしているとのことですが、Dreamweaver CC の次のリリースでエンジンを交換することでそれらの問題に対処するとのことです。
Dreamweaverの表示モード（通常モード、ライブビュー、ライブコード、インスペクト）を切り替えるのは面倒です。例えば、通常モードだとデザインビューでHTML5設定の効果を確認できず、角丸のボックスではなく四角いボックスが表示されます。ライブビューではこれらの効果は確認できますが、デザインパネルでテキストを編集することはできません（ただし、ライブビューを有効にしたコードパネルではテキストを編集できます）。編集内容を常に最も正確に表示できるようにすべきではないでしょうか？
Dreamweaver CC のライブビューはレイアウトの表示に引き続き WebKit を使用していますが、WebKit レンダリングに依存しないブラウザ（Internet Explorer（当然複数のバージョン）、Firefox、その他サポートが必要なブラウザなど）でレイアウトがどのように表示されるかを確認する必要があります。Dreamweaver CS6 には、Adobe BrowserLab という外部サービス用のパネルがあり、レイアウトがさまざまなブラウザでどのように表示されるかを確認できましたが、Adobe は今年初めにこのサービスを終了しました。
結論
Dreamweaver CCは大幅な刷新ではありません。Adobeの今年の取り組みの大部分は、Creative Cloudサブスクリプションサービスへの移行に費やされました。このアプリケーションとCreative Cloudの兄弟製品を真のクラウドベースにするには、Adobeはまだ多くの作業が必要です。しかしながら、Dreamweaver CCはWebクリエイティビティを実現する上で多くの方法を備えた、刺激的なアプリケーションであることに変わりはありません。Creative Cloudサブスクリプションサービスへの加入を決めた方は、ぜひ一度お試しください。
