必要条件

この記事に必要な予備知識

この記事は、HTMLとCSS(特にメディアクエリー)に関する知識があることを前提としています。

ユーザーレベル

初級

原文 作成日: 2012/6/18


今日のWebデザイナーは、プロジェクトを進める上で多くの新しい課題に直面しています。特に問題なのは、さまざまな種類のデバイスに対応できるデザインを開発しなければならないことです。そのための手段として、現在注目を集めているのが「レスポンシブデザイン」です。各種デバイスに対応するための技術として、既にCSSレイアウトやメディアクエリーなどが利用されていますが、これらは決して「視覚的」とはいえず、クリエイティブでもありません。そこでアドビは、次世代Webデザインツール「Edge Reflow」を開発しました。

市場に登場して間もないEdge Reflowですが、このツールには「Webデザインのワークフローを根本的に変えたい」という大きな目標があります。その一環として、アドビではソフトウェア開発アプローチを見直すことにしました。まず、アドビが「何」を「どのような理由」で開発しているかをすべてオープンにすること。さらに大切なのは、アドビ製品をご利用いただいているユーザーの意見に耳を傾け、お客様が次世代デザインツールに何を求めているかを把握することです。

現在のEdge Reflowの目標は、レスポンシブデザインの根本的な問題を解決することです。作成者の「レスポンシブな意図」をプロジェクト関係者や開発者に的確に伝えられる手段を提供したいと考えています。Edge ReflowはWYSIWYGではなく、レスポンシブコンポーネントを作成するためのデザインツールです。今後もさらに改良を続け、他のツール(Photoshop、Illustrator、Edge Codeなど)とよりシームレスに連携してデザインや開発を進められるようにする予定です。

では、Edge Reflow CCに備わっている一部の機能とワークフローを見てみましょう。

Edge Reflowを入手するには?

Edge Reflowを入手するにはCreative Cloudに加入するか、無償メンバーとして登録する必要があります。アドビのCreative Cloudに直接アクセスし、Creative CloudデスクトップアプリケーションからEdge Reflowをダウンロードして、インストールしてください。Edge Reflowは頻繁に更新されます。更新のお知らせが届きましたら、Edge Reflowの最新バージョンをCreative Cloudから入手してください。

現在のEdge Reflowは(初期の)プレビュー版です。Edge Reflowの使用中に何か問題が発生したり、既存の機能についてお気づきの点や、追加を希望する機能などがありましたら、ぜひアドビまでお知らせください。皆様のご意見をお待ちしております。

問題の記録:Edge ReflowのGitHub Issues

ご質問やご意見:Edge Reflowのフォーラム

この記事のさまざまなセクションで使用するサンプルプロジェクトが用意されています。

デザインワークフローの選択

デザインプロセスを開始したら、まず、モバイル向けにデザインするのか、デスクトップ向けにデザインするのかを決定しなければなりません。これによって、使用するメディアクエリーの種類(最大幅または最小幅)が変わってきます。Edge Reflowのデフォルトでは、「Maximum(最大幅)」のメディアクエリーを使用し、デスクトップ優先でデザインするように設定されています。モバイル優先に変更するには、メディアクエリーマネージャーパネルで「Minimum(最大幅)」メディアクエリーを選択します。このパネルを表示するには、メディアクエリールーラーの右側にあるボタンを長押しします。「Minimum(最小幅)」ボタンをクリックして、最小幅メディアクエリーに切り替えます。

プロジェクトで使用するメディアクエリーの種類に加え、このパネルでは、メディアクエリーのすべてのブレークポイントを設定し、名前を付けて管理できます。メディアクエリーに慣れていない方のために簡単に説明すると、メディアクエリーとは、ブラウザーのCSS内に記述する条件付分岐のようなものです。画面の幅や向きなど、さまざまなパラメーターに基づいて変更内容を定義できます。Edge Reflowを使ってみたいと考えているユーザーで、メディアクエリーにあまり詳しくない場合は、どのようなものかをひととおり調べてみることをお勧めします。

デバイスではなく、まずデザイン

