レスポンシブデザインってなんですか？
見習いデザイナーが先輩に遠慮なく疑問をぶつける社内のデザイン勉強会。9回目のテーマは「レスポンシブデザインってなに？」です。
レスポンシブデザインとは
入社して初めて聞いた言葉なんですけど、レスポンシブデザインって何ですか？
ウェブサイトってPCとかスマホとかで見るけど、デバイスごとに画面サイズが違うでしょ？
PCは横幅が大きくて、スマホは縦幅が大きいですね
そう。ユーザーのデバイスの画面サイズに合わせてより見やすく、使いやすくしたデザインのことだよ
PC用サイト、スマホ用サイトと別々にウェブサイトを作らずに、一つのhtmlコードをCSSで画面幅に合わせてPC用・スマホ用と表示を変えることで管理しやすくなるっていうのがメリットかな。ワシが若い頃はうんたらかんたら
・・・。同じサイトをPCで見てもスマホで見ても、雰囲気が同じだから違和感を感じませんでしたが、よく見ると配置が変わっていますね
スマホに適したデザインをする必要があるから、全部PCと同じ体裁っていうわけでもないんだよ
レスポンシブデザインってどうやって作ってるんですか？
アドグラフィーでは、PCの画面サイズでデザインをした後に、レスポンシブデザインをしてるよ
PCのデザインをスマホ用に置き換えるんですね
基本的には置き換えだからデータを付け足したり、過剰に要素を削ったりせずに、PCでもスマホでもできるだけ同じ“体験”（ユーザーエクスペリエンス）ができるように工夫してる
雰囲気と可読性のバランス
実際にレスポンシブデザインをするときは、何に気をつければいいですか？
ターゲットの年齢に応じて、読みやすい文字サイズになるようにしてる
スマホだと画面が小さいから、文字も小さいと読みづらいですよね。じゃあ、大きく設定すれば良いんですね！
大きすぎると雰囲気を損なうこともあるから注意して。施設側のイメージとデザインによって、ケースバイケースだから
そっか、デザインと施設の雰囲気を保つ必要もありますよね
読みやすくするには、文字サイズだけじゃなくて、行間と字間の調整も必要で、スマホでは少し詰めるようにしてるよ
スマホでの読みやすい間隔、サイズ感の判断が重要ですね
効果的な画像の見せ方
可読性の点では、文字自体を調整することはもちろんですが、レイアウトを変える場合もあります
どういうときですか？
画像の上に文字を配置している場合は、スマホでは極力被せないようにしています
小さい画面では読みづらくなるんですね
画像のレイアウトで言うと、スマホでは一列に載せる画像は多くても3枚までにしています。それ以上載せると見えなくなるので
見やすさで結構レイアウトを考えないといけませんね
何の画像か認識できるサイズにすることと、トリミングの位置にも気をつけています
スマホ用にトリミングし直したりもするんですね！思っていたよりも工夫がたくさんあります
スマホならではの操作
スマホならではの操作があるから、そこを考えることが重要だと思う。例えばボタンだったら指で押しやすいサイズと配置にしたりね
配置で言うと、PCとはどこが違うんですか？
画面下部に予約とかメニューを配置したら、スマホを持ったとき、親指でタップしやすくない？
あ、確かに！上部に配置するよりも押しやすいと思います
他にも、スクロールの心地良さに気をつけて余白をとったりしてる
スマホでは横幅よりも、縦幅の間隔を意識しているんですね
スマホでの実装を意識して、PCデザインの制作時からレイアウトを考えると良いかなと思う
あとは、同じhtmlコードで表示しないといけないから、レイアウトに少し制約があるからその辺は意識してる。PCとスマホで全然違うレイアウトにすることも可能なんだけど、その分無駄なコードが増えて、少しだけどページスピードにも影響があるからね
まとめ
まとめると、レスポンシブデザインをする時に気をつけることは
PC、スマホでの“体験”を同じにする
『見やすい』『使いやすい』ページレイアウト
スマホならではの操作を意識する
です！制約がある中で、施設の雰囲気を出しつつ、使いやすいウェブサイトを作るための工夫がたくさんありました！
制作部
制作部所属の見習いデザイナーです。見習いの特権をフル活用して、わからないことを先輩方に厚かましく質問する勉強の日々です。