CRAFT FAMILY / 01
同じ文章で、読み心地を比べる。
以下は、学べるブログのChat／Work比較記事、第06章からの抜粋です。語句・内容は共通のまま、見出しの大きさ、本文のサイズと行間を変えています。原文にある根拠・条件・確認の区別を、読み取りやすい形で支えます。
Aは教材用に組み直した表示で、元記事の公開時のデザインではありません。Bも文字組みの調整案です。この記事の仕様・性能を再検証した比較ではありません。元の引用記号［7］・参照リンクは本デモでは省略しています。
A / 教材用の再現表示
「できました」の後に確認する5点
- 根拠：重要な事実・数値が資料と対応しているか。
- 条件：必要項目、文字数、対象読者、形式を満たすか。
- ファイル：実際に開き、表・数式・文字・ページの崩れがないか。
- 不確実性：未確認、推論、資料の不一致を見分けられるか。
- 保存と共有：保存先・ファイル名・編集形式・アクセス権限が意図どおりか。
見た目の整った初稿でも、確認を通過した完成品とは限りません。「この数値を元資料と照合して」「この表だけ幅を修正して」のように、箇所と条件を指定すると修正を進めやすくなります。
B / 本文サイズと行間を動かす
「できました」の後に確認する5点
- 根拠：重要な事実・数値が資料と対応しているか。
- 条件：必要項目、文字数、対象読者、形式を満たすか。
- ファイル：実際に開き、表・数式・文字・ページの崩れがないか。
- 不確実性：未確認、推論、資料の不一致を見分けられるか。
- 保存と共有：保存先・ファイル名・編集形式・アクセス権限が意図どおりか。
見た目の整った初稿でも、確認を通過した完成品とは限りません。「この数値を元資料と照合して」「この表だけ幅を修正して」のように、箇所と条件を指定すると修正を進めやすくなります。
16px相当は、ブラウザの基準が16pxのときの値です。ブラウザの文字サイズ設定を変えると一緒に拡大されます。
試す順番：まず本文サイズだけを動かし、次に行間を動かしてください。一度に変えず、「行を追いやすいか」「見出しが先に見つかるか」を声に出して説明できた値を残します。
大きくする前に、役割を決める。
- 見出しは、読む順番を示す本文より強くしても、長い見出しがスマホで何行にもなるなら倍率を少し戻します。改行位置を空白で押し込まないでください。
- 本文は、行の続きが追えるか小さくして情報を詰めず、文字サイズ・行間・幅を別々に見ます。読みやすさに万能の一組はありません。
- 幅は、1行を長くしすぎない文字数を固定する設定ではなく、文章領域の上限です。画面幅や字幅が変われば、1行の文字数も変わります。
- 注記は、必要な条件を残す本文と役割を分けても、極端に小さく薄くして読めなくしてはいけません。条件を補う文章は読める場所に置きます。
次は、自分の記事で一巡する。
- INPUT文章を入れる見出し・本文・数字・注記を、自分の下書きに置き換える。
- ADJUSTひとつずつ整える文章幅、サイズ、行間、字間、役割の差を調整する。
- COMPARE同じ文章を比べるAを固定し、Bの変更だけを見る。狭い幅でも確かめる。
- USE元の記事へ戻す独立したHTML/CSS、再編集データ、CRAFTへの反映依頼文を残す。
CRAFTで文章と根拠を整えた後、STEP 4・5・8の見た目の調整を具体化するのがTYPEです。戻した後はCRAFTのSTEP 9で公開前の確認へ。FRAMEのレイアウト、PALETTEの配色、SCENEの世界観と組み合わせながら、文字の役割に集中します。
手元に残るものと、必要な環境。
- 自分の文章を整える道具見出し・本文・数字・注記の入力、A/B比較、PC／スマホ切り替え、公開タイトル・ディスクリプション・スラッグ・タグの準備、HTML/CSSのコピーと保存。
- 判断して直す実践演習架空記事で調整前→判断→操作→完成例をたどる。別の正解や、文章構成へ戻る条件も示します。
- 再編集と貼り戻しプロジェクトJSONで続きを保存。CRAFTの既存記事へは、反映範囲を指定した依頼文を使います。
- 保存して読めるガイド手順・設定の意味・失敗時の直し方・確認表を収録。JavaScriptが使えなくても本文は読めます。
HTMLファイルを開けるブラウザと、ファイルの保存・コピーができる環境を使います。調整ツール自体はAI契約や外部フォントに依存しません。CRAFTへの統合作業をAIへ依頼する場合、AIサービスの契約や利用料は別です。
入力するのはテキストです。既存HTML・画像・リンク・表の構造を自動で取り込んで保持するエディターではありません。複雑な既存記事はバックアップを取り、貼り戻し依頼文で必要な箇所だけ反映してください。
外部送信処理はありません。ブラウザ保存は押したときだけ行います。共有端末・機密文書の扱いは所属先のルールに従ってください。サイトへ貼った後の計測タグや外部機能は、そのサイトの設定に依存します。
合う人・急がなくてよい人。
合う人
- 記事の内容はあるが、読みやすい文字の差を決められない
- 日本語と英数字、注記が混ざる記事を整えたい
- CRAFTで作った記事の仕上げを、自分で判断したい
急がなくてよい人
- まずテーマ・根拠・構成から記事を作りたい
- 既存HTMLを完全自動で解析・上書きしたい
- 紙の縦組み、ルビ、数式、組版ソフトの高度な制御が目的
スマホだけで使えますか？
画面は小さい幅に対応しています。長い文章の編集やコードの貼り戻しはPCの方が確認しやすい構成です。保存先やクリップボードの制約はブラウザによって異なります。
この設定なら必ず読みやすくなりますか？
保証できません。文章・書体・画面・読者によって適した値は変わります。出発点を選び、比較して採用理由を残すための道具です。売上や検索順位の改善を保証するものでもありません。
WordPressへそのまま貼れますか？
出力した記事はカスタムHTML用のHTML＋CSSです。サイト側の権限・CSS・ブロック設定との競合を下書きで確認してください。講座の設置と、道具から出した記事の設置は別の手順です。
TYPE｜日本語の文字組みを整える実践講座
4,980円 講座価格
入力ツール、判断のガイド、実践演習、完成例、保存・再編集機能をまとめた買い切り教材です。税込表示・提供条件は、販売ページの正式な案内をご確認ください。
購入条件・決済方法・提供内容は、販売ページの案内をご確認ください。販売者は公開前に決済と購入者限定表示の動作を確認してください。
コメント