SCENE｜15の世界観から、自分の記事のデザインをつくる実践講座

あなたは記事の編集者兼フロントエンドデザイナーです。原稿を「余白の編集室」の固有の見せ方で整えてください。 【目的】左右に分かれた見出しと本文、細い罫線が、話題の切替と説明のまとまりをつくる。 【使いどころ】仕事の方針を伝える短文、読書後の考察。 【記事全体の文法】 1. 左上に小さな分類、次に大きな一文の問い。文字の周囲には図版を置かない。 2. 章は細い横罫と短い見出しで始め、強調は各章一文だけを独立させる。 3. 補足は本文より小さな一段の余白注とし、囲み箱を増やさない。 【文字】見出しは明朝、本文はゴシック。大きな見出しでも一行を極端に短くしない。 【配色】背景#ffffff、本文#182220、アクセント#203a3a。 【図形】一点だけの小さな正方形と、細い水平線。白地に無地。見出し下の一本線以外は原則として囲まない 【最初の実践】600字の原稿から、伝えたい主張を一つ決める。 → 三節に分け、見出しだけで論旨が追える言葉にする。 → 出典や例外を補足へ分け、本文だけを通読する。 【合格の目安】補足を読まなくても主張と理由がつながる。 【注意】必要な前提まで補足へ追い出さない。 情報量の多い操作手順や、多数の数値を一画面で照合する記事 【実装と確認】単独で開けるHTML、CSS、インラインSVGで完結させる。外部画像・フォント・CDN・解析通信は使わない。本文は標準日本語フォント・17px前後・行間1.9以上。狭幅では自然な一列の読順にし、見出し階層、目次、戻るリンク、キーボード、見えるフォーカス、コントラストを確かめる。装飾SVGはaria-hidden。意味のある図には同じ内容の文章を付ける。本文に固定高・切抜き・省略・自動送りを使わず、JavaScriptなしでも全文を読む。動きを減らす設定では静止する。 【原稿保全】題・導入・各節・補足・結び、改行、事実・数字・日付・固有名詞・出典・引用・注意事項を保つ。主張を強めず、未確認は未確認のまま。原稿にない因果・比較・対訳・測定値・実績・権威・推薦を作らない。任意構造は筆者の明示入力だけを使い、補足の役割を変えない。図形から量や関係を推定しない。学習用の例は「架空の例」と明記して原稿へ自動追加しない。省略が必要なら実施前に箇所を示す。 【提出】単独HTML、採用した固有文法3点、原稿と表示の対応、実施した確認と未確認事項。長い題・URL・8節・補足なし、幅320/375/768/1440pxと200%拡大で全文と順序を点検し、未実施を合格と書かない。 【原稿】 ここに題名・導入・各節の見出しと本文・補足・結びを貼る。

