なお、本稿はAdobe Edge Reflow CC（プレビュー版）を元に執筆したものです。今後の開発において、機能や操作方法が変更となる場合があります。あらかじめご了承ください。
対象読者
- レスポンシブWebデザインのブラウザで動作するプロトタイプを作りたい方
- CSSでビジュアル要素の作成をしたい方
- Adobe Edge Reflowの概要を知りたい方
必要な環境
Adobe Edge Reflowは、Adobe Creative Cloudを通じて提供されており、無償メンバーシップでも利用できます。
Adobe Edge Reflowとは
マルチデバイス対応のWeb制作テクニックの一つとして「レスポンシブWebデザイン（RWD：Responsive Web Design）」が注目されています。これは、PC、タブレット、スマートフォンなどの各デバイスに、単一のHTMLファイルで対応することができるテクニックです。
今回紹介するAdobe Edge Reflowは、このレスポンシブWebデザイン作業を効率化するツールです。
本稿では、簡単なプロトタイピングを作成しながら、Adobe Edge Reflowの基本的な使い方を紹介します。
レスポンシブWebデザインのワークフロー
従来のサイト制作ワークフローでは、画面設計後、デザイナーがPhotoshopのようなグラフィックソフトで静的なデザインカンプを作成し、それを元にHTMLやCSSのコーディングをするのが一般的でした。
しかし、レスポンシブWebデザインのサイト制作において、デバイスごとに複数のデザインカンプを作成していては、時間と手間がかかりすぎてしまい非効率です。そこで、レスポンシブWebデザインのサイト制作では、簡単なワイヤーフレームのみ作成し、後は、コーディングと検証を繰り返しながら制作を進めるのが一般的な流れとなっています。
この方法は「Designing in the Browser」と呼ばれ、デザインカンプを作成せずに、直接ブラウザでデザインしていくという意味で使われています。早い段階でブラウザで動作するWebサイトの素案を作成することで、手戻りを抑え、各デバイスのデザインや検証を同時進行できます。
デザインカンプとプロトタイプ
グラフィカルなデザインカンプは、クライアントに提示する説得材料として有効ですが、静的なデザインカンプでは実際の動きを確認することはできません。レスポンシブWebデザインでは、従来のデザインカンプに代わるものとして、プロトタイプを作成し、画面サイズの異なる各デバイスに応じてレイアウトが変化する様子を検証したり、クライアントにプレゼンしたりするのが一般的になってきました。
プロトタイプとは、ボタンのマウスオーバーやプレス時それぞれの状態の見た目の変化や、ナビゲーションによるページ遷移など、操作感やサイト内の動線を確認できる状態のものです。操作感を確認することがプロトタイプの主たる目的のため、グラフィカルなデザインは施されないケースも多々あります。このプロトタイプを作るのに便利なツールがAdobe Edge Reflowです。
他のWeb制作ツールとの違い
Web制作の業界標準ツールとしては、AdobeのDreamweaverがありますが、これは高性能なWebオーサリングツールです。完成したWebページを作るのに適しています。対して、Adobe Edge Reflowは、実際のWebページを作るのではなく、あくまでもブラウザで動作するプロトタイプの作成に適しています。画面サイズの異なる各デバイスで、どのように表示されるかを確認しながらデザイン作業を進めることができます。Edge Reflowには、Dreamweaverのようなコードを記述する機能はありませんが、その後の行程でデザインを実装するために、Edge ReflowからCSSコードの抽出ができるようになっています。
同じくAdobeのFireworksもプロトタイプやワイヤーフレームの作成に適したツールの一つですが、これはグラフィックベースのデザインツールです。作成したボタンやアニメーションなどは画像として書き出されます。一方のEdge Reflowは、CSSベースのデザインツールです。レイアウトやボタンなどのパーツはCSSベースでデザインされます。後述のブレークポイントを定義することで、各デバイスでの挙動を確認しながらデザインできます。
