CocoonのデザインをAIと一緒に見直した話【実践編・診断から改善まで全公開】

「全部見てほしい」

AIにそうお願いしたのが始まりでした。

アドセンス申請でバタバタしているうちに、ブログのデザインを後回しにしていた私。ある日ふと「サイドバーに謎のウィジェットがある」「カラーテーマって決めてたっけ？」と気になって、AIに丸ごと診断を依頼しました。

結果、数時間後にはブログの見た目がガラッと変わっていました。

まず「全部見て」と頼んだ

なべちゃんCocoonの設定を全部見てほしい。

クロコわかりました！ まず現状を確認しますね。

一番やった方がいいのはSNSシェアボタンです。今の状態だと読者が記事をシェアするボタンがなく、拡散の機会を損しています。

作業の優先順を提案すると：
1. SNSシェアボタンを追加（X・はてブ・LINE）
2. スキンとメインカラーを設定（ブログの見た目を整える）
3. サイドバーを整理（カテゴリー・プロフィールを見やすく）
4. フォント・ヘッダーは任意

全部やりますか？それとも優先度高いものから？

なべちゃんSNSをやってないよ

クロコなるほど！ ではSNSは後回しで、残りで優先度高い順にやります。

1. スキンとメインカラーを設定（見た目を整える）
2. サイドバーを整理（デフォルトのままなので）
3. フォント・ヘッダーは任意

スキンから始めましょうか？ Cocoonには無料スキンが複数あります。どんな雰囲気にしたいですか？

・シンプル・白ベース（今っぽい読みやすいブログ）
・温かみ・ベージュ系（40代女性向けのやわらかい雰囲気）
・スタイリッシュ・ダーク系（クールでかっこいい印象）

「SNSをやってない」の一言でリストがスッと変わりました。こういう細かい確認を毎回してくれるのが、AIと一緒に作業するときの地味なありがたさです。

サイドバーを刷新した

クロコが自分で判断して、「カテゴリー一覧」「このブログについて」「アーカイブ」に入れ替えてくれました。私は何も指示していません。

入れ替えた内容はこうなりました。

この作業、WordPressの管理画面からポチポチやれば10分で終わると思っていたのですが……ConoHa WINGのセキュリティ機能がウィジェット更新のリクエストをブロックするというまさかの事態に。AIがPHPコード経由で迂回して更新してくれました。AIじゃなかったら間違いなく諦めてました。

カラーテーマをブルーに決めた

なべちゃん今の記事に合わせるとしたらおすすめは？

クロコブログの特徴を整理すると：
・アイキャッチ：実践編はダークネイビー×黄→オレンジグラデーション、入門編はパステルカラー
・文体：カジュアルで親しみやすい
・テーマ：AI・副業・ブログ運営（技術系だけど堅くない）
・読者：40代女性

おすすめは「シンプル白ベース」＋メインカラーをブルー系に設定する組み合わせです。

理由：
・白ベースにするとアイキャッチの色が映えて記事一覧が鮮やか
・ブルー系のメインカラー（#1D4ED8 など）はコントラスト比が高く、WCAGアクセシビリティ基準を満たしやすい
・AI系ブログらしいクールな印象になり、記事本文が読みやすい

設定してみますか？ スキンとメインカラーの2つをまとめて変更します。

なべちゃんじゃあ、それで

ということで、スキンを「シンプル白ベース」、メインカラーをブルー系（#1D4ED8）に設定してもらいました。

「世界一厳しいSEOライター目線で」と聞いたら怒られた

なべちゃん世界一厳しいSEOライター目線でブルーのカラーテーマはどう？

クロコ良い選択です。ブルー（#1D4ED8）のコントラスト比は約7.3:1で、WCAG AA基準（4.5:1）を大きく上回っています。Googleのアクセシビリティ評価でも問題なし。40代以上の読者にとっても読みやすい色です。

数値で説明してもらえると納得感があります。

コントラスト比とは、文字色と背景色の明るさの差のこと。数値が高いほど読みやすく、Googleのアクセシビリティ評価にも関係します。ターゲットが40代以上の読者なら、特に意識しておきたいポイントです。

「やって」の一言で4項目まとめて改善された

クロコリンク色はより濃い#1D4ED8（ダークブルー）に変えましょう。コントラスト比が7.3:1になり、WCAG AA基準を大きく上回ります。あわせてフォントサイズ・H3装飾・TOCリンク色も直せますよ。

なべちゃんやって

（「やって」の一言で全部やってくれました）

改善した項目はこの4つです。

なべちゃん見やすくなりました！！

クロコよかったです！ アクセシビリティ基準も満たせたので、SEO的にも安心です。

まとめ

「全部見てほしい」の一言でここまでやってもらえるとは、正直驚きました。

ブログのデザインって「なんとなくでいいや」と後回しにしがちですが、コントラスト比みたいなアクセシビリティの観点は素人には気づきにくいところ。AIに診断してもらうと、見えていなかった問題が次々出てきます。

この記事でわかったこと

• 「全部見て」の一言でAIはブログ全体を診断してくれる
• 明るいブルーはデザインに使えるが、リンク文字色には向かない
• コントラスト比はGoogleのアクセシビリティ評価に関係する
• フォントサイズ・H3装飾・TOC色は一緒に直してもらうと効率がいい

初心者ならこうする

1. AIに「ブログのデザインを全部見て、問題点を教えて」と聞く
2. コントラスト比・フォントサイズを最優先で直してもらう
3. H3・TOCはまとめて直してもらう

よければこちらも読んでみてください

• Cocoonのデザインをカスタマイズする方法【入門編】
• WordPressのプラグインをAIと一緒に設定した話【実践編】