FRAME.
50 STRUCTURESONE YOURS.
FRAME STUDIO
あなたの文章を、読める形へ。
原稿を入れる → 型を試す → PC・スマホで確認 → 保存。
比較記事・手順書・読み物の「伝わる順番」を試せます。
この画面は初期見本です。操作コードの開始をまだ確認できていません。開始すると各ボタンが有効になります。
操作状況と開き方
- 起動
- 開始をまだ確認できていません
- 修正版
- 1.3.1 / 実行前
- 読み込み
- 初期見本を表示中
- 最後に受け取った操作
- まだありません
読み取り専用のプレビューでは操作コードが実行されない場合があります。WordPressのプレビュー、またはパソコンに保存したHTMLを対応ブラウザで開き、起動欄が変わるか確認してください。
起動済みでも反応しない場合は、この欄と操作台のメッセージが分かる画面を共有してください。ボタンを押した後の結果は、操作台のメッセージと保存先で確認できます。
02 / CHOOSE YOUR FRAME
文章はそのまま。
読む道筋を変える。
Aを自分の記事へ。Bを比較の基準に。選んだ型だけが変わり、原稿は残ります。
3の型を一覧から選ぶ目的に合う2案を見つける
選んだあと、自分の文章で確かめます。
型を選び、文字と余白をひとつずつ。読む感覚の違いを楽しんでください。
01 / MAKE IT YOURS
書き換えると、
見本が変わる。
まず題名を、自分の記事の題名に置き換えてみてください。入力した文章は完成イメージと追従プレビューへ自動反映します。
操作コードが起動すると、入力を止めたあとに見本が変わります。
下の節名を開いて、見出しと本文を入力します。
3 / 8節
比較表・問い・前提・数値の補助欄
型に応じて使う欄が変わります。架空の値を足さず、必要な材料を先に揃えてください。比較表は候補2つ・判断軸3行です。
練習原稿・長文テストを使う
長い題名・本文・URLを入れ、狭い幅で確認します。「原稿を1つ前に戻す」で取り消せます。
題名140文字、導入1200文字、各節本文6000文字まで。現在数は各欄に表示します。絵文字などは複数文字として数える場合があります。
03 / FIND YOUR RHYTHM
文字と余白を、
ひとつずつ。
本文の読みやすさを、Aの文字サイズ・行間・余白で調整します。Bは同じ原稿を基準の文字組みで表示するので、違いを見比べられます。
字を小さくする前に、幅・改行・配置を。型に固有の余白は保ちます。日本語の書体は端末により異なり、外部フォントは読み込みません。
04 / TAKE YOUR FRAME
いい形を、
次の記事へ。
完成HTMLは記事として開くためのファイル。編集用JSONは、後日ここで作業を再開するためのファイルです。完成HTMLにはAの型・自分の原稿・調整した文字組みが入ります。
保存したプロジェクトを再開する
300KB以下のFRAME形式を読み込みます。原稿・A/B・文字組み・候補を復元し、この教材の操作コードから外部へアップロードしません。
完成記事のHTML（ブラウザで開く）
記事本文のHTML＋CSS（WordPress用に確認）
今回の文字組み仕様
この案を実装するAI依頼文
原稿全文・補助欄のTXT
「自分の本文HTMLをコピー」は、Aの型・入力原稿・調整値を含むHTML＋CSSです。WordPressのカスタムHTMLブロックへ全文を貼り、下書きで確認します。教材全文の00ファイルとは別です。
Aが保存する完成記事。Bは、同じ原稿で型と文字組みを比べるための見本です。
PCとスマホの幅を切り替え、段組みや改行を確認できます。
A 01 文庫の1列 · 調整値を反映
B 17 判断軸マトリクス · 基準値
↕ 見本の中をスクロールすると全文を読めます。PCとスマホは記事の幅の比較です。実機のフォント・ブラウザ表示は公開前に確認してください。
Aの補助要素：なし。題名・導入・本文・結論を表示します。
全文を手動でコピー
Macは⌘+C、WindowsはCtrl+C。TextEditでは「標準テキスト」にして、.html・.txt・.json の拡張子を合わせてください。
THE FRAME COLLECTION / 03 STRUCTURES
まずは、
3つの読む形から。
気になるフレームをひとつ選ぶ。
同じ原稿のプレビューが、その場で変わります。
各カードの「見本HTMLを保存」は、ブラウザで開ける完成記事。「本文HTMLをコピー」は、本文とCSSだけを取り出します。見本の文章は架空の練習用です。
WordPressの記事で使うには
- カードの「本文HTMLをコピー」を押します。
- 自分の記事の「カスタムHTML」ブロックに、CSSを含めた全文を貼ります。コードブロックには貼りません。
- 非公開の下書きで、本文・段組み・スマホ幅・目次リンクを確認します。
自分の原稿を使うなら、作業台で入力し、「保存する」の「自分の本文HTMLをコピー」へ。複数箇所に入れるときは、1つ追加するたびに教材から改めてコピーしてください。テーマや権限によりCSSが制限される場合があります。
操作にはJavaScriptが使えるブラウザが必要です。各フレームの「完成見本を読む」はそのまま開けます。
保存候補 0案
候補は番号順で並びます。固定表示にせず、記事を読む場所を空けておきます。
見つかりませんでした。絞り込みを解除して、別の言葉から探してください。
文庫の1列
中央に細い本文列を1つ置き、見出しと段落を同じ左端で連続させる。
向く記事 長い解説 ／ 体験記 ／ 考察
選ぶ理由・使い方・直し方
別の型を考えたい記事
候補を何度も見比べる記事 ／ 一覧性が第一の仕様集
この型を持ち帰る
このカードの完成見本です。入力中の原稿は入りません。
完成見本を読む
架空の練習記事 · ESSAY / READING
読み終えた夜に、余白を1つ残す
本を閉じたあと、説明できることより、まだ言葉にならないことが残る夜があります。架空の読書時間をたどりながら、感想を急いで完成させないメモの置き方を考えます。
閉じた本のそばで
最後のページを閉じても、すぐには感想を書き始めません。机に本を置き、読みながら立ち止まった場面を1つ思い出します。筋を順番に追い直すより、そのときの違和感を探します。 今夜のメモは、なぜこの場面が気になったのか、という問いだけにします。答えのない行にも、今日の読書の輪郭は残せます。
ここでの場面と読書体験は、記事のために作った架空の例です。
言い切らない1行
翌日、昨日の問いを開くと、少し違う言葉が浮かびました。前の文を消して整える代わりに、今日はこう感じる、と続けて書きます。読み終えた直後の自分も、そのまま置いておきます。 メモの端に日付を添えると、どちらが後の考えかを区別できます。きれいな結論より、考えが動いた跡を残したい日もあります。
日付は記録の順番を示す目印で、読み直す期限ではありません。
次の自分へ渡す
しばらくして同じ本を手に取ったら、まず問いの1行を読みます。今も気になるなら、その場面を開きます。もう気にならなければ、そう書き添えて本を閉じても構いません。 すべてのメモを育てる必要はありません。残した問いが、次の読書の入口になるかを見て、続けるものを自分で選んでいきます。
実在の本の文章を引用せず、自分の言葉だけで試せます。
判断軸マトリクス
候補を列、判断軸を行にした表を置き、表の外に条件付きの結論を添える。
向く記事 複数候補の比較 ／ 仕様の整理 ／ 条件別の選び方
選ぶ理由・使い方・直し方
別の型を考えたい記事
1つのセルに長い解説が必要な比較 ／ 共通軸が少ない対象
この型を持ち帰る
このカードの完成見本です。入力中の原稿は入りません。
完成見本を読む
架空の練習記事 · 17
お便りの並べ方を3つの軸で比べる
架空の活動だよりを、出来事の順で並べる案と、話題ごとにまとめる案で比較します。同じ材料を使い、読みたい内容にたどる道筋を表で確かめます。
| 判断軸 | 出来事の順に並べる | 話題ごとにまとめる |
|---|---|---|
| 経過を知りたい | 準備、当日、振り返りの順に読む。 | 各話題の中で時点の違いを読む。 |
| 困りごとを探す | 該当する時点の節を開く。 | 困りごとの見出しを開く。 |
| 1件を追加する | 該当する時点か末尾へ足す。 | 関係する話題の欄へ分けて足す。 |
まず同じ材料を置く
材料は、準備のメモ、当日の気づき、次回に向けた案という架空の3件です。順番別の案では発生順に置き、話題別の案では各材料から同じテーマの記述を集める想定にします。 片方だけ材料を省くと比較の前提が変わります。どの記述をどの欄へ置いたかが追えるように、材料には短い名前を付けておきます。
3件は誌面を考えるための架空素材で、実際の活動報告ではありません。
探す目的を1つ置く
読者が「準備で困った点だけ知りたい」と考える場面を設定します。順番別では準備の節を開き、話題別では困りごとの欄を開くなど、入口の名前と内容が合うかを見ます。 もう1つ、最初から経過を読みたい場面でも比べます。読む目的を変えると便利な入口も変わるため、表の結果はその場面と組み合わせて解釈します。
読む速さや理解度を測った実験ではありません。
更新するときの手順を見る
新しく振り返りの1件が加わった場合を想定します。順番別なら末尾に追加し、話題別なら既存の欄へ分けて足すなど、編集する場所の違いを表の最後の行で確認します。 どちらでも、古い記述と食い違う箇所があれば見直しが必要です。追加のしやすさだけでなく、読者に見せたいまとまりを保てるかまで考えます。
実際の運用では、記事の長さや更新の担当者も別に検討します。
ピクセル端末
端末風の外枠、プロンプト風の節見出し、状態行を使い、章をログのようにつなぐ。
向く記事 制作の舞台裏 ／ 技術の入門記事 ／ ゲームやデジタル文化の解説
選ぶ理由・使い方・直し方
別の型を考えたい記事
信頼性より演出が先行しやすい重要な案内 ／ 装飾が苦手な読者向けの長い正文
この型を持ち帰る
このカードの完成見本です。入力中の原稿は入りません。
完成見本を読む
架空の練習記事 · FICTIONAL TERMINAL / DRAFT CHECK
下書き点検室、ただいま起動中
端末の画面を思わせる見た目で、架空の文章点検を進めます。見出しは操作の合図ですが、実際のソフトウェアを動かす命令ではありません。
LOAD：今日見る原稿を選ぶ
架空の点検室では、最初に「学習会の紹介文」という下書きを選びます。完成版と混ざらないよう、題名の横に下書きであることを明記する設定です。 点検する範囲は冒頭の段落だけに絞ります。別の原稿を開きたくなったら候補としてメモし、いま扱う文章と次に扱う文章を分けておきます。
LOADは演出上の見出しです。実際のコマンドではありません。
CHECK：問いと答えを照合する
架空の原稿は「何をする集まりか」を冒頭の問いにしています。本文にその答えがあるかを探し、日時の案内だけで終わっていないかを点検します。 答えが見つからなければ、活動を説明する1文を仮に足します。未確認の内容は確定した情報として書かず、確認待ちの印を付けたまま残します。
CHECKは文章を読む手順の名称です。自動検査の結果ではありません。
SAVE：差分と次の問いを残す
架空の保存メモには、「活動の説明を1文追加」と変更内容を書きます。何となく直した記録で終えず、どの問いへ答えるための変更かも添えます。 確認待ちの項目があれば、次に調べる内容として別行に残します。保存したことと完成したことを区別し、下書きの状態を読み取れるようにします。
SAVEは画面表現です。ファイル保存や公開を実行する機能ではありません。
END OF ARTICLE · 本文ここまで
WHAT YOU CAN MAKE
書くたびに迷っていた配置を、
選んで、確かめる作業に。
見出しと本文の強弱が決められる
タイトル、導入、節見出し、本文、補足の役割を分けます。全部を太くしたり、囲ったりする前に、最初に読んでほしい場所を1つ決める手順が身につきます。
50種類から、記事の目的に合う構造を選べる
落ち着いた1段組み、比較を横に置く構成、手順を追う構成、編集記事風、ピクセル調などを収録。色だけで選ばず、「説明する」「比べる」「順に進める」の違いから候補を絞れます。
自分の記事で、2案を比較できる
タイトル、導入、結論と、1〜8つの節を入力し、同じ原稿を2つのデザインで見比べます。各節には見出し・本文・短い要約・補足を用意でき、比較用の情報も追加でき、本文の各節を手順として使えます。自分の記事に合うかを、その場で確かめられます。
文字組みの調整を、目で確かめられる
フォント、本文サイズ、行間、本文の横幅、余白を変更できます。1度に1項目ずつ試せるので、変更前の状態に戻して判断しやすくなります。
候補を残して、記事づくりに持ち出せる
お気に入りで候補をまとめ、選んだデザインだけを静的HTMLとして保存できます。原稿と設定はプロジェクトJSONとして手元へ保存。文章の書き出しや、別のAIに相談するための指示文も用意しています。
自分の記事に合う1つのレイアウト、採用理由、文字組みの設定、そして本文を入れた完成HTML。次の記事でも、判断の手順ごと再利用できます。
TRY / NOTICE / DECIDE
3つの見本で、何を見ればいい？
無料体験1 文庫の1列
説明を落ち着いて読み進めてもらう記事向け。
タイトルの次に導入、その下に最初の見出しが見えるかを確認します。飾りが少ない構成では、文字サイズの差と余白が案内役になります。
- 自分のタイトルと、2〜3文の導入を入れる。
- 本文の横幅を少し狭くし、行末から次の行頭へ戻りやすくなったかを見る。
- 行間だけを1段階変え、段落がばらばらに見えない範囲を探す。
読み始める位置が迷わないことを先に整えます。控えめな構成ほど、本文の読みやすさを見直す練習に向いています。
少し寂しいと感じるたびに囲みや色を足すと、見出しの優先順位が分かりにくくなります。まず文字の差と間隔を見直してください。
無料体験2 ピクセル端末
ゲーム、制作記録、遊び心のある企画など、記事の雰囲気を伝えたいときに。
角ばった枠、ラベル、段差のある装飾がどこに使われているかを見ます。個性を付ける部分と、長く読む本文の部分を分けて考えると調整しやすくなります。
- ミニマルと同じ文章を入れる。
- 本文は読み慣れたフォントと十分なサイズで確認する。
- 見出しや枠に視線を引かれた後、本文の読み始めをすぐ見つけられるかを見る。
個性は、短い見出しや枠の形でも表せます。すべての文字を装飾的にしなくても、記事全体の印象は変わります。
ピクセル風の文字や極端に詰まった行間を長文全体に使うと、内容を追いにくくなる場合があります。小さな文字、長い日本語、英数字の混在を必ず試してください。
無料体験3 判断軸マトリクス
2つの方法や商品から、読者が条件に合うものを選ぶ記事向け。
左右の項目名と並び順がそろっているかを確認します。「おすすめ」の色を決めるより先に、何を基準に比べるかをそろえます。
- 2案とも「向く人」「よい点」「注意点」の順に情報を入れる。
- 片方だけ説明が長い場合は、情報が多いのか、言い回しが長いのかを見分ける。
- 狭い幅でも、候補名・判断軸・各セルの対応が分かるかを確認する。表は維持し、セル内の折り返しと、必要なときの表の領域内だけの横スクロールを確かめる。
比較の使いやすさは、読者が同じ質問を両方に当てはめられるかで決まります。条件付きの結論を冒頭に置くと、その後の比較も追いやすくなります。
一方を価格、もう一方を使い心地だけで説明すると判断できません。見た目がそろっていても、比較の軸が違えば原稿から直します。
無料で実践 同じ文章を、役割ごとに分ける
元の文章
週末の45分で次の記事の構成を決めます。最初の10分で読者の疑問を1つ書き、次の20分で見出しを3つ並べ、最後の15分で根拠になるメモを各見出しに置きます。この時間内に本文を書き終える必要はありません。根拠が足りない見出しは、調べることを1つ残しておきます。
役割を見つける
最初に伝える結論
週末の45分で次の記事の構成を決めます。
順番を追う手順
最初の10分で読者の疑問を1つ書き、次の20分で見出しを3つ並べ、最後の15分で根拠になるメモを各見出しに置きます。
範囲を伝える補足
この時間内に本文を書き終える必要はありません。根拠が足りない見出しは、調べることを1つ残しておきます。
文章の意味を変えずに、結論を導入、手順を番号付きの一覧、注意点を短い補足として置きます。読みやすさを比べるときは、最初にどこを読むか、手順を探し直せるか、注意点を見落とさないかの3つを確認してください。
- 現在の記事から、200〜400字ほどの説明を1つ選びます。
- 結論・説明・手順・注意点のうち、どの役割が混ざっているかを書き出します。
- 役割の切り替わりにだけ段落や見出しを置きます。
- 文字を大きくする前に、同じ役割の表示をそろえます。
上の45分は架空の練習計画です。制作時間や成果を保証する値ではありません。
次の1本に使うまでの、5つの動き。
記事の目的を1文にする
読後に、何を分かってほしいか、選んでほしいか、試してほしいかを書きます。
目的に近い2案を選ぶ
50種類から候補を2つに絞り、同じ文章を入れて比べます。
文字組みを1項目ずつ調整する
本文のサイズ、横幅、行間、余白の順に確認。変える理由を一言残します。
狭い幅と長い原稿で確かめる
短い見本で整っていても、長い見出しや比較説明を入れると変わります。実際に使う量で点検します。
保存し、WordPressの下書きで組み直す
原稿と設定はプロジェクトJSON、採用案の見た目は静的HTMLとして保存します。WordPressでは基本ブロックで構造を作り、サイト側のプレビューで確かめます。
購入者向け版に収録するもの。
50種類の実例
ミニマルから編集記事風、比較、手順、ピクセル調まで、情報の配置が異なる記事レイアウト。
購入者用の操作できるHTML教材
自分の文章への差し替え、2案の同一内容比較、文字組み調整、お気に入り、選択したデザインの静的HTML保存。
8章の実践レッスン
情報の優先順位、構造選び、文字組み、余白、内容別の配置、スマートフォン、原稿差し替え、書き出しと公開前確認。
3つの演習と解説
比較記事、手順記事、長文コラムを、架空の素材から組み立てます。完成例の理由と、崩れたときの直し方まで掲載。
確認表と文章・AI指示文の書き出し
公開前に見落としやすい項目と、レイアウトの意図を別の作業環境へ伝えるための文章。
50案入りの保存版HTMLと、50型の記事HTML
検索・比較・編集ができる1つの保存版HTMLと、各型の完成原稿を入れた50本の記事HTML。作業台から自分の原稿を入れた記事も保存できます。
文字組み・余白の設定シート
用途ごとの出発点、狭い幅での扱い、変更前後の記録欄。
AI依頼文セット
見出し整理、2案の比較、WordPressでの再現、狭い幅の点検などに使う依頼文。
完成3例と修正練習
比較・手順・長文の完成原稿に、長い見出しや本文増量を加えて点検する練習。
保存版HTML、50案の完成HTML、文字組みシート、AI依頼文、完成3例と修正練習をまとめて持ち帰れます。保存セットはブラウザ内で作るため、別の配布サイトへの登録は必要ありません。
こんな方へ。
- WordPressの記事を書けるものの、見出し・行間・余白の整え方で迷う人
- Macを使い、コードを書く前に見本を動かして理解したい人
- すっきりした記事から、ピクセル調や編集記事風まで表現の幅を広げたい人
- レビュー、比較、手順、長文コラムを、内容に合わせて組み立てたい人
- 自分で調整した理由を説明できるようになりたい人
購入前に確認を。
- WordPressテーマの開発や、PHP・JavaScriptの実装を体系的に学びたい人
- どのテーマにも1度の貼り付けで完全再現される製品を探している人
- 検索順位、アクセス数、売上の増加を保証する教材を求めている人
- サイト全体の設計や、個別サイトの改修代行を必要としている人
使うために必要なもの
- Macと、HTMLファイルを開けるブラウザを用意してください。教材を取得し、ZIPにまとめられている場合は展開してから使います。
- 自分で変更してよい記事原稿があると、判断の練習がしやすくなります。機密情報や他人の未公開原稿は、許可なく入力・転送しないでください。
- WordPressへの反映には、下書きを作成・編集できる環境が必要です。HTMLやCSSの利用可否は、サービス、テーマ、バージョン、ユーザー権限によって異なります。
- 教材の操作に外部AIの契約は必要ありません。AI指示文を使う場合は、利用するサービスの条件やデータの扱いを自分で確認します。
できる範囲と、公開先で必要な確認
- 購入者用HTMLは、手元で記事の構成を検討する教材です。WordPressの本番画面と自動同期するものではありません。
- 共通の入力欄は、タイトル・導入・結論と、見出し・本文・短い要約・補足を持つ1〜8つの節です。比較には候補2つ・判断軸3行の補助欄があり、手順は本文の各節を手順として使います。すべての情報を自由に配置するページビルダーではありません。型ごとに、表示する補助情報は異なります。
- 静的HTMLには、その時点で選んだ見た目と内容を保存します。教材の編集画面や比較操作が、書き出した記事にそのまま付くわけではありません。
- WordPressやcodocへの自動取り込み、すべてのテーマでの同一表示、独自フォントの全端末での表示は保証しません。
- 読む環境、原稿量、画像、リンク、テーマの設定で見え方は変わります。公開先での確認と調整が必要です。
- 入力原稿の永続保存には「プロジェクトJSON保存」を使います。作業を終える前に保存先を確認してください。お気に入り候補の端末保存は任意です。
- 入力欄には題名140文字、導入1200文字、本文1節6000文字などの上限があります。各欄の現在数と上限を表示し、超えた文章は切り捨てず反映・通常保存を止めます。未反映分を含む原稿TXTとして退避できます。
よくある質問。
HTMLやCSSを覚えてから始める必要がありますか。
教材を開き、文章を入れ、2案を比較するところから始められます。WordPressでは基本ブロックで構造を再現する方法を先に扱います。細部をCSSで合わせる作業は、環境に応じて別途必要になることがあります。
50種類は、配色だけを変えた見本ですか。
情報の置き方や読み進め方が異なるレイアウトを扱います。1段で読む構成、比較を見渡す構成、順番を追う構成など、記事の目的との相性を学びます。
Macでどう使いますか。
購入者用HTMLを保存し、ブラウザで開きます。まずサンプルで操作を確認してから自分の原稿を入力してください。配布ファイルの保管場所と、書き出したファイルの保存先を分けておくと見つけやすくなります。
保存したHTMLをWordPressへ丸ごと貼れますか。
完成ページ用のHTMLを丸ごと記事欄へ貼る方法はおすすめしません。まず本文に必要な構造を基本ブロックで再現します。HTMLやCSSを使う場合は、対応する入力場所と権限を確認し、下書きを保存した後の表示まで確かめます。
codocを使って販売している記事にも役立ちますか。
無料部分と有料部分で、何を読み、何をできるようになるかを整理する練習に使えます。codocの画面へ教材が自動反映される機能はありません。本文の見え方と購入導線は、実際の公開環境で確認してください。
以前の講座やPALETTEを持っています。
FRAMEの中心は、記事の構造と文字組みを自分の原稿で試すことです。PALETTEは50色の配色教材、従来講座のデザイン20・フォント20はそれぞれ元の教材として扱います。既存商品の不具合修正や、約束済みの提供内容を、新商品購入の条件にはしません。
使うとアクセス数や売上が上がりますか。
数値の成果は保証していません。この記事の目的を伝え、比較や手順を探しやすくし、自分で確認・改善できる状態を目指す講座です。
文字が見本と少し違って見えます。
端末にあるフォントやブラウザの描画で違いが出ます。似た雰囲気の代替フォントで読めるか、タイトルが不自然に改行されないかを確認します。
入力した原稿はAIへ送られますか。
教材へ入力した原稿が、自動で外部AIへ送信されることはありません。AI指示文を使うときは、自分で選んだサービスへ必要な文章をコピーします。送ってよい情報だけを使ってください。
原稿はどう保存しますか。
作業を終える前に「プロジェクトJSON保存」で原稿と設定をファイルに保存します。採用案の見た目を残すには静的HTMLを書き出します。どちらも保存後に、指定した場所へファイルができたことを確認してください。
YOUR NEXT ARTICLE
次に直す1記事を、この場で決めてみてください
無料の3例で、文章の優先順位と、比較しやすい形を試せます。もっと幅広い構成を自分の記事で比べたい方は、50種類の教材と8章・3演習を収録した購入者向け版へ。購入前に、収録内容、対応環境、利用条件をご確認ください。
6,980円
購入時は実際の決済欄に表示される価格・販売条件をご確認ください。外部AIの利用料、個別制作代行、WordPressテーマの開発は含みません。
この先に、購入者向けの50案・8章・3演習と保存特典が続きます。購入の案内は直後の決済欄に表示されます。
コメント