検索
連載

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

レスポンシブなWebレイアウトをコードを書かずに作れるツール「Edge Reflow」とPhotoshopの連携機能の特徴や使いどころを解説する。

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

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


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る