ログを開設した直後の「初期設定」の状態は、どうしても無機質で自分のサイトという実感が湧きにくいものです。今回は、多機能なテーマ「Cocoon」を使い、AI（Gemini）との対話を通じて、自分にとって最適な「読みやすさ」を追求したデザイン設定の記録です。
結論：AIとの対話で「数値化できない感覚」を調整する
最終的に、特定のデザインテンプレート（スキン）は使用せず、標準設定をベースに各設定項目を個別に指定する方法に落ち着きました。AIに自分の直感的な違和感を伝え、具体的なカラーコードなどの提案をもらいながら修正を繰り返すことで、清潔感と視認性を両立した納得のいく仕上がりになりました。
つまずいた原因と試行錯誤の理由
最初は、Cocoonに備わっている「スキン」という着せ替え機能で手軽に済ませようとしました。しかし、実際に自分の目で確認してみると、以下のようなリアルな違和感に直面しました。
- 色の印象が強すぎる： 清潔感のある水色系を試しましたが、なぜか落ち着かず、自分のイメージとは異なる連想をしてしまうことに気づきました。
- 視認性と好みの不一致： 柔らかい色を選ぶと、文字とのコントラストが弱くなり、読みづらさを感じました。かといって濃すぎると画面が暗く、威圧感が出てしまいます。
- 理想の衝突： 「サイトを明るい雰囲気にしたい」という思いと「文字を読みやすく、内容に没入したい」という二つの目的がぶつかり、色選びの迷宮に入り込んでしまいました。
具体的な解決手順
AIに「明るくしたいが、この色は落ち着かない」「仕事としての信頼感も欲しい」といった要望を伝え、一つずつ設定を固めていきました。
- ステップ1：スキンを「なし」にする WordPressメニューの「Cocoon 設定」→「スキン」タブで、一番上の「なし」を選択しました。あえて装飾を削ぎ落とし、真っ白なキャンバスから作り直すことにしました。
- ステップ2：サイト全体の配色を個別に決める 「全体」タブを開き、以下の項目をAIの提案を参考に調整しました。
- サイトキーカラー： 白背景で映える特定の色を探しました。
- サイトキーテキストカラー： 選択したキーカラーの上で、文字がもっともクッキリ見える色を探しました。
- サイト背景色： 画面の「くすみ」を消すための色を指定しました。
- ステップ3：文字の読みやすさを徹底して整える 自分の視力や読み心地を優先し、以下の項目を細かく設定しました。
- フォント： モダンで癖がなく、どの端末でもきれいに見える種類を選択しました。
- 文字サイズ： 標準よりも一回り大きく設定し、目を凝らさなくても自然に文章が読めるように調整しました。
- 文字色： 真っ黒ではなく、背景の白との刺激を和らげる濃いグレーを指定しました。
まとめと今後の課題
デザインに凝りだすと終わりが見えなくなりますが、AIを相談相手にすることで「なんとなく惜しい」という感覚を具体的な設定値に落とし込み、一旦の完成に辿り着けました。
今後は、この土台の上に実際の記事（△△△や◯◯◯◯の記録など）を積み上げていくことが課題です。文字が入ることで色の見え方もまた変わってくるはずですので、そのときは改めて微調整を検討したいと思います。
2026/04/05日 16:30
コメント