現在、世界中で何千種類ものデバイスが利用されており、さらに毎月新しいデバイスが市場に投入されています。作成したデザインをこれらすべてのデバイスでテストするのはもはや不可能です。サポート対象のデバイスを気にせず、まずはデザインを作成してしまいましょう。Reflowのサイズ変更可能なカンバスを使用すれば、作成したデザインをさまざまな画面サイズでテストできます。

Reflowでプロジェクトを開始すると、次のようなReflowアプリケーションが表示されます。

Edge Reflowのデザインサーフェスの一番上にあるルーラーは、設計画面の現在の幅を決定するときに役立ちます。カンバスハンドルをドラッグしてカンバスの幅を調整し、作成したデザインが各種画面サイズ(899、1,223、982、433など)でどのように表示されるかを確認できます。

このガイドの後半では、メディアクエリーのブレークポイントを作成し、それに合わせてデザインを調整する方法を説明します。

グリッドのプロパティを選択

モバイルとデスクトップ、どちらを優先してデザインするのかを決定したら、次はグリッドのプロパティを指定します。Edge Reflowのグリッド設定を変更するには、一次コンテナが選択されていることを確認します。カンバスの一番下に次のようなバーが表示されます。

「Layout(レイアウト)」タブのGrid Options(グリッドオプション)パネルを見てください。Grid Options(グリッドオプション)パネルでは、使用する列の数、余白のサイズ、外側余白の表示/非表示、不透明度を指定できます。デザインで使用するすべてのブレークポイントについて、これらのオプションを設定してください。このガイドのサンプルプロジェクトでは、デフォルト設定(12列)を使用します。

Edge Reflowのデザインサーフェスでオブジェクトを配置、移動、またはサイズ変更すると、該当する要素がグリッドにスナップします。スナップ機能を無効にするには、View(表示)/Snapping(スナップ)/Snap to Grid(グリッドにスナップ)を選択します。

ドキュメントレベルのスタイル

グリッドを設定したら、ドキュメントレベルのスタイルを指定しましょう。これにはデフォルトのフォントスタイルと背景スタイルが含まれます。Edge Reflowでこれらのスタイルを指定するには、DOMバー(下図参照)で「Body」という文字をクリックして「Body」を選択します。

「Styling(スタイル設定)」タブでは、基本タイポグラフィと背景のスタイルを指定します。基本タイポグラフィでは、Webデザインの相対サイズ単位「em」を使用します。この値はブレークポイントごとに変更でき、emに基づくすべての要素のサイズに適用されます。このサンプルプロジェクトでは、基本フォントとして、Edge Webフォントである「Source Sans Pro」を指定しています。現在、Edge Reflowでは、Edge WebフォントまたはTypekitフォントをプロジェクトに追加できます。

ツールバー

Reflowでレスポンシブサイトをデザインするときは、4つの主要ツール(選択、ボックス、テキスト、画像)を使用します。ツールバーは、アプリケーションウィンドウの左上に配置されています。

ボックスツール、テキストツールまたは画像ツールを選択して、Edge Reflowカンバス上にデザインを配置します。

レイアウト

Reflowで新しいプロジェクトを開始すると、BodyとContainerという2つの要素が作成されます。最初に表示されるこのコンテナを「一次コンテナ」と呼んでいます。カンバスに追加するすべての要素は、この一次コンテナの子となります。

デザインサーフェス上に配置するボックス、テキストおよび画像は、ドラッグしたり、サイズを調整したり、「Layout(レイアウト)」タブでプロパティを変更したりできます。プロパティインスペクターには値と単位(ピクセル、em、パーセント)を入力できます。

デフォルトでは、カンバス上の要素の「Position(位置)」は静的、「Float(浮動)」は左に設定されています。これらのレイアウトプロパティを変更するには、「Layout(レイアウト)」タブのAdvanced(詳細設定)パネルを使用します。アイテムの位置を「Absolute(絶対)」または「Fixed(固定)」にする場合は、Advanced(詳細設定)パネルでZインデックスも指定できます。

一次コンテナ内にボックス、テキストまたは画像を配置できます。これらの要素を、その他のボックスの子として追加することもできます。ボックスを移動すると、カンバス上でのその要素の相対位置を示す配置枠が表示されます。ボックスを別のボックスの上に移動すると、枠線が濃い青色で表示されます。この状態でボックスをドロップすると、ハイライトされているボックスが(ドロップしたボックスの)親となります。

