PhotoshopからはじめるCSS再入門第5回：我慢できなくなったらブレークポイント

PhotoshopからはじめるCSS再入門

（この記事では2014年6月公開のAdobe Edge Reflow CC Preview 8を使用しています）

前置きに4回もかかってしまいましたが、いよいよレスポンシブWebデザインにとりかかりましょう。

Edge Reflowによるデザイン

Adobe Photoshopを使った従来のデザインでは、ある決まった幅に対して作業してきました。PC版、スマートフォン版と、別々のPSDを用意するのが一般的だと思います。

一方、Adobe Edge Reflowを使ったレスポンシブWebデザインでは、画面の幅に応じて、文字や画像の大きさ、レイアウトなどを変え、それらのデザインを１つのファイルで管理します。

ブレークポイント

文字の大きさやレイアウトが変わる幅のことをブレークポイントといいます。無理やり日本語にすると「限界点」といったところでしょうか。

だんだん画面の幅を小さくしていくと、画像は縮小され、文章は頻繁に改行されて表示されるようになります。デザイナーとしてもうこれは耐えられないと感じたその限界のところでブレークポイントを打ち、画像や文字の大きさ、段組みを調整します。

風船も息を吹き込んでいけば徐々に膨らんでいきますが、やがて限界点を迎えると破裂します。これがブレークポイントです。

このような劇的な変化が起きるポイントを「メジャーブレークポイント」、小さな変化が起きるポイントを「マイナーブレークポイント」と呼ぶ人もいます。

モバイルファースト？

では実際にEdge Reflowでブレークポイントを打ちながらレスポンシブデザインを体験してみましょう。ボックスや画像や文字の扱い方についてはこれまでの連載を参照していただくとして、さて、幅の広いほうと幅の狭いほう、どちらからデザインしたらよいでしょうか？

「モバイルファーストでしょ？」という人がいるかもしれません。この言葉がネット上に広がったのは1〜2年前でしょうか。モバイルファーストという考え方は、モバイルからデザインしましょうということではなく、本当に必要な情報や機能は何なのか、モバイル中心に考えていこうというものです。

それはそれとして、レスポンシブデザインでは、幅が狭くなるにつれて要素を一部省略したり、段組みを変えたりすることが多いので、幅の広いほうから進めたほうがうまくいくと思います。

基準となるデザインの作成

それではEdge Reflowでデザインを始めましょう

まず幅が広いときのデザインを作ります。想定するのはPCのブラウザの画面です。たいていの人は幅800ピクセル以上で開いてくれていて、人によっては1200ピクセル、1600ピクセルということもあるかもしれません。

1. メインビジュアル用のイラストの作成

準備として、Adobe Illustratorで4枚のイラストを描き、それぞれSVG形式で保存します。SVGはJPEGのようなビットマップ画像ではなく、ベクター画像形式です。ブラウザ上で拡大縮小してもなめらかに表示されます。

01-ai-save-as-svg SVG形式で1枚ずつ複製を保存する

2. イラストの配置

Edge Reflowで新規プロジェクトを開き、適当な場所に適当な大きさでボックスを置きます。ボックスのSizeの幅を100%、高さを500pxにして、Marginをすべて0にします。

Stylingタブに切り替えて、Backgroundsの「Add a color…（色の追加）」をクリックし、イラストの背景になじむようにBackgroundの色を指定します。

Backgroundの色を決めたら、続いてさきほど保存したSVG形式のイラスト画像を追加します。Add Image Layer（イメージレイヤーの追加）ボタンをクリックして、画像ファイルを選択します。

読み込んだ画像の表示方法を指定します。Scaling（拡大縮小）の幅を「100%」、Repeat（繰り返し）を「No Repeat」（繰り返しなし）とします。

画像が幅いっぱいで配置できました。

3. 見出しの追加

次に画像の下に、見出し用のテキストボックスを配置し、適当な英文を入力します。このテキストには後ほどWebフォントを指定します、半角アルファベットだけで何か入力しておいてください。

見出しの表示位置を調整します。Sizeは「auto」に、Marginは上マージンを「530px」、Floatは「center」にします。

次に見出しのテキストスタイルを指定します。Stylingタブに切り替えて、好きなWebフォントと色を設定し、Sizeを「6.5em」にして、Alignを「Align Center」（中央揃え）にします。

見出しを配置できました。

4. 本文テキストの配置

本文のテキストボックスを、さきほどの見出しの下に配置し、テキストは日本語で適当な文章を入力します。Sizeを「800px」、Floatを「center」にします。

Stylingタブに切り替えて、行の高さを「1.5em」にします。

これで、すべての要素を配置できました。

ハンドルを左右に動かして、画面の幅を800px～1100px（PCブラウザで標準的な幅）で変えてみながら問題ないかチェックします。

幅に応じてイラストが拡大され、本文の左右の余白の大きさが変わると思います。

最初のブレークポイント

幅800pxで「もう我慢できない、限界だ！」となったとして、このあたりにブレークポイントを打って、デザインを変更してみましょう。
800px以下で想定するのは、縦に置いたタブレットです。iPadなら768pxですが、世の中のタブレットの画面サイズはさまざまで、しかも縦で見るか横で見るかわかりませんから、あまり細かい数字を気にする必要はありません。むしろデザイナーとして「もう限界だ」と感じるところにブレークポイントを打つほうが自然でしょう。

1. ブレークポイントの追加

ハンドルを左右に動かして、幅をおおよそ800pxのところにします。

画面右上の「＋」をクリックしてブレークポイントを打ちます。

次にこの「＋」ボタンを少しの間、押したままにします。するとブレークポイントの一覧が表示されますので、幅を800pxちょうどにします。

色のついたバーとマーカーが画面上部に表示されました。（色はあなたの環境では紫ではないかもしれませんが気にしないでください）

これから加えるデザインの変更はこのバーが示す幅の範囲で有効ということを表しています。800pxより外側の黒いエリアでは変更はなされず、元のデザインが引き続き有効です。

2. 画像の差し替え

それでは今からデザインに変更を加えていきます。

まず、今作ったブレークポイントのバーをどこでもよいのでクリックします。下の図の紫色の箇所です。

これはとても大切な操作です。今から、ブレークポイントの左右のどちら側に対して変更を加えるのか、Edge Reflowに教えてあげるのです。

画像をクリックして、Sizeの幅を「450px」に変更します。

Stylingタブに切り替えBackgroundの画像レイヤーをクリックして開き、次にサムネイルをクリックしたあと、別の画像を選択して差し替えます。

赤枠の部分をクリックすると、画像を差し替えられます

3. 見出しの調整

次に見出し文字をクリックし、上マージンを「480px」にします。

Stylingタブに切り替えて、Sizeを「5em」にします。

さきほどから、変更した部分だけ色が変わっていますね。これはブレークポイントのバーの色と同じになっていて、このブレークポイントにおいて変更が加えられたということを示しています。

4. 本文テキストの調整

本文のテキストボックスの幅を90%にします。

ハンドルを左右に動かして、ブレークポイントの前後の変化を確認します。

800pxを境に画像が差し代わり、見出しの文字の大きさが変化していることがわかります。

２番目のブレークポイント

次に、600pxにブレークポイントを打ってデザインの調整を行います。600px以下で想定するのは、小さめのタブレットです。さきほどと同じ手順で画像を差し替えていきますが、作業する前に600pxのブレークポイントに対して作業するということを、バーをクリックしてEdge Reflowに知らせてあげてください。