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

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

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

近年、スマートフォンやタブレットの普及に伴い、Webサイトを各デバイス向けに最適化することが求められるようになりました。当初は、PCや各デバイスごとに専用サイトを用意し、OSや画面サイズなどを判別して、該当する専用サイトへ誘導する方法が一般的でした。しかし、デバイスのサイズが多様化するにつれ、特定のサイズに向けた専用サイトを制作することが難しくなってきました。

そこで注目されるようになったのが、「レスポンシブWebデザイン(RWD)」という方法です。レスポンシブWebデザインでは、1つのHTMLを用い、解像度やサイズをベースにその表示結果を切り替えます。技術的には、基準となる解像度/サイズの範囲(ブレークポイント)を決め、CSSのメディアクエリー(Media Queries)を使って、各ブレークポイントごとに異なるCSSを適用します。

レスポンシブWebデザインの最大の魅力とは、多様なデバイス上で柔軟な表示切替を可能にし、ワンソースのHTMLで各デバイス用のアウトプットを管理できることと言えます。

レスポンシブWebデザインを採用したサイトが数多く登場しています。W3CサイトやWordPressのデフォルトテーマ、日本でもレスポンシブWebデザインのサイトが増えてきており、先日公開されたAdobe MAX 2013のサイトもそうです。

【レスポンシブWebデザインの事例】

すべてのWebサイトへ適用できる手法ではないかもしれませんが、ワンソースのHTMLですべてのデバイスのコードを管理できることは大きなメリットと言えます。

レスポンシブWebデザインのもう1つの魅力として、完全にサイトを切り分けて制作する場合に比べて、「デバイス間でのデザインを調整しやすい制作環境の構築」が期待できるということがあります。レスポンシブWebデザインの制作をサポートする各種オンラインツールが登場しています。例えば、RWD表示確認サービス「Responsivator」を使えば、各デバイスでの表示結果を同時に確認することができます。

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

レスポンシブWebデザインのメリットを挙げましたが、デメリットもあります。ワンソースで様々なデバイスに対応するという性質上、PCとスマートフォンで画像を共有することになります。そのため、PC向けにサイズの大きな画像を要するサイトの場合、スマートフォンにおける回線を考慮することが難しくなります。また、複雑な構造のサイトをレスポンシブWebデザインで構築・リニューアルする場合、コストが高くなりがちで、作業も切り分けて作った方が楽だったという話も耳にします。

そのため、制作者だけでなくクライアント/プロデューサー/ディレクターなど、クリエイティブに関わるすべての人がレスポンシブWebデザインの特性を理解し、レスポンシブWebデザインを適用するべき範囲を定め、意思疎通の元に制作を進めることが重要となります。これから紹介するEdge Reflowは、その手助けをしてくれるツールになるかもしれません。

レスポンシブWebデザイン制作におけるEdge Reflowの可能性

既存のWebサイト制作のワークフローでは、情報設計の段階でワイヤーフレームを提示し、OKがでたらデザインに進めます。ここまで静止画のみで進めるケースが多いでしょう。このワークフローをレスポンシブWebデザインの制作に当てはめると問題が生じます。デバイスでの具体的なアウトプットをクライアントに伝えづらく、抽象的なイメージのまま実制作に進んでしまいます。マークアップをしてはじめて「ここがあそこが」という要望が出はじめることが多く、すべてのデバイスの対応をしていると日が暮れてしまいます。

レスポンシブWebデザインのサイトを制作する上で、クライアントとの意思疎通をはかるには、モバイルの見え方も含めたモックアップベースでの提案が重要になってきます。ただ、短期の提案期間で動くプロトタイプを作るには高いスキルが必要となり、対応できる人材も限られてきます。Edge Reflowは、高いスキルを必要とせずに動くモックアップを最短で作るための環境を提供してくれるツールとなり得ます。

Edge Reflowの主な機能

それでは、Edge Reflowの機能を見ていきましょう。Edge Reflowを使えば、下図のようにブレークポイントごとにコンテンツをデザインすることができます。また、ステージ右端の中央にあるタブを掴んでリサイズすると、該当するブレークポイントのデザインにリアルタイムでレンダリングされます。つまり、Edge Reflow上でレスポンシブWebデザインの動作を確認できます。

ツールパレットの機能

ツールパレットには以下の4つの機能があり、コンテンツをデザインする際に使用します。サンプルでは、ヘッダーにロゴとグローバルナビ、メインビジュアル、3カラムのコンテンツ、フッターというコンテンツ構成を作成しました。

選択ツール 画面に配置した各オブジェクトの選択や移動を行うツールです。
ボックスツール いわゆるdivボックスを生成するツールです。要素のまとまりを作りたいときは、これでボックスを作り、その中に下位要素を追加します。画面にある既存の要素もドラッグ&ドロップでボックス内に追加することが可能です。
テキストボックスツール テキスト領域を生成します。現時点ではすべてp要素となるため、それを考慮してレイアウトする必要があります。
イメージツール 画像を挿入します。widthやmax-widthが自動でリサイズされるようにスタイルが適用されています。後述のLayoutパネルでサイズを指定すれば固定することが可能です。

