82
Adobe Edge CCのレビュー

概要

専門家の評価

長所

  • 他のCreative Cloudアプリケーションとの緊密な統合
  • iOS および Android デバイスでデザインとコードを簡単にプレビューできます
  • デスクトップでウェブフォントを使用する
  • 強力なアニメーションツール。

短所

  • アプリケーションにはネイティブUIがなく、一貫性のないデザインを共有しています
  • プレビュー機能はChromeブラウザに限定されています
  • アプリケーションを個別に購入することはできません。

私たちの評決

これらのツールを使うのに月額料金を支払うべきでしょうか? Edge Animateのアニメーション機能を必要としない限り、価格を正当化するのは難しいでしょう。特にTypecastやGridsetといったサービスにも同様の機能がある場合、なおさらです。経験豊富なチームにとっては、よりシンプルなツールで十分な場合、これらのツールがどれほど役立つかは疑問です。紙とペンの威力を見過ごすべきではありません。しかし、既にCreative Cloudのメンバーで、Adobeのアプリエコシステムに深く関わっている場合は、これらのツールの方がより便利かもしれません。

ブライトンを拠点とするウェブ代理店 Clearleft のシニア ビジュアル デザイナー、ポール ロイドは、Adobe の新しいウェブ デザイン ソフトウェア ツールに感銘を受けているが、強力な競争に直面している。

モバイルデバイスの普及により、オンライン体験の構築方法が見直されるようになりました。かつては安全なデフォルト設定が当たり前だったウェブですが、今では予測不可能な存在として捉えられています。私たちのプロセスもこのニーズに応えるべく適応しています。デザインと開発の境界がますます曖昧になる中、分野横断的な役割、アジャイルなチームワーク、そして高度なコラボレーションは、レスポンシブなワークフローの重要な柱となっています。

しばらくの間、Adobeはこうした発展から完全に乖離しているように見えました。独自のFlash技術がWebの重要な要素であると信じ、スマートフォンどころかブロードバンドの導入よりずっと前に考案されたWebデザインアプリケーションスイートを販売していました。方針転換の必要性を認識したAdobeは、標準化団体と協力して仕様を改良し、「Edge」と呼ばれる最新のWebデザインツールスイートを開発しました。これは、タスク指向の小規模なソフトウェアとサポートサービスで構成され、ゼロから構築され、定期的にアップデートされています。

この新しいアプローチは成功するだろうか?これらの新しいツールは、クリエイターが今日のウェブのあらゆる領域で機能する魅力的な体験を生み出すのに役立つだろうか?EdgeスイートがCreative Cloudに加わることで、その答えが明らかになるだろう。

エッジリフロー CC(プレビュー)

一見すると、Edge Reflow は分かりにくいかもしれません。プロトタイピングに使うべきでしょうか?デザインに使うべきでしょうか?開発に使うべきでしょうか?コミュニケーションツールとして見ると、その可能性が見えてきます。主にデザイナー向けに設計された Edge Reflow は、クライアントに提示するレスポンシブなモックアップを素早く作成したり、開発者と正確な CSS スタイルを共有したりするのに役立ちます。

アプリケーション自体はWebKit上に構築されており、OSネイティブの外観や動作には対応していませんが、ドキュメントはHTMLとCSSを使用して正確にレンダリングされます。デザインはChromeでプレビューできますが、この出力は一般公開を目的としたものではありません。この点はアプリケーション側でも十分に強調されています。Edge ReflowはEdge Inspectとも連携し、モバイルデバイスでもプレビューが可能です。

コードを探している開発者は、Edge Reflow の DOM インスペクターから CSS スタイルをコピーできます。

Edge Reflowのインターフェースの大部分は、様々なブレークポイントにおけるページの外観の変更に費やされています。これらの表示は明確で、レスポンシブデザイン初心者にとって間違いなく役立ちます。デザイナーはピクセル、パーセント、emのいずれかの測定単位を自由に使用できます。インターフェースは少し使いにくく、時には非常に混乱を招くこともあり、CSSレイアウト規則に密接に結びついたWYSIWYGエディターを理解するには時間がかかるかもしれません。

Edge Reflow には Edge Web Fonts との統合が含まれています(TypeKit のサポートは近日中に開始されます)。フォントの選択は少し面倒ですが、デスクトップアプリケーションで Web フォントを使用できるのは魅力的な機能です。

Edge Reflowはまだ初期段階の製品ですが、将来は明るいと見られています。既に複雑なレイアウトやデザインを作成できますが、今後のアップデートではPhotoshopやIllustratorのファイルをインポートして開始点として利用できるようになるため、これらのツールのユーザーにとってレスポンシブデザインプロセスがさらに加速するでしょう。

