diff --git a/editor-css/_editor_before_custom-block-variation.scss b/editor-css/_editor_before_custom-block-variation.scss
index d74193b65..10b39887c 100644
--- a/editor-css/_editor_before_custom-block-variation.scss
+++ b/editor-css/_editor_before_custom-block-variation.scss
@@ -21,4 +21,18 @@
 		flex-shrink: 0;
 		position: relative;
 	}
+	h4 {
+		margin-top: 0;
+		margin-bottom: 12px;
+	}
+	.block-variation-error-text {
+		margin-top: 0;
+		margin-bottom: 0;
+		color: #c00;
+	}
+	.block-variation-category-list {
+		.components-base-control {
+			margin-bottom: 12px;
+		}
+	}
 }
diff --git a/src/blocks/_pro/blog-card/edit/index.js b/src/blocks/_pro/blog-card/edit/index.js
index 442e4b0f4..6879fcdb8 100644
--- a/src/blocks/_pro/blog-card/edit/index.js
+++ b/src/blocks/_pro/blog-card/edit/index.js
@@ -9,6 +9,7 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 	Spinner,
+	ExternalLink,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -157,6 +158,27 @@ export default function BlogCardWrapperEdit(props) {
 								>
 									{__('バリエーション設定', 'vk-blocks-pro')}
 								</Button>
+								<p style={{ marginTop: '8px' }}>
+									{__(
+										'現在のブロック設定をブロックバリエーションとして登録できます。',
+										'vk-blocks-pro'
+									)}
+									<br />
+									<ExternalLink
+										href={__(
+											'https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-variations/',
+											// 'https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/',
+											'vk-blocks-pro'
+										)}
+										target="_blank"
+										rel="noreferrer"
+									>
+										{__(
+											'ブロックバリエーションについてさらに詳しく',
+											'vk-blocks-pro'
+										)}
+									</ExternalLink>
+								</p>
 								{showPatternsExplorer && (
 									<VariationExplorerModal
 										onModalClose={() =>
diff --git a/src/extensions/common/custom-block-variation/block-variation-list/item/body-area/index.js b/src/extensions/common/custom-block-variation/block-variation-list/item/body-area/index.js
index 6ef008f97..73f3334a0 100644
--- a/src/extensions/common/custom-block-variation/block-variation-list/item/body-area/index.js
+++ b/src/extensions/common/custom-block-variation/block-variation-list/item/body-area/index.js
@@ -53,93 +53,121 @@ export const BodyArea = ({
 				borderTop: '1px solid #ccc',
 			}}
 		>
-			<TextControl
-				__nextHasNoMarginBottom
-				label={__('タイトル (必須)', 'vk-blocks-pro')}
-				value={variationState[index].title}
-				onChange={(value) => onChange('title', value)}
-				placeholder={__('マイバリエーション', 'vk-blocks-pro')}
-			/>
-			{!variationState[index].title && (
-				<p style={{ marginTop: '0', color: '#c00' }}>
-					{__('title is required', 'vk-blocks-pro')}
-				</p>
-			)}
-			<TextControl
-				__nextHasNoMarginBottom
-				label={__('説明', 'vk-blocks-pro')}
-				value={variationState[index].description}
-				onChange={(value) => onChange('description', value)}
-			/>
-			<h4>{__('スコープ (必須)', 'vk-blocks-pro')}</h4>
-			{SCOPE_OPTIONS.filter((scopeOption) =>
-				support.scope.includes(scopeOption.name)
-			).map((scopeOption) => (
-				<CheckboxControl
-					key={scopeOption.name}
+			<div>
+				<h4>{__('タイトル (必須)', 'vk-blocks-pro')}</h4>
+				<TextControl
 					__nextHasNoMarginBottom
-					checked={variationState[index].scope?.includes(
-						scopeOption.name
-					)}
-					help={scopeOption.help}
-					label={scopeOption.label}
-					onChange={(isChecked) => {
-						const newScope = isChecked
-							? [
-									...(variationState[index].scope || []),
-									scopeOption.name,
-							  ]
-							: variationState[index].scope.filter(
-									(item) => item !== scopeOption.name
-							  );
-						onChange('scope', newScope);
-					}}
+					value={variationState[index].title}
+					onChange={(value) => onChange('title', value)}
+					placeholder={__('マイバリエーション', 'vk-blocks-pro')}
+				/>
+				{!variationState[index].title && (
+					<p
+						className="block-variation-error-text"
+						style={{ marginTop: '0', color: '#c00' }}
+					>
+						{__('title is required', 'vk-blocks-pro')}
+					</p>
+				)}
+			</div>
+			<div>
+				<h4>{__('説明', 'vk-blocks-pro')}</h4>
+				<TextControl
+					__nextHasNoMarginBottom
+					value={variationState[index].description}
+					onChange={(value) => onChange('description', value)}
 				/>
-			))}
-			{variationState[index].scope.length === 0 && (
-				<p style={{ marginTop: '0', color: '#c00' }}>
-					{__('scope is required', 'vk-blocks-pro')}
+			</div>
+			<div>
+				<h4>{__('スコープ (必須)', 'vk-blocks-pro')}</h4>
+				<p style={{ marginTop: '0' }}>
+					{__(
+						'登録したバリエーションをどこに表示するかを設定できます。表示した場所から呼び出せます。',
+						'vk-blocks-pro'
+					)}
 				</p>
-			)}
+				{SCOPE_OPTIONS.filter((scopeOption) =>
+					support.scope.includes(scopeOption.name)
+				).map((scopeOption) => (
+					<CheckboxControl
+						key={scopeOption.name}
+						__nextHasNoMarginBottom
+						checked={variationState[index].scope?.includes(
+							scopeOption.name
+						)}
+						help={scopeOption.help}
+						label={scopeOption.label}
+						onChange={(isChecked) => {
+							const newScope = isChecked
+								? [
+										...(variationState[index].scope || []),
+										scopeOption.name,
+								  ]
+								: variationState[index].scope.filter(
+										(item) => item !== scopeOption.name
+								  );
+							onChange('scope', newScope);
+						}}
+					/>
+				))}
+				{variationState[index].scope.length === 0 && (
+					<p className="block-variation-error-text">
+						{__('scope is required', 'vk-blocks-pro')}
+					</p>
+				)}
+			</div>
 			{variationState[index].scope.includes('inserter') && (
-				<>
+				<div>
 					<h4>{__('Category')}</h4>
-					{_getCategories.map((blockCategory) => (
-						<RadioControl
-							key={blockCategory.slug}
-							selected={variationState[index].category}
-							options={[
-								{
-									label: blockCategory.title,
-									value: blockCategory.slug,
-								},
-							]}
-							onChange={(value) => onChange('category', value)}
-						/>
-					))}
-				</>
+					<div className="block-variation-category-list">
+						{_getCategories.map((blockCategory) => (
+							<RadioControl
+								key={blockCategory.slug}
+								selected={variationState[index].category}
+								options={[
+									{
+										label: blockCategory.title,
+										value: blockCategory.slug,
+									},
+								]}
+								onChange={(value) =>
+									onChange('category', value)
+								}
+							/>
+						))}
+					</div>
+				</div>
 			)}
-			<TextControl
-				__nextHasNoMarginBottom
-				label={__('アイコン', 'vk-blocks-pro')}
-				value={variationState[index].icon}
-				onChange={(value) => onChange('icon', value)}
-				placeholder="embed-generic"
-			/>
 			<div>
-				<ExternalLink
-					href="https://developer.wordpress.org/resource/dashicons/#embed-generic"
-					target="_blank"
-					rel="noreferrer"
-				>
-					{__('Dashicons リスト', 'vk-blocks-pro')}
-				</ExternalLink>
+				<h4>{__('アイコン', 'vk-blocks-pro')}</h4>
+				<TextControl
+					__nextHasNoMarginBottom
+					value={variationState[index].icon}
+					onChange={(value) => onChange('icon', value)}
+					placeholder="embed-generic"
+					help={__(
+						'アイコンの名前は「dashicons-」を省いた英数字を入力してください。 例: embed-generic',
+						'vk-blocks-pro'
+					)}
+				/>
+				<div>
+					<ExternalLink
+						href="https://developer.wordpress.org/resource/dashicons/#embed-generic"
+						target="_blank"
+						rel="noreferrer"
+					>
+						{__('Dashicons リスト', 'vk-blocks-pro')}
+					</ExternalLink>
+				</div>
+			</div>
+			<div>
+				<h4>{__('キーワード', 'vk-blocks-pro')}</h4>
+				<FormTokenField
+					label={__('キーワードを追加', 'vk-blocks-pro')}
+					value={variationState[index].keywords || []}
+					onChange={(value) => onChange('keywords', value)}
+				/>
 			</div>
-			<FormTokenField
-				label={__('キーワード', 'vk-blocks-pro')}
-				value={variationState[index].keywords || []}
-				onChange={(value) => onChange('keywords', value)}
-			/>
 		</VStack>
 	);
 };
diff --git a/src/extensions/common/custom-block-variation/create-variation/block-variation-form/index.js b/src/extensions/common/custom-block-variation/create-variation/block-variation-form/index.js
index f79715356..c3de909ea 100644
--- a/src/extensions/common/custom-block-variation/create-variation/block-variation-form/index.js
+++ b/src/extensions/common/custom-block-variation/create-variation/block-variation-form/index.js
@@ -75,101 +75,129 @@ export default function VariationForm(props) {
 						setVariation={setVariation}
 					/>
 				)}
-				<TextControl
-					__nextHasNoMarginBottom
-					label={__('タイトル (必須)', 'vk-blocks-pro')}
-					value={variation.title}
-					onChange={(value) => {
-						setVariation({ ...variation, title: value });
-					}}
-					placeholder={__('マイバリエーション', 'vk-blocks-pro')}
-				/>
-				{!variation.title && (
-					<p style={{ marginTop: '0', color: '#c00' }}>
-						{__('title is required', 'vk-blocks-pro')}
-					</p>
-				)}
-				<TextControl
-					__nextHasNoMarginBottom
-					label={__('説明', 'vk-blocks-pro')}
-					value={variation.description}
-					onChange={(value) => {
-						setVariation({ ...variation, description: value });
-					}}
-				/>
-				<h4>{__('スコープ (必須)', 'vk-blocks-pro')}</h4>
-				{SCOPE_OPTIONS.filter((scopeOption) =>
-					support.scope.includes(scopeOption.name)
-				).map((scopeOption) => (
-					<CheckboxControl
-						key={scopeOption.name}
+				<div>
+					<h4>{__('タイトル (必須)', 'vk-blocks-pro')}</h4>
+					<TextControl
+						__nextHasNoMarginBottom
+						value={variation.title}
+						onChange={(value) => {
+							setVariation({ ...variation, title: value });
+						}}
+						placeholder={__('マイバリエーション', 'vk-blocks-pro')}
+					/>
+					{!variation.title && (
+						<p className="block-variation-error-text">
+							{__('title is required', 'vk-blocks-pro')}
+						</p>
+					)}
+				</div>
+				<div>
+					<h4>{__('説明', 'vk-blocks-pro')}</h4>
+					<TextControl
 						__nextHasNoMarginBottom
-						checked={variation.scope?.includes(scopeOption.name)}
-						help={scopeOption.help}
-						label={scopeOption.label}
-						onChange={(isChecked) => {
-							const newScope = isChecked
-								? [...(variation.scope || []), scopeOption.name]
-								: variation.scope.filter(
-										(item) => item !== scopeOption.name
-								  );
-							setVariation({ ...variation, scope: newScope });
+						value={variation.description}
+						onChange={(value) => {
+							setVariation({ ...variation, description: value });
 						}}
 					/>
-				))}
-				{variation.scope.length === 0 && (
-					<p style={{ marginTop: '0', color: '#c00' }}>
-						{__('scope is required', 'vk-blocks-pro')}
+				</div>
+				<div>
+					<h4>{__('スコープ (必須)', 'vk-blocks-pro')}</h4>
+					<p style={{ marginTop: '0' }}>
+						{__(
+							'登録したバリエーションをどこに表示するかを設定できます。表示した場所から呼び出せます。',
+							'vk-blocks-pro'
+						)}
 					</p>
-				)}
+					{SCOPE_OPTIONS.filter((scopeOption) =>
+						support.scope.includes(scopeOption.name)
+					).map((scopeOption) => (
+						<CheckboxControl
+							key={scopeOption.name}
+							__nextHasNoMarginBottom
+							checked={variation.scope?.includes(
+								scopeOption.name
+							)}
+							help={scopeOption.help}
+							label={scopeOption.label}
+							onChange={(isChecked) => {
+								const newScope = isChecked
+									? [
+											...(variation.scope || []),
+											scopeOption.name,
+									  ]
+									: variation.scope.filter(
+											(item) => item !== scopeOption.name
+									  );
+								setVariation({ ...variation, scope: newScope });
+							}}
+						/>
+					))}
+					{variation.scope.length === 0 && (
+						<p className="block-variation-error-text">
+							{__('scope is required', 'vk-blocks-pro')}
+						</p>
+					)}
+				</div>
 				{variation.scope.includes('inserter') && (
-					<>
+					<div>
 						<h4>{__('Category')}</h4>
-						{_getCategories.map((blockCategory) => (
-							<RadioControl
-								key={blockCategory.slug}
-								selected={variation.category}
-								options={[
-									{
-										label: blockCategory.title,
-										value: blockCategory.slug,
-									},
-								]}
-								onChange={(value) => {
-									setVariation({
-										...variation,
-										category: value,
-									});
-								}}
-							/>
-						))}
-					</>
+						<div className="block-variation-category-list">
+							{_getCategories.map((blockCategory) => (
+								<RadioControl
+									key={blockCategory.slug}
+									selected={variation.category}
+									options={[
+										{
+											label: blockCategory.title,
+											value: blockCategory.slug,
+										},
+									]}
+									onChange={(value) => {
+										setVariation({
+											...variation,
+											category: value,
+										});
+									}}
+								/>
+							))}
+						</div>
+					</div>
 				)}
-				<TextControl
-					__nextHasNoMarginBottom
-					label={__('アイコン', 'vk-blocks-pro')}
-					value={variation.icon}
-					onChange={(value) => {
-						setVariation({ ...variation, icon: value });
-					}}
-					placeholder="embed-generic"
-				/>
 				<div>
-					<ExternalLink
-						href="https://developer.wordpress.org/resource/dashicons/#embed-generic"
-						target="_blank"
-						rel="noreferrer"
-					>
-						{__('Dashicons リスト', 'vk-blocks-pro')}
-					</ExternalLink>
+					<h4>{__('アイコン', 'vk-blocks-pro')}</h4>
+					<TextControl
+						__nextHasNoMarginBottom
+						value={variation.icon}
+						onChange={(value) => {
+							setVariation({ ...variation, icon: value });
+						}}
+						placeholder="embed-generic"
+						help={__(
+							'アイコンの名前は「dashicons-」を省いた英数字を入力してください。 例: embed-generic',
+							'vk-blocks-pro'
+						)}
+					/>
+					<div>
+						<ExternalLink
+							href="https://developer.wordpress.org/resource/dashicons/#embed-generic"
+							target="_blank"
+							rel="noreferrer"
+						>
+							{__('Dashicons リスト', 'vk-blocks-pro')}
+						</ExternalLink>
+					</div>
+				</div>
+				<div>
+					<h4>{__('キーワード', 'vk-blocks-pro')}</h4>
+					<FormTokenField
+						label={__('キーワードを追加', 'vk-blocks-pro')}
+						value={variation.keywords || []}
+						onChange={(value) => {
+							setVariation({ ...variation, keywords: value });
+						}}
+					/>
 				</div>
-				<FormTokenField
-					label={__('キーワード', 'vk-blocks-pro')}
-					value={variation.keywords || []}
-					onChange={(value) => {
-						setVariation({ ...variation, keywords: value });
-					}}
-				/>
 			</VStack>
 		</>
 	);
diff --git a/src/extensions/common/custom-block-variation/create-variation/block-variation-form/variation-name/index.js b/src/extensions/common/custom-block-variation/create-variation/block-variation-form/variation-name/index.js
index 548cf3802..5647daab0 100644
--- a/src/extensions/common/custom-block-variation/create-variation/block-variation-form/variation-name/index.js
+++ b/src/extensions/common/custom-block-variation/create-variation/block-variation-form/variation-name/index.js
@@ -47,10 +47,10 @@ export default function VariationName({
 	}, [blockName]);
 
 	return (
-		<>
+		<div>
+			<h4>{__('名前/固有ID (必須)', 'vk-blocks-pro')}</h4>
 			<TextControl
 				__nextHasNoMarginBottom
-				label={__('名前/固有ID (必須)', 'vk-blocks-pro')}
 				value={variation.name}
 				onChange={(value) => {
 					value = value.trim();
@@ -60,8 +60,8 @@ export default function VariationName({
 				placeholder={__('my-variation', 'vk-blocks-pro')}
 			/>
 			{!canSave && (
-				<p style={{ marginTop: '0', color: '#c00' }}>{errorMessage}</p>
+				<p className="block-variation-error-text">{errorMessage}</p>
 			)}
-		</>
+		</div>
 	);
 }
diff --git a/src/extensions/common/custom-block-variation/utils.js b/src/extensions/common/custom-block-variation/utils.js
index 6f1e1ef85..7a83eea76 100644
--- a/src/extensions/common/custom-block-variation/utils.js
+++ b/src/extensions/common/custom-block-variation/utils.js
@@ -7,16 +7,16 @@ export const SCOPE_OPTIONS = [
 	{
 		name: 'inserter',
 		label: __('インサーター', 'vk-blocks-pro'),
-		help: __('インサーターに表示される', 'vk-blocks-pro'),
+		help: __('インサーターに表示されます', 'vk-blocks-pro'),
 	},
 	{
 		name: 'block',
 		label: __('ブロック', 'vk-blocks-pro'),
-		help: __('バリエーションピッカーに表示される', 'vk-blocks-pro'),
+		help: __('バリエーションピッカーに表示されます', 'vk-blocks-pro'),
 	},
 	{
 		name: 'transform',
 		label: __('変換', 'vk-blocks-pro'),
-		help: __('ブロックバリエーション変換で表示される', 'vk-blocks-pro'),
+		help: __('ブロックバリエーション変換で表示されます', 'vk-blocks-pro'),
 	},
 ];