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

「画像やテキストをもっと見やすく伝えたい…」そんなときに便利なのが、動的モーダルです。StudioとCMSを組み合わせれば、クリックするだけでスマートに情報を表示できます。

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

動的モーダルとは？

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

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

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

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

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

動的モーダルの作り方

Studioで動的モーダルを活用するには、あらかじめCMSと連携し、モーダルの中に表示する内容を整えておく必要があります。

まずは、モーダルそのものをエディタ上で追加する操作から始めます。

1）エディタ画面の右上にある「ページ追加」ボタン(ピンク四角)をクリックし、次に「>」(黄色四角)をクリックします。

2）「動的モーダル」(ピンク四角)をクリックすれば、新たにモーダル用のページを作成できます。

2）次に、表示したい情報が入っているCMSモデルを選びます。

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

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

エディタ上でレイヤーパネルを開き、プロパティの横にある小さな点(ピンク四角)を、表示させたいボックスにドラッグ＆ドロップするだけで、簡単に紐づけることができます。どこに紐づけられているかは、青い線（コネクタ）で確認できます。

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

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

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

サイズやスタイル

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

Transition（表示アニメーション）

モーダルを開いたときに、どのような動きで表示されるかも設定できます。表示のアニメーションには、「フェードイン」や「スライドイン」など、いくつかのパターンがあります。

表示の仕方に少し動きが加わるだけでも、画面に自然なリズムが生まれ、閲覧体験がやわらかい印象になります。

Transitionの設定は、モーダル内の「Backdrop（背景となる最上位のボックス）」(ピンク四角)を選んだ状態で行います。

Transitionボタン(ピンク四角)をクリックすると、アニメーションの項目(ブルー四角)が表示され、好みの表示方法を選べます。
※スピードやタイミングなど細かな動きの調整は現在できない仕様となっています。

動的モーダルのパス設定

動的モーダルは、通常クリック操作で表示される仕組みですが、特定のURLから直接開くこともできます。そのために使うのが「パス設定」です。

この設定を有効にすることで、モーダルを特定のURLに結びつけられるようになり、さまざまな場面で活用の幅が広がります。

まずは、ページパネル(ピンク四角)で「パスを利用」の項目(黄色四角)をオンにします。

設定を有効にすると、モーダル自体に任意のパス名をつけられるようになります。

この設定は通常オフになっているため、必要に応じて明示的に有効化しておくことがポイントです。

まとめ

伝えたい情報を、できるだけやさしく、わかりやすく届けたい。
そんなとき、動的モーダルはとても心強い選択肢になります。

用途に応じて、動的ページや静的モーダルと使い分けることで、見せ方の幅が広がります。デザインや表示の工夫次第で、より伝わるサイトづくりが可能になります。