PR
ブログ運営におすすめのサービス
エックスサーバー・SWELL・Claude ほか、運営に役立つサービスをまとめました
オレンジ枠のサービスは、ジャベ雄が今も使っているものです
※ 一部のリンクは広告(アフィリエイト)を含みます
AIと画面を見ながらブログのデザインを決める手順
ブログのデザインは、いじり出すといくらでも時間が溶けます
色を変えて、戻して、また変えて、気づけば一日が終わっていた、みたいな話をよく聞きませんか？
これを止める方法はひとつ色から決めないことです
順番を役割 → 雰囲気 → 配色にすると、好き嫌いではなく理屈で切れるようになります
ここで通すのは、その3段階の決め方と、AIに見本を出させて見比べるやり方
最後に実際に使っている配色コードも置いておきます
ジャベ雄デザインってつい凝って時間を溶かすんだよな
今回はちゃんと効率よく決めたい
AI色から入ると迷います
役割を先に決めてしまえば、あとは合うか合わないかで切れます
目次
決める順番は 役割 → 雰囲気 → 配色
この順番だと手戻りがほとんど出ません
逆に色から入ると、あとで方向性が変わったときに全部やり直しになるんです
STEP
役割を決める
このサイトは何をするのか
私は「信頼を育てて読者を増やす」に置きました
収益は後段で設計する、という切り分け
STEP
雰囲気を決める
読者との距離感を一言にします
「同じ目線の伴走者」だったり「専門家として教える」だったり
ここが決まると使える色も絞れてくるでしょう
STEP
配色を決める
ここでやっと色です
候補を並べて「役割に合うか」だけで選びます
私は伴走者らしさで緑を想定していました
でも並べてみたら、安心して読んでもらう役割には青のほうが合っていて、そこで切り替えたんです
方向転換のコストは、AIを使うとほぼゼロです
「青で作り直して」の一言で候補が出てくるので、迷ったら両方作って並べるのが早いです
AIには目的を絞って頼む
「いい感じにして」と頼むと、ぼやけた案しか返ってきません
誰に向けて、何を優先するかを先に渡すと、提案が一気に具体的になります
- ブログの配色を提案して
- 未経験者向けのブログです、信頼を育てる方向で読みやすさ優先、基調1色と差し色1色で3案出して
人に仕事を頼むときと同じで、前提を渡すほど返ってくるものが良くなると思います
だから最初のひと手間はけっこう効きます
見本を画面に出して見比べる
配色や見出しは、言葉でやり取りするより実物を並べたほうが速いです
頭の中の完成形を言葉に翻訳する手間が丸ごと消えます
私はAIにHTMLの見本ページを作らせて、ブラウザで開いて見比べました
ズレていたらその場で指摘して作り直させるだけなので、判断にかかる時間がちょっと信じられないくらい減ります
AIにブラウザ操作まで任せる仕組みは「拡張機構」と呼ばれます
仕組みそのものの解説は本家のClaude Codeの拡張機構入門に書いたので、興味があればそちらで
色は基調1つと差し色1つに絞る
色は増やすほど散らかって見えます
基調をひとつ、差し色をひとつ
いちばん扱いやすいのが、この最小構成なんです
このサイトで使っているのは、この4色
- 基調の青=#2F6FED
- 差し色のクレイ=#D97757
- 背景=#F7FAFF
- 本文=#1F2A37
差し色のクレイは、Claudeのブランドカラーから取っています
Claudeの色は青ではなく、温かいクレイ(粘土)寄りのコーラルなんです
基調で安心を出して、差し色で個性を足す
やっぱりこの2色構成が、迷わず運用できて楽だと思います
SWELLのどこに入れるか
決めた色と見出しは、3か所に入れれば反映されます
- 色=カスタマイザーのサイト全体設定
- 見出しの形=カスタマイザーの投稿・固定ページ → 見出しデザイン
- そこで届かない細部だけ=追加CSS
追加CSSはAIに書かせて大丈夫です
でも中身は自分で読んでください
おかしければ直せばいい話なんですが、読まずに貼ると崩れた原因が分からなくなります
どこで手を止めるか
色と見出しが決まったら、そこで止めるのがおすすめ
立ち上げ期に効くのはデザインより記事だからです
私も配色が決まったあと、つい余白やフォントを触り始めてやらかしました
細かい作り込みは、記事が増えてからまとめてで間に合う
AIは選択肢を速く広く出すのが得意ですが、選ぶのと正すのは人の仕事です
明らかに外している案は却下する、根拠が気になれば質問で詰める
だいたいこの2つができれば、うのみにする事故は防げます
デザインが決まったら次は中身です
ClaudeからWordPressに記事を投稿する手順に進むと、書いたものをそのまま公開できるようになります
コメント