SWELLキャプション付きブロックの使い方｜サイトの魅力をアップさせる法

2024年2月20日2024年8月24日

キャプション付きブロックは、ウェブサイトやブログのコンテンツを際立たせる魔法の宝石です。

読者の興味を惹きつけ、情報提供を強化
ビジュアル面での魅力を飛躍的に向上

適切な配置とデザインで、ユーザーエンゲージメントを高め、サイトの魅力をアップさせます。

本記事では、実践的なアプローチと共に、

キャプション付きブロックの効果的な使い方
サイトデザインへの取り入れ方

を解説します。

シンプルなツールが、あなたのウェブサイトを新たな次元へと導く鍵となるでしょう。

【購入案内】

　　　　　　　　　　　　　　　　　　　　　料金と概要

料金）

　17,600円(税込)

（概要）

柔軟性と拡張性に優れたEコマースプラットフォームです。サブスクリプションモデルからデジタル製品、物理的な商品まで幅広く対応し、API駆動の仕組みにより、独自のカスタマイズが容易です。SaaS（Software as a Service）として提供されるため、ユーザーは複雑なサーバー設定を気にすることなく、よりビジネス成長に集中することが可能となります。

　メリットとデメリット

（メリット）

かゆい所に手が届くカスタマイズ性
直感的な操作でおしゃれなブログができる
複数サイトで利用できる
SEO対策機能の充実
豊富なテンプレートとデザイン
サポート体制とコミュニティの充実

（デメリット）

機能追加に伴う複雑性

\購入を決断しよう/

【目次】タップで読みたい場所にジャンプ

キャプション付きブロックとは

キャプション付きブロックは、画像や動画などのメディアコンテンツに説明文や注釈を追加する機能です。例えば、プロジェクトの紹介や製品の特徴説明など、様々なシーンで活躍します。

キャプションのタイトル（アイコンも挿入できる）

文章だけでなく、画像なども配置できる。

リストも挿入できる。

リスト１

リスト２

キャプション付きブロックの設定手順

STEP

パネルより「キャプションボックス」を選択

STEP

キャプションボックスのタイトルを記入後、画像・動画そしてテキストを
挿入

STEP

キャプションボックスの「スタイル」を決定

初期値は「デフォル」です、好みに応じて変更。

スタイルは赤枠に示す７種類の中より選択。

STEP

キャプションボックスの「カラー」を決定

標準は３色ですが、黒矢印の「SWELL設定」をクリックするとカラーパレット設定が表示され

色のカスタマイズができます。

STEP

アイコンの位置・サイズ設定

キャブション付きブロックのタイトルの左に「SWELロゴのアイコン」を設定。

①アイコン位置→②アイコン選択→③アイコンサイズを決定（STEP6に進む)。

STEP

アイコン選択

②のアイコン選択からSWELLロゴを決定。

【購入案内】

セーラー万年筆プロフィット21: 価格：¥32,670円（送料無料）

21金ペン先は弾力性に富み、「これぞ万年筆」というしなやかな感触と滑らかな書き味をもたらします。
補足写真

キャプション付きブロックのカスタマイズ

キャプション付きブロックの設定を通じて、さらにサイトの印象を向上させることができます。ここでは、幅広いカスタマイズ方法をマインドマップにまとめました。

この中で赤枠の項目は以下に詳細解説しているのでご覧ください。

カラーのカスタマイズ

異なるカラーを試すことで、サイトの雰囲気をガラリと変えることが可能です。カラーの選択は、ブランドのイメージを強化するためにも重要なポイントです。

キャプション付きブロックのサイドバーに、以下のようなカラーパネルが設置されています。

これらを選択することで、以下のような色のついたキャプション付きブロックが利用できます。

オレンジ

「デフォルト」スタイルでの利用

ブルー

「枠内」スタイルでの利用

グリーン

「小」スタイルでの利用

アイコンの挿入

キャプション付きブロックでは、アイコンを挿入することで、視覚的に情報を伝え、訴求力を高めることができます。

タイトルの左に電話のアイコンを選択。

デザインバターンのカスタマイズ

現在は7種類のデザインパターンがあります。

キャプション（デフォルト）

キャプション（小）

キャプショう（枠上）

キャプション（枠上２）

キャプション（枠内）

キャプション（浮き出し）

キャプション（内テキスト）

使用例

キャプション付きブロックは、画像や図表に短い説明文をつけることで、コンテンツの理解を深める効果がある。ブログ記事、商品紹介ページ、サービス紹介ページ、ポートフォリオサイトなど、様々な場面で有効に活用されている。

ブログ記事での活用法

1. ブログ記事でキャプション付きブロックを活用すれば、文章だけで
は伝わりにくい情報を補い、読者の意思を促進できます。
2. 旅行ブログでは、写真に地名やエピソードを続けることで記事が
充実し、読者の興味を引きやすくなります。
3. キャプションは画像説明だけでなく、感想や背景情報も書き込む
ことで、記事に静かを考慮した効果も期待できます。

商品の紹介ページ

1. 詳細な画像とキャプションで商品の特徴・注目を訴えます。
2. 使用方法、対象ユーザー、特徴をわかりやすく示唆し、商品情報
をすぐに把握できます。
3. 視覚的な情報で購入を高め、購入決定を進めます。

サービス紹介ページ

1. 画像・図表とキャプションでサービスの流れをわかりやすく説明します。
2. 利用シーンや成功事例を具体的に紹介し、利用イメージを喚起します。
3. 顧客の声で共感を見つめ、サービスへの洞察を高めます。

ポートフォリオサイト

1. 作品に込められた想い、制作過程、技術をキャプションで紹介
2. 閲覧者へ詳細な情報が提供され、作品への理解と関心が高まります。