こんにちは！フリーランスでデザイナーをしていますちづみ (@098ra0209)です。
いきなりですが、webサイトのスマホレスポンシブデザインって案外難しいなと感じます。
よっぽど難しいデザインでない限り、基本スマホ版のデザインカンプは用意されないことが多いと考えた方がいいかと思います。
なので、制作はコーダーの塩梅でレスポンシブデザインをしていくのですが、スマホユーザーの割合は結構高めなので、デザインカンプがないといえ、割としっかり考える部分なのかなと。
ぶっちゃけるとデザインはお客さんやクライアントによりけり！なのですが、それだと結局何も答えがでず終わってしまうので、最低限のマナー的な、これは意識した方がいいだろうという部分をピックアップして説明して行きます。
レスポンシブデザインについて
基本１カラムにする
この辺りはだいたいわかるというか、暗黙のルール的なのがあるかと思います。
スマホ時のカラム（列）は最大でも２カラムかと思います。ギャラリー写真でしたら３カラムのありですが（インスタグラムみたいな）文章などのセクションは基本１カラムです。
pcがこれだったら
スマホは基本こうですね
左右の余白を少し開ける
ただでさえ狭いスマホですが、だからと言って無理に幅を確保しようと幅いっぱいに広げるとバランス的にあまりよくないです。
画面の淵にぴったりと文章がくるのはなるべく避け、両幅15pxくらい開けましょう
指動作を考える
pcではカーソルの操作になるのですが、スマホでは指で操作します。
つまり、pcという大きい画面でめっちゃ小さいカーソルを使い、スマホという小さい画面で大きい指を使うことになります。ここも考えると真逆になるので難しいです。
例えばボタンですが、pcだとこのくらいの大きさでもなんら問題はないですが、スマホだとそのままこの比率の大きさだとボタンが押しづらくなります。指の幅でボタンの幅が隠れてしまいがちです。
なので、スマホの幅の80〜90％くらいで大きめに作るのがいいと思います。
指で押しやすくなります！
反復（繰りかえし）になっているか
特にこのようなpcのデザインをスマホにする時、１行目は左から文章、画像の順に対し、２行目は左から画像、文章の順になっています。
これをレスポンシブにする時、１カラムにするとして、この順番のままにすると繰り返しの流れが生まれないので、内容のまとまりがわかりづらくなったりします。まとまりは繰り返すことで作られます。
なのでどちらかの列の順番に合わせて繰り返すように配置をかえます。
↓１列目
↓２列目
まとまりがわかるように離れているか、くっついているか
続きの話になりますが、このpcデザインをレスポンシブにする時、
要するにスマホの１カラムにした時に、このまとまりと、
このまとまりで、区切られているのがパッとわかるようにするべきです。
スマホのデザインカンプがない状態で、よくやりがちなのがこういうので、まとまりとまとまりの間にあまり余白がなく、パッとみてどこでまとまりなのかがわからない状態のものです。
つまり、まとまりの区切りになるこの部分（赤枠）の余白を考えるべきでして、ある程度の余白をとってあげると解決します。
この部分を↓
余白をあけます。
まとまりがわかりやすくなりました！
まとめ
- 基本１カラムにする
- 左右の余白を少し開ける
- 指動作を考える（ボタン等）
- 反復（繰りかえし）になっているか
- まとまりがわかるように離れているか、くっついているか
より実践的で充実したデザインスキルを学ぶなら
キャリアチェンジに強いデザインスキルをしっかり身につけるのであればスクールが一番です。
より本格的なデザインを学ぶのであれば、TECH::EXPERTのデザインクラスがおすすめです。カウンセリングは無料でできますので、ぜひ利用してみてください。（＾_＾）
以上です！
