必要条件

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

HTML、CSS、およびレスポンシブWebデザインの基本概念に精通していること。

 

説明の対象となる製品

ユーザーレベル

すべて

原文 作成日: 2013/2/14

Introducing Edge Reflow Preview

最新のWeb開発での課題の1つは、レスポンシブWebサイトをデザインすることです。レスポンシブWebデザイン(RWD)では、メディアクエリーや可変グリッドなどの新しいCSS手法を使用して、ページを様々な画面サイズに適合させます。1つの画面サイズ用にデザインする代わりに、スマートフォンからタブレット、デスクトップに至るまで、複数の画面サイズ用にデザインします。残念ながら、標準的のデザインツールの多くは、このレスポンシブWebデザイン用に作成されていませんでした。

昨年発表されたAdobe Edge Reflowは、デザインワークフローでのこのニーズを満たすために作成された新しいツールです。

Edge Reflowを入手する

Creative Cloudに加入されている方は、すぐにプレビュー版をダウンロードできます。加入されていない方は、Creative Cloudの無料版にサインアップすることで、このプレビュー版をお試しになれます。

Adobe Edge Animateでその1.0のリリース前にいくつかのプレビュー版が公開された場合と同様に、Reflowでも開発の早い段階でプレビュー版が公開されています。プレビュー版では、予定されるすべての機能が実装されているわけではありません。また、いくつかのバグが含まれている場合さえあります。しかし、こうした早期のリリースにより、チームはユーザーからの意見や提案を聞き、製品に取り入れることができます。こうした点に注意しながら、プレビュー版をお試しください。

このツールの使用理由

Reflowは、デザインのためのPhotoshop/Fireworks、または開発のためのDreamweaver/Edge Codeに代わるものではありません。しかし、Webベースのデザインサーフェスで標準規格準拠のCSSを使用して、レスポンシブなレイアウトやデザインのための、様々な操作を行うことができます。Edge Toolsのデザイン思想に従って、Reflowは軽量設計になっており、主要なタスクに焦点を絞っています。Reflowでは現在、3つの基本的な要素をサポートしています。ボックス(HTMLのdiv要素)、テキスト要素、画像です。このプレビュー版のリリース時点で、Reflowは、既存のHTMLドキュメントを開くことには対応していません。

インターフェイスを理解する

Reflowのインターフェイスは、2つの基本領域である、デザインカンバスとプロパティインスペクターに分かれています。まず、デザインカンバスを見てみましょう。デフォルトでは、この領域は、多くのレスポンシブデザインフレームワークの最新のトレンドに合わせて、12列に分かれています(図1参照)。デザイン領域の幅を調整するには、右側にあるハンドルをドラッグします。この方法でドラッグすると、各列の幅は、追加したコンテンツと共に、均等に拡大・縮小されます。

デザインカンバスの上部でMedia Query Barの下にあるのが、ピクセルルーラーです。Media Query Barには、メディアクエリーの各ブレークポイントが表示されます(図2参照)。この機能については、この記事の後半で詳しく説明します。

デザインカンバスの下にあるのが、Canvas Barです(図3参照)。このバーには、選択したアイテムの要素パスが表示されます。コンテンツを追加し、個別のメディアクエリー設定で様々なプロパティ値を設定し始めたら、<>ボタンを使用してCSSをすばやく調べることができます。要素パスの先頭にあるアイコンをクリックして、要素パネルにアクセスします。要素パネルでは、プロジェクトの詳細な構造をすばやく表示できるだけでなく、要素の表示と非表示を切り替えることもできます。Canvas Barには、整列パネルとページズームコントロールもあります。

デザインカンバスの横にあるのが、プロパティインスペクターです(図4参照)。プロパティインスペクターで、各要素とコンテナ自体のレイアウトやスタイリングのパラメーターを調整します。プロパティインスペクターの上にあるのが、Reflowで使用可能な3つのデザイン要素である、ボックス、テキストボックス、画像です。さらに、選択ツールもあります。

メディアクエリーを定義する

