Carrdでスライドショーを追加する3つの方法【完全ガイド】

Carrdのスライドショー機能は、サイトに動きを与え、視覚的な魅力を高めるための強力なツールです。実は3つの方法があり、それぞれ特徴と適した用途が異なります。この記事では、各方法の設定手順と活用シーンをわかりやすく解説します。

1. Slideshow要素（最もおすすめ）

ページ内のコンテンツとして配置できる専用要素で、現在最も一般的な方法です。Carrdの管理画面内だけで完結し、外部サービス不要で設定できる手軽さが魅力です。

利用条件

Proプラン以上で利用可能

設定手順

1. エディタ画面で 「+」（要素を追加）アイコンをクリック

2. 要素のリストから 「Slideshow」 を選択し、ページ内の好きな場所に配置

3. 配置したSlideshow要素をクリックして設定パネルを開く

4. 「Add Slide」 をクリックして、画像や動画をアップロード

5. 各スライドには以下の設定が可能:

   • 画像 (Image) または 動画 (Video): スライドのメインコンテンツ

   • キャプション (Caption): 画像の下に表示する説明文

   • リンク (On Click): 画像をクリックした際のリンク先URL

主なカスタマイズ項目

Appearance（外観）タブ

• Layout: スライドショー全体の幅や、画像の表示比率を調整

• Transition: スライドが切り替わる際のアニメーション効果（Slide または Fade）と速さ（Speed）を設定

• Navigation: 訪問者がスライドを操作するための矢印（Arrows）やドット（Dots）の表示・非表示、色、サイズなどを細かく設定

• Captions: キャプションのフォント、サイズ、色、表示位置などをカスタマイズ

Slideshowタブ

• Autoplay: ページを開いたときにスライドショーを自動再生するかどうかを設定

• Delay: 自動再生時の各スライドの表示時間（秒単位）を設定

• Loop: 最後まで再生後、最初のスライドにループして戻るかどうかを設定

おすすめの用途

• ポートフォリオの作品紹介

• 製品やサービスの紹介

• イベント写真のギャラリー

• プロジェクトの工程紹介

2. 背景スライドショー（標準機能）

ページ全体の背景を、複数の画像が自動で切り替わるダイナミックな表示にする機能です。特別なプランは不要で、誰でも簡単に設定できます。

利用条件

全プランで利用可能

設定手順

1. Carrdのエディタ画面で、要素が何もないキャンバス部分をクリックし、画面左上の 「Background」 パネルを開く

2. 「Style」 のドロップダウンメニューから 「Slideshow」 を選択

3. スライドリストの最初の 「Untitled」 スライドをクリックして設定パネルを開く

4. 「Upload」 をクリックして、スライドとして表示したい画像をアップロード

5. リスト下の 「+」アイコン をクリックして新しいスライドを追加（ドラッグ&ドロップで順番の入れ替えも可能）

主なカスタマイズ項目

• 画像 (Image): 各スライドに表示する画像を設定

• 位置 (Position): スマートフォンなど画面サイズが小さいデバイスで、画像のどの部分を優先的に表示するか指定

• 動き (Motion): 画像にゆっくりとズームイン/アウトする動き（Ken Burnsエフェクト）を追加

• 切り替え効果 (Transition) & 表示時間 (Duration): スライドが切り替わる際のアニメーションや、各スライドの表示時間を調整

• ナビゲーション (Navigation): 訪問者が手動でスライドを切り替えられるように、左右の矢印や下部のドットを表示（「Appearance」タブ内で設定）

おすすめの用途

• ランディングページの第一印象を強くしたい場合

• サイト全体にダイナミックな雰囲気を演出したい場合

3. 埋め込みスライドショー（応用編）

ページ内の一部に、画像だけでなくテキストやボタンなども含んだ、より高機能なスライドショー（カルーセル）を設置する方法です。

利用条件

Proプラン以上で利用可能な Embed（埋め込み）要素 が必要

実現方法

方法1: 外部ウィジェットサービスを利用

Common NinjaやPOWRといった外部サービスを使って、コーディング不要でリッチなスライドショーを作成し、そのコードをCarrdに埋め込みます。

• メリット: 専門知識がなくても、豊富なテンプレートから簡単にデザイン性の高いスライドショーを作成可能

• デメリット: 外部サービスのアカウント登録が必要。無料プランでは機能制限やサービスロゴが表示される場合がある

方法2: カスタムコードを記述

HTML、CSS、JavaScriptの知識があれば、完全にオリジナルのスライドショーを作成し、そのコードをEmbed要素に直接記述できます。

• メリット: デザインや機能を完全に自由にカスタマイズ可能

• デメリット: Web制作に関する専門的な知識が必須

おすすめの用途

• テキストやボタンを含む、より複雑でインタラクティブなスライドショーが必要な場合

• 既存のSlideshow要素では実現できない特殊なデザインや機能が必要な場合

まとめ：どの方法を選ぶべき？

ほとんどのケースで「Slideshow要素」が最適解です。Carrd内で完結し、設定も簡単で、十分な機能を備えています。

• ページ内にスライドショーを配置したい → Slideshow要素（最もおすすめ）

• サイト全体の背景をダイナミックにしたい → 背景スライドショー

• 特殊なデザインや機能が必要 → 埋め込みスライドショー

これらの機能をうまく活用して、訪問者の心に残る魅力的なサイトを作成してみてください。