ノーコードツール『Studio』の使い方｜WEBアクセシビリティ事例Tips〜前編【2025年版】

こんにちは！お久しぶりです。

 

👉 ノーコードツール『STUDIO』のWEBアクセシビリティ機能を紹介！簡単な設定で対応可能に

あれから1年。Studioには複数回のシステムアップデートが入り、機能面もさらに充実しました。

 

この1年間で、NextwelではStudioを使ったプロジェクトを通じてStudioへの理解が深まり、よりアクセシブルなWEBサイトをつくれるようになったと実感しています。

 

今回の記事では、上記の過去記事と対比しながら、”「Studioを1年間使いながら、学んで活用したTips」”をピックアップ。実際の活用例を交えて、アクセシビリティの向上に役立つものから、Studioを使いこなすヒントをご紹介します。

 

代替テキスト

代替テキスト（Altテキスト）とは、WEBページ上の画像に対して設定されるテキストの説明です。

 

主にスクリーンリーダーを使用してWEBサイトを閲覧する際に、画像の内容を理解できるように使われます。過去記事では、StudioのAlt設定方法をご紹介しました。

 

今回は

1. コンポーネントを使用した時のAlt設定方法
2. 動画のAlt設定について

以上2点について記述します。

 

コンポーネントへのALT設定

コンポーネントの活用方法を会得してから、最初につまずいたのが「コンポーネント内の画像にAltテキストを設定する方法」でした。

 

通常どおりAltを設定すると、そのコンポーネントを使用しているすべての画像に同じAltテキストが反映されてしまうため、写真ごとに固有のAltが付けられないことに気づきました。

 

「コンポーネントは便利だけど、これでは画像が持つ情報を伝えきれないのでは？」と悩んだのですが──
実は、ちゃんと設定方法がありました！

 

コンポーネントとは

「コンポーネント」とは、同じ構成要素の「ボックス」や「カード」を複数個作る時に便利な機能です。

 

 

コンポーネントを使うことで、文字サイズやボックス内のレイアウトはそのままに、文章や写真だけを個別に差し替えることができます。

 

特に便利なのは、「文字サイズを変更したい」といった場合に、親コンポーネントを一箇所編集するだけで、同じ見た目の他のコンポーネントにも一括で反映される点です。

一方、コンポーネントを使用していない場合は、すべての要素を個別に修正する必要があります。

 

あらかじめコンポーネントを設定しておくことで、作業の手間が大幅に削減され、効率的な編集が可能になります。

 

Studioのコンポーネント管理

Studioでコンポーネントを作成する方法は「Studio.help | コンポーネント」をご覧ください。コンポーネントを作成したら、各要素を個別に編集できるように、「コンポーネントの管理」から紐づけを設定しておく必要があります。

 

こちらの設定方法については「Studio.help | コンポーネント管理」に詳しく記載されていますので、ぜひご参照ください。

 

StudioのコンポーネントのALT設定方法

では、早速コンポーネントの管理からAlt設定を触っていきましょう。

 

1. コンポーネントの管理から写真を選択
2. Alt欄に「女性が悩んでいるイラスト」という代替テキストを記入

 

 

写真のAlt欄に代替テキストを入力すると、設定しているすべての写真のAlt欄に同じ内容の代替テキストが入ってしまいます。

 

 

ではどうすればいいのか？この手順で設定してみてください。

 

1. コンポーネントの管理要素に「Text」を追加
2. 「Text」の管理名を「ALT」に変更
3. 画像を選択
4. 右パネルを開いて「ALT」の空欄をクリック
5. プルダウンから「ALT」タグをクリック

 

これで、各写真のALTを個別で設定することができるようになります。

 

 

 

動画のALT設定

画像のAlt設定については過去の記事でも取り上げましたが、正直なところ、動画のAltについてはこれまでまったく触れていませんでした。

 

Studioアクセシビリティラジオで話題に上がった際に、「たしかに…！何も設定していない…！」と気づき、反省したのがきっかけです。

 

今回は、使用頻度の高い YouTube動画の埋め込み に絞ってご紹介します。

 

結論から言うと、Studio上での特別なAlt設定は必要ありません。YouTubeの動画を埋め込むと、動画の「タイトル」がそのままスクリーンリーダーに読み上げられるため、「何の動画か」はユーザーに伝わります。

 

ただし、「なぜこの動画をここに配置したのか」という意図までは、タイトルだけでは伝わりません。そのため、動画の前後に簡単な説明テキストを加えておくと、よりアクセシブルで親切な設計になります。

 

StudioにYoutube動画を埋め込む方法は「Studio.help | Youtube動画を埋め込む」をご参照ください。

 

Youtube以外の動画については「StudioのアクセシビリティRadio vol.29 | Studioに埋め込める要素のアクセシビリティ検証」をご覧ください。

 

HTMLタグ

HTMLタグは、ウェブページの構造や内容を定義するための要素です。

 

タグを設定することで、スクリーンリーダーの読み上げがより理解しやすくなり、キーボード操作の利便性が向上します。

 

また、検索エンジンがWEBサイトの構造を理解しやすくなるので、SEO対策にも欠かせない要素ですね。

 

過去記事では、設定しやすいタグをピックアップしました。今回は、「見出しタグ」について深堀りします。

 

divボックスに見出しタグをつけたい

この設定は、以下のような場合に便利です。

 

• 見出しに装飾を加えたい
• 文字の強弱をつけたい
• テキストを1文字ずつ調整したい

 

たとえば、文字サイズを変えて見出しに動きを出したいとき、Studioでは1文字ずつテキストボックスを配置して表現することになります。

 

 

 

通常はdivボックスに見出しタグは付与できない

Studioの性質上、見出しタグ（h1など）は「テキストボックス」にしか設定できません。

 