ボックスのサイズを変更すると、レイアウトした他の要素の位置が調整される場合があります。これらの移動は、他の要素で設定されているCSSレイアウトプロパティによって異なります。例えば、すべてのボックスを左寄せにした場合、ボックスのサイズが大きくなったとき互いに重なり合わないように位置が調整されます。

グループ化とペアレント

カンバス上に要素をレイアウトする際、複数の要素を「グループ化」したり、複数の要素セットに親を割り当て、その親のプロパティを継承すると便利です。

親を追加するには、カンバス上で必要な数の要素を選択し、Edit(編集)/Add Parent(親の追加)を選択します。選択した要素が親を共有できない場合は、このオプションを使用できません。Edit(編集)/Remove Parent(親の削除)を選択して、親を削除することもできます。

ボックスに子が割り当てられている場合、デフォルトでは、それらの子も選択できるようになっています。ただし、ボックスの子を操作する必要がない場合は、それらのアイテムを「グループ化」しておくと便利です。アイテムをグループ化するには、親ボックスを選択して、Edit(編集)/Group(グループ)を選択します。DOMバーにグループアイコンが表示されます。

要素をグループ化またはグループ解除するには、ステータスバーで要素名の横にあアイコンをクリックする方法もあります。このアイコンまたはボックスアイコンをクリックすると、要素の動作がボックスからグループへ(またはグループからボックスへ)切り替わります。

スタイル設定

スタイルの設定は、レスポンシブコンポーネントを作成する上で重要なステップの1つです。スタイルは、プロパティインスペクターの「Styling(スタイル設定)」タブで指定します。スタイル設定オプションには、境界線の追加、背景、シャドウ、カスタムフォントなどがあります。このタブに表示されるスタイル設定オプションは、選択した要素の種類によって変わります。例えば、テキスト要素を選択したときはタブの一番上に「Typography(タイポグラフィ)」パネルが表示されますが、ボックスを選択したときはこのパネルが表示されません。

Edge Reflowには、ある要素のスタイルを、選択した複数の要素に一度にコピーする機能が備わっているので、Webページを効率的にデザインできます。スタイルをコピーするには、既にスタイルが設定されている要素を選択して、Edit(編集)/Copy Visual Styles(表示スタイルのコピー)を選択します。

他の要素を1つ以上選択して、Edit(編集)/Paste Visual Styles(表示スタイルの貼り付け)を選択します。

テキストの操作

テキスト要素には2つの操作モードがあります。カンバス上に最初にテキストを配置すると、実際の文字がハイライト表示されます。

これがテキスト編集モードです。編集モードでは、テキストフィールドの文字を変更したり、テキストブロックの個々の単語にスタイルを設定したりできます。特定のテキストをスタイル設定するには、目的のテキストを選択した後、「Styling(スタイル設定)」タブでスタイルを変更します。対象がテキストのときは、背景、シャドウ、境界線を設定できません。既にスタイル設定されているテキストの一部を選択した場合、段落要素内に<span>が作成されます。テキスト要素に<span>が追加された例を次に示します。

テキストの一部ではなく、テキスト要素全体をスタイル設定する場合は、編集モードを解除して、対象となるテキストブロックを選択します。このモードでは、テキスト要素のサイズ調整ハンドルが表示されます。文字はハイライト表示されません。

テキスト要素をスタイル設定するときは、段落タグでさまざまなCSSプロパティを定義します。Edge Reflowには、各種のタイポグラフィプロパティを変更したり、背景を追加したり、テキストに境界線やシャドウを追加したりするためのオプションが用意されています。

Edge Web FontsとTypekitの使用

TypekitまたはEdge Web Fontをプロジェクトに追加するには、テキスト要素を選択して「Styling(スタイル設定)」タブを開き、Typography(タイポグラフィ)パネルにあるアイコンをクリックします。2つのタブで構成されたフォントダイアログが表示されます。最初のタブでは、プロジェクトにEdge Web Fontを追加できます。

