STUDIOStudio

ログイン / 新規登録 

ドロップダウンメニューやアコーディオンをSTUDIO上で簡単に実装!「トグル」機能をリリース

デザインエディターのコンポーネントパーツにトグル機能を追加。開閉の表現がノーコードで可能に。

2023.06.27

Product Update

サイト上のコンテンツ量をコントロールし、ユーザビリティの向上をサポートする「トグル」機能が登場しました。配置からデザイン、アニメーションの設定まで全ての工程がSTUDIO上で完結します。

トグル機能を使用しコンパクトなメニューが作成可能に

トグルを使った2つの活用例をご紹介します!

ドロップダウンメニュー

ドロップダウンメニュー(プルダウンメニュー)は、ヘッダー内のナビゲーションや、モーダルで頻繁に利用されている形式です。ページ数の多いサイトでも、ドロップダウンメニューを使用することで、サイト閲覧者にとってわかりやすいナビゲーションになります。

アコーディオン

アコーディオンは、ページ内のQ&Aコンテンツに頻繁に利用される形式です。ページが縦長になるとスクロールが大変ですが、アコーディオンを使うことでコンテンツを収納することが可能です。

開閉時の動作設定もデザイン上で簡単に

デザインエディター上でToggleを選択し、任意の箇所に配置します。開閉時のアニメーションは今回新たに登場した条件付きスタイル「クローズ」を使って設定が可能です。

また、3つの詳細の設定により、こだわりのアニメーションを表現することが可能です。これらの調整は設定パネルで簡単にできます。

  • デフォルトで開く

    初めから中の要素を表示させ、サイト閲覧者の操作でトグルを要素を閉じることができます。

  • 開く操作

    クリックまたはホバーのどちらの操作で開閉を行うかを設定できます。この設定により、ホバーが機能しないモバイル端末での操作にも対応が可能です。

  • 要素外クリックで閉じる

    要素外をクリックした際にトグルを閉じ、中の要素を収納することができる機能です。

詳しい使い方や仕様はヘルプ記事をご覧ください。

条件付きスタイル

Toggleボックスの追加


STUDIOでは、公式Twitter のフォローや STUDIO Community Japan にて新機能リリースや使い方を公開しています。是非ご参加ください。

一覧へ戻る

最新のプロダクトアップデート

2025.06.30

Product Update

【2025年6月】機能改善・アップデートまとめ

2025年6月中に実施した機能改善・アップデート情報をまとめています。

詳細をみる

2025.06.02

Product Update

【2025年5月】機能改善・アップデートまとめ

2025年5月中に実施した機能改善・アップデート情報をまとめています。

詳細をみる

2025.05.27

Product Update

Play Your Way. 動画アップロード機能をリリースしました

映像を活かしたWebデザインをもっと自由に。Studioへの動画アップロードが可能に

詳細をみる

さあ、今すぐStudioを始めよう。

無料ではじめる