【Studio】画像クリックで拡大表示させる方法2選

ビジュアルを重視したサイトでは、画像クリックで拡大表示される工夫がなされています。

例えば、モーダルで画像が拡大表示されるようなパターンがあります。

画像の拡大表示がよく使われるのは、下記のようなケースです。

• ECサイト
• ポートフォリオサイト（作品一覧）
• 不動産・建築系のサイト
• 旅行や観光系のサイト

今回は、Studioを使って「画像クリックで拡大表示させる方法2選」を紹介していきます。

ホバー時に画像が拡大されるように設定したい方は、ぜひ以下の記事をご覧ください。

画像クリックで拡大表示させる方法2選

サイト内の画像がクリックされた時に、拡大表示する方法は2つあります。

それぞれ具体的に説明します。

特段の理由がない限りは、「モーダルで表示」を推奨しています。

①：モーダルで表示させる方法

完成イメージは、下記のとおりです。

メリット	デメリット
背景を暗くすることで画像に集中しやすい UXが良く、直感的に扱える ユーザーの導線が途切れにくいので、離脱率をなるべく抑えれる	スマホで見づらくなる可能性がある JavaScriptが無効な環境では動作しない

1番のメリットは、サイトの離脱率を下げられることです。

別タブで画像を拡大表示するより、モーダルで拡大表示したほうがサイト利用者は集中力を切らさずに、サイトを閲覧してもらえます。

その結果、サイトの滞在時間が伸びることになり、サイトの評価が上がりやすくなります。

②：別タブで表示させる方法

完成イメージは、下記のとおりです。

メリット	デメリット
実装が簡単・シンプル 別画面で見ながら他のページの操作がしやすい	ユーザーの閲覧体験が分断される スマホだと画面切り替えが面倒になりやすい 離脱率が上がりやすい

別タブで表示する方法は、新規ページに画像を貼り付けるだけなので簡単です。

ただし、ユーザーの集中が切れやすいため、離脱率が上がりやすいというデメリットが発生します。

モーダルで画像を拡大表示させる手順

モーダルで画像を拡大表示させる手順は、下記のとおりです。

それぞれ具体的に説明します。

①：クリックされる要素を配置する

「施工事例」を簡易的に紹介するため、モーダルで拡大表示を設定してみます。

まず、好きな画像とテキストを用意します。

②：拡大表示用のモーダルを作成する

次に、拡大表示用のモーダルを作成していきます。

左メニュー欄の「ページ」→「追加」をクリックします。

モーダルを選択します。

左メニューから「追加」→「ボックス」→「Image」をクリックして、拡大表示したい画像を選択します。

③：モーダルのアニメーションを設定する

続けて、モーダルのアニメーションも設定していきます。

左側メニューのレイヤーを開いて、「Backdrop」という名称のボックスを選択します。

上部メニューのTransitionを「scale」に変更します。

④：クリックされる要素にリンクを設定する

「①：クリックされる要素を配置する」で設置した画像に、リンクを設定していきます。

画像を選択した状態で右メニューを開き、リンクの＋ボタンをクリックします。

先ほど作ったモーダルのページを選択します。

これでモーダルで拡大表示の設定は完了です！ぜひライブプレビューでご確認ください！

別タブで画像を拡大表示させる手順

別タブで画像を拡大表示させる手順は、下記のとおりです。

それぞれ具体的に説明します。

①：クリックされる要素を配置する

「施工事例」の画像がクリックされたら、別タグで画像が大きく表示されるように設定していきます。

まず、好きな画像とテキストを用意します。

②：別ページに画像を設置する

別ページに拡大表示したい画像を設置していきます。

左メニュー欄の「ページ」→「追加」をクリックします。

「ページ」を選択します。

左メニューを開いて、「追加」→「ボックス」→「Image」をクリックします。

今回は画面いっぱいに画像を表示したいので、下記のように設定します。

③：クリックされる要素にリンクを設定する

「①：クリックされる要素を配置する」で設置した画像に、リンクを設定していきます。

画像を選択した状態で右メニューを開き、リンクの＋ボタンをクリックします。

先ほど作った、別タブ用のページを選択します。

これで別タブで拡大表示の設定は完了です！ぜひライブプレビューでご確認ください！

Studioのサイト制作は「Terace」にお任せ！