--- version: "1.1" name: 記事スタイルガイド description: > きりいも8（kiriimo8）が書くClaude Code系Claude Code活用記事の 書き方の型・文体の癖・構成ルールをまとめたガイド。 このファイルを参照すれば、誰が書いても（どのエージェントが書いても） 同じトーンとクオリティの記事になる。 updated: 2026-05-06 --- # ARTICLE-STYLE.md > このファイルはAIエージェントへの指示書として機能します。 > 記事を書く前に必ず参照してください。 > **使うタイミング：STEP3（HUMAN-LANGで意図を構造化 → AIで一旦出す → このガイドで整形する）** --- ## 1. 記事の全体構造 記事は以下の順序で構成する。順番は厳守。 ``` 1. アイキャッチ画像（バナー） 2. 著者バッジ（タイトル直下） 3. 読む時間の目安（「この記事は約○分で読めます」） 4. 要約ブロック（4〜6行・短文） 5. 目次 6. 導入（体験談・一人称・短文3〜5行） 7. 本編セクション（STEP形式 or テーマ見出し） 8. ちなみに私の環境（使用ツール・背景情報） 9. まとめ（3〜5行） 10. シリーズリンク（前後記事） 11. ハッシュタグ（8〜10個） ``` --- ## 2. 見出しスタイル ### STEPセクション ``` 絵文字 + 半角スペース + STEP番号 + 半角スペース3個 + タイトル 例： 🔒 STEP1　SafariでClaude Designを開く ✏️ STEP2　プロンプトは「レイアウト・色・フォント・世界観」を具体的に ✂️ STEP3　修正は1回1箇所。消す指示を怖がらない 🖨️ STEP4　書き出しは2パターン ``` ### 特殊セクション ``` 💡 ワンポイント：〜（知見1行まとめ） 🎯 そもそも〇〇って何？（初心者向け解説） 🔧 ちなみに私の環境（背景・使用ツール） 🎁 まとめ ``` ### 小見出し（セクション内） ``` 横線付きH2形式 例： 私が実際に打ったプロンプト内容 クロコと一緒に見本のテイストを決める パターンA　Claude Code環境がある人 パターンB　Claude Code環境がない人 修正指示① 修正指示② ``` --- ## 3. 文体ルール ### 基本スタイル - **1センテンス1段落**を基本にする - 段落間は空行を入れて余白を作る - 体言止めOK（「URLはこれだけ。」「ここが一番大事。」） - 「私の場合は〜」で**一次情報**を必ず出す - ネガティブも正直に書く（「1回目は盛られすぎていた」「まぁ、許容範囲です。」） ### NG → OK の直し方（文体の癖） | NG（直す前） | OK（直した後） | |---|---| | 「おしゃれにして」 | 「Bento型グリッド、Klee One、コーラルベース」 | | 「AIに全部任せた」 | 「プロンプトに〇〇を書いて、〜と指示した」 | | 「うまくいきました」 | 「1回目は盛られすぎていた。装飾が多い、情報が重複している」 | | 「試してみてください」 | 「まず claude.ai/design を開く。Prototype タブを選ぶ」 | | 「便利です」 | 「後のやり取りが減って楽。」 | **鉄則：抽象語は固有名詞に置き換える。** --- ## 4. コンテンツ要素の使い方 ### プロンプト案（コピペ用） 実際に使えるプロンプトは必ず枠付きで出す。 タイトルを「プロンプト案（コピペ用）」とする。 ``` プロンプト案（コピペ用） [ここに実際のプロンプトをそのまま記載] ``` ### 操作の流れ 番号付きリストで、1ステップ1行。 ``` 操作の流れ： 1. claude.ai/design を開く 2. Prototype タブ 3. Project name：______.com 4. High fidelity を選択 5. + Create をタップ 6. Claude AIで作成したプロンプトを貼って送信 ``` ### NG/OK の教え方 テーブル形式 or 「→不要」の直接指示形式を使う。 ``` 「ぜんぶ5」→ 不要 ヒーローに「個人開発アプリの小さな棚」って書いてあるし… 「2 apps」みたいな複数表示 → 不要 ただのタイトルが2行に折り返してバランスが崩れる原因。 ``` ### 矢印「→」の使い方 結果・次のアクション・置き換えを示すときに使う。 ``` Claude Designに投げる → 自動でファイルが生成される 「おしゃれに」→「〇〇みたいに」と伝えたほうがAIに刺さる ``` ### 区切り「---」 セクション内の転換点・まとめの前に使う。 --- ## 5. 人間味・個人エピソードの入れ方 記事のどこかに**自分の状況・生活感**を1〜2か所入れる。 押しつけず、さらっと。 ``` 例： 「子守でゴロゴロしながら、作業できるのでありがたいです✨」 「なぜか、離れると気がついて起きるので、子どもって不思議ですよね。」 「私はパターンAで完結したので、こちらは未確認🌊」 ``` 感情表現は絵文字で添える（絵文字を文の真ん中に置くのはNG、末尾に）。 --- ## 6. 「ちなみに私の環境」セクション 使用ツール・デバイス・プランを毎記事入れる。 読者が「自分も同じ環境か」を確認できるようにする。 ``` 🔧 ちなみに私の環境 自宅のMacにClaude Codeを入れています。 Tailscaleで自宅のネットワークに繋いで、Terminusで遠隔操作。 実家のお母さん（クロコ）に、電話して指示をしているイメージ。 ``` --- ## 7. 著者バッジの書き方 記事タイトルの直下に、著者バッジを1行入れる。 初見の読者が「誰が書いた報告か」を最初に把握できるようにするため。 ### 形式 ``` 著者：[名前]（[役割]） ``` ### HTML ```html

