このセクションの記事

【機能詳細】ページ編集（LP編集）／複合パーツ・セクションパーツ・ベースデザイン（新契約）

Avatar
ferret Oneカスタマーサポート（古城）
  • 更新
フォローする

新契約のUIでは、直感的にページ編集ができるように複数のパーツを組み合わせた複合パーツとセクションパーツを用意しています。

旧契約のお客様はご利用できません。

 

目次

 

複合パーツの配置方法

左編集エリア「複合パーツ」をクリックし、任意の複合パーツを「行配置エリア」にドラッグ&ドロップします

619b2f9b4170072b30fb939e115b5f71.gif

 

複合パーツの一覧（デザインバリエーション）

メインビジュアル用

アイコン デザイン
icon01.png design01.png
icon02.png design02.png
icon03.png design03.png
icon04.png design04.png
icon05.png design05.png

 

見出し

アイコン デザイン
icon06.png design06.png
icon07.png design07.png

 

テキスト

アイコン デザイン
icon08.png

design08.png

※デフォルトの文字色が白色のため設定時はご注意ください
icon09.png design09.png
icon10.png design10.png
icon11.png design11.png
icon12.png design12.png

 

画像・見出し

アイコン デザイン
icon13.png

__________2023-04-10_15.17.49.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon14.png

__________2023-04-10_15.18.50.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon15.png

__________2023-04-10_15.19.53.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon16.png

__________2023-04-10_15.22.04.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon17.png

__________2023-04-10_15.22.58.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon18.png

__________2023-04-10_15.33.58.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon19.png

__________2023-04-10_15.35.00.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon20.png

__________2023-04-10_15.36.07.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon21.png

__________2023-04-10_15.37.05.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon22.png

__________2023-04-10_15.38.07.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
icon23.png

__________2023-04-10_15.39.13.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。

画像・テキスト

アイコン デザイン
22.png

__________2023-04-10_15.40.25.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
23.png

__________2023-04-10_15.41.50.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
24.png

__________2023-04-10_15.42.47.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
25.png

__________2023-04-10_15.43.58.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。

3列の画像

アイコン デザイン
26.png

__________2023-04-10_15.46.03.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
27.png

__________2023-04-10_15.47.47.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。

ボックスリンク

アイコン デザイン
28.png

__________2023-04-10_15.51.37.png

※イメージは開発中のものとなり、実際のイメージと異なる場合があります。
29.png __________2023-04-10_15.52.49.png
30.png

__________2023-04-10_15.54.29.png

※背景画像はカラムの背景に設定ください。
31.png __________2023-04-10_15.56.56.png
32.png __________2023-04-10_16.00.02.png
33.png __________2023-04-10_16.01.45.png

お問い合わせ・資料ダウンロード

アイコン デザイン
34.png

__________2023-04-10_16.21.25.png

※左側ボタンの文字色がデフォルトで白色になっています。
35.png

__________2023-04-10_16.25.14.png

※文字色がデフォルトで白色になっています。
36.png

__________2023-04-10_16.27.11.png

※一部、文字色がデフォルトで白色になっています。

その他

アイコン デザイン
37.png __________2023-04-10_16.28.20.png
38.png __________2023-04-10_16.34.02.png
39.png

__________2023-04-10_16.38.51.png

※リンクリストパーツを配置していますので、リンク先の設定をお願いします。
40.png __________2023-04-10_16.40.09.png
41.png

__________2023-04-10_16.51.54.png

※2つ以上の配置が必要です
42.png __________2023-04-10_16.53.28.png
43.png

__________2023-04-10_16.54.39.png

※吹き出し画像は予めご用意ください。
44.png

__________2023-04-10_16.55.30.png

※吹き出し画像は予めご用意ください。

 

セクションパーツの配置方法

左編集エリア「セクションパーツ」をクリックし、任意のセクションパーツを「コンテンツ配置エリア」にドラッグ&ドロップします

724240131fd5c0571dbbe6af3480f90e.gif

 

セクションパーツの一覧（デザインバリエーション）

空白のセクション

アイコン デザイン
45.png

__________2023-04-10_17.52.15.png

※見出しパーツを配置しています。
46.png

__________2023-04-10_17.53.25.png

※ベースデザイン設定のメインカラーを背景色に、見出しパーツを配置しています。
47.png

__________2023-04-10_17.55.01.png

※ベースデザイン設定のサブカラーを背景色に、見出しパーツを配置しています。
48.png

__________2023-04-10_17.55.55.png

※ベースデザイン設定のアクセントカラーを背景色に、見出しパーツを配置しています。
49.png

__________2023-04-10_17.56.48.png

※ベースデザイン設定の背景カラー①を背景色に、見出しパーツを配置しています。
50.png

__________2023-04-10_17.59.20.png

※ベースデザイン設定の背景カラー②を背景色に、見出しパーツを配置しています。

商品・サービス

アイコン デザイン
51.png __________2023-04-10_18.02.27.png
52.png __________2023-04-10_18.04.09.png
53.png __________2023-04-10_18.05.12.png
54.png __________2023-04-10_18.06.37.png

課題・悩み

アイコン デザイン
55.png __________2023-04-10_18.07.40.png
56.png __________2023-04-10_18.08.47.png
57.png __________2023-04-10_18.09.48.png
58.png __________2023-04-10_18.11.19.png

選ばれる理由

アイコン デザイン
59.png __________2023-04-10_18.13.25.png
60.png __________2023-04-10_18.15.06.png
61.png __________2023-04-10_18.16.47.png
62.png __________2023-04-10_18.20.28.png
63.png __________2023-04-10_18.22.14.png
64.png __________2023-04-10_18.27.28.png
65.png __________2023-04-10_18.29.42.png

リスト

アイコン デザイン
66.png __________2023-04-10_18.31.18.png
67.png __________2023-04-10_18.32.30.png

お問い合わせ・資料ダウンロード

アイコン デザイン
68.png

__________2023-04-10_18.36.36.png

※任意の背景色を設定してください
69.png __________2023-04-10_18.35.30.png
70.png __________2023-04-10_18.37.40.png
71.png

__________2023-04-10_18.38.52.png

※任意の背景色を設定してください
72.png

__________2023-04-10_18.40.16.png

※任意の背景色を設定してください
73.png

__________2023-04-10_18.41.57.png

※任意のフォームを設定してください
74.png

__________2023-04-10_18.43.29.png

※任意のフォームを設定してください

 

ベースデザイン

ベースデザインで使用されているカラーコードが確認・コピーできます。

base.png

■ベースデザインについての詳細はこちら
＞【画面説明】設定／ベースデザイン設定

関連記事