レスポンシブ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