HubSpotモジュール：実績・特徴ハイライトモジュール
数値とアイコンを用いて、製品やサービスの特長や実績を視覚的にアピールするためのモジュールです。受賞歴、顧客満足度、導入実績などを効果的に表示できます。
Demo Video
Detail
利用目的
製品の信頼性を裏付ける具体的な数値（例：導入実績数、顧客満足度、受賞回数）を強調して表示し、訪問者に対してサービスの価値や信頼性を一目で直感的に伝えます。
実現できること
- 「ラベル（見出し）」「数値」「単位」「補足説明」のセットを、編集者が必要な数だけ追加・削除・並べ替えできます。
- アイコン、数値、テキストのフォントサイズや色をエディタ上で簡単に変更可能です。
- 複数の実績を横並びに表示し、比較しやすく見せることができます（レスポンシブ対応）。
実装におけるポイント・注意点
- リピーター: モジュールのフィールド設定で、
awardsという名前のグループフィールドを作成し、そのグループを「繰り返し」オプションで設定します。これにより、複数の実績項目を動的に追加できます。 - グループ内のフィールド: グループ内には、「ラベル」用のテキストフィールド (
award_label)、「数値」用のテキストフィールド (award_number)、「単位」用のテキストフィールド (award_unit)、「補足説明」用のテキストフィールド (award_note) を1セットとして含めます。 - スタイリングの柔軟性:
style_settingsグループ内でカラーピッカーと数値入力フィールドを提供し、CSSで動的にスタイルが適用されるようにします。これにより、コーディング知識がない編集者でもデザインの調整が可能です。
インプットJson
{
"label": "Awards Module",
"icon": "award",
"fields": [
{
"label": "Awards",
"name": "awards",
"type": "group",
"occurrence": {
"min": 1,
"max": 10,
"default": 3
},
"children": [
{
"label": "Award Label",
"name": "award_label",
"type": "text",
"default": "受賞実績"
},
{
"label": "Award Number",
"name": "award_number",
"type": "text",
"default": "100"
},
{
"label": "Award Unit",
"name": "award_unit",
"type": "text",
"default": "件以上"
},
{
"label": "Award Note",
"name": "award_note",
"type": "text",
"default": "お客様から高い評価をいただいています"
}
]
},
{
"label": "Style Settings",
"name": "style_settings",
"type": "group",
"children": [
{
"label": "Icon Color",
"name": "icon_color",
"type": "color",
"default": {
"color": "#3d556b"
}
},
{
"label": "Number Color",
"name": "number_color",
"type": "color",
"default": {
"color": "#3d556b"
}
},
{
"label": "Text Color",
"name": "text_color",
"type": "color",
"default": {
"color": "#33475b"
}
},
{
"label": "Label Font Size (px)",
"name": "label_font_size",
"type": "number",
"default": 19,
"min": 10,
"max": 50,
"step": 1
},
{
"label": "Number Font Size (px)",
"name": "number_font_size",
"type": "number",
"default": 48,
"min": 20,
"max": 100,
"step": 1
},
{
"label": "Unit Font Size (px)",
"name": "unit_font_size",
"type": "number",
"default": 24,
"min": 10,
"max": 50,
"step": 1
},
{
"label": "Note Font Size (px)",
"name": "note_font_size",
"type": "number",
"default": 12,
"min": 8,
"max": 24,
"step": 1
}
]
}
]
}
Source Code
HTML
<div class="awards-container">
{% for award in module.awards %}
<div class="award-item">
<div class="award-graphic">
<div class="laurel-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" stroke="{{ module.style_settings.icon_color.color|default('#3d556b') }}" stroke-linejoin="round" stroke-width="1.5" d="M9.246 6.611c-.213 1.642 1.104 3.166 1.104 3.166s1.663-1.138 1.876-2.78c.213-1.643-1.104-3.167-1.104-3.167S9.46 4.97 9.246 6.611ZM7.683 12.13c.696 1.503 2.624 2.093 2.624 2.093s.8-1.847.104-3.35s-2.624-2.094-2.624-2.094s-.8 1.848-.104 3.351Zm.821 5.285c1.328.993 3.306.599 3.306.599s-.176-2.005-1.504-2.998S7 14.417 7 14.417s.176 2.005 1.504 2.998Zm3.609 4.298c1.505.698 3.359-.095 3.359-.095s-.587-1.925-2.092-2.624c-1.505-.698-3.358.096-3.358.096s.586 1.925 2.091 2.623Zm1.668-18.745c-1.21 1.133-1.164 3.144-1.164 3.144s2.01.176 3.22-.957s1.164-3.145 1.164-3.145s-2.01-.175-3.22.958Z"/>
</svg>
</div>
<div class="award-content">
<div class="award-label" style="
font-size: {{ module.style_settings.label_font_size|default(19) }}px;
color: {{ module.style_settings.text_color.color|default('#33475b') }};
">
{{ award.award_label }}
</div>
<div class="award-title">
<span class="award-number" style="
font-size: {{ module.style_settings.number_font_size|default(48) }}px;
color: {{ module.style_settings.number_color.color|default('#3d556b') }};
">
{{ award.award_number }}
</span>
<span class="award-unit" style="
font-size: {{ module.style_settings.unit_font_size|default(24) }}px;
color: {{ module.style_settings.text_color.color|default('#33475b') }};
">
{{ award.award_unit }}
</span>
</div>
</div>
<div class="laurel-right">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" stroke="{{ module.style_settings.icon_color.color|default('#3d556b') }}" stroke-linejoin="round" stroke-width="1.5" d="M16.756 6.611c.213 1.642-1.104 3.166-1.104 3.166s-1.663-1.138-1.877-2.78C13.562 5.353 14.88 3.83 14.88 3.83s1.663 1.139 1.877 2.781Zm1.561 5.519c-.696 1.503-2.624 2.093-2.624 2.093s-.8-1.847-.104-3.35s2.625-2.094 2.625-2.094s.8 1.848.103 3.351Zm-.82 5.285c-1.328.993-3.306.599-3.306.599s.176-2.005 1.504-2.998s3.306-.599 3.306-.599s-.176 2.005-1.504 2.998Zm-3.609 4.298c-1.505.698-3.359-.095-3.359-.095s.587-1.925 2.092-2.624c1.505-.698 3.358.096 3.358.096s-.586 1.925-2.091 2.623ZM12.22 2.968c1.21 1.133 1.164 3.144 1.164 3.144s-2.01.176-3.22-.957S9 2.01 9 2.01s2.01-.175 3.22.958Z"/>
</svg>
</div>
</div>
<div class="award-note" style="
font-size: {{ module.style_settings.note_font_size|default(12) }}px;
color: {{ module.style_settings.text_color.color|default('#33475b') }};
">
{{ award.award_note }}
</div>
</div>
{% endfor %}
</div>
CSS
/* Awards Container */
.awards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 30px;
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}
/* Individual Award Item */
.award-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 200px;
max-width: 280px;
flex: 1;
}
/* Award Graphic Container */
.award-graphic {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
position: relative;
margin-bottom: 15px;
}
/* Laurel Wreaths */
.laurel-left,
.laurel-right {
width: 70px;
height: 70px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.laurel-left svg,
.laurel-right svg {
width: 100%;
height: 100%;
display: block;
}
/* Award Content */
.award-content {
text-align: center;
margin: 0 15px;
min-width: 120px;
}
/* Award Label - CSS変数を使用 */
.awards-container .award-label {
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 8px;
line-height: 1.3;
font-size: var(--label-font-size, 19px);
color: var(--text-color, #33475b);
}
/* Award Title Container */
.award-title {
display: flex;
align-items: baseline;
justify-content: center;
line-height: 1;
gap: 2px;
}
/* Award Number - CSS変数を使用 */
.awards-container .award-number {
font-weight: 900;
letter-spacing: -0.02em;
font-size: var(--number-font-size, 48px);
color: var(--icon-color, #3d556b);
}
/* Award Unit - CSS変数を使用 */
.awards-container .award-unit {
font-weight: 600;
margin-left: 0.1em;
font-size: var(--unit-font-size, 24px);
color: var(--text-color, #33475b);
}
/* Award Note - CSS変数を使用 */
.awards-container .award-note {
text-align: center;
line-height: 1.4;
opacity: 0.8;
margin-top: 5px;
max-width: 250px;
font-size: var(--note-font-size, 12px);
color: var(--text-color, #33475b);
}
/* Responsive Design */
@media (max-width: 768px) {
.awards-container {
flex-direction: column;
align-items: center;
gap: 25px;
padding: 30px 15px;
}
.award-item {
max-width: 300px;
width: 100%;
}
.laurel-left,
.laurel-right {
width: 60px;
height: 60px;
}
}
@media (max-width: 480px) {
.award-graphic {
margin-bottom: 12px;
}
.laurel-left,
.laurel-right {
width: 50px;
height: 50px;
}
.award-content {
margin: 0 10px;
}
}
Javascript
Related Template
Copyright ©SweetsVillage .Inc