デフォルトではサンセリフのフォントが表示されます。左側にあるいずれかのボタンをクリックすると、他のフォントが表示されます。プロジェクトにフォントを追加するには、目的のサムネールをクリックします。サムネールの右上に表示される青色のチェックマークは、そのフォントがプロジェクトに追加されたことを示しています。

追加したフォントは、Typeface(書体)ドロップダウンメニューに表示されます。プロジェクトからフォントを削除するには、削除したいサムネールをもう一度クリックします。そのフォントのチェックマークが消えます。

このポップアップダイアログには「Custom(カスタム)」タブも表示されます。このタブでは、Typekitフォントをプロジェクトに追加できます。そのためには、7つの文字キットIDを入力フィールドに追加します。このダイアログのアイコンにマウスポインターを合わせると、キットIDの確認方法が表示されます。

キットを指定すると、そのキットのフォントがTypeface(書体)ドロップダウンメニューの上部に追加されます。

画像の操作

Edge Reflowでは、jpg要素、gif要素、png要素およびsvg要素をカンバスに追加できます。画像ボタンをクリックするとファイルダイアログが開き、追加する画像ファイルを選択できるようになります。ボックスやテキストと同じように、カンバス上に自由に画像を配置できます。画像を配置したら、その画像をドラッグしてサイズを縮小できます。ただし、ドラッグ操作では画像サイズを大きくできないので、その場合はプロパティインスペクターを使用します。

SVG要素は、元のサイズより大きくまたは小さくできます。

プロパティインスペクターの「Styling(スタイル設定)」タブでは、画像のソースを変更したり、境界線やシャドウを追加したり、不透明度を変更したりできます。

背景レイヤー

ボックス要素には複数の背景レイヤーを追加できます。これらのレイヤーには、背景色、背景画像または背景グラデーションが含まれます。背景画像を追加するには、「Styling(スタイル設定)」タブを開き、Backgrounds(背景)パネルの最初のボタンをクリックします。ポップアップが開き、背景画像を選択できるようになります。ここでは、位置、拡大縮小、繰り返し、アタッチなどのプロパティも設定できます。

複数の背景画像、カラーまたはグラデーションをボックスに追加できます。これらは並べ替えや削除も可能です。背景レイヤーを並べ替えるには、レイヤーの左側にあるグリッパーを使って上下にドラッグします。

背景レイヤーを削除するには、目的のレイヤーにカーソルを合わせます。そのレイヤーの右側に「x」マークが表示されます。このマークをクリックすると、背景レイヤーが削除されます。

アセットパネルでの画像管理

プロジェクトに追加したすべての画像は、Reflowプロジェクトフォルダーのassets/imgディレクトリにコピーされます。このディレクトリ内の画像アセットはアセットパネルに表示されます。アセットパネルを表示するには、Edge Reflowの右側にあるアイコンをクリックします。

アセットパネルには、プロジェクトのすべてのアセットとそれらの使用回数、別の画像に置き換えるためのアイコン、プロジェクトからアセットを削除するためのオプションが表示されます。Edge Reflowでアセットを削除したり、置き換えたりした場合、それらの操作を元に戻すことはできません。

Edge Reflow以外の場所でアセットが変更されたときは、アセットにアイコンが表示されてその旨が通知がされます。

アセットパネルを開くと、変更されたアセットには更新アイコンが表示されます。このアイコンをクリックすると、アセットが更新されて変更が反映されます。

アセットを変更した場合、それらの変更がデザインに悪影響を与える可能性があるため、Edge Reflowのカンバスには自動的に反映されません。変更したアセットをユーザー自身で更新する必要があります。

要素の複製

カンバス上で要素を複製するには、要素を選択してEdit(編集)/Duplicate(複製)を選択します(または、Cmd/Cntrl + Dキーを押します)。複製したアイテムがカーソル位置に追加されるので、カーソルを移動してカンバス上に配置します。レイアウトとCSSが複雑なため標準的なコピーと貼り付けはサポートしていませんが、現在、急ピッチで調査を進めています。

デザインのナビゲーション

