あなたの知らないレスポンシブWebデザインカンプ制作で使えるPhotoshopの新機能：無料でCreative Cloudを使い倒せ（15）（2/2 ページ）

» 2013年10月30日 18時00分公開

[岡本紳吾，hatte.Inc]

前のページへ 1|2 　　　　　　

Reflowに直接Photoshopから読み込ませる

　もう1つはReflowに直接Photoshopから読み込ませる方法だ。Edge Reflowの画面にPhotoshopのアイコンが表示されているので、これをクリックしてみよう。

　現在Photoshopでアクティブになっている書類のファイル名が出てくるので、この状態で、［Create New Page］をクリックすると、以下のように読み込まれた。

Photoshop SyncでReflowで使うファイルがリアルタイム更新

　さらにトグルスイッチ［Photoshop Sync］を有効にすると、アセットの更新が行えるようになる。

　例えば、［Photoshop Sync］を有効にした状態で、わざとPhotoshop側で画像を真っ赤に塗りつぶしてみよう。

　すると、該当する画像に更新アイコンが出現する。

　これをクリックすると、画像が更新された。

Edge Reflowをワイヤーフレーム制作ツールからデザインカンプ制作ツールにしてくれる

　Reflowの弱点の1つとして、デザインツールではないため、単体ではどうしてもワイヤーフレームレベルの作業しか行えなかった。アセット1つ作るにしても、他のグラフィックソフトから書き出す必要があり、普段グラフィックソフトに触れる機会がない人たちにとってはハードルが高かった。

　GeneratorとPhotoshop SyncでReflowとPhotoshopが連携できるようになることで、デザイナにデザインカンプを作ってもらい、それをすぐさま活用できるようになった。

　Photoshopを少し触れる人であれば、渡されたPSDファイルを元に作り込んでいくこともできるだろう。そして、随時PSDファイルとReflowの連携を取って、出力結果を確認しながら作業を進めていくことができる。

　Reflowのコードは、まだプロダクションレベルの品質に達していない（と、書き出されたコードにコメントで書かれている）ので、Web制作の実務でこの機能が活用されるとは考えにくいが、プロトタイピングなど実制作に至る前のさまざまなフェイズで表現力が向上することは、制作者にとっても発注者にとってもポジティブに働くのではないだろうか。

「無料でCreative Cloudを使い倒せ」バックナンバー

岡本紳吾（おかもとしんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto

FireworksがCreative Cloudのアップグレードサイクルから外れた意味：Fireworksはまだまだ終わらない
FireworksはCreative Cloudのアップグレードサイクルからまたも外れてしまった。これは開発終了を意味するのか、Fireworks大好きな筆者が現地ロサンゼルスで考えた。
アドビで開発中の新サービスをチラ見：クリエイティブの未来が見えたMAXのSneak Peeks
Edge CodeやMuseといったWeb制作系アプリケーションのデモやAfterEffectsとPhotoshopで撮影済みの写真を手品のように修正するデモが行われた。
開発現場のUIトラブルを解決!? 画面プロトタイプ入門
アプリ／サイト納品後に顧客に「使いにくい」「あれ追加して」といわれた方へ。前もって画面イメージを簡単に作る方法が……
プロトタイピングでUIデザインの失敗にさようなら
UIデザインを効率的に進める「プロトタイピング」が注目されている。この手法に積極的に取り組む伊原力也氏に実践するポイントを聞いた