コンテンツ・メディアブロック
最終更新: 2026-03-15
コンテンツ・画像・バナー・ギャラリー ブロック — 全種マニュアル
テキスト＋画像の組み合わせで情報を伝えるブロック群。全22種（コンテンツ10種・画像4種・バナー5種・ギャラリー3種）。
設定手順
1. ブロックを挿入する
エディター画面で「+」ボタンをクリックし、使いたいコンテンツブロック（例：「Content 01」「Content 02」など）を検索して挿入する。
2. 画像をアップロードする
ブロック内の画像エリアをクリックし、画像を設定する。
- 「アップロード」 — 新しい画像ファイルをPCから選択してアップロード
- 「メディアライブラリ」 — 既にアップロード済みの画像を選択
- 画像の代替テキスト（altText / imageAlt）もサイドバーで設定する（SEO・アクセシビリティに重要）
3. テキストを編集する
ブロック内のテキストエリアを直接クリックして編集する。
- タイトル（title） — 見出しテキストを入力
- 本文（content / textContent） — 説明文を入力
- Content 02やContent 08などカード型ブロックは、各カードのテキストを個別に編集する
4. サイドバーでレイアウトを設定する
右側のサイドバー（ブロック設定パネル）で表示を調整する。
- imagePosition（画像配置） —
left/rightで画像の左右を切り替え - columnClass（カラム数） —
clm_2/clm_3/clm_4でカラム数を変更（カード型ブロックの場合） - フォント・文字色・背景色など細かい設定も必要に応じて調整する
5. リンクボタンを設定する
ボタン付きブロックの場合、サイドバーで以下を設定する。
- linkUrl / buttonUrl — ボタンのリンク先URL
- linkText / buttonText — ボタンに表示するテキスト（例：「詳細はこちら」「MORE」）
- linkTarget —
_blankを入力すると新しいタブで開く - ボタン色（linkButtonBackgroundColor / linkButtonTextColor） — 背景色と文字色を調整
よくある質問
Q. 画像が表示されない
A. 画像URLが正しく設定されているか確認してください。メディアライブラリから再選択するか、新しい画像をアップロードし直してください。
Q. 画像を左右逆に配置したい
A. サイドバーの imagePosition を left から right（またはその逆）に変更してください。Content 06の場合は alignRight を ON にします。
Q. カード型ブロックでカードの数を増減したい
A. ブロック内でカードの追加・削除が可能です。カード型ブロック（Content 02, 08 など）は contents 配列で管理されており、エディター上でカードを追加・削除できます。
Q. ボタンを非表示にしたい
A. linkUrl を空欄にするか、showButton 属性がある場合は OFF にしてください。
Q. 無料ブロックと有料ブロックの違いは？
A. 有料ブロックはサブタイトル、PC/SP別設定、高度な装飾オプションなど、より多くのカスタマイズ項目を備えています。基本的な機能は無料ブロックでも十分に使えます。
目次
- コンテンツブロック
- 無料（3種）: Content 01 / 02 / 08
- プレミアム（2種）: PR Content 08 / PR Content 09
- 有料（5種）: Content 03 / 04 / 05 / 06 / 07
- 画像ブロック
- 無料（1種）: 画像カード 02
- プレミアム（2種）: 画像 00 / PR画像グリッド 01
- 有料（1種）: 画像 01
- バナーブロック
- 無料（5種）: バナー 01〜05
- ギャラリーブロック
- 無料（2種）: ギャラリー 01 / 02
- 有料（1種）: Gallery 03
コンテンツブロック
テキストと画像を組み合わせて情報を伝える中核ブロック。サービス紹介やコンセプト説明に。
無料コンテンツブロック（3種）
Content 01（lw-content-1）
画像＋テキストの2カラムレイアウト。リンクボタン付きで、画像の左右配置を切り替えられる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| imageUrl | string | プレースホルダー画像 | メイン画像のURL |
| imageAlt | string | "" |
画像の代替テキスト |
| title | string | "タイトルテキスト" |
見出しテキスト |
| content | string | プレースホルダー文 | 説明文テキスト |
| linkUrl | string | "" |
リンクボタンのURL |
| linkText | string | "詳細はこちら" |
リンクボタンの表示文字 |
| linkTarget | string | "" |
リンクの開き方（"_blank"で新しいタブ） |
| imagePosition | string | "left" |
画像の配置位置（"left" / "right"） |
| linkButtonBackgroundColor | string | "var(--color-accent)" |
ボタン背景色 |
| linkButtonTextColor | string | "#fff" |
ボタン文字色 |
| titleFontSet | string | "" |
タイトルのフォント |
| titleFontWeight | string | "" |
タイトルの太さ |
| contentFontSet | string | "" |
本文のフォント |
| contentFontWeight | string | "" |
本文の太さ |
| linkFontSet | string | "" |
ボタン文字のフォント |
| linkFontWeight | string | "" |
ボタン文字の太さ |
使いどころ: サービス説明、コンセプト紹介。交互にleft→right→leftと並べると視線がジグザグに誘導され見栄えが良い。
Content 02（lw-content-2）
カード型のマルチカラムレイアウト。画像＋テキスト＋ボタンのカードを横並びに表示する。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| contents | array/query | 3件 | カードデータ（下記サブフィールド参照） |
| columnClass | string | "clm_3" |
カラム数クラス（"clm_2" / "clm_3" / "clm_4"） |
| showTitle | boolean | false |
タイトル表示の ON/OFF |
| imageHeight | number | 1200 |
サムネイル画像の高さ（アスペクト比） |
| fontSet | string | "" |
テキストのフォント |
| fontWeight | string | "" |
テキストの太さ |
| titleFontSet | string | "" |
タイトルのフォント |
| titleFontWeight | string | "" |
タイトルの太さ |
| titleColor | string | "" |
タイトル文字色 |
| textColor | string | "" |
本文文字色 |
contentsのサブフィールド（各カード）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| title | string | カードの見出し |
| text | string | カードの説明文 |
| image | string | カード画像のURL |
| buttonText | string | ボタンの表示文字 |
| buttonUrl | string | ボタンのリンク先 |
| buttonBgColor | string | ボタン背景色 |
| buttonTextColor | string | ボタン文字色 |
使いどころ: 3つのサービス紹介、チームメンバー紹介、ポートフォリオ。3カラムが基本。
Content 08（lw-content-8）
サブラベル＋メインタイトル＋テキスト＋ボタンのカードグリッド。ボーダー装飾・パディング・ボタンスタイルを細かくカスタマイズできる高機能ブロック。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| contents | array/query | 3件 | カードデータ（下記サブフィールド参照） |
| columnClass | string | "clm_3" |
カラム数クラス |
| innerMaxWidth | number | 1200 |
コンテンツ全体の最大幅（px） |
| mainAlign | string | "left" |
テキスト配置 |
| showSub | boolean | true |
サブラベルの表示 ON/OFF |
| showButton | boolean | true |
ボタンの表示 ON/OFF |
| タイトル設定 | |||
| fontLi | string | "" |
タイトルのフォント |
| fontColorLi | string | "" |
タイトル文字色 |
| fontWeightLi | string | "600" |
タイトルの太さ |
| titleFontSizeClass | string | "font_size_m" |
タイトルサイズクラス |
| titleTag | string | "h3" |
見出しHTMLタグ |
| titleBorderColor | string | "var(--color-main)" |
タイトルボーダー色 |
| titleBorderSize | number | 2 |
タイトルボーダー太さ（px） |
| 本文設定 | |||
| fontLiP | string | "" |
本文のフォント |
| fontColorLiP | string | "var(--color-black)" |
本文文字色 |
| fontWeightLiP | string | "400" |
本文の太さ |
| textFontSizeClass | string | "font_size_m" |
本文サイズクラス |
| サブラベル設定 | |||
| fontLiSub | string | "" |
サブラベルのフォント |
| fontWeightLiSub | string | "600" |
サブラベルの太さ |
| subFontColor | string | "var(--color-main)" |
サブラベル文字色 |
| subBgColor | string | "#ffffff" |
サブラベル背景色 |
| subBorderColor | string | "var(--color-main)" |
サブラベルボーダー色 |
| subBorderSize | number | 1 |
サブラベルボーダー太さ（px） |
| メインタイトル設定 | |||
| fontLiMain | string | "" |
メインタイトルのフォント |
| fontWeightLiMain | string | "700" |
メインタイトルの太さ |
| カード外観 | |||
| liBorderColor | string | "var(--color-main)" |
カードボーダー色 |
| liBorderSize | number | 2 |
カードボーダー太さ（px） |
| liBorderRadius | number | 8 |
カード角丸（px） |
| liPaddingTop | number | 24 |
カード上パディング（px） |
| liPaddingBottom | number | 24 |
カード下パディング（px） |
| liPaddingLeft | number | 24 |
カード左パディング（px） |
| liPaddingRight | number | 24 |
カード右パディング（px） |
| ボタン設定 | |||
| btnMarginTop | number | 16 |
ボタン上マージン（px） |
| btnHeight | number | 56 |
ボタンの高さ（px） |
| btnBgColor | string | "var(--color-main)" |
ボタン背景色 |
| btnFontColor | string | "#ffffff" |
ボタン文字色 |
| btnFontSize | number | 15 |
ボタン文字サイズ（px） |
| btnBorderRadius | number | 2 |
ボタン角丸（px） |
| btnBorderColor | string | "var(--color-main)" |
ボタン枠線色 |
| btnBorderSize | number | 0 |
ボタン枠線太さ（px） |
contentsのサブフィールド（各カード）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| sub | string | サブラベルのテキスト |
| main | string | メインタイトル |
| text | string | 説明文 |
| url | string | リンク先URL |
| btnText | string | ボタンの表示文字 |
使いどころ: 料金プラン比較、サービスの3つのポイント、特徴紹介。カスタマイズ項目が多いため凝ったデザインが可能。
プレミアムコンテンツブロック（2種）
Content 08 PR（lw-pr-content-8）
1枚の画像をカード型で表示。背景色・ボーダー・角丸で装飾できるシンプルな画像カード。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| imageUrl | string | プレースホルダー画像 | 表示する画像のURL |
| imageAlt | string | "" |
画像の代替テキスト |
| maxWidth | number | 1040 |
カードの最大幅（px） |
| bgColor | string | "#f5f5f5" |
カード背景色 |
| bdrPc | number | 10 |
PC表示時の角丸（px） |
| bdrSp | number | 10 |
SP表示時の角丸（px） |
| minHeight | number | 378 |
カードの最小高さ（px） |
| borderWidth | number | 2 |
枠線の太さ（px） |
| borderColor | string | "var(--color-main)" |
枠線の色 |
使いどころ: プロモーション画像、特集バナー、アクセント画像の表示。背景色と枠線で画像を引き立てる。
PR Content 09 カードスライダー（lw-pr-content-9）
カード型スライダー / カルーセル。画像＋タイトル＋説明＋リンク付きのスライドを自動再生できる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| blockId | string | — | ブロックの一意ID（スライダー識別用） |
| autoplay | boolean | false |
自動再生の ON/OFF |
| slides | array | 4件 | スライドデータ（下記サブフィールド参照） |
slidesのサブフィールド（各スライド）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| imgUrl | string | スライド画像のURL |
| altText | string | 画像の代替テキスト |
| title | string | スライドのタイトル |
| description | string | スライドの説明文 |
| linkUrl | string | クリック時のリンク先 |
| openNewTab | boolean | 新しいタブで開くか |
使いどころ: お知らせ一覧、実績紹介、キャンペーン告知のカルーセル表示。
有料コンテンツブロック（5種）
Content 03（paid-block-content-3）
画像＋テキストの2カラムにサブタイトルとボーダーアクセントを追加。Content 01の上位版。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| imageUrl | string | サンプル画像URL | メイン画像のURL |
| imageAlt | string | "" |
画像の代替テキスト |
| aspectRatioHeight | number | 120 |
画像のアスペクト比（高さ） |
| imagePosition | string | "left" |
画像配置（"left" / "right"） |
| titleSub | string | "SUB TITLE" |
サブタイトル（英字ラベル等） |
| title | string | "タイトルテキスト" |
メインタイトル |
| showTitle | boolean | true |
タイトル表示の ON/OFF |
| content | string | プレースホルダー文 | 説明テキスト |
| borderColor | string | "var(--color-main)" |
ボーダーアクセントの色 |
| linkUrl | string | "" |
リンクボタンのURL |
| linkText | string | "MORE" |
ボタンの表示文字 |
| linkTarget | string | "" |
リンクの開き方 |
| linkButtonBackgroundColor | string | "var(--color-main)" |
ボタン背景色 |
| linkButtonTextColor | string | "#fff" |
ボタン文字色 |
| titleFontSet | string | "" |
タイトルのフォント |
| titleFontWeight | string | "" |
タイトルの太さ |
| contentFontSet | string | "" |
本文のフォント |
| contentFontWeight | string | "" |
本文の太さ |
| linkFontSet | string | "" |
ボタン文字のフォント |
| linkFontWeight | string | "" |
ボタン文字の太さ |
使いどころ: Content 01よりリッチな表現が必要な時。サブタイトルで英字ラベルを入れるとオシャレに。
Content 04（paid-block-content-4）
複数画像を並べたギャラリー型レイアウトにCTAボタンを組み合わせ。ハイライトカラーでアクセントを付けられる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| images | array | 8件 | 画像データ（下記サブフィールド参照） |
| mainTitle | string | "CONTENT" |
メインタイトル |
| subTitle | string | "サブテキスト" |
サブタイトル |
| bottomText | string | プレースホルダー文 | 下部テキスト |
| mainTitleColor | string | "#333" |
タイトル文字色 |
| highlightColor | string | "#0AA8C9" |
ハイライト（アクセント）カラー |
| ctaText | string | "詳細はこちら" |
CTAボタンの文字 |
| ctaUrl | string | "#" |
CTAのリンク先 |
| ctaTextColor | string | "#333" |
CTAボタン文字色 |
| ctaBorderColor | string | "#333" |
CTAボタン枠線色 |
| ctaBorderWidth | number | 2 |
CTAボタン枠線太さ（px） |
| ctaBorderRadius | number | 0 |
CTAボタン角丸（px） |
| imageRadius | number | 0 |
画像の角丸（px） |
| pcButtonState | string | "" |
PC表示時のボタン状態 |
| mobileButtonState | string | "" |
SP表示時のボタン状態 |
imagesのサブフィールド（各画像）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| url | string | 画像のURL |
| alt | string | 画像の代替テキスト |
使いどころ: フォトギャラリー付きの紹介セクション、施設・商品の画像一覧＋CTA導線。
Content 05（paid-block-content-5）
フル幅の背景画像上にテキストをオーバーレイ。PC/SP別のタイトル・画像設定が可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| pcImage | string | サンプル画像URL | PC用背景画像 |
| spImage | string | "" |
SP用背景画像（空の場合はPC画像を使用） |
| imgAlt | string | "" |
画像の代替テキスト |
| pcTitle | string | "PC用タイトル" |
PC表示時のタイトル |
| spTitle | string | "" |
SP表示時のタイトル（空の場合はPC用を使用） |
| pcBody | string | 長文テキスト | PC表示時の本文 |
| textColumns | string | "2" |
本文のカラム数（"1" / "2"） |
| headingLevel | number | 2 |
見出しタグレベル（h1〜h6） |
| verticalCenter | boolean | false |
テキストを垂直中央配置にするか |
| aspectRatioHeight | number | 650 |
画像のアスペクト比高さ |
| contsMaxWidth | number | 1200 |
テキストエリアの最大幅（px） |
| pcTitleColor | string | "" |
PC用タイトル文字色 |
| spTitleColor | string | "" |
SP用タイトル文字色 |
| spTitleFont | string | "" |
SP用タイトルのフォント |
| spTitleFontWeight | string | "500" |
SP用タイトルの太さ |
使いどころ: インパクトのある全幅ビジュアルセクション。コンセプト説明、ブランドメッセージの訴求に。textColumns: "2"で雑誌風レイアウトも可能。
Content 06（paid-block-content-6）
画像＋テキストのシンプルな2カラム。左右切り替え＋オプションボタン付き。Content 01の軽量版。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| imageUrl | string | サンプル画像URL | メイン画像のURL |
| imageAlt | string | "" |
画像の代替テキスト |
| alignRight | boolean | false |
trueで画像を右配置（デフォルトは左） |
| textContent | string | プレースホルダー文 | テキスト内容 |
| buttonText | string | "Learn More" |
ボタンの表示文字 |
| buttonUrl | string | "#" |
ボタンのリンク先 |
| showButton | boolean | true |
ボタン表示の ON/OFF |
| buttonRadius | number | 0 |
ボタンの角丸（px） |
使いどころ: 最小限の設定でテキスト＋画像を表示したい場合。フォント設定不要でスピーディにセクションを作成。
Content 07（paid-block-content-7）
画像付きマルチカラムカード。ボーダー装飾と画像の角丸を細かく設定できる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| contents | array/query | 3件 | カードデータ（下記サブフィールド参照） |
| pcColumns | string | "3" |
PC表示時のカラム数 |
| imageBorderRadius | number | 20 |
カード画像の角丸（px） |
| borderColor | string | "var(--color-main)" |
カードボーダー色 |
| borderSize | number | 0 |
カードボーダー太さ（px、0で非表示） |
| titleTag | string | "h3" |
見出しHTMLタグ |
| titleBorderColor | string | "var(--color-main)" |
タイトルボーダー色 |
| titleBorderSize | number | 8 |
タイトルボーダー太さ（px） |
| titleBorderRadius | number | 8 |
タイトルボーダー角丸（px） |
| fontLi | string | "" |
タイトルのフォント |
| fontColorLi | string | "" |
タイトル文字色 |
| fontWeightLi | string | "600" |
タイトルの太さ |
| titleFontSizeClass | string | "font_size_m" |
タイトルサイズクラス |
| fontLiP | string | "" |
本文のフォント |
| fontColorLiP | string | "var(--color-black)" |
本文文字色 |
| fontWeightLiP | string | "400" |
本文の太さ |
| textFontSizeClass | string | "font_size_m" |
本文サイズクラス |
contentsのサブフィールド（各カード）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| image | string | カード画像のURL |
| ttl | string | カードの見出し |
| text | string | 説明文 |
| url | string | リンク先URL |
使いどころ: 画像の角丸を大きくしてやわらかい印象のカードレイアウト。タイトルボーダーで見出しにアクセントを付けられる。
コンテンツブロック選びガイド
| 用途 | おすすめブロック | ティア |
|---|---|---|
| 画像＋テキスト（基本） | Content 01 | 無料 |
| 複数カードを横並び | Content 02 | 無料 |
| ボタン付きカード（高カスタマイズ） | Content 08 | 無料 |
| サブタイトル付きの画像＋テキスト | Content 03 | 有料 |
| 写真ギャラリー＋CTA | Content 04 | 有料 |
| 全幅背景画像＋テキスト | Content 05 | 有料 |
| シンプルな画像＋テキスト（軽量） | Content 06 | 有料 |
| 角丸画像カード | Content 07 | 有料 |
| 装飾付き画像カード | PR Content 08 | プレミアム |
| カードスライダー | PR Content 09 | プレミアム |
画像ブロック
画像の表示に特化したブロック群。単体画像からグリッド、人物カードまで。
無料画像ブロック（1種）
画像カード 02（lw-image-2）
複数画像をカード型で並べて表示。フィルターオーバーレイとテキストを重ねられる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | array/query | 3件 | 画像カードデータ（下記サブフィールド参照） |
| borderRadiusEm | number | 1.2 |
カードの角丸（em） |
| aspectHeight | number | 800 |
画像のアスペクト比高さ |
| maxWidthPx | number | 0 |
カード全体の最大幅（px、0で制限なし） |
| alignClass | string | "left" |
配置（"left" / "center" / "right"） |
| fontP | string | "" |
テキストのフォント |
| fontWeightP | string | "" |
テキストの太さ |
| colorP | string | "" |
テキスト文字色 |
itemsのサブフィールド（各カード）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| imgSrc | string | 画像のURL |
| altText | string | 画像の代替テキスト |
| text | string | オーバーレイテキスト |
| fColor | string | フィルターの色 |
| fOpac | number | フィルターの透過度 |
| fBlend | string | フィルターのブレンドモード |
使いどころ: 施工実績、Before/After、ポートフォリオ。フィルターで写真に統一感のある色味を付けられる。
プレミアム画像ブロック（2種）
画像 00（lw-pr-image-0）
1枚の画像をフルカスタマイズで表示。サイズ・回転・エフェクト・レスポンシブ設定を完全制御できる最高機能の画像ブロック。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| image | string | プレースホルダー画像 | 表示する画像のURL |
| alt | string | "" |
画像の代替テキスト |
| linkUrl | string | "" |
画像クリック時のリンク先 |
| linkOpenNewTab | boolean | false |
リンクを新しいタブで開くか |
| サイズ設定 | |||
| maxWidthPc | number | 0 |
PC最大幅（px、0で制限なし） |
| maxWidthTb | number | 0 |
タブレット最大幅（px） |
| maxWidthSp | number | 0 |
スマホ最大幅（px） |
| aspectRatioW | number | 600 |
アスペクト比（横） |
| aspectRatioH | number | 400 |
アスペクト比（縦） |
| 角丸 | |||
| imgBorderRadiusPc | number | 0 |
PC角丸（px） |
| imgBorderRadiusTb | number | 0 |
タブレット角丸（px） |
| imgBorderRadiusSp | number | 0 |
スマホ角丸（px） |
| 回転 | |||
| rotatePc | number | 0 |
PC回転角度（度） |
| rotateTb | number | 0 |
タブレット回転角度 |
| rotateSp | number | 0 |
スマホ回転角度 |
| rotateInheritTb | boolean | true |
タブレットでPC設定を継承 |
| rotateInheritSp | boolean | true |
スマホでPC設定を継承 |
| エフェクト | |||
| imageEffect | string | "none" |
適用するエフェクト種別 |
| effectGrayscale | number | 100 |
グレースケール強度（%） |
| effectSepia | number | 100 |
セピア強度（%） |
| effectBlur | number | 3 |
ぼかし強度（px） |
| effectBrightness | number | 130 |
明るさ（%） |
| effectContrast | number | 150 |
コントラスト（%） |
| effectSaturate | number | 200 |
彩度（%） |
| effectInvert | number | 100 |
色反転（%） |
| effectHueRotate | number | 180 |
色相回転（度） |
| effectOpacity | number | 50 |
透明度（%） |
| 配置・フィット | |||
| alignPc | string | "center" |
PC配置（"left" / "center" / "right"） |
| alignTb | string | "inherit" |
タブレット配置（"inherit"でPC継承） |
| alignSp | string | "inherit" |
スマホ配置 |
| objectFitPc | string | "cover" |
PCフィット（"cover" / "contain" / "fill"等） |
| objectFitTb | string | "inherit" |
タブレットフィット |
| objectFitSp | string | "inherit" |
スマホフィット |
使いどころ: 高度な画像演出が必要な場合。回転・エフェクト・デバイス別設定でクリエイティブな表現が可能。"inherit"設定でレスポンシブを効率的に管理。
PR画像グリッド 01（lw-pr-image-1）
レスポンシブ対応の画像グリッド。カラム数・ギャップ・マージンをPC/SP別に設定可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| blockId | string | — | ブロックの一意ID |
| images | array | 5件 | 画像データ（下記サブフィールド参照） |
| columnsPc | number | 5 |
PC表示のカラム数 |
| columnsSp | number | 2 |
SP表示のカラム数 |
| gapPc | number | 16 |
PC画像間の余白（px） |
| gapSp | number | 8 |
SP画像間の余白（px） |
| aspectRatioW | number | 160 |
アスペクト比（横） |
| aspectRatioH | number | 108 |
アスペクト比（縦） |
| imgBorderRadius | number | 0 |
画像の角丸（px） |
| maxWidth | number | 0 |
グリッド全体の最大幅（px、0で制限なし） |
| mtPc | number | 16 |
PC上マージン（px） |
| mbPc | number | 16 |
PC下マージン（px） |
| mtSp | number | 16 |
SP上マージン（px） |
| mbSp | number | 16 |
SP下マージン（px） |
imagesのサブフィールド（各画像）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| imgUrl | string | 画像のURL |
| altText | string | 画像の代替テキスト |
| linkUrl | string | クリック時のリンク先 |
使いどころ: クライアントロゴ一覧、パートナー企業、ブランドアイコンの整列表示。5カラムの横並びがデフォルト。
有料画像ブロック（1種）
画像 01（paid-block-image-1）
人物・スタッフ紹介用の画像カード。ネームプレートとリンクボタン付き。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| image | string | プレースホルダー画像 | 人物画像のURL |
| alt | string | "" |
画像の代替テキスト |
| subTitle | string | "主任" |
役職・肩書き |
| mainTitle | string | "大阪 京子" |
名前 |
| headingLevel | string | "h3" |
見出しHTMLタグ |
| fontSizeClass | string | "font_size_m" |
名前のサイズクラス |
| aspectRatioW | number | 400 |
アスペクト比（横） |
| aspectRatioH | number | 340 |
アスペクト比（縦） |
| maxWidth | number | 480 |
カードの最大幅（px） |
| centerBlock | boolean | false |
中央配置にするか |
| innerRadiusEm | number | 0.9 |
画像の角丸（em） |
| ネームプレート | |||
| showNamePlate | boolean | true |
ネームプレート表示の ON/OFF |
| namePlateColor | string | "var(--color-main)" |
ネームプレートのボーダー色 |
| namePlateRadiusEm | number | 0.2 |
ネームプレートの角丸（em） |
| namePlateBorderWidth | number | 2 |
ネームプレートの枠線太さ（px） |
| リンク | |||
| showLinkNext | boolean | true |
リンクボタン表示の ON/OFF |
| linkNextBgColor | string | "var(--color-main)" |
リンクボタン背景色 |
| linkNextIconColor | string | "#ffffff" |
リンクボタンアイコン色 |
| linkUrl | string | "" |
リンク先URL |
| linkOpenNewTab | boolean | false |
新しいタブで開くか |
使いどころ: スタッフ紹介、チームメンバー、医師紹介ページ。ネームプレートで役職＋名前を見やすく表示。
画像ブロック選びガイド
| 用途 | おすすめブロック | ティア |
|---|---|---|
| カード型画像（フィルター付き） | 画像カード 02 | 無料 |
| 1枚画像（高度カスタマイズ） | 画像 00 | プレミアム |
| ロゴ・アイコンのグリッド並び | PR画像グリッド 01 | プレミアム |
| スタッフ・人物紹介カード | 画像 01 | 有料 |
バナーブロック
画像にオーバーレイをかけてタイトル・説明文を表示するカード型バナー。複数カラムで並べてナビゲーションとして使う。全5種、すべて無料。
無料バナーブロック（5種）
バナー 01 3カラム（lw-banner-info-01）
3カラムのバナーカード。画像にフィルターをかけてタイトルと説明文を重ねる。リンク付き。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | array | 3件 | バナーデータ（下記サブフィールド参照） |
| filterBackgroundColor | string | "#000" |
フィルターオーバーレイの色 |
| filterOpacity | number | 0.45 |
フィルターの透過度（0〜1） |
| titleFontFamily | string | "Noto Sans JP" |
タイトルのフォント |
| titleFontWeight | string | "600" |
タイトルの太さ |
| pFontFamily | string | "Noto Sans JP" |
説明文のフォント |
| pFontWeight | string | "400" |
説明文の太さ |
itemsのサブフィールド（各バナー）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| title | string | バナーのタイトル |
| description | string | バナーの説明文 |
| imgUrl | string | 背景画像のURL |
| linkUrl | string | クリック時のリンク先 |
| openInNewTab | boolean | 新しいタブで開くか |
使いどころ: サービスカテゴリーへの導線、3部門の紹介。写真の上にテキストを載せてビジュアルナビゲーションに。
バナー 02 4カラム（lw-banner-info-02）
4カラム版のバナーカード。属性はバナー01と同一構成で、デフォルト4件。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | array | 4件 | バナーデータ（バナー01と同じサブフィールド） |
| filterBackgroundColor | string | "#000" |
フィルターオーバーレイの色 |
| filterOpacity | number | 0.45 |
フィルターの透過度 |
| titleFontFamily | string | "Noto Sans JP" |
タイトルのフォント |
| titleFontWeight | string | "600" |
タイトルの太さ |
| pFontFamily | string | "Noto Sans JP" |
説明文のフォント |
| pFontWeight | string | "400" |
説明文の太さ |
使いどころ: 4カテゴリーのサービス紹介、4つの強み。バナー01より横幅が狭くなるので短めのテキストが適切。
バナー 03 3カラム（lw-banner-info-03）
3カラムバナーに最大幅（maxWidth）設定を追加。バナー01よりコンパクトに収められる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | array | 3件 | バナーデータ（バナー01と同じサブフィールド） |
| filterBackgroundColor | string | "#000" |
フィルターオーバーレイの色 |
| filterOpacity | number | 0.45 |
フィルターの透過度 |
| titleFontFamily | string | "Noto Sans JP" |
タイトルのフォント |
| titleFontWeight | string | "600" |
タイトルの太さ |
| pFontFamily | string | "Noto Sans JP" |
説明文のフォント |
| pFontWeight | string | "400" |
説明文の太さ |
| maxWidth | number | 800 |
バナー全体の最大幅（px） |
使いどころ: ページ幅よりコンパクトなバナーセクションを作りたい場合。中央寄せで使うとバランスが良い。
バナー 04 2カラム2行（lw-banner-info-04）
2×2のグリッドバナー。4枚のバナーを2行2列で表示。タイトルが太字（800）でインパクトがある。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | array | 4件 | バナーデータ（バナー01と同じサブフィールド） |
| filterBackgroundColor | string | "#000" |
フィルターオーバーレイの色 |
| filterOpacity | number | 0.45 |
フィルターの透過度 |
| titleFontFamily | string | "Noto Sans JP" |
タイトルのフォント |
| titleFontWeight | string | "800" |
タイトルの太さ（他より太い） |
| pFontFamily | string | "Noto Sans JP" |
説明文のフォント |
| pFontWeight | string | "400" |
説明文の太さ |
| maxWidth | number | 800 |
バナー全体の最大幅（px） |
使いどころ: 4つのサービスやカテゴリーを均等に見せたい場合。正方形に近いレイアウトで見栄えが良い。
バナー 05 2カラム2行（lw-banner-info-05）
バナー04と同じ2×2グリッドのレイアウトバリエーション。属性構成はバナー04と同一。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | array | 4件 | バナーデータ（バナー01と同じサブフィールド） |
| filterBackgroundColor | string | "#000" |
フィルターオーバーレイの色 |
| filterOpacity | number | 0.45 |
フィルターの透過度 |
| titleFontFamily | string | "Noto Sans JP" |
タイトルのフォント |
| titleFontWeight | string | "800" |
タイトルの太さ |
| pFontFamily | string | "Noto Sans JP" |
説明文のフォント |
| pFontWeight | string | "400" |
説明文の太さ |
| maxWidth | number | 800 |
バナー全体の最大幅（px） |
使いどころ: バナー04と見比べてデザインの好みで選択。レイアウトの細部（余白・画像の見え方）が異なる。
バナーブロック選びガイド
| 用途 | おすすめ | カラム数 |
|---|---|---|
| 3カテゴリーの導線（フル幅） | バナー 01 | 3列 |
| 4カテゴリーの導線 | バナー 02 | 4列 |
| コンパクトな3カテゴリー | バナー 03 | 3列（幅制限あり） |
| 2×2グリッド（太字タイトル） | バナー 04 | 2列×2行 |
| 2×2グリッド（バリエーション） | バナー 05 | 2列×2行 |
デザインのコツ:
- フィルター透過度は
0.3〜0.5が読みやすい。低すぎると文字が見えにくく、高すぎると写真が見えない - 全バナーの画像は同じトーン（明るさ・色味）で揃えると統一感が出る
- タイトルは短め（10文字以内）が読みやすい
ギャラリーブロック
画像を一覧表示するためのブロック群。シンプルなグリッドからスライダーまで。
無料ギャラリーブロック（2種）
ギャラリー 01（lw-gallery-01）
画像ギャラリーにテキスト説明を添えられるブロック。テキストの配置をPC/SP別に設定可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | array | 3件 | 画像データ（下記サブフィールド参照） |
| text_1 | string | プレースホルダー文 | 上部テキスト |
| text_2 | string | プレースホルダー文 | 下部テキスト |
| showText1 | boolean | true |
上部テキスト表示の ON/OFF |
| showText2 | boolean | true |
下部テキスト表示の ON/OFF |
| text1AlignPc | string | "center_pc" |
上部テキストPC配置 |
| text1AlignSp | string | "left_sp" |
上部テキストSP配置 |
| text2AlignPc | string | "center_pc" |
下部テキストPC配置 |
| text2AlignSp | string | "left_sp" |
下部テキストSP配置 |
| maxWidthText | number | 800 |
テキストエリアの最大幅（px） |
| maxWidth | number | 800 |
ギャラリー全体の最大幅（px） |
itemsのサブフィールド（各画像）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| imgUrl | string | 画像のURL |
使いどころ: 施設写真＋説明、商品画像＋解説テキスト。テキストの配置を細かく制御できるので、レイアウトの自由度が高い。
ギャラリー 02（lw-gallery-02）
画像URLの配列だけで構成される最もシンプルなギャラリー。設定不要で画像を並べるだけ。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| images | array | 8件 | 画像URLの配列（文字列のリスト） |
使いどころ: とにかく画像を並べたいだけの場合。装飾なし・テキストなしの純粋なグリッドギャラリー。設定1つだけなので最速でギャラリーセクションを作れる。
有料ギャラリーブロック（1種）
Gallery 03（paid-block-lw-gallery-3）
スライダー型ギャラリー。キャプション、ナビゲーション矢印、角丸、アスペクト比をカスタマイズ可能。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| images | array | 5件 | スライド画像データ（下記サブフィールド参照） |
| borderRadiusEm | number | 0 |
スライド画像の角丸（em） |
| aspectHeightPx | number | 700 |
スライドの高さ（px） |
| maxWidthPx | number | 0 |
スライダーの最大幅（px、0で制限なし） |
| btnBgColor | string | "var(--color-main)" |
ナビゲーションボタン背景色 |
| arrowColor | string | "#ffffff" |
ナビゲーション矢印の色 |
| captionBgColor | string | "rgba(0,0,0,0.6)" |
キャプション背景色 |
imagesのサブフィールド（各スライド）:
| サブ属性 | 型 | 説明 |
|---|---|---|
| url | string | 画像のURL |
| alt | string | 画像の代替テキスト |
| caption | string | 画像のキャプションテキスト |
使いどころ: 施工実績のスライドショー、物件写真のスライダー、イベントフォト。キャプションで写真に説明を添えられる。
ギャラリーブロック選びガイド
| 用途 | おすすめ | ティア |
|---|---|---|
| テキスト付き画像一覧 | ギャラリー 01 | 無料 |
| 画像だけのグリッド（最速） | ギャラリー 02 | 無料 |
| キャプション付きスライダー | Gallery 03 | 有料 |
全体の選びかた早見表
| やりたいこと | ブロック | カテゴリ | ティア |
|---|---|---|---|
| 画像＋テキストで説明 | Content 01 | コンテンツ | 無料 |
| カード型で複数紹介 | Content 02 | コンテンツ | 無料 |
| ボタン付きカード（料金表等） | Content 08 | コンテンツ | 無料 |
| サブタイトル付きリッチ説明 | Content 03 | コンテンツ | 有料 |
| 写真ギャラリー＋CTA | Content 04 | コンテンツ | 有料 |
| 全幅背景＋テキスト | Content 05 | コンテンツ | 有料 |
| シンプル画像＋テキスト | Content 06 | コンテンツ | 有料 |
| 角丸画像カード | Content 07 | コンテンツ | 有料 |
| 装飾画像カード | PR Content 08 | コンテンツ | プレミアム |
| カルーセル | PR Content 09 | コンテンツ | プレミアム |
| フィルター付き画像カード | 画像カード 02 | 画像 | 無料 |
| 高度な画像演出 | 画像 00 | 画像 | プレミアム |
| ロゴ・アイコン一覧 | PR画像グリッド 01 | 画像 | プレミアム |
| スタッフ紹介カード | 画像 01 | 画像 | 有料 |
| 3列バナー導線 | バナー 01 | バナー | 無料 |
| 4列バナー導線 | バナー 02 | バナー | 無料 |
| コンパクト3列バナー | バナー 03 | バナー | 無料 |
| 2×2グリッドバナー | バナー 04/05 | バナー | 無料 |
| テキスト付き画像一覧 | ギャラリー 01 | ギャラリー | 無料 |
| 画像だけのグリッド | ギャラリー 02 | ギャラリー | 無料 |
| スライダーギャラリー | Gallery 03 | ギャラリー | 有料 |
最終更新: 2026-03-15 13:00