MANABERU BLOG / COLOR PRACTICE
色を選び、記事で確かめる。
50の配色実践講座。
START WITH ROLES
色を選ぶ前に、役割を三つ決めてみる。
最初に決めるのは、地、本文、案内の三つです。地は文章を受け止める広い背景。本文は長く読むための文字。案内はリンクや最後の行動を知らせる場所。同じ色をどこでも使わず、同じ役割に同じ扱いをするだけで、ページにルールが生まれます。
次の三例へ、同じ題名と短い文章を置いて比べてください。好みだけでなく「見出しを探しやすいか」「一段落を落ち着いて読めるか」「次の案内が見つかるか」を見ます。一つ選んだら、採用理由を一文残しましょう。これだけでも、自分の原稿を見直す入口になります。
長く読む面を、一つの背景色へ。
本文と補足を、読める濃度へ。
リンクと主操作の場所を明確に。
色の印象は、写真・文章・文化や文脈でも変わります。「青なら信頼される」といった効果を保証する選び方はしません。
WORKBENCH / 3 PALETTES
同じ文章に置くと、違いが見える。
色の四角だけでは決めにくいときは、見出し・本文・補足・リンク・主ボタンへ置いて比べます。文章と構成、書体をそろえたまま、色の役割に集中してください。
操作補助はJavaScriptが使えると表示されます。使えない環境でも、下の配色カードに全ての値と使い方が載っています。好きな案を選び、共通条件と一緒に手動でコピーできます。
すべて架空の短い練習文です。リンク・ボタンは色とフォーカスを見るための見本で、送信・購入はしません。
P01 白紙と墨
架空のブログ記事
読みかけの本と、静かな週末。
読む量を増やす前に、読み返したい一節を残しておく。小さな記録から、自分の読み方を整えます。
ひとつだけ、言葉を選ぶ
気になった言葉をひとつ選び、その理由を短く書きます。上手に要約するより、次に開く目印を残すことから始めましょう。
P17 薄藤とオリーブ
架空のブログ記事
読みかけの本と、静かな週末。
読む量を増やす前に、読み返したい一節を残しておく。小さな記録から、自分の読み方を整えます。
ひとつだけ、言葉を選ぶ
気になった言葉をひとつ選び、その理由を短く書きます。上手に要約するより、次に開く目印を残すことから始めましょう。
無料では3案を同じ文章で比較できます。購入版の作業台には50案と、色の調整・11組の対比計算・書き出しが加わります。
配色カードはそのまま読めます。操作補助を準備しています。
手動コピー用の全文
THREE REAL EXAMPLES
この3案は、無料で使えます。
HEX値と役割、置く場所まで公開しています。記事へ適用するときは、実際の文字・背景・操作を確認してください。
白紙と墨
白い余白に、文字と操作だけを残す。
長文解説の初期設定。色を選ぶ前に情報の順番を整えたいとき。
入門記事・制作手順・用語解説
- 背景
- #FFFFFF
- 補助面
- #F2F2F2
- 本文・見出し
- #222222
- 補足文字
- #5C5C5C
- 装飾アクセント
- #3F3F3F
- リンク
- #333333
- 操作の境界
- #7C7C7C
- 主ボタン背景
- #222222
- 主ボタン文字
- #FFFFFF
- フォーカス
- #4B4B4B
- 副装飾
- #DCDCDC
本文／地 15.91:1 ・ 補足／補助面 5.97:1
リンク／地 12.63:1 ・ ボタン文字 15.91:1
指定した11組は基準以上。写真・透過・別の面では再確認。
使い方と、避けたい使い方
全11役割を無彩色にそろえ、白い本文と薄灰の要約面を使い分ける。本文、注記、参照、操作は濃度と下線で区別する。
背景：記事全体と本文 ／ 補助面：目次、短い要約、コード以外の補足面 ／ 装飾アクセント：章番号横の短い線。見出し全文には広げない ／ 主ボタン背景：記事末尾の「次の手順へ」
大きな黒い面を連続させること。重要度の差がなくなる。
背景・余白を多めに。濃い塗りは主操作1か所から始める。
装飾2色は文字・警告・操作の境界に流用しません。リンクには下線を付け、本文と同じ意味の強調には太さも使います。
薄藤とオリーブ
藤色の余白に、深いオリーブの操作を置く。
創作の考え方を、作品らしさと実用性の両方で見せたいとき。
デザイン論・制作過程・アイデアの整理
- 背景
- #FAF9F5
- 補助面
- #EEEBF4
- 本文・見出し
- #303228
- 補足文字
- #5F6453
- 装飾アクセント
- #C3AFD5
- リンク
- #485C2C
- 操作の境界
- #80876F
- 主ボタン背景
- #46572E
- 主ボタン文字
- #FFFFFF
- フォーカス
- #715286
- 副装飾
- #D9DEC1
本文／地 12.36:1 ・ 補足／補助面 5.19:1
リンク／地 7.01:1 ・ ボタン文字 7.89:1
指定した11組は基準以上。写真・透過・別の面では再確認。
使い方と、避けたい使い方
薄藤は背景の装飾、オリーブはリンクと主ボタン。互いに異なる色相を別の仕事へ割り当てる。
背景：長文本文と章間 ／ 補助面：問い、仮説、制作メモ ／ 装飾アクセント：章扉の大きめの装飾図形。文字は重ねない ／ 主ボタン背景：制作ワークを始める主操作
淡い藤色を本文色やボタン文字にすること。
薄藤の形は扉に1つ。オリーブは操作へ集め、本文は濃い中性色を保つ。
装飾2色は文字・警告・操作の境界に流用しません。リンクには下線を付け、本文と同じ意味の強調には太さも使います。
シトロンと群青
明るいシトロンと、深い青い入口。
鮮色を使いながら、読む場所と操作する場所を明快にしたいとき。
デザイン講座・制作ワーク・ツールの体験ガイド
- 背景
- #FAFAF2
- 補助面
- #F1EFCE
- 本文・見出し
- #292E43
- 補足文字
- #596174
- 装飾アクセント
- #D3DB45
- リンク
- #3048A0
- 操作の境界
- #7D859B
- 主ボタン背景
- #2F439A
- 主ボタン文字
- #FFFFFF
- フォーカス
- #455FB3
- 副装飾
- #D9CEE9
本文／地 12.78:1 ・ 補足／補助面 5.31:1
リンク／地 7.82:1 ・ ボタン文字 8.79:1
指定した11組は基準以上。写真・透過・別の面では再確認。
使い方と、避けたい使い方
シトロンは装飾、淡黄は補足面、群青はリンクと主ボタン。装飾色と文字・操作色を分ける学習に適した構成。
背景：本文と広い余白 ／ 補助面：要点・手順の見本 ／ 装飾アクセント：大きな静的図形を章扉へ1つ。文字を重ねない ／ 主ボタン背景：「この手順を試す」など1つの主操作
シトロンをボタンにして白文字を置くこと。装飾の色を役割を変えず使う。
シトロンは小面積から始める。淡黄面を増やしたら装飾図形を減らす。
装飾2色は文字・警告・操作の境界に流用しません。リンクには下線を付け、本文と同じ意味の強調には太さも使います。
三つの配色で、判断の練習。
P01｜白紙と墨
白い地と濃い墨で、長く読む文字の土台を作ります。案内も無彩色を中心にまとめ、リンクの下線やラベルを残して操作の場所を伝えます。色数を絞って、役割の違いを確かめたいときの入口です。
試すこと：同じ原稿の本文、補助面、リンクを見つける。色を増やさずに案内が見つかるか確認する。
P17｜薄藤＋オリーブ
薄藤とオリーブの組み合わせを、広い面と小さな案内へ分けて使います。二色を同じ強さで交互に並べず、薄藤を含む穏やかな面と、濃さを保った文字・案内の関係を見ます。柔らかさと少し意外な組み合わせを両立させる練習です。
試すこと：補助面の上の本文とリンクを、それぞれ実際の背景との組で確認する。地の上で読めても、補助面では再確認が必要なことを確かめる。
P36｜シトロン＋群青
明るいシトロンと濃い群青を組み合わせます。明るい色を小さな文字へ無理に使わず、飾りの図形や短い線の役割を検討します。強い印象を保ちながら、長い本文を落ち着いて読めるかを見る配色です。
試すこと：強い色の面積を減らした場合と比べる。割合を正解にせず、本文と次の案内のどちらへ目が向くかを書く。
まずは一つ選び、採用理由を一文残してください。「好きだから」に加えて、「文章を読む面は静かにして、最後の案内だけを見つけやすくするため」のように、置く場所と結び付けます。
INSIDE THE PAID COURSE
購入版で完成させるもの。
自分の記事に使う、一組の配色仕様。
採用した色の値だけでなく、使う場所・採用理由・確認した組み合わせ・見直す条件まで、一緒に保存します。
役割から選べる配色50案
使いどころ、理由、避けたい使い方、配置、HEX、指定組の対比を整理。無彩色も、印象的な差し色も使い分けます。
同じ記事で試せる作業台
50案の比較、Aの色編集、11組の対比計算、候補保存、CSS・AI指示の書き出し。自分の判断を残せます。
選ぶ・直す・持ち帰る7章
原稿と目的を決め、役割を割り当て、迷う案を比較し、確認して再利用するまで。別のAI講座は必要ありません。
保存して繰り返し使える5つの道具
- 50配色の役割・HEX・使いどころ・対比をまとめたPDF
- 50案を比較・調整できる購入者保存HTML
- 50案のCSS設定
- 選択した色をAIへ渡す指示と、失敗時の修正指示TXT
- スマホ・リンク・対比・操作の確認シート
保存HTML、CSS、TXTは購入後の作業台から保存できます。PDFと一括セットの受け取り方法は、公開時の案内でお知らせします。HTMLの印刷からPDF保存する方法も使えます。
BEFORE YOU BEGIN
向いている人と、必要なもの。
こんな人へ
- ブログ・教材・仕事の説明ページを、読みやすい配色へ整えたい
- 配色見本は好きでも、本文やリンクへの割り当てで迷う
- コードをゼロから書かず、AIへ具体的に依頼して確認したい
先に知っておくこと
- 文章の調査・執筆、ロゴやブランド全体の設計は別の作業です
- 50案を適用するだけで、売上や読みやすさを保証する商品ではありません
- ブラウザでの表示確認が必要。AIサービスを使う場合、その契約・利用料金は教材代とは別です
準備するものは、短い原稿とブラウザ。原稿がなければ、付属の架空の練習文で始められます。保存HTMLはMacでSafariまたはChromeに開き、CSSは必要な人だけ使います。JavaScriptが使えない環境でも、50案と手動で使う原文を読めます。
購入前によくある質問。
前のAI講座を持っていなくても使えますか。
使えます。原稿の用意、配色の選定、AIへの依頼、確認、保存まで、この講座内で説明します。文章を調査から書き上げる講座ではないため、原稿がなければ収録した架空の練習文で始めてください。
コードが書けなくても進められますか。
色の役割を選び、画面を比較し、問題を言葉で伝える進め方です。AIへ渡す指示も用意します。ただし、AIが出したファイルを保存して開く操作と、出来上がりの確認は必要です。公開先の設定や複雑な不具合の解決を、すべて自動化する教材ではありません。
Mac以外でも同じ表示になりますか。
ローカルフォントは端末によって利用状況が異なり、字形や改行が変わる場合があります。見本は代替書体を指定し、外部フォントの取得を前提にしません。公開先では想定する端末でも確認してください。
WordPressなら、貼るだけで完成しますか。
テーマ、編集方法、権限などで扱えるHTMLや見た目が変わります。独立したHTMLファイルをそのまま貼ることを前提にせず、記事内の本文部分として調整し、下書きと保存後のプレビューで確認します。すべての環境で同じ表示や機能を保証するものではありません。
50案に、レイアウトや書体の設計も含まれますか。
この講座は配色50案に専念します。地、本文、案内、補助面などへ色を割り当て、同じ原稿・書体・構成で比較する進め方です。レイアウトや書体のデザイン集は含みません。配色だけで、すべての文章や画面が完成することを保証するものでもありません。
これを使えば、アクセシビリティは保証されますか。
保証するものではありません。コントラストの確認対象と基準を学び、役割ごとの組を確認しますが、ページ全体には見出し構造、画像の説明、拡大、操作などの確認も必要です。実際の原稿や公開先で再確認してください。
旧版の応用デザイン資料を持っています。使えなくなりますか。
旧版の購入時に含まれていた構成・配色・書体の各20案と、当時の特典としての利用権は維持されます。PALETTEは、配色50案を中心に、独立して学べる手順、比較の作業台、実習と確認方法を加えた講座です。旧資料を使い続けるために、購入し直す必要はありません。
AIサービスの利用料や個別の制作代行は含まれますか。
この教材は学習と制作補助のための資料です。外部AIサービスの利用条件や料金は、そのサービスで確認してください。個別の制作代行、原稿の監修、継続的なサポートや将来の更新提供は、別途明記がない限り、この教材の内容に含めて案内していません。
旧版の購入者へ
旧版に含まれていた構成・配色・書体の各20案と、購入時の特典としての権利は維持されます。旧資料を使い続けるための再購入は必要ありません。PALETTEは、配色の選び方を独立して学ぶために、50配色の役割別仕様、比較の作業台、三つの実習、修正と確認の道具を加えた講座です。旧資料だけを切り分けて再販売する位置づけにはしません。
PALETTE / COMPLETE COURSE
50案から、自分の一組へ。
比較して終わらず、自分の記事へ渡せる配色仕様にする。講座本文、50案の作業台、実習と保存素材をひとつにまとめました。
4,980円（販売価格）
購入前に、決済画面の価格と販売条件をご確認ください。AIサービスの契約や利用料、個別制作代行は含みません。
ここから先は購入者向けの講座です。ご購入は、直後に表示されるcodocの案内へお進みください。
コメント