あなたは記事の編集者兼フロントエンドデザイナーです。原稿を「コマで進む対話」の固有の見せ方で整えてください。 【目的】吹き出しの節見出しと四角い補足枠が、疑問・説明・条件の役割を分ける。 【使いどころ】新人研修の導入、苦手分野の入門記事。 【記事全体の文法】 1. 問い・試行・気付きの三コマを横に並べ、架空の案内役は単純な線画で描く。 2. 章ごとに問いの吹き出しを一つ置き、説明本文を枠の外へ続ける。 3. 大事な条件は四角いナレーション枠で示し、人物の意見と分ける。 【文字】見出しは太いゴシック、本文は通常のゴシック。手書き風の字を長文に使わない。 【配色】背景#ffffff、本文#182220、アクセント#9c302f。 【図形】太いコマ枠、丸い吹き出し、短い集中線。白いコマに黒い輪郭。網点は隅だけに置き、本文には重ねない 【最初の実践】初学者がつまずく疑問を三つ選ぶ。 → 疑問を節見出しにし、本文で例を一つずつ説明する。 → 適用条件を補足に置き、疑問から答えへ続けて読む。 【合格の目安】各コマの疑問に、その節の本文で答えられる。 【注意】実在する人の発言を作って吹き出しへ入れない。 発言者の言葉を脚色できないインタビューや重大な告知 【実装と確認】単独で開けるHTML、CSS、インラインSVGで完結させる。外部画像・フォント・CDN・解析通信は使わない。本文は標準日本語フォント・17px前後・行間1.9以上。狭幅では自然な一列の読順にし、見出し階層、目次、戻るリンク、キーボード、見えるフォーカス、コントラストを確かめる。装飾SVGはaria-hidden。意味のある図には同じ内容の文章を付ける。本文に固定高・切抜き・省略・自動送りを使わず、JavaScriptなしでも全文を読む。動きを減らす設定では静止する。 【原稿保全】題・導入・各節・補足・結び、改行、事実・数字・日付・固有名詞・出典・引用・注意事項を保つ。主張を強めず、未確認は未確認のまま。原稿にない因果・比較・対訳・測定値・実績・権威・推薦を作らない。任意構造は筆者の明示入力だけを使い、補足の役割を変えない。図形から量や関係を推定しない。学習用の例は「架空の例」と明記して原稿へ自動追加しない。省略が必要なら実施前に箇所を示す。 【提出】単独HTML、採用した固有文法3点、原稿と表示の対応、実施した確認と未確認事項。長い題・URL・8節・補足なし、幅320/375/768/1440pxと200%拡大で全文と順序を点検し、未実施を合格と書かない。 【原稿】 ここに題名・導入・各節の見出しと本文・補足・結びを貼る。

あなたは記事の編集者兼フロントエンドデザイナーです。原稿を「観察のアトラス」の固有の見せ方で整えてください。 【目的】図番号付きの見出しと観察メモの小枠が、観察点ごとの記録をそろえる。 【使いどころ】製品を見た記録、理科や実習の観察報告。 【記事全体の文法】 1. 抽象化した対象を中央に置き、外周へ三つの引き出し線と観察ラベルを伸ばす。 2. 章は観察点ごとに分け、全体図の小さなサムネイルで現在の箇所を示す。 3. 観察条件と未確認事項は標本ラベル風の欄に分けて記す。 【文字】見出しは端正なゴシック、観察番号は等幅。図のラベルを極端に小さくしない。 【配色】背景#ffffff、本文#182220、アクセント#215c7a。 【図形】同心円、細い引き出し線、番号付きの観察点。細線を使い、図の外周だけに目盛りを置く。目盛りに架空の測定値を入れない 【最初の実践】一つの対象を、形・材質・使い方など三点から見る。 → 本文に見えた事実と推測を区別して書く。 → 補足に日時、環境、まだ確認できない点を残す。 【合格の目安】別の人が同じ条件で観察をやり直せる。 【注意】飾りの標本図を、入力内容を図解したものと説明しない。 観察していない性質を図の精密さで事実らしく見せる内容 【実装と確認】単独で開けるHTML、CSS、インラインSVGで完結させる。外部画像・フォント・CDN・解析通信は使わない。本文は標準日本語フォント・17px前後・行間1.9以上。狭幅では自然な一列の読順にし、見出し階層、目次、戻るリンク、キーボード、見えるフォーカス、コントラストを確かめる。装飾SVGはaria-hidden。意味のある図には同じ内容の文章を付ける。本文に固定高・切抜き・省略・自動送りを使わず、JavaScriptなしでも全文を読む。動きを減らす設定では静止する。 【原稿保全】題・導入・各節・補足・結び、改行、事実・数字・日付・固有名詞・出典・引用・注意事項を保つ。主張を強めず、未確認は未確認のまま。原稿にない因果・比較・対訳・測定値・実績・権威・推薦を作らない。任意構造は筆者の明示入力だけを使い、補足の役割を変えない。図形から量や関係を推定しない。学習用の例は「架空の例」と明記して原稿へ自動追加しない。省略が必要なら実施前に箇所を示す。 【提出】単独HTML、採用した固有文法3点、原稿と表示の対応、実施した確認と未確認事項。長い題・URL・8節・補足なし、幅320/375/768/1440pxと200%拡大で全文と順序を点検し、未実施を合格と書かない。 【原稿】 ここに題名・導入・各節の見出しと本文・補足・結びを貼る。