diff --git a/src/content/articles/products/components/images/smarthr-tab-bar-without-border.png b/src/content/articles/products/components/images/smarthr-tab-bar-without-border.png
new file mode 100644
index 000000000..3feec508e
Binary files /dev/null and b/src/content/articles/products/components/images/smarthr-tab-bar-without-border.png differ
diff --git a/src/content/articles/products/components/tab-bar.mdx b/src/content/articles/products/components/tab-bar.mdx
index ca4092d0c..30fde5303 100644
--- a/src/content/articles/products/components/tab-bar.mdx
+++ b/src/content/articles/products/components/tab-bar.mdx
@@ -14,17 +14,20 @@ import ComponentStory from '@/components/article/ComponentStory.astro'
 ### 同じオブジェクトの異なる状態を切り替えて表示する目的に使用しない
 TabBarは異なるオブジェクトやビューを切り替えるために使用してください。同じオブジェクトについて異なる状態を切り替えたい場合は[SegmentedControl](/products/components/segmented-control/)の使用を検討してください。
 
-### 下線なし（`bordered=false`）のTabBarは非推奨
-タブとして操作できるか認知がしにくく、ビューへの影響範囲が不明瞭なため、下線なしのTabBarは非推奨です。
+### ビューへの影響範囲を明確にする
+TabBarを使用する際は、影響するビューの範囲を明確にしてください。
 
-### 下線によって影響範囲を明示する
-TabBarは、下線によって影響するビューの範囲を明示して使用してください。
+基本的には、下線を設けることで影響するビューの範囲が明確になります。
 
 ![スクリーンショット: 標準のTabBar](./images/smarthr-tab-bar-bordered-true.png)
 
-下線が他のコンポーネントと競合する場合、最低限TabBarItemがある範囲までは下線が必要です。
+下線が他のコンポーネントと競合する場合、最低限TabBarItemがある範囲までは下線を設けてください。
 
-![スクリーンショット: 下線なしのTabBar](./images/smarthr-tab-bar-bordered-minimum.png)
+![スクリーンショット: 下線をTabBarItemの範囲に限定したTabBar](./images/smarthr-tab-bar-bordered-minimum.png)
+
+下線がなくても影響範囲が明確だと判断できる場合、下線を省略（`bordered=false`）できます。
+
+![スクリーンショット: 下線を省略したTabBar](./images/smarthr-tab-bar-without-border.png)
 
 ## レイアウト