著者：[名前]（[役割]）

``` ### メンバー別テンプレート | 著者 | 表示テキスト | |---|---| | キリイモさん | キリイモさん（代表） | | クロコ | クロコ（管理AI / Claude Code担当） | | エミリー | エミリー（整理・感情サポート担当） | | カイ | カイ（戦略担当） | | ソウ | ソウ（発信・翻訳レイヤー担当） | | リー | リー（リサーチ担当） | | ハンス | ハンス（品質チェック担当） | ### CSS（共通） ```css .author-badge { display: inline-block; font-size: 0.8rem; color: var(--moss); background: #eef3eb; border-radius: 20px; padding: 0.25em 0.9em; margin: 0 0 1.4rem; } ``` --- ## 8. まとめの書き方 短文3〜5行。「〇〇だけ」「〇〇しない」「〇〇で完結」などシンプルな結論。 ``` 例： コードは書いていない。デザインの知識もない。 プロンプトで「世界観」を伝えて、修正を重ねて、コマンドを貼った。それだけ。 「デザインを変えたいけどコードがわからない」という人は、まず claude.ai/design で遊んでみてください。 ``` --- ## 9. シリーズリンクの書き方 記事末尾に前後記事のリンクを入れる。 ``` --- シリーズ1本目：[記事タイトル] シリーズ2本目：[記事タイトル] シリーズ3本目：[今この記事] ``` --- ## 10. ハッシュタグの選び方 8〜10個。以下のカテゴリから混ぜる。 - ツール名（#ClaudeCode #ClaudeDesign #Claude など） - 方法・手段（#CLI #スマホ遠隔操作 #ノーコード など） - 属性・対象（#個人事業主 #初心者向け #ノーコード など） - トピック（#AI活用 #Webデザイン #プロンプト など） --- ## 11. エージェントへの指示テンプレート このガイドをもとにエージェントに記事を書かせるときの依頼文。 ``` あなたは[エージェント名]です。[担当領域]担当。 以下のテーマで、ARTICLE-STYLE.mdのルールに従って活動報告を書いてください。 テーマ：[記事テーマ] 文字数の目安：400〜600字 一次情報：[そのエージェントが実際に体験したこと] ルール： - 抽象語を使わず、固有名詞・具体的な動作で書く - 「私の場合は〜」「実際に〜した」で一次情報を出す - 1センテンス1段落、余白多め - NG/OK例があれば入れる - まとめは3行以内のシンプルな結論で締める ```