そのため、「divボックス」などのコンテナ要素に見出しタグを付けようとしても、タグ一覧に「h1」は表示されない仕様になっています。

 

 

このままでは、1文字ごとに h1 タグを設定する必要が出てきてしまいます。

 

しかし、1文字ごとに「 h1」が付与された見出しをスクリーンリーダーで読み上げると、次のように出力されてしまいます。

<h1>明日、<h1>天気<h1>に<h1>な<h1>あ<h1>れ

 

このように、“文字ごと”に 「h1」 を読み上げてしまうため、内容が正しく伝わらなくなってしまいます。

 

本来理想的なのは、以下のようにひとまとまりとして認識されることです。

<h1>明日、天気になあれ

 

このような場合に役立つのが、「span」タグです。

 

<span>タグを活用してdivボックスに見出しタグを付与

 

divボックス内に入っている各文字に「span」タグを設定すると、divボックスを選択した時にプルダウンから「h1」～「h6」を選択できるようになります。

 

「h1」タグで全体を囲みつつ、文字ごとの装飾には 「span」タグ を使うことで、構造と見た目を両立したアクセシブルなマークアップが可能になります！

 

 

 

この画像はGoogleChromeの拡張機能「Accessibility Visualizer」を使用して取得した、ライブプレビューのスクリーンショットです。代替テキスト（alt）や見出しレベル（hタグ）などを視覚的に確認できる便利なツールです。

 

上段は、各文字に「h1」タグを1文字ずつ設定した例、
下段は、div ボックスに対して「h1」タグを設定した例を示しています。

 

なお、div ボックスに見出しタグを設定できるのは、特定の条件を満たしている場合のみです。

 

詳細は公式ドキュメント「Studio.help | HTML の見出しタグ <h1> – <h6>」をご参照ください。

 

レスポンシブ

誰もがWEBサイトにアクセスし、利用できることを目的とするWEBアクセシビリティにおいて、レスポンシブデザインは重要です。

 

現在では、使用デバイスが多岐にわたるため、ユーザーがどの画面サイズでアクセスしても快適に閲覧できるよう、レイアウトやコンテンツが自動的に調整されるデザインが求められています。過去記事ではStudioのレスポンシブデザインの設定方法について、簡単に記載していました。今回は、レスポンシブ設定で”やっておいてよかったこと”を中心にTipsをご紹介します。

 

 

PC画面（base）の横幅

 

セクションのボックスは横幅を100％に、コンテンツのボックスは横幅を1280px〜1440pxに設定しています。これは、PC画面での表示におけるレスポンシブ対応として効果的な設計だと考えています。

 

一般的にPCの画面幅は、最小で1280px、最大で1920px（フルHD）に対応する必要があります。

 

コンテンツ幅を最小幅の1280pxに設定しておくことで、たとえ1920pxの大画面で閲覧された場合でも、背景は画面いっぱいに広がりつつ、コンテンツは中央で整ったレイアウトを維持し、崩れることなく表示されます。

 

 

 

ブレイクポイントの設定

過去記事では、Studioのブレイクポイントについて「デフォルトで3パターン作成される」「画面幅の設定は自由にできる」といった基本的な内容をご紹介しました。

 

では、実際に1年間使ってみた現在、どのようなブレイクポイント設定に落ち着いたのか？ 今回は2025年現在の結論をご紹介します。

 

 

結論から言うと、現在はStudioが推奨する初期設定をそのまま使用しています。

 

一時はブレイクポイントを最大5つまで追加し、さまざまな画面幅で細かく調整していた時期もありました。しかし調整作業に時間も体力もかかりすぎ、集中力が切れてしまい、生産性が大きく低下してしまいました。

 

 

そんなとき、先輩方から紹介されたのが、レスポンシブ対応をサポートしてくれる優秀な確認ツールです。

 

モバイルシミュレーター・レスポンシブテストツール

モバイルシミュレーター・レスポンシブテストツール

 

このChrome拡張機能は、Androidスマートフォン各種からiPhone（5〜16）、タブレットまで、実際の画面幅＋アドレスバーを含めた状態での表示確認が可能です。

 

そのおかげで、より現実的な表示確認ができるようになりました。

 

Responsive Viewer

Responsive Viewer

 

このChrome拡張機能では、複数のデバイス画面を一つの画面上に横並びで表示しながら、レスポンシブの動作を一括で確認することができます。

 

 

基準の構成要素を足し引きした時に、タブレットやモバイルに影響はあるのか確認する時に便利です。また、モバイルだけの要素を追加した時に、基準やタブレットに反映されていないか、確認する時にも役立っています。

 

この2つのツールを使い、現在は

• PCサイズ：ブレイクポイント1280px➝1280pxの画面幅でレスポンシブ調整
• タブレット：ブレイクポイント840px➝768pxの画面幅でレスポンシブ調整
• モバイル：ブレイクポイント540px➝375pxの画面幅でレスポンシブ調整

を行っています。

 

制作するサイトのターゲットによって、ビジネスマンを狙った小型PC用（1140px）のブレイクポイントや、シニア世代のシェア率の高いスマートフォンのブレイクポイント（360px）を追加したりしています。

 

 

引用：【最新】レスポンシブデザインのブレイクポイントまとめ

 

StudioのWebアクセシビリティ前編

最後までお読みいただきありがとうございます！いかがでしたでしょうか？

 

1年前の記事と比べて、より実用的なTipsだったのではないでしょうか。

実は、1年ぶりに記事を書くにあたって、構成要素を組み上げていたのですが、とても1記事には収まりませんでした。後半に続きます。

 

後半ではStudioのアプデで進化した機能についても取り上げたいと考えています。

今しばらくお待ちください。