Adobeはこの問題を過剰に考えすぎているとも言えるでしょう。私の経験では、スケッチをしたり、ホワイトボードの横で同僚と会話をしたりするといったシンプルな作業で、レスポンシブデザインにおける最も難しい問題さえも解決できるのです。

Edge Code CC(プレビュー)

コードエディタなしでは、Web開発ツールスイートは完成しません。Edge CodeはオープンソースのBracketsアプリケーションをベースにしており、ブラウザでのライブプレビュー(繰り返しますが、これはChromeのみで動作します)や迅速なインライン編集機能など、独自の機能を備えた真に革新的なテキストエディタです。まだベータ版です。

Edge Code には、HTML ドキュメント内での CSS のインライン編集など、革新的な編集機能が備わっています。

エッジ検査

Edge Web Fontsと同様に、Edge InspectはEdgeスイート全体を束ねる接着剤のような存在です。以前はShadowとして知られていたEdge Inspectは、コンピューターとiOSおよびAndroidデバイスをペアリングし、リモートで作業内容を検査またはプレビューすることを可能にします。繰り返しになりますが、デスクトップ版ではChromeのみがサポートされています。

他にも同様の(そしてより安価な)サービスがありますが、設定が複雑になる場合があります。Creative Cloudのサブスクリプションをお持ちの場合は、緊密な連携と使いやすさから、Edge Inspectを使用することをお勧めします。

エッジアニメイトCC

アニメーション化されたインタラクティブなWebコンテンツを作成するためのツールであるEdge Animate CCは、間違いなくスイートのフラッグシップアプリケーションであり、Flashの王座を狙う可能性も秘めています。このアプリケーションは非常に洗練された外観で、アニメーターが微調整できるボタンやノブが無数に用意されています。

Edge Animate のインターフェースは難しそうに見えますが、付属のチュートリアルを利用すればすぐに使い始めることができます。

タイムラインはアニメーションの構造を明確に分解しており、複雑なイージングトランジションを追加できます。興味深いことに、Edge AnimateはCSS3スタイルを使用してグラフィック効果(ぼかしやフィルターなど)を実装していますが、これはすべてのブラウザでサポートされているわけではありません。これは良いことです。ウェブサイトはすべてのブラウザで同じように表示される必要はないと私は考えています。Adobeがプログレッシブエンハンスメントを採用していることは心強いです。

まあ、ある程度はね。空のアニメーションを 

ウェブ上のアニメーションにおいてタグの使用が賢明なアプローチかどうかは議論の余地があります。アクセシビリティとパフォーマンスを重視する人々は、Edge Animate の出力を自分たちのニーズに合うようにするために、さらに努力するでしょう。とはいえ、生成される JavaScript はダウンロードサイズの点では比較的妥当なサイズで、その多くはアプリケーション内で直接編集できます。

スクリプト作成やアニメーション作成のスキルはないので、このアプリケーションや生成されるコードについて的確な意見を述べるのは不適切です。とはいえ、楽しくて使えるツールなので、きっと多くの人が楽しんで使えると思います。

それで、それはすべて価値があるのでしょうか?

クライアント、デザイナー、開発者間の緊密な連携が求められるワークフローにおいて、Adobeのソフトウェアは重要な役割を果たす可能性があります。アイデアの伝達に重点を置いているReflowは、この点において特に有望なアプリケーションです。デスクトップでWebフォントを使用できる機能や、Edge Inspectによるモバイルデバイス間のデザイン同時プレビュー機能は、際立った機能です。これらの機能が個別に利用できず、高額なサブスクリプションモデルでしか利用できないのは残念です。

これらのツールを使うのに月額料金を支払うべきでしょうか? Edge Animateのアニメーション機能を必要としない限り、価格を正当化するのは難しいでしょう。特にTypecastやGridsetといったサービスにも同様の機能がある場合、なおさらです。経験豊富なチームにとっては、よりシンプルなツールで十分な場合、これらのツールがどれほど役立つかは疑問です。紙とペンの威力を見過ごすべきではありません。しかし、既にCreative Cloudのメンバーで、Adobeのアプリエコシステムに深く関わっている場合は、これらのツールの方がより便利かもしれません。

概して言えば、AdobeがWebに対する姿勢を改善していることは喜ばしいことです。Edge CodeをBracketsとしてオープンに開発することで、コードを書くのが楽しくクリエイティブになる革新的なIDEが誕生しました。CSSに高度なグラフィック機能(シェイプ、リージョン、ブレンドモード、カスタムフィルター)をもたらしたAdobeの取り組みは、今後何年にもわたってWebコミュニティに恩恵をもたらすでしょう。その点で、Adobeの最大の貢献はこれらのアプリケーションではなく、Web標準への取り組みとオープンソースコミュニティにおける取り組みにあると言えるでしょう。