webサイトコーダーなら最低限知っておきたいスマホレスポンシブデザイン

こんにちは!フリーランスでデザイナーをしていますちづみ (@098ra0209)です。

いきなりですが、webサイトのスマホレスポンシブデザインって案外難しいなと感じます。

よっぽど難しいデザインでない限り、基本スマホ版のデザインカンプは用意されないことが多いと考えた方がいいかと思います。

なので、制作はコーダーの塩梅でレスポンシブデザインをしていくのですが、スマホユーザーの割合は結構高めなので、デザインカンプがないといえ、割としっかり考える部分なのかなと。

ちづみ
コーダーがレスポンシブのデザインを担うのはさりげなく重役を任されている感があります!!

ぶっちゃけるとデザインはお客さんやクライアントによりけり!なのですが、それだと結局何も答えがでず終わってしまうので、最低限のマナー的な、これは意識した方がいいだろうという部分をピックアップして説明して行きます。

 

レスポンシブデザインについて

基本1カラムにする

この辺りはだいたいわかるというか、暗黙のルール的なのがあるかと思います。

スマホ時のカラム(列)は最大でも2カラムかと思います。ギャラリー写真でしたら3カラムのありですが(インスタグラムみたいな)文章などのセクションは基本1カラムです。

 

pcがこれだったら

スマホは基本こうですね

 

 

左右の余白を少し開ける

ただでさえ狭いスマホですが、だからと言って無理に幅を確保しようと幅いっぱいに広げるとバランス的にあまりよくないです。

 

 

画面の淵にぴったりと文章がくるのはなるべく避け、両幅15pxくらい開けましょう

 

指動作を考える

 

pcではカーソルの操作になるのですが、スマホでは指で操作します。

つまり、pcという大きい画面でめっちゃ小さいカーソルを使い、スマホという小さい画面で大きい指を使うことになります。ここも考えると真逆になるので難しいです。

例えばボタンですが、pcだとこのくらいの大きさでもなんら問題はないですが、スマホだとそのままこの比率の大きさだとボタンが押しづらくなります。指の幅でボタンの幅が隠れてしまいがちです。

 

なので、スマホの幅の80〜90%くらいで大きめに作るのがいいと思います。

指で押しやすくなります!

 

反復(繰りかえし)になっているか

 

特にこのようなpcのデザインをスマホにする時、1行目は左から文章、画像の順に対し、2行目は左から画像、文章の順になっています。

これをレスポンシブにする時、1カラムにするとして、この順番のままにすると繰り返しの流れが生まれないので、内容のまとまりがわかりづらくなったりします。まとまりは繰り返すことで作られます。

なのでどちらかの列の順番に合わせて繰り返すように配置をかえます。

↓1列目

↓2列目

 

 

まとまりがわかるように離れているか、くっついているか

 

続きの話になりますが、このpcデザインをレスポンシブにする時、

要するにスマホの1カラムにした時に、このまとまりと、

 

このまとまりで、区切られているのがパッとわかるようにするべきです。

 

スマホのデザインカンプがない状態で、よくやりがちなのがこういうので、まとまりとまとまりの間にあまり余白がなく、パッとみてどこでまとまりなのかがわからない状態のものです。

 

つまり、まとまりの区切りになるこの部分(赤枠)の余白を考えるべきでして、ある程度の余白をとってあげると解決します。

この部分を↓

余白をあけます。

まとまりがわかりやすくなりました!

 

 

まとめ

 

スマホ注意点
  • 基本1カラムにする
  • 左右の余白を少し開ける
  • 指動作を考える(ボタン等)
  • 反復(繰りかえし)になっているか
  • まとまりがわかるように離れているか、くっついているか

以上です!