レスポンシブデザインとは

レスポンシブデザインとはパソコン・タブレット・スマートフォンなど、見る画面の幅に合わせてレイアウトが自動で切り替わるように作る方法のことです。

レスポンシブデザインでは1つのページを、画面の幅に応じて並び方や文字の大きさを変えて表示します。パソコンでは横に並べていた画像を、スマートフォンでは縦に積む、といった切り替えを行います。

なぜ必要か

Webサイトを見る人の多くはスマートフォンを使っています。パソコン向けのレイアウトをそのまま縮めると、文字が小さすぎたり、ボタンが押しにくくなったりします。どの画面でも読みやすく、操作しやすい状態にしておくことが、問い合わせなどの成果にもつながります。

作るときのポイント

画面の幅がどこで切り替わるか（ブレイクポイント）を決め、それぞれの幅でデザインを確かめます。パソコンの見た目だけで決めず、スマートフォンでの読みやすさから考える「モバイルファースト」という考え方もあります。