現代のウェブデザインにおいて、さまざまなデバイスや画面サイズに対応したレスポンシブデザインは欠かせない要素となっています。本記事では、STUDIOでのレスポンシブ対応の基本から、より効率的な対応方法までを徹底解説します。

レスポンシブ対応とは？

レスポンシブ対応とは、ウェブサイトやアプリケーションのデザインが、さまざまなデバイスや画面サイズに適応し、見やすく表示されるように調整することです。レスポンシブ対応を行うことで、ユーザーはどのデバイスでも情報を正確に読み取ることができます。

レスポンシブ対応ができていないサイトでは、画像やテキストが見切れたり、ボタンが押せなかったりするため、ユーザーに最適な体験を提供できません。

▼ レスポンシブ対応できていないサイト

▼ レスポンシブ対応できているサイト

STUDIOのレスポンシブの基本

ブレイクポイントについて

ブレイクポイントは、レスポンシブ対応において、画面の幅やデバイスのサイズに応じてデザインやレイアウトが変化するポイントを指します。STUDIOではデフォルトで3つのブレイクポイントが設定されており、最大で5つまで追加できます。どのデバイスでも綺麗に表示させるために、5つまで増やしてレスポンシブ対応するのがおすすめです。

STUDIOでは、1つのプロジェクトに対して同じブレイクポイントでレスポンシブ対応を行います。ページごとにブレイクポイントを変更することはできませんので、注意しましょう。

ブレイクポイントは、各ポイントごとの幅の制限の中で編集可能ですが、特に理由がない場合は、デフォルトのブレイクポイントを利用するのがおすすめです。

レスポンシブデザインの反映方法

STUDIOでは、画面幅の大きいデバイスのデザインが、小さい画面幅のデバイスにも適用されます。そのため、まずPC版（画面幅が一番大きいポイント）でデザインを作成し、その後順番に画面幅を小さくしていき、デザインを調整する必要があります。

例えば、PC版でボックスの幅を300pxに設定すると、タブレット・モバイル・ミニでも300pxが適用されます。

このBOXをタブレット版で150pxに変更すると、PC・Smallでは300pxのままになっており、タブレット以下のデバイスである、モバイル・ミニでは150pxが適用されます。

このようにデザインが反映されるため、必ずPC版（大きい画面幅）のデバイスからデザインを作成しましょう。

実際にレスポンシブ対応してみよう

今回は、この3つのメニューを使って、レスポンシブ対応の操作方法を解説していきます。

PC版での設定を確認

まずは、現状のPC版での設定を確認しましょう。
一番大きな親BOXの設定を、横幅1100px、縦幅autoに設定し、中央揃え、下に向かって整列という設定にしています。

1つ1つのメニューに対しては、横幅33.33%、縦幅autoに設定しています。

基準(PC版)で、デザインが綺麗に表示されているか確認しましょう。
具体的には、とても大きい画面幅で見た時にデザインが崩れていないか、Smallに入るギリギリの画面幅のサイズでデザインが崩れていないかを確認します。

▼ 大きい画面幅での確認

▼ Smallになる直前の画面幅での確認

このように、次のブレイクポイントのギリギリの画面幅までデザインが綺麗に実装できているかをその都度しっかり確認しておくことで、丁寧なレスポンシブ対応が実現できます。後戻りも少なくるので、必ず確認しましょう。

Smallでのレスポンシブ

次に、Smallでレスポンシブしていきます。上のバーで、Smallに切り替えましょう。

タブレットになるギリギリまでの範囲を動かして、デザインが崩れていないか確かめます。崩れてはいませんが、より整ったデザインにするため、微調整をしていきましょう。

Smallでは、全体の横幅を90%、写真とテキスト同士のギャップを20pxに、写真の横幅を100%・縦幅を300pxに、テキストの大きさを24pxに、メニュー間のギャップを25pxにしました(左から順番に)。上部のバーを見てみると、変更したスタイル部分にのみSmallデバイスの色(水色)がついていることが確認できます。

Tabletでのレスポンシブ

先ほどと同様に、上のバーで、Tabletに切り替えましょう。Tabletでは、2カラムにしていきたいので、各メニュー幅を50%にします(左画像)。このままだと、右で見切れてしまっているので、メニュー3つが入っている<ul>のBOXの並び順をジグザグに設定しましょう(右画像)。

Mobileでのレスポンシブ

先ほどと同様に、上のバーで、Mobileに切り替えましょう。Mobileでは、1カラムにしていきたいので、各メニュー幅を100％に設定します(左画像)。文字の大きさも、24pxにして調整します(右画像)。

Miniでのレスポンシブ

上のバーで、Miniに切り替えましょう。特に問題なさそうなので、今回はMiniでは調整を加えません。

