この記事は僕が個人的に関わっているwallhausというデザインを勉強するコミュニティに向けた資料としても使えるように書いています。初学者も多くいるので、易しめになるよう心がけて書いています。

1回目 : デザインデータと仲良くなる

“レスポンシブ対応”とはなにか

レスポンシブって形容詞なのに“対応”とか付けちゃう感じがいかにも日本語英語っぽいけど、意味としては 画面解像度に応じてウェブサイトの表示を切り替えて最適化する みたいなところが一般的な認識でしょうか。
画面解像度も本来の意味とは少し違うけど、ここでは画面サイズと思ってもらえれば。

デザインカンプは、PC版、SP版というような意識で複数作りますが、実際には見ているデバイスがPCだからこれ、スマートフォンだからこれ、というような出し分けを行なうことは最近は少ないです。

理由はデバイスの区分と画面サイズが多様になってきているから。
iPad ProとかほとんどPCと同じ大きさあったりするし。
そうなると、 単純な画面サイズの大きさ = 利用デバイスとはならない。 なので画面サイズに応じたデザイン、マークアップが求められます。

デザインで大事になってくるのは、ルールの作り方。
画像の大きさの指定や、伸縮したときに行の折り返しがどうなるのかなどを想定しておく必要があります。

レスポンシブ対応で個人的に気を付けているのはこんなポイント

• ブレイクポイントの設定
• テキストの表示幅が狭くなることによる行の折り返し
  • 複数行の際の行間が指定されているか
  • 文字切りを行なうかどうか
• 画像の縦横比が崩れないか
  • 崩れるとしたらどのように処理するか（クロップの仕方）
• 複数カラムで構成されている要素をどのように表示するか
  • 横並びの要素は基本的に縦に並べ直す
• hoverなどのSPではできない処理の見せ方
  • hoverしないと分からないリンクのあしらいなどは使わない
• 文字情報の入っている画像
  • 基本的に横位置で見せることの多いPC版をそのままSP版には使わない

レイアウトに関することが多いですが、フォントサイズなども気をつけたいところ。

その余白はどこについている余白？

伸縮する、ということをあらかじめ想定することが大事ということを話してきて、実例がここまでないので、簡単に具体例を出していきます。

AもBも画像にボタン、よくある見た目。
違いがあるのは、
・Aは画像の幅に合わせた大きさのボタン
・Bはボタンのラベルの長さに合わせた大きさのボタン
になっているということ。

レスポンシブ対応をするときにはこの違いは大きく出てきます。
ボタンのラベル（「ボタン」というテキスト）の両脇の余白はどう考えているかということで変わってきます。

考えるべきこととしては、

• Aのボタンの幅は画像の幅に合わせているのか
  • であれば画像はどの幅に合わせているのか、この大きさ固定なのか、画面幅いっぱいに広げるのか
• 画像、ボタンに最大幅はあるのか
• Bのボタンの幅はコンテンツエリアを超える量のテキストがラベルに入った時どうするか

などがありそうです。

画面サイズに合わせて余白・コンテンツの大きさが変化するのか、中身に対して余白がついてコンテンツの大きさが変化するのか がわかると、実装としても楽に考えることができます。

複雑な構造になるとデザインとして想定することも多くなりますが、整理してルール化すれば実装上指定しなければならないことはそこまで多くはならないです。

少し実践編。
データ作る時、それを読むときのポイントをもう少しまとめたものをまた今度書ければ。

カプーアのクラウド・ゲートの写真 : Photo by Sawyer Bengtson on Unsplash