問題解決型の文章フレーム

読者の悩みを次の行動に変える文章構成。

文章フレーム 文章問題解決策転換
番号付きセクションで構成された問題解決型文章フレームのワークシートモックアップ。
copy-frame

文章フレーム

つまずきを示し、簡単な解決策を出し、次の行動へ誘う

  • 1. 何が難しいか
  • 2. なぜ起きるか
  • 3. 次に何をするか

商品、講座、サービス、ガイド向け

使い方

01

悩み

  • 読者の言葉で状況を書く。
02

原因

  • 読者を責めずに理由を説明する。
03

次の行動

  • 一つの具体的な行動、道具、型、例を出す。

そのまま応用できる例

Design specs

Color values

Clean white

#ffffff · RGB(255, 255, 255)

Card surface and worksheet background.

Slate text

#1f2937 · RGB(31, 41, 55)

Main copy and section labels.

Process blue

#3b82f6 · RGB(59, 130, 246)

Step numbers, arrows, and primary callout.

Lime note

#c8ff42 · RGB(200, 255, 66)

Small sticky-note highlight, never the full background.

Type and size

Frame title

  • Use system sans or grotesk sans at 34-46px, 850-950 weight, line-height around 1.05.

Step copy

  • Use 15-18px body text, 500-650 weight, with short numbered lines for easy scanning.

Layout rules

Reading path

  • Use a vertical 3-step stack or 3-column row. Each step needs a number, one heading, and one sentence.

Spacing

  • Use 24-32px card padding, 14-18px gaps between steps, and 2px dividers to make the worksheet feel usable.

Build notes

  • Good for landing-page sections, PDF worksheets, carousel slides, and product explanation cards.
  • When copying into a document editor, keep each step under two lines.

置き換えられる部分

悩みの動詞

  • 詰まる
  • 散らかる
  • 選べない
  • 説明できない

向かない場合

  • 読者が問題をすでに知っている場合。
  • 感情的なブランドコピーだけが必要な場合。
  • 次の行動がまだ曖昧な場合。

展開例

  • FAQ の回答に使える。
  • チュートリアルの導入に使える。
  • ランディングページの見出しに使える。

使用時の注意

  • 悩みは具体的にする。
  • 大げさな約束を避ける。
  • 次の行動は一つに絞る。

向いている用途

ランディングページSNS本文商品紹介

カラー

関連アイデア

近い構造、雰囲気、用途を続けて見られます。