レスポンシブデザインツール、Edge Reflow CC Preview 5 リリース：いよいよPhotoshopと連携

この記事は、2013/9/9にポストされたAdobe Edge Reflow Team Blogを翻訳したものです。

ここ最近、Webデザイナーになるということは、デザインをしていく際に何らかの形でPhotoshopに触る機会を持つと言えるかもしれません。Photoshopは間違いなくクリエイティブな表現をするにあたり最も強力なツールです。しかしながら、Webデザイナーはこれまでのクリエイティブな表現以上の表現を必要としています。Webサイトにレスポンシブな動きを付けたり、様々なWeb技術を使っていくことこそ我々のEdge Reflowというツールを使う目的そのものです。数ヶ月前に開催されたAdobe MAXで、アドビはReflowがPhotoshopと連携してどのようなワークフローを作れるようになるのかというコンセプトを形にしたデモをお見せしました。そして、ものすごい反響を得たのです！本日、Photoshopからのデザインを数クリックで簡単にReflowにインポートできるようになった新しいReflowをここにご紹介できることになりました。

さて、一体どうやって使うの？

まず、最新版のPhotoshop CCとEdge Reflowをインストールしてください。その次に、PhotoshopでPSDファイルを開き、レイヤーやレイヤーグループ、スマートオブジェクトに名前を付けて下さい。その際に’.png’や’.jpg’、’.gif’といったファイル拡張子の付いた名前にしてください。このように画像名を定義したら、PhotoshopからReflowプロジェクトファイルの書き出しを行います。「ファイル > 生成 > Reflowプロジェクト」注1。すると、いま開いているPSDファイルと同じフォルダにReflowプロジェクトが生成されます。このプロジェクトファイルは単にReflowで名称定義した各画像ファイルが含まれているだけでなく、PSDファイル内で定義したテキストやシェイプのレイヤーも含まれます。さらに、このテキストやシェイプは編集可能なHTMLやCSSとしてReflowにインポートされることになります。

このプロジェクトファイルがレスポンシブデザインをしていくスタートポイントとなります。

これは’特効薬’ではありません

デザインカンプの制作に取りかかるためには他にも多くのやるべき事があります。ReflowはPhotoshopからの情報を処理するので、まずPSDファイルで定義されたデスクトップベースのフォントをWebフォントにマッピングする必要があります。さらに、ピクセル幅や絶対値指定の要素をパーセント指定に切り替えたり、各要素の関連性を付けたりする必要も出てきます。すでにPhotoshopでデザインした見た目になっていると思いますが、実際のWebコンテンツとしての動きは大きく異なるのです。

次のステップは階層構造を定義することです。Ctrl/Cmd + Rをすると、選択された要素がBox（または Div）にラップされます。この階層構造を定義してしまえば、あとはレスポンシブデザインの楽しさが待ってます。ReflowのデザインUIで画面幅を変えてみたり、お好きな位置にブレークポイントを追加してみてください。

いい感じ！で、他には何かある？

前回のReflowプレビュー版アップデートでは、複数ページのデザインに対応しました。これは別のPSDファイルでWebサイトの別のページを作成できるということです。さて、最新のReflowプレビュー版では、UIの右側にPSアイコンが付いたのが分かると思います。これは’Photoshop連携’パネルです。”Create New Page”をクリックすると、ReflowはPhotoshopとコネクションを張り、全ての定義済みアセットやシェイプ、テキストを（Photoshopからの書き出しとちょうど同じ様に）取得し、新たなページをReflowプロジェクトファイルに生成してくれます。Reflowのページパネルを確認してみてください。そのPSDファイルの名前の付いた新しいページが出来ていることが分かります。

すでにPhotoshopで作成したUIアセットやスタイルガイドがある場合は、Reflowライブラリーにダイレクトにインポートする方法も選べます。こちらの方法は、他の既存デザインからアセットを利用して新規でReflowカンプを作りたい場合は便利かもしれません。”Library”ボタンをクリックするだけで、Reflowプロジェクト内で使いたいアセットが利用できるようになります。

我々開発チームは今回のリリースに非常にワクワクしています。多くの手作業によるステップを排除しました。正直、そんなステップは誰も欲しくないわけです。これはまだ我々が用意するワークフローの最初の入り口に過ぎません。是非とも皆さんにお試し頂いて、フィードバックをお聞かせください。これからもPhotoshopチームと連携して、この最新機能の安定性や機能性の向上を進めていきます。さらに詳しく学ぶために、この機能と現在のPhotoshop連携の制約を理解するためのページ注2を用意しました。サンプルファイルと詳細なチュートリアルがありますので、理解の助けになると思います。何かご意見がありましたら、Twitterアカウント（@Reflow）、もしくはReflowの画面右下にあるフィードバックパネルからお知らせ下さい。

注1. 最新のEdge Reflow CCプレビュー版をインストールすることで出現します。
注2. 日本語ページは近日公開予定です。