2026/3/12
［ 初回公開日：
2024/8/26
］
【Studio初心者ガイド】トグル機能（アコーディオン）の基本設定と活用方法｜Editor 5.0対応
※本記事は Studioの「Editor 5.0」に対応しています。
トグル機能は、ウェブサイトやアプリのユーザーインターフェースをシンプルで直感的にする重要な要素です。
本記事では、Studioを使ったノーコードでのトグル機能設定方法と、基本概念から活用方法までを詳しく解説します。
ユーザーフレンドリーなデザインのポイントや実例を交えて、効果的かつ効率的なトグル機能の利用方法をご紹介します。
トグル機能（アコーディオン）とは？
トグル機能は、FAQセクション、多機能の説明、長文の注意事項などを開閉式でコンパクトに表示するための機能です。
これは、ユーザーがクリックやタップ一つで内容を展開または折り畳むことができる仕組みで、ユーザビリティの向上が期待できます。
Studioでのトグル機能（アコーディオン）の設定方法
Studioでは、トグル（アコーディオン）を簡単かつ直感的にデザインできます。手順をお話ししていきます。
Studioアカウントを準備
Studioの公式ウェブサイトにアクセスし、アカウントを取得してログインしましょう。
Studioでの操作手順
Studioにログインしたら、「新規プロジェクト」を作成します。
画面左端のナビゲーションにある「追加」アイコン(ピンク四角)をクリックして、追加パネルを開きます。
2. 追加パネル内のボックスメニューから「Toggle」(ピンク四角)を選択し、クリックまたはドラッグ&ドロップしてページに配置します。
トグルボックスの設定
Toggleボックスを選択すると、画面右側に右パネルが自動で開きます。
右パネルが開かない場合は、画面右上の開閉アイコン(ピンク四角)をクリックしてください。
右パネル内の「ボックス」タブで、レイアウト・外観・ポジション等のデザイン設定ができます。
「デフォルトで開く」ボタンのオンオフ
ユーザーがページを開いたときに、最初から子要素（トグルボックスの中身）が表示された状態で出現するかどうかを決めるものです。
ONに設定すると、ページが開いた瞬間にToggleボックスが開いて子要素が表示されます。OFFに設定すると、ページが開いた時にToggleボックスは閉じた状態で表示されます。
「開く操作」
開閉のトリガーとなる操作を「クリック(click)」または「ホバー(hover)」から選択できます。
「要素外クリックで閉じる」
ユーザーが、トグルボックス以外の箇所をクリックしたときに、子要素が閉じるか閉じないかを設定できます。
※Editor 5.0では、設定パネルが画面右側の「右パネル」に移動しました。旧エディタでは画面上部に表示されていました。
デザインの設定
Toggleボックスを選択すると、画面右側に右パネルが自動で開きます。
右パネルが開かない場合は、画面右上の開閉アイコンをクリックしてください。
また、Toggleボックスをダブルクリックすると、ボタンパーツとコンテンツパーツの編集モードに切り替わり、各パーツを個別に選択してスタイルを調整できます
※Editor 5.0では、旧エディタで画面上部に固定表示されていた「スタイルバー」が廃止され、右パネル内のタブ方式に統合されました。
子要素の追加
Toggleボックス内に子要素を追加する方法は2通りあります。
方法1:エディタ上で操作
1. Toggleボックスをダブルクリックして編集モードに入る
2. 画面左端のナビゲーションから「追加」アイコン(ピンク四角)をクリックし、追加パネルを開く
3. 追加パネルから要素をドラッグ&ドロップで配置
方法2:レイヤーパネルで操作
1. 画面左端のナビゲーションから「レイヤー」アイコン(ピンク四角)をクリックして、レイヤーパネルを開く
2. レイヤーパネル内で、コピーしたい子要素を選択してコピー
3. 親ボックス内にペースト
この操作により、同じスタイルの子要素を効率的に増やすことができます。
※左側の追加ボックスから様々なパーツを追加することも可能です。
条件付きスタイルの設定
Toggleボックスには、開閉状態に応じたスタイルを設定できる「条件付きスタイル」機能があります。
【設定手順】
1. Toggleボックスまたは、その中のボタンパーツ/コンテンツパーツを選択
2. 画面右側の右パネル上部にある「条件付きスタイル」プルダウン(ピンク四角)をクリック
【活用例】
- Toggleボックスが閉じているときにアイコンを回転させる(変形タブで設定)
- ボタンにホバーしたときに不透明度を下げる
- 開閉時にスムーズなアニメーションを適用する(モーションタブで速度調整)
※Editor 5.0では、条件付きスタイルの選択方法が変更されました。旧エディタでは画面上部に表示されていましたが、現在は右パネル上部のプルダウンから選択する方式になっています。
トグル機能（アコーディオン）を活用した実例
アコーディオンメニューを活用した実例としては、以下のようなケースが挙げられます。
FAQセクション
企業やサービスのウェブサイトにおいて、よくある質問（FAQ）セクションにアコーディオンメニューを採用することは非常に一般的です。
ユーザーは特定の質問を選択すると、その回答が展開されるため、多くの情報を一覧性よく、かつ圧迫感なく表示することができます。製品仕様の詳細表示
製品ごとに詳細情報や仕様をアコーディオンメニューで提供することにより、製品の説明、技術的な詳細、使用方法など、多岐にわたる情報を整理し、ユーザーが必要な情報へ簡単にアクセスできるようになります。
コースやプログラムの説明
教育機関のウェブサイトなどで、コースやプログラムの詳細をアコーディオン形式で提示することにより、異なる学部やプログラムについての説明を一つのページ内でコンパクトに表示し、ユーザーが興味のあるセクションだけを選んで情報を得られます。
メニュー項目の整理
レストランやカフェのウェブサイトでは、メニュー項目をアコーディオンメニューで分類することがあります。
例えば、前菜、メインディッシュ、デザートなどのカテゴリーに分けて、それぞれのセクションがクリック一つで展開される形式です。
これにより、訪問者はすぐに目当ての料理カテゴリーを見つけることができ、メニュー全体をスムーズに閲覧できます。
これらの例は、アコーディオンメニューがどのようにしてウェブサイトの情報整理とユーザーエクスペリエンスの向上に貢献しているかを示しています。
情報の見やすさとアクセスのしやすさを向上させるために、アコーディオンメニューは非常に有効なツールです。
トグル機能（アコーディオン）を活用する際の注意点
アコーディオンメニューをウェブサイトに実装する際には、いくつかの重要な注意点があります。
これらの点を考慮することで、ユーザーにとってより使いやすく効果的な体験を提供できます。
ユーザビリティの確保
アコーディオンメニューは直感的で使いやすいものである必要があります。ユーザーがどの要素がクリック可能で、どの情報が展開されるかを明確にすることが重要です。
アイコンやテキストを使って、メニューがインタラクティブであることを示し、ユーザーが容易に理解できるようにします。視覚的なフィードバックの提供
アコーディオンメニューの各セクションが開かれたときには、視覚的なフィードバックを提供して、どのセクションが現在開いているのかをユーザーに示すことが効果的です。
これには色の変更、アイコンの追加、アニメーション効果などが使えます。
ユーザーの利便性を考慮
アコーディオンは情報をコンパクトにするためのものですが、使い過ぎると逆にユーザーが求める情報を見つけにくくなる場合があります。
ユーザーが最も関心を持つ情報を最初から表示する、または重要な情報をアコーディオンの外に置くなど、ユーザビリティを第一に考えた設計を心がけましょう。
これらに注意することで、アコーディオンメニューはユーザーにとって有益なツールとなり、ウェブサイトの全体的なユーザビリティを向上させることができます。
まとめ
トグル機能は、シンプルながらも非常に強力なツールであり、その適切な使用がウェブサイトやアプリのユーザビリティを大幅に向上させる鍵となります。
この機能を効果的に活用することで、ユーザーは直感的に情報窓を開閉をする事ができ、その結果、高い満足感を実現できます。
設計段階での注意深い検討と、ユーザー中心のアプローチを常に心がけることが大切です。
この記事を書いた人
