【Studio初心者ガイド】動的モーダルの作り方とCMS連携｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

「画像やテキストをもっと見やすく伝えたい…」そんなときに便利なのが、動的モーダルです。

StudioとCMSを組み合わせれば、クリックするだけでスマートに情報を表示できます。

このガイドでは、初めての方でも安心して使いこなせるよう、手順やコツを詳しくご紹介します。

動的モーダルとは？

Studioには、ページの移動をせずに情報を画面上に重ねて表示できる「動的モーダル」という機能があります。

これは、画像や文章といったCMSで管理されたデータを、クリック操作だけでモーダル（画面上に開く小さなウィンドウ）として表示できる機能です。

ページを移動せずに内容を見せることができるため、見る人にとっても操作がわかりやすく、閲覧の負担を減らすことができます。

具体的には、採用情報の詳細をその場で確認できるようにしたり、ポートフォリオの各作品に説明を添えて表示したりといった使い方ができます。

※Studio 公式ヘルプページより引用

動的モーダルの作り方

動的モーダルを作成するには、まずデザインエディタで新しい動的モーダルページを追加します。

1）デザインエディタ上部の＋ボタン（赤四角）をクリックします。

2）「>」を選択し、「動的モーダル」（赤四角）を選びます。

3）モーダルに紐付けたいCMSモデルを選択します。

モーダルページが追加されたら、モーダル内の各要素（テキストや画像など）にCMSデータを紐付けます。

これには、レイヤーパネルでCMSプロパティの横にあるデータ接続ポイントを、表示したいボックスへドラッグして接続します。

動的モーダルを追加したあとは、モーダル内にどのデータを表示するかを設定（紐づけ）します。

レイヤーパネルを使って紐づけする方法

デザインエディタでレイヤーパネルを開くと、CMSプロパティを各要素に紐づけることができます。

プロパティ名の横に表示されているデータ接続用のポイントを、表示させたいボックスへドラッグすることで、CMSデータと要素が紐づきます。

紐づけが行われている場合は、対応する要素との接続状態を確認できます。

動的モーダルのデザインについて

モーダルは情報を見せるだけでなく、その見え方や動き方によって、見る人の印象や使いやすさにも影響します。

ここでは、動的モーダルのサイズ調整やデザインのコツ、表示アニメーションの設定方法についてご紹介します。

サイズやスタイル

モーダルのサイズやレイアウトは、通常のボックスと同じ感覚で自由に調整できます。高さや幅の指定はもちろん、角の丸みや影の設定、余白の調整なども柔軟に変更できます。

動的モーダルのパス設定

動的モーダルは、クリック操作によって表示されるだけでなく、特定のURLにアクセスした際に直接表示させることもできます。そのために使用するのがパス設定です。

動的モーダルページを開き、右側パネルの「ページ」を表示します。

ページ設定内にある「パス」（赤四角）に任意のパス名を入力できます。

まとめ

伝えたい情報を、できるだけやさしく、わかりやすく届けたい。

そんなとき、動的モーダルはとても心強い選択肢になります。

用途に応じて、動的ページや静的モーダルと使い分けることで、見せ方の幅が広がります。

ザインや表示の工夫次第で、より伝わるサイトづくりが可能になります。