こんにちは！後半の記事をご覧いただき、ありがとうございます。
本記事では、前半でお伝えしきれなかったStudioの「レスポンシブ」機能に関する実践的なTipsや、直近のアップデートで追加された便利な新機能をご紹介します。
日々の制作業務で役立つ操作方法や設定の工夫を、具体例を交えて解説していきます。
まだご覧になっていない方は、ぜひ先にこちらの記事（Studio Tips 前半）もチェックしてみてください。
Studioのレスポンシブ
前半の記事では、実際に設定しているレスポンシブ値やブレイクポイントについてご紹介しました。画面変化時に「どの画面を基準に調整すべきか」という疑問は、ある程度解消できたのではないかと思います。
しかし、画面幅を狭めると、PC画面では表示できていたデザインが、タブレットやモバイル画面では崩れたり表示しきれなかったりすることがあります。本来は、制作段階でレスポンシブを見越した設計を行うことが理想です。ですが、表現したいデザインによっては、PCとスマートフォンで大きくレイアウトを変える必要が生じます。
例えば、写真の配置を左右で入れ替える、横並びのカードを縦並びにする程度であれば、Studioではボタン一つで簡単に変更可能です。
一方で、「PC画面の写真をスマホでは非表示にしたい」「1行の文章をモバイルでは改行したい」といった場合は、コンテンツ自体を変更するため、全デバイスに同じ変更が反映され、デザインに影響してしまいます。
そんな時に役立つのが、コンテンツの「表示／非表示」設定です。これを活用することで、デバイスごとに異なるデザイン表現が可能になります。
「表示」「非表示」機能を使ったレスポンシブ
デザインエディターの左上にある「目」のマークが「表示／非表示」設定です。
「表示・非表示」機能のアイコン。デザインエディタを開き、ページ内のコンテンツをクリックすると上部に出現するタスクバーの一番左にある。
カーソールを合わせると、プルダウンでブレイクポイントを設定した画面幅が表示されます。
「デフォルト」とは基準幅のことです。今回、参考にしているNextwelのデザインエディタでは、スモールサイズのブレイクポイントを追加しています。Studioの白紙の新規ページでは、「デフォルト」「タブレット」「モバイル」の3種類のみ設定されています。
この左のチェックを外すと「非表示」に。
チェックを入れると「表示」されます。
実際の活用例
NextwelのHPを参考に、ご説明します。
弊社のファーストビューはPC画面では横長、モバイル画面では縦長に対応できるように、「表示／非表示」機能を部分的に使用しています。
NextwelホームページのPC画面のファーストビュー。
PC画面では、横幅に余裕があることを活かして、テキストと画像のレイアウトを横並びに配置しています。
Nextwelホームページ、モバイル画面のファーストビュー。
一方、モバイル画面では画面幅が狭いため、テキストと画像を縦並びに配置し直しています。
ここで注目していただきたいのは、PC画面と異なり、画像が白いボックスの外に出ている点です。
PC画面の白いボックスをそのまま縦並びにすると、画面いっぱいに白いボックスが広がり、左右の余白が少なく圧迫感がありました。
そこで、画像を白いボックスの外に配置したところ、圧迫感がなくなり、スッキリとした印象に。テキストのメッセージがより際立ち、伝えたいことが明確になりました。
ただし、このレイアウト変更では、PC画面とモバイル画面でレイヤー構造が異なるため、「表示／非表示」機能を使って実装しています。
レイヤー構造で見る「表示・非表示」機能
PC画面とモバイル画面のレイヤー構造を並べてみると、部分的に「表示／非表示」機能が使われていることがわかると思います。
まず、PC画面のレイヤー構造を見てみましょう。
白色のボックスは、「表示／非表示」機能を適用したコンテンツです。
このボックスを選択して設定を確認すると、PC画面ではすべてのブレイクポイントにチェックが入っています。つまり、全ブレイクポイントでこのコンテンツが表示される状態になっているということです。
一方、こちらはモバイル画面のレイヤー構造です。
先ほど全ブレイクポイントでチェックが入っていた「ボックス内（PC）」の中の「写真」部分が、ここではグレーアウトしています。つまり、ボックスのレイアウトはそのままに、写真だけを非表示にし、テキストのみを表示している状態です。
さらに、その下にある「ボックス内（モバイル）」というレイヤーの「表示・非表示」機能を確認してみましょう。
これはモバイル専用に作られたボックスなので、「表示・非表示」機能のチェックは「モバイル」にしか入っていません。つまり、PC・スモール・タブレットの画面には非表示になっています。
この様に、各ブレイクポイントでレイアウトが崩れたとしても、個別に調整ができ、柔軟に対応できるのが「表示／非表示」機能です。
見た目のデザインを追求するあまり、各ブレイクポイントで「表示／非表示」機能を多用すると、どのレイヤーをどこまで表示にし、どこを非表示にしたのか分からなくなることがあります。特に、実装後に修正が入った際に発生しやすいトラブルです。
このような混乱を防ぐためには、レイヤー名を明確に整理するか、レイヤー構造を過度に細分化しないよう心がけることが重要です。
「表示／非表示」機能について、詳しくは「ボックスの表示設定 | Studio Help」をご覧ください。
Studioの文字サイズ設定
さて、ここからは2024年11月にアップデートされた、Studioの便利な新機能をご紹介します。
文字サイズの単位にバリエーションが追加されました。今までの文字サイズは「px」で固定値を設定する方法しかありませんでしたが、「rem」・「vh」・「vw」という単位が増えました。それぞれ、使い方を説明します。
rem（相対的な単位）
HTMLのルート要素のフォントサイズを基準にする相対的な単位です。閲覧ブラウザの文字サイズ（通常16px）がremの基準値として機能します。
サイズ指定は1remを基準に倍数で行います。たとえば、デフォルト設定の16pxでは、「1rem」は16px、「2.5rem」は40pxになります。閲覧者がブラウザでフォントサイズを変更した場合、rem単位で指定された要素も自動で調整されるため、アクセシビリティが向上します。
PCやタブレット、モバイル端末、さらには機種によっても、ブラウザの既定の文字サイズは異なります。たとえば、同じiPhoneでも文字サイズを大きく設定し、可読性を高めている方もいますよね。
そこで便利なのが、「rem」という単位です。
「rem」は、閲覧しているブラウザの既定の文字サイズを基準に、文字サイズを相対的に調整してくれるため、デバイスや設定の違いに柔軟に対応できます。
vh（ブラウザの縦幅が基準）
ブラウザの縦幅（表示領域）を基準にした単位です。画面の高さに応じてテキストのサイズを可変させることができます。
主に縦書きレイアウトを採用したデザインにおいて、使い勝手の良い単位です。
画面の高さが縮小されても、テキストが上下で見切れたり、意図しない位置で改行されたりすることなく、画面の高さ内にきれいに収まります。
vw（ブラウザの横幅が基準）
ブラウザの横幅（表示領域）を基準にした単位です。画面の横幅に応じてテキストのサイズを可変させることができます。レスポンシブデザインで、画面幅に合わせてテキストサイズを変更したい場合に適しています。
vhとは対照的でvwは横書きのレイアウトを採用したデザインにおいて、使い勝手の良い単位です。画面の横幅が縮小されても、テキストが改行されることなく、画面幅に収まります。
ファーストビューでの使用はもちろん、各セクションの見出しに使用するのもおすすめです。
アクセシビリティでは要注意
「vh」や「vw」は、画面の縦幅・横幅に応じて拡大・縮小される単位ですが、アクセシビリティの観点では注意が必要です。
実際のブラウザで画面をズーム（拡大）してみると、文字サイズは変わらず、そのまま表示されてしまいます。
これは「vh」「vw」の構造上の仕様であり、文字サイズをズーム操作に連動させるには、専用の数式を用いたコーディングが必要です。
現時点では、Studio上でこの問題を解消する手段は提供されていません。
そのため、アクセシビリティに配慮したページを制作する際には、文字サイズへの「vh」「vw」単位の使用は避けることを推奨します。
Studioの画像サイズ設定
文字サイズの単位が追加されたのと同時に、画像のサイズ設定に使える新たな単位として「vw」や「dvh」も追加されました。
vw（ブラウザの表示領域に合わせた横幅）
ブラウザの横幅（表示領域）を基準にした単位です。「100vw」と指定するとブラウザの横幅に応じて、サイズ（比率）が自動調整されます。
文字サイズの単位と同じく、「vw」も横幅を基準とした単位です。背景画像を「100vw」として設定することをおすすめします。
一見「100％」と似ていますが、実際には依存する対象が異なります。
「100％」は親ボックスの幅に依存するのに対し、「100vw」はブラウザの表示領域全体の幅に依存します。
この違いにより、たとえば画面いっぱいに背景画像を表示したい場合、これまでは画像をセクションの外に出す必要がありましたが、「100vw」を使えば、画像をセクション内に配置したままフル幅で表示できるようになりました。
dvh（実際の表示領域に合わせた縦幅）
ブラウザ上の実際のコンテンツ表示領域を基準にした単位です。
スマートフォンでWebサイトを見るとき、画面上部のURLバーが表示されたり隠れたりすることで、実際に見える領域が変化します。「dvh」はこのような画面スクロールによって変化する見える領域に合わせて自動的に高さを調整します。
「100vh」 は、「ビューポートの高さ100%」という意味の単位ですが、ブラウザのUI（アドレスバーやナビゲーションバー）も含んだ高さを基準にします。
そのため、スマートフォンや一部のモバイルブラウザでは、
- ページを表示した直後 → アドレスバーが見えている
- スクロールして少し経つと → アドレスバーが非表示になる
という挙動の違いによって、画面の高さが変化し、意図しない余白やはみ出しが発生することがあります。
赤色の枠線で囲んだ部分がアドレスバー
「100dvh」は、「実際に表示されているビューポートの高さ」を基準にします。
つまり、アドレスバーなどのブラウザUIを除いた“見えているエリア”を100%とする単位です。
これにより
- アドレスバーの表示・非表示による高さの変化に自動対応
- ユーザーが見ている領域にぴったりフィット
- 高さ指定による不自然な余白・欠け・スクロールの発生を防止
つまり、dvh を使えば、モバイルで「アドレスバーのせいでレイアウトがズレる」問題を解消できます。
StudioのWEBアクセシビリティTipsあとがき
いかがでしたでしょうか？
前編・後編にわたりご覧いただき、誠にありがとうございました。
2024年から2025年のわずか1年間で、Studioには多くの新機能が追加・アップデートされました。
今回ご紹介した内容はその一部にすぎず、私自身もまだ十分にキャッチアップできていない機能がたくさんあります。
今後も、Studioのアクセシビリティ対応や、すぐに使える実践的なTipsをまとめて発信していく予定です。
引き続きご覧いただけますと幸いです。
ウェルサーチ 障害者・編集チーム
最新記事 by ウェルサーチ 障害者・編集チーム (全て見る)
- ノーコードツール『Studio』の使い方｜WEBアクセシビリティ事例Tips～後編【2025版】 - 2025年9月14日
- ノーコードツール『Studio』の使い方｜WEBアクセシビリティ事例Tips〜前編【2025年版】 - 2025年7月26日
- 日本発の国際障害者団体PEACE INCLUSION PIECE懇親会@東京 - 2025年7月23日