コンテンツを追加する前に、デザイン用に様々なメディアクエリーを定義してみましょう。Luke Wroblewski氏のMobile Firstのパターン(英語のみ)に従って、まず、スマートフォン用の幅を定義します。

  1. デザインカンバスをドラッグして幅が320ピクセルになるようにします。今は厳密にこの幅にならなくてもかまいません。この幅は後ですぐ調整します。
  2. メディアクエリーを追加するには、ルーラーの右にある「Add Media Query」ボタンをクリックします。紫色のバーが、0から右側のデザインサーフェスの左端へと、ルーラーに沿って表示されます。

    バー上の山形のパターンを使用して、メディアクエリーが基づいているのが、画面の最大幅であるか最小幅であるかが示されます。デフォルトでは、メディアクエリーの「Orientation」は「Maximum」に設定されており、デスクトップ向けのデザインがデフォルトデザインとなっています。表示されている数値は、このメディアクエリーがトリガーされる正確なピクセル値を示しています。

  3. デザイン領域の幅を厳密に320ピクセルにしていなかった場合は、ピンを目的の位置に正確にドラッグするか(ここでは320ピクセル)、ポップオーバーで幅の値を編集します。
  4. 「Add Media Query」ボタンをクリックしたままにして、表示ラベルを追加します。このメディアクエリー用に320ピクセルの値はそのままにし、方向のルールを編集し、ラベルを付けます。
  5. 480ピクセル幅の画面、768ピクセル幅の画面、1,024ピクセル幅の画面用に追加のメディアクエリーを定義します。

注意:このバージョンでの制限の1つとして、各領域に使用されているカラーは変更できません。

グリッドを調整する

デザインカンバスを320ピクセルのマークまで小さくします。列が細くなりすぎていることに注目してください(図6参照)。その問題を解決しましょう。

  1. プロパティインスペクターに戻ります。
  2. コンテンツのコンテナが選択されていることを確認し、列数を12から4に減らします。

    プロパティインスペクターで、列の値は紫色になり、この値に関連付けられているメディアクエリーと同じカラーになります。Reflowでは、現在表示されている幅に固有のあらゆる属性や設定は、自動的にその幅と同じカラーで表示されます。

  3. 他のメディアクエリー領域の列数を任意の値に変更します。

コンテンツを追加する:ボックス

ホームページの基本レイアウトを作成しようとしているため、「ヒーロー」領域を作成することから始めましょう。「ヒーロー」画像は、最初に閲覧者の目を引くように最も大きく印象的にデザインされている、ページ上の主要な画像のことです。

ここではヒーロー領域を複数の要素で構成するため、ボックス要素(HTMLのdiv要素)から始める必要があります。

  1. Boxツールを選択し、ページの上部の1番左の列の左端でクリックします。

  2. ボックスをデザイン領域いっぱいの幅までドラッグして拡大します。現在のところReflowでは、ボックスの描画中、左マージンと上マージンの値のみが表示されます。プロパティインスペクターを使用して、幅を100%に変更します。

    値の編集時、ドロップダウン矢印と別のアイコンが表示されます。ドロップダウン矢印では、各要素で使用する定義済みの単位(ピクセル値、パーセント値、ems、またはauto)を変更できます。別のアイコンでは、その値をデフォルトのブレークポイントにプッシュして、そのブレークポイントのプロパティを各領域に適用できます。

背景を変更する

  1. 「Styling」タブを選択して、ボックスの背景、境界線、シャドウ、不透明度のプロパティにアクセスします。
  2. このボックスに使用される背景色と背景画像を定義します。Reflowでは、3つのWebカラーモデルであるRGBa、16進値、HSLaをすべてサポートしています。背景色を「RGB(44,122,176)」に設定します。
  1. 次に、「Add Image Layer」ボタンを選択します。これにより、背景画像の設定コントロールが表示されます。画像自体の選択だけでなく、その配置、拡大・縮小、繰り返し、固定方法を設定できます(ポップオーバー上に画像をドラッグするか、クリックしてファイル選択ダイアログボックスを表示します)。デモフォルダーからfeatured-bg.jpgを選択します。Reflowでは、保存したReflowプロジェクトファイルと同じ階層にあるassetsフォルダー内のimgディレクトリに、画像が自動的にコピーされます。
  2. 画像のプロパティに対してその他のいくつかの調整を行います。次のように変更します。
    • 横方向の配置を「center」(または50%)に変更。
    • 縦方向の配置を「top」(または0%)に変更。
    • 繰り返しのプロパティを「No Repeat」に変更。

コンテンツを追加する:テキスト

次は、この領域内で何らかの導入テキストを追加してみましょう。

  1. ページを320ピクセルのブレークポイントに設定していることを確認します。
  2. Textツールを選択し、上から15ピクセルの位置に、2列目に揃うように配置します。
  3. デフォルトのテキストを「Making Conferences Usable」に変更します。
  4. 「Styling」タブに切り替えます(ReflowはEdgeスイートのツールであるため、Edge Web Fontsのサポートが組み込まれています)。「Typeface」ボタンをクリックして、Edge Web Fontsパネルを表示します。「Serif」セクションから「Lustria」を選択し、「Apply Property To All Regions」ボタンをクリックします。
  5. テキストのカラーを黒から白に変更します。もう一度「Apply Property To All Regions」ボタンをクリックします。今はサイズの値を無視します。
  6. フォントの太さを「700」に変更します(CSSの仕様では、「700」の太さは太字と同じです。通常の太さは「400」と定義されています)。

「Add a Shadow」ボタンをクリックして、テキストにシャドウをすばやく追加することもできます。

  1. 水平方向のオフセットを1ピクセルに設定し、垂直方向のオフセットを2ピクセルに設定します。
  2. カラーを「RGB(44,122,176)」に調整します。
  3. 最後に、ぼかしを2ピクセルに設定します。

    この時点で、テキストはこの領域で灰色に見える場合がありますが、ブラウザーでは適切に表示されます。

しばらく、ページのサイズを各ブレークポイントまで変更してみてください。テキストは適切には表示されないでしょう。そこでReflowが威力を発揮します。

  1. ページを480ピクセルのブレークポイントに設定します。今度は、テキスト要素のプロパティを次のように調整します。
    • Size:100%
    • Height:auto
    • Left Margin:0%
    • Alignment:Center
    • Size:2em

      これらの値を他の領域に適用しないでください。これらはテキスト要素の基準値を置き換える値になります。

  2. ページを320ピクセルのブレークポイントに設定し、次のように設定を変更します。
    • Size:100%
    • Height:auto
    • Left Margin:0%
    • Alignment:Center
  3. 768ピクセルのブレークポイント用には、次のように設定します。
    • Size:48.85%
    • Height:Auto
    • Left margin:12.75%
    • Alignment:Left
  4. 1,024ピクセルのブレークポイント用には、次のように設定します。
    • Size:48.83%
    • Height:Auto
    • Left margin:10.21%
    • Alignment:Left
  5. 最後に、デフォルトのサイズを次のように設定します。
    • Size:40.29%
  6. さらに横長の画面用に、テキストの整列を「Center」から「Left」に戻し、テキストのオフセットをさらに少し増やします。

要素ツリーを使用する

Canvas Barにあるのが、要素ツリーコントロールです。このコントロールでは、選択した要素の階層パスが表示されます。パス内の他の要素には、クリックするだけで、すばやく移動できます。また、<>アイコンをクリックして、選択した要素のメディアクエリールールを調べることもできます。

このパネルでは、各メディアクエリーに設定されているすべてのプロパティを確認できます。クリップボードにそれらのすべてのプロパティをコピーできます。必要になりそうな特定のルールのセットのみをコピーすることもできます。

要素パネルを使用する

要素ツリーの左側にあるのが、要素パネルです。このパネルでは、DOM全体(その階層構造)を表示できます。目のアイコンをクリックすることで、要素の表示と非表示を切り替えることもできます。

これはプロジェクトの構造を確認できる強力なツールです。

コンテンツを追加する:画像

画像をヒーロー領域に追加してみましょう。

  1. デザイン領域をデフォルトの幅に戻します。これにより、画像を適切に配置するための領域が広がります。
  2. Imageツールを選択し、デモフォルダー内のhilightedApp-1.pngを参照します。ページ上の目的の場所に画像を配置します。

    この画像はヒーロー領域内に必要なため、ボックスの境界線に沿って青いグローが見えることを確認します。これは、画像がそのコンテナの外側ではなく内側に追加されることを示します。

  3. 画像は上から15ピクセルの位置に、右から3番目の列に沿って配置しました。

まず変更するプロパティの1つは「Float」です。右にフロートするように変更します。これにより、新しいフロート方向を反映するために、マージンの値が自動的に変更されます。

  1. デザインカンバスのサイズを768ピクセルのブレークポイントに変更します。

    画像がテキストの妨げになることに注目してください。この画面サイズ用には、画像を縮小する必要があります。

  2. 画像の「Size」プロパティの値をこの領域用に25%に変更します。

    480ピクセルと320ピクセルの両方の画面サイズ用には、画像がまったく表示されないようにしてみましょう。

  3. Advancedペインで、「Display」オプションを「Block」から「None」に変更します。

    デザインカンバスでこの要素のアウトラインは表示されますが、要素は表示されなくなります。

これで、ヒーロー要素内の画像はレスポンシブになりました。

要素をグループ化する

Reflowのもう1つの特徴は要素をグループ化できることです。この機能が非常に便利になるのは、デザインが大規模になり、同様に反応する要素のグループが必要になった場合です。

  1. 再度、デザインカンバスをデフォルトのサイズに設定します。
  2. タグラインの下に新しいテキスト要素を追加します。

    より大きいテキストのブロックを貼り付けた場合は、画像の上にはみ出す可能性があります。

  3. テキスト要素のサイズを50%に変更します。
  4. 左マージンがタグラインのものと一致していることを確認します。
  5. ここまでの手順を各領域に対して繰り返します。
  6. 必要に応じてフォント名、テキストカラー、その他の視覚的プロパティを調整します。

    より小さい画面用には、スマートフォンの画像が表示されないようにしたため、テキスト要素の幅は無視してもかまいません。

  7. 320ピクセルの領域用には、サイズを100%に戻します。要素の右、下、左に10ピクセルの余白を追加します。

    サイズ変更されて配置されるとき、スマートフォンの画像はより大きい領域では予期したように表示されませんでした。この問題を解決するには、タグラインとその他のテキストをグループ化し、同じコンテナ内に配置します。

  8. 両方のテキスト要素を選択し、Edit/Groupを選択します(またはCommand/Ctrl + Gキーを押します)。

    これで、これらの要素は別の1つの div内に含まれました。

  9. 必要に応じて、480ピクセルと320ピクセルの領域に対してマージンや幅を再調整します。

これで、ヒーロー要素内の画像はレスポンシブになりました。

作業結果をプレビューする

これまでの作業結果はデザインカンバスでは確認してきましたが、本当に確認する必要があるのは、それが実際のブラウザーでどのように動作するかです。

  1. View/Preview in Chromeを選択して、Google Chromeでプロジェクトを開きます。

    注意:今回はまだプレビューリリースであるため、「Preview in Chrome」はデザインの共有や意見交換が目的で実装されています。実稼働用の品質基準を満たすものではありません。

  2. 「OK」をクリックします。

    作業結果のデザインがChromeで開きます。

「Adobe Edge Inspect」ボタンを使用して、そのデザインをモバイルデバイスにブロードキャストすることもできます。Edge Inspectになじみのない方は、ADCの記事「Adobe Edge Inspect:様々なデバイスで手軽にブラウザーテスト」を参照してください。

現在のところReflowでは、作成されたHTMLとCSSの完全な書き出しはサポートしていません。ソースにアクセスするには、プロジェクトをプレビューします。次に、Chromeの開発者向けツールを使用して、HTMLとCSSを表示します。Reflowでは、index.html、boilerpate.css、reflow.cssの3つのファイルが作成されます。

  • index.htmlには、デザインのマークアップが保存されています。
  • Boilerplate.cssは、一般的に使用されているHMLT5Boilerplate(英語のみ)の1バージョンです。
  • Reflow.cssには、カスタムCSSとグリッドシステムが保存されています。

このプレビューモードのすべてのコードをプロジェクトにコピーします。

これは実稼働用のコードとしての使用は意図されていないことに注意してください。今回はプレビューリリースです。何らかの問題が発生する場合があります。

次のステップ

Edge Reflowでいろいろと試し、見て、作ってみてください。ご意見やご提案がありましたら、フィードバックをお送りください。製品の今後の方向付けの参考にさせていただきます。  フィードバックは@Reflowまでお送りください。何か不具合がございましたら、ご遠慮なくご報告ください。最後になりましたが、Reflowは開発プロセスの初期段階にあるため、Reflowチームは頻繁に変更を行っています。この点はどうかご了承ください。