PhotoshopからはじめるCSS再入門 第6回：ブレークポイントで大胆にレイアウト変更
（この記事では2014年6月公開のAdobe Edge Reflow CC Preview 8を使用しています）
前回の記事では、デザイナーとしてもうこれは耐えられないと感じたその限界のところでブレークポイントを打ち、画像や文字の大きさを変える方法を紹介しました。今回は前回の応用として、ブレークポイントごとにレイアウトを変更する方法を紹介します。
画像素材の準備
画像は、画面の幅に応じて縮小したり、一部をトリミングして使いますので、画面の幅より大きめのサイズで用意します。ここでは、幅1024px程度の画像を4枚用意します。
実際の制作では、解像度の高いスマートフォン向けに幅・高さが2倍の画像を用意したりしますが、Edge Reflowはレスポンシブ・カンプを作るためのソフトウェアですので、カンプ制作と割り切って作業します。
基準となるデザインの作成
まず幅が広いときのデザインを作ります。最初に完成イメージをみておきましょう。
1. コンテナの変更
Edge Reflowで新規プロジェクトを開いた状態で最初に選択されているのは、コンテナと呼ばれるものです。コンテナにはグリッドが表示されていて、グリッドの数や透明度、コンテナそのものの幅などを変えることができます。
今回のレイアウトではグリッドを使わないので、Opacity（不透明度）を0にして見えなくします。また、コンテナの幅を1000pxに変更します。
2. 上段のボックスの配置
まず左側のボックスを作ります。Sizeの幅を33%、高さを340px、上マージンを80pxにして、他のマージンは0にします。Stylingタブに切り替えで、適当な背景色を設定します。
今作ったボックスの右側の、少し離れたところをクリックして、新しいボックスを作ります。
Sizeの幅を67%、高さを340px、上マージンを80px、他のマージンは0にして、適当な背景色をつけておきます。
幅を67%にした瞬間に、新しく作ったボックスが下の段へ送られてしまいます。
しかしこれは、右に入りきれずに下へ移動してしまった一時的な状態なので気にせずに作業を進めます。左マージンを0にしたときに、新しく作ったボックスが、左のボックスにぴったりくっついて、狙い通りのレイアウトになります。
わざわざ離れたところに作ってから左へ寄せなくても、最初から真横にぴったり置いたらいいのでは？と思うかもしれません。できないことはないのですが、微妙なマウス操作が必要です。ボックスの境界ぎりぎりのところで新規ボックスを作ろうとすると、下図のように太い水色の枠が表示されます。
この状態で作られたボックスは、見た目の位置は正しいように見えるのですが、最初のボックスの子、つまりボックスの中のボックスとして作られてしまいます。
このように作られたボックスは、親の位置が基準になるため、あとで思ったようにレイアウトを変更できません。親子の関係を作らずに、独立したボックスとして作りたい場合は、この水色の枠が表示されない、ほんの少し右側の位置に作るとよいのですが、操作ミスを避けるため、さきほど詳細した手順のように少し離れた位置に作ってから寄せる方法が簡単でよいと思います。
3. 下段のボックスの配置
左のボックスを作ります。幅を33%、高さを200px。上マージンを6px、右マージンを0.5%、他のマージンを0にし、適当な背景色をつけます。
レスポンシブデザインでは、画面の「幅」に応じて変化するので、ボックスや画像などの横方向の位置や幅は「%」、縦方向の位置や高さは「px」で指定するとうまくいきます。
真ん中のボックスを作ります。さきほど作ったボックスの上で右クリックし、メニューから「Duplicate（複製）」を選びます。
次に配置する場所を選びます。さきほどのボックスのすぐ右側にマウスカーソルを移動させて、縦長の挿入バーが表示されたら、クリックして配置します。
幅や高さなどの値はすべてコピーされているので、右マージンだけ0.5%に設定します。
最後に、右側のボックスを作ります。同じように複製し、右側に配置します。
これですべてのボックスが配置できました。
4. イラストの配置
左上のボックスにイラストを配置します。Adobe Illustratorで適当な絵を描いたら、それをコピーします。
Edge Reflowに戻り、左上のボックスを選択してからペーストします。この操作だけでイラストはSVG形式に変換され、ボックスの子として配置されます。イラストが中央にくるように上マージンを調整し、Floatを「Center」にして中央寄せにします。
5. 画像の配置
最後に画像の配置です。右上のボックスに画像を置きます。右上のボックスを選択し、Styingタブに切り替えて、「Add Image Layer（画像レイヤーの追加）」ボタンをクリックします。
Finder（Windowsの場合はエクスプローラー）から、画像ファイルをドラッグ＆ドロップして設定します。Position（位置）の縦方向を40%、Scaling（拡大縮小）を120%にします。数値は写真の内容によって適宜調整してください。
同じ要領で、残りの３つのボックスにも画像を置きます。すでにトリミング加工済みの写真であれば、配置してScalingを100%に設定するだけでOKです。
これで基準となるデザインの完成です。
最初のブレークポイント
今回は２つのブレークポイントを作り、レイアウトを変えます。最初のブレークポイントは1000pxのところに打ちます。ハンドルをおおよそ1000px付近まで動かし、ブレークポイントを打ちます。ブレークポイントについてよく分からない場合は前回の記事も参照してください。
このブレークポイントで作るレイアウトはこのようなものです。
今は1000pxのブレークポイントを作ったばかりなので、ここから先の操作はすべて1000pxのブレークポイントに対しての操作になります。Edge Reflowで作業する場合は、必ず自分がどのブレークポイントに対して作業しているか確認する癖をつけてください。
1. コンテナの幅の変更
画面上部の何もないところをクリックして、コンテナを選択します。コンテナの幅を「90%」にします。コンテナの両側に空きが生まれます。
2. イラストが入ったボックスのレイアウト変更
1つ目のイラストが入ったボックスからレイアウトを調整していきます。
まずイラストを上に寄せます。ボックスの中のイラストだけを選択し、上マージンを調整してボックスの上端に寄せます。
次にボックスを選択し、Sizeの幅を100%、高さを100px、上マージンを60pxに変更します。
3. 写真が入ったボックスのレイアウト変更
最初の2つの画像を横幅いっぱいにします。
まず、2つ目のボックスを選択し、Sizeの幅を100%、上マージンを0pxに変更します。
3つ目のボックスを選択し、Sizeの幅を100%、上マージンを20pxに変更します。
このままだと写真のトリミングが大胆すぎるので、Layoutタブに切り替え、画像レイヤーをクリックして、PositionやScalingを調整します。Scalingの幅を100%、高さを空欄のままにすることで、画像はコンテナの幅に対して100%の幅で表示され、上下が切られます。空欄はauto（自動）という意味になります。
残りの2つの画像は横に並べましょう。
4つ目のボックスを選択し、Sizeの幅を49%、上マージンを20px、右マージンを2%にします。
さきほどと同じように画像も調整します。Positionの縦方向を「center」にすると、画像が縦方向の中央寄せになります。他にも「top」（上寄せになる）や「bottom」（下寄せになる）もありますので、必要に応じて選びます。
5つ目のボックスを選択し、Sizeの幅を49%、上マージンを20pxにします。画像も調整します。
これで1000pxのブレークポイントのレイアウトが完成しました。ハンドルを左右に動かし、1000pxの前後でレイアウトが大胆に変わることを確認します。
2つ目のブレークポイント
もうひとつのブレークポイントは550pxのところに打ちます。ハンドルをおおよそ550px付近まで動かし、ブレークポイントを打ちます。
画面上部の何もないところをクリックして、コンテナを選択します。コンテナの幅を「100%」にします。コンテナの両側の空きがなくなります。
さきほどとほぼ同じような作業なので、詳細は省略しますが、最終的にこのようなレイアウトになるように仕上げます。
550px以下では、幅が極端に狭くなっていくので、画像の高さを100%より大きな値にし、幅を「auto（自動）」にするとうまくいくと思います。
ハンドルを左右に動かし、レイアウトが変わることを確認します。
Photoshopなら何枚もレイアウト違いのカンプを作らなければならないところ、Edge Reflowを使うと同じ素材を使って複数のレイアウトを組める上に、実際に動くCSSのコードまで一度にできてしまうので、一石二鳥です。
もちろん実際には、幅の狭いパソコンのブラウザや、画面がとても大きなタブレットなど、それぞれで望まれる表示を行うなど、さまざまな工夫や処理を行う必要がありますが、レスポンシブなカンプ作成としては、かなりスピード感のあるデザインができると思います。