Edge Reflowのカンバス上でアイテムを選択するには、次のような方法があります。

  • 要素をクリックすると、その要素が選択されます。
  • 複数のアイテムを選択するときは、Shiftキーを押しながら各アイテムをクリックします。
  • マウスをドラッグして選択ボックスを描き、選択するすべてのアイテムを囲みます。ボックス内の子アイテムを選択すると、そのボックスも選択されます。
  • Cmd/Ctrlキーを押しながらドラッグします(上記のドラッグして選択する方法と同じです)。ただし、ボックス内の子アイテムを選択したとき、そのボックス自体は選択されません。ボックス内のすべての子アイテムを選択し、ボックス自体は選択しない例を次に示します。

複数の要素を選択したあと、キーボードの矢印キーを使用して、それらの要素を上下左右へ少しずつ移動できます。カンバス上では、複数の要素を一度にドラッグすることはできません。プロパティインスペクターでは、複数の要素のスタイルを変更することもできます。

要素を1つだけ選択した場合は、その要素がDOMバーに表示されます。

該当する要素のDOM階層を見ると、テキスト要素が選択されていることがわかります。複数のアイテムを選択した場合は、DOMバーに何も表示されません。DOMバーでいずれかの要素名をクリックすると、カンバス上でその要素が選択されます。

カンバス上で要素を操作する際に役立つショートカットをいくつか紹介しましょう。

  • Alt + Cmd/Ctrl + Up - 要素の親が選択されます。
  • Alt + Cmd/Ctrl + Down - 要素の最初の子が選択されます。
  • Alt + Cmd/Ctrl + Right - 同レベルの次の子が選択されます。
  • Alt + Cmd/Ctrl + Left - 同レベルの前の子が選択されます。

     

作成しているデザインのDOM階層を表示するには、DOMバーの左側にあるアイコンをクリックします。このアイコンをクリックすると要素パネルが表示されます。

要素パネルでは、カンバス上のアイテムを選択したり、アイコンを使用して要素の表示/非表示を切り替えたり、要素の名前や並び順を変更したりできます。

DOMバーおよび要素パネルのデフォルトのラベルは編集可能です。名前をダブルクリックして、要素の名前を変更してください。変更した名前は、ブラウザープレビューのCSSとHTMLに表示されます。

要素の整列

カンバス上に要素をいくつか追加した時点で、通常、他の要素に合わせてサイズや位置を調整する必要が生じます。Edge Reflowにも、他のAdobeデザインツールでおなじみの整列オプションが備わっています。複数の要素を選択すると、画面右下の整列パネルアイコンを使って要素を整列できるようになります。このボタンをクリックすると、選択した要素を整列(左揃え、中央揃え、右揃え、上端揃え、中心揃え、下端揃え)するためのオプションが表示されます。

さらに、整列パネルを使用して、複数の要素を同じサイズに揃えたり、要素の縦間隔や横間隔を揃えたりすることもできます。

デザインをレスポンシブにする

Reflowで最初のデザインを作成したら、次はいよいよレスポンシブコンポーネントの作成です。サイズ調整用のカンバスハンドルをドラッグして、デザインカンバスを大きくしたり、小さくしたりしてみてください。サイズを変更すると、それに合わせてデザインがリアルタイムでレンダリングされ、そのサイズで実際にどのように表示されるかを確認できます。適切なブレーク位置を確認したら、カンバス上でそのサイズにレークポイントを追加します。アイコンをクリックすると、デザインサーフェス上のルーラーに新しいメディアクエリーマーカーが追加されます。ここで行う変更は、すべてこの新しいメディアクエリーに適用されます。このサイズでデザインを変更すると、プロパティインスペクターでは、該当する領域のCSSスタイルが(該当する領域の色で)ハイライト表示されます。

ブレークポイントを作成するには、ボタンをクリックする以外に、カンバスの上部にあるルーラーをダブルクリックする方法もあります。ブレークポイントを削除するには、マーカーを選択してボタンをクリックします。Edge Reflowでブレークポイントを削除または追加した場合、その操作を取り消すことはできません。

他の領域へ切り替えるには、ルーラーの上にある色付き領域をクリックします。デフォルトセクションをクリックすると、デフォルトの領域へ切り替わります。