Layoutパネル

Layoutパネルでは、主にボックスモデルに関するスタイルを定義します。基本設定としてwidth/height/min(max)-width(height)/margin/padding/visibilityの調整が可能です。また、Advancedパネルを開くと、displayの切り替えと、float/clear/overflowの設定が可能です。現時点では絶対配置の実装はされていないようです。

Stylingパネル

Stylingパネルでは、各要素特有のスタイルの定義が可能です。各要素で調整可能なプロパティは下記の通りです。

ボックス要素 ・backgroundの指定(画像・色・グラデーション)
・border(radius・color・style・上下左右の指定)
・box-shadow
・opacity
テキスト要素 ・font-family(Adobe Edge Web Fontsから選択が可能:後述)
・color
・font-size
・line-height
・font-weight
・font-style
・letter-spacing
・text-underline
・text-transform
・text-shadow
・opacity
イメージ要素 ・imageのソース変更
・border(radius・color・style・上下左右の指定)
・box-shadow
・opacity

ブレークポイントの設定

ブレークポイントの追加は、右上の「+」ボタンから行います。「+」ボタンを押すと、色付きのスライダーが現れます。スライダーをブレークポイントにしたいサイズまでスライドしてレイアウトをすれば、解像度ごとのレイアウト切り替えは完了です。

ブレークポイントの設定ウィンドウには[Orientation]という項目があり、以下の設定を行います。

Maximum PCブラウザー向けのデザインをデフォルトデザインとし、それより小さいサイズでブレークポイントを設定していく場合に使用します。ブレークポイントの設定にはmax-widthプロパティが使用されます。Edge Reflowの初期設定はMaximumとなります。
Minimum モバイルブラウザー向けのデザインをデフォルトデザインとし、それより大きいサイズでブレークポイントを設定していく、いわゆる「モバイルファースト」で開発する場合に使用します。ブレークポイントの設定にはmin-widthプロパティが使用されます。

[Orientation]をどちらにするかは、デザイン作業を開始する前に決めておきましょう。後から変更すると、デザインが崩れてしまいます。

デザインの構造確認とCSSスニペット

現時点ではファイル一式の書き出しはできませんが、特定のブロックのCSSコードをスニペットとして取り出すことは可能です。選択ツール、もしくは左下の構造メニューからCSSを取り出したい要素を選択し、<>ボタンをクリックするとCSSコードが現れます。これをエディタにペーストして使うことが可能です。今後直接このCSSを外部エディタから編集できるようになれば、より柔軟なツールになるでしょう。

Edge Web Fontsとの連携

Edgeツール&サービスの特徴として、ツール間での連携が挙げられます。Edge Codeでも好評のEdge Web Fontsの指定が、Edge Reflowでも可能です。Edge Reflowでプロトタイプを作成し、Edge Codeでコーディングすることが可能となれば、スムーズな制作フローを構築できるでしょう。

現時点で指定できるのは、数種類のフォントとEdge Web Fontsのみです。あくまでデバイスフォントを前提としたプロトタイピングツールというイメージです。その他のフォントを使用したデザインを使いたい場合は、画像で配置する必要があります。

Edge Inspectとの連携

Edge Inspectとの連携は感動します。Edge Reflow上で行ったレイアウトの調整が、Edge Inspectで繋いでいるデバイス上でリロードなどせずにリアルタイムで反映されていきます。これによりデザイナーとディレクターが共同でモックアップ構築をするための境界線がぐんと縮まるでしょう。

Edge Inspectの設定方法については、「Adobe Edge Inspect:様々なデバイスで手軽にブラウザーテスト」をご覧ください。

Edge Reflowの今後の可能性

Edge Reflowは現在プレビュー版のため、実装している機能も限定的です。私の率直な感想としては、新しい体験を提供するツールのため、使い方に慣れるまで少し戸惑いました。ただ、それも慣れの問題であり、ツールの目的を理解してワークフローにうまく取り込めれば、現場の意思疎通に最適で手放せないツールになると感じています。

アドビの開発者から聞いたところ、ユーザからのフィードバックを受けて、柔軟に製品を作っているとのこと。個人的な要望を言えば、現時点では複数ページの対応ができないため、多数プロトタイプを用意したい場合にリソース管理が煩雑になってしまいます。エレメントのライブラリ管理や複数ページのプロジェクト管理などが可能になるとツールの可能性が飛躍するのではないかと感じます。

また、既存のCSSフレームワークなどを利用したプロトタイプをしたい場合には、毎度そのフレームワークに合わせたUIスタイルをEdge Reflow上で用意する必要があります。各CSSフレームワークのUIスタイルを読み込んでクラス名を指定できるようなると広く使われるプロトタイプツールとして確立されるのではないかと思います。

レスポンシブWebデザインを用いてデバイスに最適化することが果たしてユーザ体験として正解なのか、常に議論されるところですが、制作の手法として有効な場面もたくさん出てくるでしょう。レスポンシブWebデザインのみならず、Edge Reflowは実制作のフローのよくある悩みを解決するWebクリエイティブの意思疎通のためのツールになるかもしれません。今後の発展に大いに期待したいと思います。