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

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

レスポンシブWebデザインとは

　レスポンシブWebデザイン（以下RWD）は、Webサイトを多様化するデバイスに対応する術として注目を集めている制作手法です。閲覧環境のサイズごとに表示を切り替える事が可能で、ワンソースのHTMLでマルチデバイスのソースを管理することができるため、多くのサイトで導入がはじまっています。

レスポンシブWebデザインの特徴

　RWDではCSS3のMediaQueriesという技術を利用し、解像度やサイズごとに適用するCSSを切り替えることで、閲覧環境ごとに表示の切り替えができます。

　具体的には下記のように、CSSファイル上でブレークポイントと呼ばれる解像度やサイズごとの分岐点を設定し、その中に個別のスタイルを記述していきます。下記は480px以下の閲覧環境のための記述例です。

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0;
    }
}

　このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。

レスポンシブWebデザインのメリット・デメリット

　前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。

　とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。

RWDのメリット

• デバイスごとに切り分けず1つのHTMLファイルで管理可能
• スタイルを共有してテイストの統一性をはかりやすい
• リダイレクト処理が不要
• URLが統一される
• サイズの範囲で決めるためデバイスの多様化への対応が容易

RWDのデメリット

• 大きい容量の画像がモバイルでも読み込まれてしまう
• デスクトップサイトの構成に影響されてしまう
• 共有しているスタイルの変更の影響を受けやすい

Adobe Edge Reflowとは

　こうしたRWDやインタラクティブなWebサイトのニーズが高まる中、ここ数年でWeb制作の手法は大きな転換期を迎えています。静的画像でデザインをして確認してもらうというワークフローでは意思疎通も難しく、あとになって認識違いのトラブルを起こしやすいと思います。

　Edge Reflowは直感的な操作と細かい数値調整を組み合わせた、RWD向けプロトタイピングツールです。現在プレビュー版がリリースされたばかりですが、モックアップ作成ツールとして申し分ない機能を備えています。高速にプロトタイピングを行うことによって、初動での認識合わせはもちろん、プロジェクトの指針共有も容易にできます。

　Edge Reflowの主な特徴として下記のようなものがあります。

• GUIで直感的にdivブロック、テキスト、画像要素の配置が行える
• プロパティパネルで細かいCSSの調整が可能
• 柔軟なグリッド調整が可能
• モジュールごとにCSSスニペットが生成される
• 任意の幅でMediaQueriesのブレークポイントを設定可能
• ブレークポイントごとの要素の表示非表示が可能
• Adobe Edge Inspectとのリアルタイム連携が可能
• Adobe Edge Web Fontsとの連携が可能
• モバイルファーストかデスクトップファーストかの両アプローチに対応（後述）

Adobe Edge Reflow起動時の画面

　まだプレビュー版ですが、モックアップ作成後のワークフローにも組み込めるような仕組みがいくつも用意されており、実際の制作との親和性が高いことが伺えます。次項ではCSSフレームワークのグリッドに合わせてreflowファイルを作成してみたいと思います。

• CSSジェネレーターとデザイン | Edge Reflow

CSSフレームワークに合わせてプロトタイピング

CSSフレームワークとは

　Webサイト制作では、よく利用されるレイアウトやUIを使いやすい形でフォーマット化して配布されているものが多くあり、一般的にCSSフレームワークと呼ばれています。RWDに対応しているものも多く、グリッドシステムが採用されています。

CSSフレームワークの一例

• Twitter Bootstrap
• The 1140px CSS Grid System · Fluid down to mobile
• Foundation: The Most Advanced Responsive Front-end Framework from ZURB

CSSフレームワークにグリッドを合わせる

　本稿では、Edge ReflowのグリッドをThe 1140px CSS Grid System（以下cssgrid）のグリッドに合わせて設定を行っていきます。

　cssgridのブレークポイントは、シンプルに768px以下で切り分けているのみです。まずはEdge Reflowで768pxのブレークポイントを設定します。

　ブレークポイントは右上の+ボタンで追加可能です。

　cssgridのグリッドシステムでは12カラム構成、各カラムのmargin-rightが3.8%になっています。Edge Reflowのグリッドシステムではカラムごとに左右個別の余白を設定することはできないため、3.8%を割って左右に1.9%ずつ余白を持たせることにします。

　Edge Reflowでグリッドを選択するとLayoutパネルでGrid Optionsが表示され、ColumnsとGuttersの項目でそれぞれ設定が可能になります。下図はColumnsを12、Guttersを1.9%に設定した例です。

　Gutterはカラム間の余白のことです。外側にもGutterを設定したい場合は、Show Outer Gutterをオンにします。

オブジェクトを配置

　簡単なレイアウトを作ってみましょう。配置できるオブジェクトは下記の3つです。

• ボックス
• テキスト
• イメージ

　ボックスはdivブロックです。headerやmoduleブロックなど、要素のまとまりはこのボックスの中に入れ子にして管理します。下図はヘッダー、グローバルナビ、メインビジュアル、3ブロックのコンテンツ、フッターのボックスを配置したものです。メインビジュアルはイメージオブジェクトで配置しています。画像はレスポンシブな状態で配置されます。

Edge Web Fontsでロゴタイプを配置

　Edge Reflowでは、テキストオブジェクトのフォントパネルにAdobe Edge Web Fontsが統合されています。ヘッダのロゴタイプにWebフォントを指定してみましょう。テキストを配置したら、StylingパネルのTypefaceの欄にある「T+」というボタンをクリックすると、下図のように使用可能なWebフォントの一覧が現れます。

　Adobe Edge Web Fontsは、Adobeが提供するプレミアムWebフォントサービス「Typekit」によって提供されています。世界中の商用Webフォントライブラリにアクセスでき、Google Webフォントも提供されています。今回はGoogle Web FontにもあるOpen Sans Condensedというフォントを選択してみました。下図はCmd+Option+Sでブラウザプレビューした画面です。

タブレット以下のレイアウトを最適化

　上部の768に設定してあるブレークポイントのバーをクリックすると、グリッドエリアが768pxに動きます。この状態で各要素の配置やスタイルを切り替えていきましょう。サンプルではコンテンツの3ブロックが768px以下の場合は、横幅いっぱいになるようにしました。

　ブレークポイントごとに各要素のパネルのプロパティを切り替えるだけで、このようにモックが出来上がってしまいます。ブラウザのウィンドウを768px以上に広げると、元の3カラムの状態に切り替わることが確認できます。

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から入手でき、無償メンバーでも利用できます。