最後の調整

すべてのブレイクポイントで調整ができたら、最後にエディタ上で、すべての画面幅でデザインが調整できているか確認します。お手持ちのタブレットやスマートフォンで端末検証をしてみてください。

レスポンシブの注意点(画面幅ごとに設定を変更できない項目)

テキストの文言や改行位置

テキストの文言は、すべてのデバイスで共通のものが表示されます。同様に、改行位置も共通のものが表示されます。デバイスごとに表示したい文言を変更したい場合は、表示・非表示の設定を使って実装する方法があります。

表示・非表示項目の設定方法

今回はわかりやすいように、BOXを使って表示・非表示設定を解説します。(※テキストに対しても同様の設定を行うことができます。)下画像のように、濃い青のBOXに対しては、「表示」項目で基準・スモールのみにチェックを入れ、グレーがかった青のBOXはタブレット〜ミニのみでチェックを入れます。

すると、下画像のように、基準・スモールでは濃い青のBOXを、タブレット以下のデバイスでは、グレーがかった青のBOXを出しわけすることができました。

BOXの親子構造・追加や削除

BOXの親子構造は、すべてのデバイスで共通となります。そのため、AとBを対等な関係で配置していたが、モバイルでのみ、Aの中にBを入れる(Aを親BOX、Bを子BOX)に変更するという操作はできません。

そのため、モバイル版でレスポンシブ対応を行っている際に、グループ化など構造を変える操作をする場合は、PC版にも影響するので、注意して操作しましょう。構造を変える場合は、一度PC版に戻って構造を変更し、Small、Tablet、Mobileの順にデザインの崩れがないか確認しながら変更していく必要があります。

新しいBOXの新規追加・削除などもすべてのデバイスで共通となります。表示・非表示の設定をうまく活用してデバイスごとにコンテンツの出しわけを行いましょう。

画像のタグ・画像の内容

画像に対して、BoxタグかImgタグかを選ぶことができますが、こちらも全デバイスで共通の設定となります。また、画像の内容も共通になります。表示したい画像をデバイス間で出しわけたい場合は、表示・非表示の設定を利用しましょう。

STUDIOのレスポンシブ対応のコツ

全部に反映させたいものはPC版で編集

STUDIOのレスポンシブ対応でよくあるミスが、すべてのデバイスに反映させたい変更なのに小さいデバイス上で変更を加えてしまうというミスです。すべてに反映させたい変更は、必ずPC版で修正しているか確認するようにしましょう。

全体の横幅はPCが1000px-1200pxの間で固定しSmall以下は85%-95％設定

ワイドモニターなどの横幅の大きいデバイスで見られる場合は、PC版のデザイン設定が反映されます。画面幅が大きいデバイスでも綺麗に表示させるためには、PC版で横幅を1000px-1100pxあたりでpx指定しておくことがおすすめです。ここで横幅を他の設定(%設定など)にしてしまうと、横伸びのデザインとなってしまい、綺麗に表示させるのが難しくなります。

また、Small以下の画面では、全体の横幅を85%-95％あたりに設定しておくのがおすすめです。

3カラム・2カラムのコンテンツの横幅は%で設定

ブログ記事など2-4カラムのコンテンツの横幅は%で設定するとレスポンシブ対応が効率的に行えます。例えば、3カラムのものであれば、横幅を33.33%に設定すれば、レイアウトを保ったまま、綺麗にレスポンシブを行ってくれます。

ブログなどは、PC版では3カラムでも、モバイル版では2カラムか1カラムにする必要があります。その場合は、PC版で横幅を33.33%、モバイル版からは50%または100%に設定すれば綺麗なブログ一覧が出来上がります。

テキストは見出し・Pグでデバイスごとに大きさを統一しておく

テキストの大きさ変更はレスポンシブ対応で頻繁に行われる操作です。h1の見出しやpタグの本文など、どのページでも共通で使用するテキストは、あらかじめ各デバイスごとの文字の大きさを以下のような表でまとめておくとレスポンシブ対応を素早く行うことができ、統一感のあるサイトを実現できます。サイトのデザインによって文字の大きさは変わってくるので、デザイン段階で文字の大きさを決めておきましょう。

縦並びのBOXには縦幅autoを使う

縦並びのBOXに対しては、縦幅をautoに設定しておくと、自動的に親BOXの縦幅が変更されるので便利です。ここでpx指定をしていると、画面幅が小さくなったとき、BOXの下からはみ出してしまうので注意しましょう。

まとめ

いかがだったでしょうか。STUDIOでサイト制作する際、レスポンシブ対応の技術はとても重要です。経験を積みコツを掴むことで、素早く綺麗なレスポンシブ対応を実装することができます。