状況によっては、カスタム領域でスタイルを変更し、それを他のすべての領域に適用する必要が生じます。その場合、プロパティインスペクターで目的のスタイルにカーソルを合わせると、そのスタイルをすべての領域へ適用するためのボタンが表示されます。このボタンを押すと、そのスタイルの値がデフォルト領域に割り当てられます。

サイズ調整可能なReflowのカンバスでデザインを作成し、ブレークポイントに合わせてデザインを調整したら、レスポンシブデザインの完成です。今後、市場に出回るすべてのデバイスに表示することができます。

デザインの詳細を表示

Reflowのメリットの1つは、デザインの詳細情報を明らかにできることです。Reflowコンポーネントを開発者や関係者に提供することで、作成したレスポンシブなWebデザインをそのまま見せることができます。CSSには、デザインサーフェス上のすべての要素が記述されています。要素のCSSを取得するには、目的の要素を選択し、DOMバーでアイコンをクリックします。CSSパネルが開き、定義した各メディアクエリーのレイアウトとスタイル設定が表示されます。

このポップオーバーの下部にあるアイコンをクリックすると、選択した要素のすべてのCSSがクリップボードにコピーされます。その後、制作サイトで作業している開発者がこのCSSを別のコードエディターに貼り付けて作業すれば、元のデザインビジョンを損なうことなくコードを開発できます。領域のCSS上にカーソルを移動すると、クリップボードアイコンが表示されます。その領域のCSSのみをコピーするときにこのアイコンを使用します。

Photoshopファイルを操作して、色やグラデーションやフォント情報を調整していた時代は終わりました。

ブラウザーでのプレビュー

Edge Reflowには、Google Chromeでデザインをプレビューする機能が用意されています。デザインをプレビューするには、ドキュメントを保存し、View(表示)/Preview in Chrome(Chromeでプレビュー)を選択します。Chromeが開き、デザインのプレビューが表示されます。さらに、Edge ReflowプロジェクトフォルダーのassetsディレクトリにCSS、BoilerplateおよびHTMLが生成されます。

HTML、CSSおよび画像のアセットはWebサーバー上に簡単に配置し、チームのメンバーやクライアントとデザインを共有できます。

デバイス上での共有

作成したデザインがどのような画像サイズでもレスポンシブに表示されることをクライアントに示す場合、デバイス上に物理的に表示するよりもっとよい方法があります。Reflowなら、Edge Inspectと直接連携し、作成したデザインをデバイス上でシームレスに共有できます。この場合、すべてのデバイスおよびデスクトップマシンにEdge Inspectをインストールする必要があります。インストーラーはアドビのCreative Cloudまたはデバイスアプリストアで入手してください。

Edge ReflowでInspectを使用するには、デスクトップおよびすべてのデバイス上でInspectを起動します。Edge Inspect Chrome拡張機能を使用している場合は、この拡張機能を無効にしてください。Edge Reflowの右上にあるアイコンをクリックします。Edge Inspectパネルが開きます。デバイス上でEdge Inspectを起動します。そのデバイスで、使用しているデスクトップのIPアドレスを指定してEdge Reflowへの接続を追加します。デバイスが接続されると次のように表示されます。

Edge Reflowのカンバスでデザインを変更すると、その変更がデバイス上にリアルタイムで反映されます。このワークフローは、デザイン時やクライアントレビューなどで役立ちます。

次のステップ

Edge Reflowの操作をひととおり学習し、レスポンシブWebデザインを作成できるようになりました。Edge Reflowについての感想や改善点などをお寄せください。インターネットに接続して、Reflowアプリケーションを開いたら、右下のダイアログからフィードバックを直接お送りいただくことができます。前述のように、Reflowは数週間ごとにビルドが更新され、非常に頻繁に改善されています。

この記事の執筆にご協力いただいたJacob SurberとVictor Mitnickに深く感謝いたします。

現在、新しいコメントシステムに移行中であるため、コメントの投稿は受け付けておりません。しばらくの間、ご意見やご感想をお寄せいただく場合は、フィードバックフォームをご利用ください。ご迷惑をおかけしますが、どうぞよろしくお願い申し上げます。