注意: 2015 年 11月 の時点で、Edge Reflow の積極的な開発は行われていません。さらに詳しく

Adobe Edge Reflow とは

Edge Reflow は、デザインワークフローを円滑に進めるデザインツールです。 すべての画面サイズに対応する美しいレスポンシブデザインの作成に役立ちます。最新の CSS 機能を駆使したネイティブ Web サーフェスでのデザイン、Edge Inspect との統合を利用したリアルタイムなデザインのプレビュー、および開発を通して自分のデザインビジョンを妥協することなく一貫して進めることを自信を持って開発者に引き渡せるエクスポートコード。

Edge Reflow の使用対象者

Edge Reflow は、Photoshop からスタートし、最新のブラウザーをターゲットに、レスポンシブなレイアウトや CSS ビジュアルを作成する Web デザイナーに理想的です。

Edge Reflow と他の製品の主な違いについて

Edge Reflow を使用すると、さまざまな画面サイズに対応するレスポンシブなレイアウトを作成できます。 主な機能:

  • WebKit に基づいて開発されていることで、Edge Reflow にはブラウザーの制約を考慮したデザインに対応する 1 対 1 の Web レンダリング機能を搭載しています。
  • Adobe Photoshop との統合により、Edge Reflow は日々のワークフローにスムーズにフィットします。
  • コードのエクスポート機能は、デザイナーと開発者の間の直接的なワークフローを提供します。

Edge Reflow には HTML エクスポート機能が搭載されていますか?

はい。Reflow から CSS スニペットまたはコードをエクスポートすることで、デザインから開発に移行し、お好みのコードエディター(Dreamweaver、Edge Code など)を起動できます。 「生産準備完了」には人によって様々な定義がありますが、アドビから提供される最適な作業の出発点です。

Edge Reflow (Preview)を入手するには

Edge Reflow (Preview)の対応言語について

英語およびフランス語 ただし、禁輸国を除き、世界中どの国でもダウンロードして使用できます。 詳細については、エンドユーザー使用許諾契約書を参照してください。

CSS Regions は、すべてのブラウザーに対応していますか?

CSS Regions は現時点では iOS 7 のモバイル Safari でサポートされていますが、まもなく他のブラウザーでも対応できるようになります。

最新の Web 機能について

ここ、アドビサイトにも素晴らしいデザインがあり、気に入っています。引き続きこの Web を推進させます。 新しい CSS 標準の登場に合わせて、できるだけ早急にアドビのツールでも対応できるよう最善を尽くします。

Edge Reflow は Fireworks に代わるものですか?

Fireworks は、プロトタイピング、ワイヤーフレーミングおよびグラフィックデザイン向けのツールです。Edge Reflow は、Photoshop でデザインを始めるときに、標準ベースの CSS を使用してレスポンシブなレイアウトおよびビジュアルを作成するための専用ツールです。 それぞれの垣根を超えた使用事例もいくつかあることでしょうが、この 2 つのツールはそれぞれ別の目的を果たすユニークなアプリケーションです。

Edge Reflow と Adobe Muse CC または Dreamweaver CC との違いについて

Edge Reflow CC (Preview)を使用することで Web デザイナーは、WebKit ベースのデザインサーフェスを活用し、CSS レイアウトを定義し、プロパティをスタイリングして、レスポンシブなデザインを作成できます。 デザイナーは、メディアクエリブレークポイントを設定し、要素とそのデザインを操作して様々な画面サイズに対応させます。 Edge Reflow はデザインプロセス中に HTML を作成しますが、その主な目的は、デザイナーがこのツールを使用することで、デザイナーのレスポンシブなデザイン意図を共有できるようにすること、また CSS については Web サイト制作プロセスの一環としてデザイナーまたは開発者が使用するために抽出できるようにすることです。

Adobe Muse CC を使用することで、デザイナーは完全な Web サイトを作成して公開できます。Adobe Muse は、ユニークなエクスペリエンスを画面サイズごとに配信できるよう、デザイナーがプライマリレイアウトを他のデバイスに適応できるようにして、モバイルコンテンツの作成をサポートします。Adobe Muse を使用することで、デザイナーは、HTML、CSS、JavaScript コードなどの書き込み、または編集を行わなくとも自分のサイトを公開することができます。

Dreamweaver CC は、Web およびモバイルコンテンツを迅速かつ直感的に作成するためのオールインワンツールです。また、Fluid Grid の強化されたレイアウト機能は、クリーンな Web 標準コードを生成してレスポンシブなデザインを実装するための直感的な方法を開発者やデザイナーに提供することを目的としています。Edge Reflow は、デザイナーが、いろいろなデバイスに対して様々なデザインカンプの概念化とモックアップ化を迅速に行い、その結果をターゲット画面で確認できる機能を搭載した、非常に視覚的なツールです。 Dreamweaver とは異なり、Edge Reflow にはコーディング機能が実装されていないため、デザイナーは、生成された CSS コードを抽出して実装と展開を行う必要があります。

Edge Reflow の基本的なワークフローについて

ここでは、デザイナーが、Photoshop CCIllustrator CC、および Fireworks からグラフィックを Edge Reflow にインポートし、サイズ変更可能なデザインサーフェスを使用して様々な画面サイズに対応するレスポンシブなレイアウトを作成すると想定します。Edge Reflow には、ブラウザー対応フォントをデザインに追加する Edge Web Fonts 統合サービス、および CSS スタイリング機能(カスタムグラデーション、枠線スタイル、ドロップシャドウなど)が搭載されています。いろいろなカンプの準備が整ったら、開発向けに使用する CSS コードを抽出する前に、Edge Inspect を介してブラウザーまたはデバイス上でプレビューできます。

今後のリリースで期待される他の機能について

現時点で Edge Reflow はプレビューリリースであり、アドビチームではこのアプリケーションの限定的な機能については承知しています。 アドビの目標は、このアプリケーションを試してみる機会をコミュニティメンバーに提供することです。そのため、皆様にはフィードバックのご提供をよろしくお願いいたします。特定の機能セットについて明確なコメントをすることはできませんが、アドビチームは、コミュニティメンバーの助言を取り入れるとともに、スタイル管理、ワークフローの強化など、多くの重要な要素について取り組んでいます。

Edge Reflow は他のアドビツールと連携していますか?

はい。Photoshop CCIllustrator CC、および Fireworks を使用して作成したグラフィックをインポートできます。また、Edge Reflow は、Edge Inspect および Edge Web Fonts サービスとも統合されているため、デザインプロセス中にこれらのフォントをシームレスに利用できます。今後のリリースについては、Creative Cloud をはじめ、Edge Tools and Services との他のワークフローに積極的に取り組んで行きます。

Edge Reflow が無償 Creative Cloud メンバーシップの一環である理由について

アドビの最新技術へのアクセスを Creative Cloud メンバーに提供すると共に、Edge Reflow を早期に体験する機会をコミュニティに提供することで、このアプリケーションの諸機能とロードマップの形成に役立つ評価とフィードバックを入手できます。 アドビでは、Edge Reflow の改善にご協力いただくため、皆様には弊社の Web フォーラムを通じて機能に関する要求やバグに関する報告の送信をお願いしております。

Edge Reflow (Preview)と互換性のあるオペレーティングシステムについて

Edge Reflow (Preview)は現在、最新の Mac および Windows オペレーティングシステムと互換性があります。 補足情報については、技術仕様を参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー