CS6は無料でダウンロードできるとはいえ、30日の期限が付いています。30日を過ぎると何らかの形で購入が必要になります。30日以内にいろいろな機能を試してみましょう。Cloudにはレスポンシブルなページを作成するツールがもう1つあります。CS6より簡単に、レスポンシブルなレイアウトを作成するためのツールです。CS6は、こういうページが作りたいというイメージや、仕様がすでに固まっていて、それに基づいて制作をするためのツールでした。Reflowは、その前段階、プロジェクトの初期段階などで、実際に動作可能なレスポンシブルページを「モック」として作ることを念頭に置いています。ディレクター、営業さんが、クライアントにレスポンシブデザインを説明する際にも、その場でもらったイメージを画像にして、ぱぱっと作り、プレゼンに使えます。Reflowを見ていくことにしましょう。Reflowをダウンロードできます。Xの場合はダウンロードしてマウントすると、アプリケーションフォルダに直接コピーするようにとFinderのウィンドウが開きます。コピーが終わればインストール完了です。UIが英語ですから、ちょっと尻込みするかもしれません。画面左側にあるレイアウトのタブを見てみてください。Margin、Padding、FloatというCSSで見慣れた言葉が並んでいます。アイコンも見やすくなっているので、MarginのTopはこれだなとすぐ分かるようになっている点もうれしいですね。同様にStylingのタブを見てみると、装飾系のプロパティが並んでいます。これもCSSで見慣れた言葉が並んでいます。リージョンの作成さて、早速レイアウトの基を作っていきましょう。Reflowでは「リージョン」と呼んでいます。直訳すると「地域」ですが、各横幅で決められた領域と見れば理解できます。スマートフォン用とタブレット用、それ以外のデフォルトの3つのリージョンを作ります。デフォルトはすでにありますから、新規で作るのは2つとなります。ちなみに、スクリーンショットには含めましたが、いわゆるメニュー項目は使用しません。リージョンの追加は2つの操作で行います。画面右側中央にある、ドラッグバーをドラッグします。スマホ用は大体320pxぐらいで作るようですから、画面上部のルーラーの数字を見つつ、適当にドラッグしてください。後で修正もできるので、思うがままにさっと作業しましょう。そのまま変形されました。これはこれでOKです。カラムの数も設定通りですので、後できちんと設定し直します。ここで画面右上にある「+」をクリックします。すると、現在の幅のリージョンが追加されました。ドラッグバーを次は1040あたりに動かしてください。なるでしょうか?先ほど追加されたリージョンは追従しませんが、画面は追従してきました。タブレット用のリージョンを「+」で追加しましょう。必要であれば、さらにリージョンを追加できます。画面上部に追加されたリージョンのバーをクリックすると、レイアウトのドラッグバーが移動して設定した幅になり、また、プロパティもそのリージョン固有の値になります。いまはどのリージョンでもカラム数が12となっていますが、スマホ用に関してはカラム数を5にしてみましょう。OptionsにあるColumnsを5にします。レイアウトもしやすくなりました。この状態で他のリージョンを見てみましょう。カラムの数がもともとの12に戻りましたね。このように、カラム数はもちろん、余白をどうするのか、レイアウトはどう変わるのかを、それぞれ設定していくことになります。リージョンの横幅の変更の仕方です。これは実に簡単で、リージョンの横幅が書かれてある部分のマーカーをドラッグするだけです。マーカーが選択されている状態でDeleteキーを押すと、リージョンが削除されます。ピクセル単位で設定するとき、ドラッグが煩わしいときがあります。「+」マークの辺りをクリック長押ししましょう。リージョンの一覧が表示され、修正や削除が行えます。labelをダブルクリックすると、ラベルを設定できます。ラベルを設定するとビューの横幅表示がラベル表示に切り替わります。必要に応じて使い分けるといいでしょう。Reflow独特のパネルの使い方について知っておきましょう。皆さんが普段使われている、さまざまなソフトウェアのパネル類と使い方は同じです。選択したオブジェクトのさまざまなプロパティが表示されているので、それを適宜必要な値に直していきます。Reflowは選択しているオブジェクトそれぞれに、リージョンでその値確認していきましょう。スマホ用でタイトル部分に当たるDivの設定をして、タブレット用とデフォルトは共通の値を使ったり、または、すべてに同じ値を適用したりしたいこともあります。パネルの値を触ろうとすると、その値のフィールドの右側に、見慣れないボタンが表示されるのが分かると思います。regions.」とあります。「すべてのリージョンに入力した値を適用」という意味です。変更した値をすべてのリージョンに適用したいときは、このボタンをクリックするということです。表示中のリージョンだけに適用したいときは、入力後、Enterキーを押すだけでOKです。パネルには表示中の値が全体に適用されているのか、現在のリージョン固有の値なのかを色分けして表示されます。パネルの色はリージョンのカラーとリンクしています。メールマガジンをご購読ください。Japanスマートジャパン3Dモデラボキャリア@IT自分戦略研究所エンジニアライフディルバートアプリITmediaねとらぼねこらぼついトピ!ITmediaはアイティメディア株式会社の登録商標です。