レスポンシブWebデザインのモックアップを簡単に作成できる「Adobe Edge Reflow」の使い方

Edge Inspectで実機とリアルタイム連動

　Edge Reflowでは、Edge Inspectと連動してプレビューが可能です。Edge Inspectはモバイル対応には欠かせないツールになってきており、モック作成からリアルタイムで連動できることはかなりのメリットと言えます。Edge Inspectをダウンロードしていない方は、まずは体験してみることをおすすめします。

• クロスブラウザテスト、携帯シミュレータ | Adobe Edge Inspect

　Edge Inspectと連動させるには、右下のInspectボタンをクリックします。Edge Inspectを起動した状態であれば、下図のようなパネルが現れますので、ONにすれば連動しているデバイスがパネルに表示されます。

Edge Inspectを起動した画面

デバイスとつながった状態

Edge Inspectを起動していない画面

デバイスとリアルタイムで連動可能

Edge Reflowで生成したCSSをサイトに反映する

　現時点ではEdge Reflowはファイル生成の機能は付いていませんが、CSSのスニペットを取り出すことが可能です。Edge Reflowを起動してプレゼンするのも1つの手ですが、ある程度ReflowでプロトタイプができたらHTMLファイルへ移植していきます。

　サンプル用のHTMLテンプレートを用意しましたので、そちらに貼りつけてモックを完成させてみましょう。

• HTMLサンプル（記事上部のリンクからダウンロードできます）

　貼り付ける際の注意点として、実際のファイルではCSSフレームワークをベースにして作成するため、レイアウトに関するスタイルは除外してペーストします。実際に貼りつけてから微調整すると良いでしょう。

　現時点ではEdge Web Fontsを指定したスタイルに関しては、そのままペーストしても使えませんでした。移植するには下記のようにfont-familyで分けることで動作しました。

Reflowから抽出したスタイル

font: open-sans-condensed 1.6em 100;

調整したコード

font-family: open-sans-condensed;
font-size: 24px;

　また、フォントをscriptタグで読み込む必要がありますので、下記のコードをhead内に追加します。Edge Reflowのプレビューのソースを確認するとheadに読み込んだフォントのコードが記述されているので、そちらからペーストするのが早いかもしれません。

<script src="http://use.edgefonts.net/open-sans-condensed.js"></script>

• サンプルファイル一式（こちらも記事上部のリンクからダウンロードできます）

Edge Reflowを活用するメリット

　RWDやモバイルサイトの制作では、実際どういうフォントサイズで閲覧可能なのか、ファーストビューは実際どこまで入るのかなど、実機で見てはじめて実感できる部分が多く、チームでの認識合わせもまばらになりがちだと思います。

　GUIベースで作ったデザインをEdge Inspectで複数の実機と同期して確認しながらモックを作成できるメリットは、チームの意識合わせや、初動プロセスのいくつかが省略可能となり、コストカットにもつながるのではないでしょうか。

　まだプレビュー版ということで細かいバグは否めませんが、特性に慣れてしまうとスケッチツールとしてラフに使う分にも有用であると考えています。エディタとの連動やより細かいCSSの設定項目、要素のバリエーションなどが増えてくれば、大分実用的なツールとなる可能性を秘めていると感じました。

　Adobe Maxの日本語サイトは、実際にEdge ReflowとDreamweaverの連携で製作されているようです（ぜひブラウザの横幅を可変してお確かめください）。ある程度親和性を保てるようにワークフローを組み立てられれば、今からでも有用なツールになるかもしれません。このツールは新しい体験を伴うため最初は少し戸惑いますが、慣れてしまえば高速に制作が進めるための良いツールになると感じます。

　本記事は、Adobe Edge ReflowのPreview版の内容をもとに執筆したものです。今後の開発において、機能や操作方法が変更となることがあります。Edge Reflowは現在Adobe Creative Cloudから入手でき、無償メンバーでも利用できます。