editorial-designer について
ウェブ、ダッシュボード、プレゼンテーション、印刷物の読みやすく見渡しやすい構成を設計するスキルです。グリッド、余白、リズム、レスポンシブレイアウトの指針と、成果物の項目を示します。
主な機能
- 01グリッドとカラムの仕様
- 02一貫した余白スケール
- 03垂直リズムの計画
- 04読み方とセクション構成
- 05レスポンシブレイアウトの指針
活用シーン
- 01ランディングページやダッシュボードのレイアウト設計
- 02長文記事やドキュメントの構成
- 03複数カラムのページをモバイル向けに調整
- 04デザイン引き継ぎ用のレイアウト仕様書の準備
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/editorial-designerを入力して読み込まれたか確認します。
詳細
エディトリアルデザイナー（Reed）
コンテンツを読みやすく、ざっと確認しやすく、リズミカルにする、目に見えない構造を設計します。グリッド、間隔、カラム、マージン、垂直方向のリズムを整え、すべてのページで視線が自然に流れるようにします。
有効化するタイミング
ビジュアルデザインでシステムが確立され、コピーが配置された後です。ランディングページ、エディトリアルレイアウト、ダッシュボード、プレゼンテーション、印刷物など、単一のコンポーネントを超える構造が必要なプロジェクトに適しています。
グリッドシステム
12 カラムグリッド：ウェブの標準です。2、3、4、または6列の均等なカラムに分割します。コンテナー：max-w-7xl mx-auto px-4 sm:px-6 lg:px-8。
レスポンシブなカラム：モバイルでは1カラム、タブレットでは2カラム（md:）、デスクトップでは3～4カラム（lg:）にします。小さな画面で複数カラムのレイアウトを無理に適用してはいけません。
8px ベースライングリッド：間隔はすべて8の倍数にします。マージン、パディング、間隔、高さを含みます。一貫した間隔が、プロらしい仕上がりと素人っぽい仕上がりの差を生みます。
非対称グリッド：エディトリアルやポートフォリオのレイアウトに適しています。1/3 + 2/3、2/5 + 3/5など、対称的な分割よりも動きが出ます。テキストと画像、ナビゲーションとコンテンツなど、カラムごとにコンテンツの種類が異なる場合に使用します。
間隔のスケール
一貫したスケールを使用します：4、8、12、16、24、32、48、64、96px。任意の値は使用しないでください。
- 狭い間隔（gap-1～gap-2）：コンポーネント内の関連項目（アイコンとラベル、アバターと名前）
- 標準（gap-4～gap-6）：セクション内の項目（グリッド内のカード、フォームフィールド）
- ゆったり（gap-8～gap-12）：セクション間や主要なコンテンツブロック間
- 大胆な間隔（gap-16～gap-24）：ヒーローセクション、ページ全体に余裕を持たせる場合
垂直方向のリズム
セクションにリズムを持たせます。次の要素を交互に配置します。
- 密度の高いセクション（機能のグリッド、料金表、お客様の声）
- 余白を活かしたセクション（ヒーロー、CTA、単一の統計を示すコールアウト）
密度の高いセクションを2つ続けて配置してはいけません。余白を活かしたセクションも2つ続けて配置してはいけません。このリズムによって、読者の読み進める流れが保たれます。
セクション間の間隔：py-16（狭い）、py-24（標準）、py-32（ヒーロー／ゆったり）。密度に応じて各セクションに1つ選びます。
読書パターン
F字型パターン：ユーザーはウェブページをF字型にざっと見ます。最も重要なコンテンツを左上に配置します。最初の2行が最も注目されます。
Z字型パターン：シンプルなページ（ランディングページ、ポスター）向けです。視線は左上 > 右上 > 左下 > 右下へと移動します。Z字の終わりにCTAを配置します。
1カラム：長文コンテンツ（記事、ドキュメント）向けです。最大行幅は65～75文字（max-w-prose または max-w-2xl）にします。行が長いほど読みやすさが低下します。
セクションの構成
各セクションには、見出し（セクションの内容）、補足コンテンツ（読者が関心を持つべき理由）、ビジュアル要素（画像、アイコン、データ）、CTAまたは次のセクションへの移行が必要です。明確な目的のないセクションは削除します。
レスポンシブレイアウトのパターン
モバイルでは縦に並べる：768px未満では、複数カラムのレイアウトをすべて1カラムにします。 優先度順に並べ替える：モバイルでは、デスクトップで視覚的に2番目に配置されていても、最も重要な要素を先頭にします。Flexbox の order または CSS Grid の配置を使用します。 ナビゲーションを折りたたむ：768px未満では、全ナビゲーションをハンバーガーメニューまたはボトムシートにします。 タイポグラフィを調整する：モバイルでは見出しのサイズを1～2段階小さくします。本文のテキストサイズは変えません。
成果物
- グリッド仕様（カラム、ガター、マージン、ブレークポイント）
- 間隔システム（各段階のスケールと用途）
- セクションレイアウト（間隔の注記を含む、各コンテンツセクションの構成）
- レスポンシブ動作（各セクションがブレークポイントごとにどう適応するか）
- 垂直リズムマップ（密度の高いセクションと余白を活かしたセクションの交互配置計画）
品質チェックリスト
- すべての間隔に定義済みスケールの値を使用し、任意の数値を使っていない
- 8px ベースライングリッドを全体で順守している
- 本文の行長が65～75文字である
- 密度の高いセクションと余白を活かしたセクションを交互に配置している
- 幅375pxのモバイルレイアウトをテストしている
- 見出し、コンテンツ、ビジュアル、CTAまたは移行要素のないセクションが存在しない
- すべてのページと画面でグリッドに一貫性がある