プロダクトと作業フロー
製品をひとつの場面で伝える
最初に約束を示し、画面と三つの機能ですぐに証明します。
画面の順番
- ProductHero
- ProductScreenshot
- FeatureGrid
- LandingCta
MDXの骨組み
<ProductHero ... />
<ProductScreenshot ... />
<FeatureGrid columns="3">…</FeatureGrid>REFERENCE GALLERY
同じ製品でも、異なる流れで紹介できます。
形式が同じでも、理解する順番は変わります。テーマを選び、合うMDX構成から始めましょう。
トラベルエディトリアル
動線に沿って機能を説明する
見出し目次と実例で、長い流れも追いやすくします。
画面の順番
- ProductHero
- HeadingMap
- LandingSection
- ExamplePanel
MDXの骨組み
<ProductHero ... />
<HeadingMap />
<LandingSection title="…">
<ExamplePanel ... />
</LandingSection>プロダクトと作業フロー
画像と説明を交互に読ませる
ひとつの画面を大きく見せ、その重要性を隣で説明する紹介方法です。
画面の順番
- ProductHero
- SplitSection
- ImageSlot
- ExamplePanel
MDXの骨組み
<SplitSection title="…">
<ImageSlot ... />
<ExamplePanel ... />
</SplitSection>コンテンツ運用
ひとつの画面に集中させる
重要な画面を集中区間にしつつ、通常表示へ戻る選択肢を残します。
画面の順番
- ProductHero
- HeadingMap
- FocusRegion
- ProductScreenshot
MDXの骨組み
<HeadingMap />
<FocusRegion label="…">
<ProductScreenshot ... />
</FocusRegion>コンテンツ運用
複数の画面を軽く見比べる
すべての機能を一画面に詰め込まず、流れごとの場面をスワイプで見せます。
画面の順番
- ProductHero
- ShowcaseSwiper
- ShowcaseSlide
- LandingCta
MDXの骨組み
<ShowcaseSwiper label="…">
<ShowcaseSlide title="…">…</ShowcaseSlide>
</ShowcaseSwiper>提案と購入判断
比較基準と結論を一緒に示す
比較したものと結論を、カード、例、ひとつのCTAで静かに閉じます。
画面の順番
- ProductHero
- FeatureGrid
- ExamplePanel
- LandingCta
MDXの骨組み
<FeatureGrid columns="2">…</FeatureGrid>
<ExamplePanel ... />
<LandingCta ... />