(@098ra0209)です。webサイトのスマホレスポンシブデザインって案外難しいなと感じます。難しいデザインでない限り、基本スマホ版のデザインカンプは用意されないことが多いと考えた方がいいかと思います。制作はコーダーの塩梅でレスポンシブデザインをしていくのですが、スマホユーザーの割合は結構高めなので、デザインカンプがないといえ、割としっかり考える部分なのかなと。ちづみコーダーがレスポンシブのデザインを担うのはさりげなく重役を任されている感があります!!ぶっちゃけるとデザインはお客さんやクライアントによりけり!なのですが、それだと結局何も答えがでず終わってしまうので、最低限のマナー的な、これは意識した方がいいだろうという部分をピックアップして説明して行きます。レスポンシブデザインについて基本1カラムにするこの辺りはだいたいわかるというか、暗黙のルール的なのがあるかと思います。スマホ時のカラム(列)は最大でも2カラムかと思います。ギャラリー写真でしたら3カラムのありですが(インスタグラムみたいな)文章などのセクションは基本1カラムです。pcがこれだったらスマホは基本こうですね左右の余白を少し開けるただでさえ狭いスマホですが、だからと言って無理に幅を確保しようと幅いっぱいに広げるとバランス的にあまりよくないです。画面の淵にぴったりと文章がくるのはなるべく避け、両幅15pxくらい開けましょう指動作を考えるpcではカーソルの操作になるのですが、スマホでは指で操作します。pcという大きい画面でめっちゃ小さいカーソルを使い、スマホという小さい画面で大きい指を使うことになります。ここも考えると真逆になるので難しいです。ボタンですが、pcだとこのくらいの大きさでもなんら問題はないですが、スマホだとそのままこの比率の大きさだとボタンが押しづらくなります。指の幅でボタンの幅が隠れてしまいがちです。スマホの幅の80〜90%くらいで大きめに作るのがいいと思います。指で押しやすくなります!反復(繰りかえし)になっているか特にこのようなpcのデザインをスマホにする時、1行目は左から文章、画像の順に対し、2行目は左から画像、文章の順になっています。これをレスポンシブにする時、1カラムにするとして、この順番のままにすると繰り返しの流れが生まれないので、内容のまとまりがわかりづらくなったりします。まとまりは繰り返すことで作られます。どちらかの列の順番に合わせて繰り返すように配置をかえます。要するにスマホの1カラムにした時に、このまとまりと、このまとまりで、区切られているのがパッとわかるようにするべきです。スマホのデザインカンプがない状態で、よくやりがちなのがこういうので、まとまりとまとまりの間にあまり余白がなく、パッとみてどこでまとまりなのかがわからない状態のものです。まとまりの区切りになるこの部分(赤枠)の余白を考えるべきでして、ある程度の余白をとってあげると解決します。基本1カラムにする左右の余白を少し開ける指動作を考える(ボタン等)反復(繰りかえし)になっているかまとまりがわかるように離れているか、くっついているかより実践的で充実したデザインスキルを学ぶならねこやっぱり転職とか独立に強いデザインスキルをもっとしっかり学びたいにゃちづみ実際、私がそうだったように未経験からデザイナーになるのは可能です!キャリアチェンジに強いデザインスキルをしっかり身につけるのであればスクールが一番です。本格的なデザインを学ぶのであれば、TECH::EXPERTのデザインクラスがおすすめです。カウンセリングは無料でできますので、ぜひ利用してみてください。(^_^)TECH::EXPERTをみてみる以上です!サイト制作デザインツイートシェアはてブGoogle+Pocketfeedlyジャンル毎に選ぶウェブサイト配色参考カラーコード【html.css】flex-boxで左にサイト名、右にメニューのナビゲーションバーの作り方を解説するよRECOMMENDこちらの記事も人気です。@098ra0209会社員→小学校の先生→フリーランス国内外を旅しながらホームページ屋をやっている人です。現在は日本各地や東南アジアを転々としながら生活しています。ノマドの働き方や、フリーランスのあれこれについて発信しています。