Cocoonのカスタマイズ、おしゃれにできない｜お手本を真似しても30点だった私が、あとで知ったこと

見ていただきありがとうございます。ぽぽです。

Cocoonでカスタマイズしても、なぜかおしゃれにならない。

そんなふうに止まっていませんか。

• おしゃれなブログを見て、真似したくなる
• 色や並べ方を、いろいろ変えてみる
• でも全体を見ると、なんだか素人っぽい
• どこを直せばいいのか、わからない

私もまさに、ここで止まった側です。

スケートボードのブログは、Cocoonで書いています。

見た目は思いつくところを全部いじりました。

でも自分でつけた点数は、100点中30点です😇

先に、私の答えを書いておきます。

私が思っていたこと	あとでわかったこと
設定を変えれば、おしゃれになる	設定より先に「お手本」が必要だった
お手本と同じにしたい	お手本はCocoonではなく、SWELLだった
全部をおしゃれにしたい	「色・余白・入口」の3つを寄せるだけで、かなり変わった

ということで、私の失敗を見せますね。

ぽぽブログで寄せてみた、前と後もあります。

Cocoonのカスタマイズで、おしゃれにならなかった私のブログ

いまの私のスケートボードのブログです。

ピンクの帯に、文字だけのブログ名。

その下に記事のカードが2列。

最初にさわったのは、トップページでした。

そこから色も上の部分も、記事の並べ方も変えています。

変えたところ	いまの状態
色	ピンクの帯
上の部分（ヘッダー）	ブログ名は文字だけ
記事の並べ方	カードが2列

それでも全体を見ると、クオリティが低いんですよね。

部品ごとの直し方は、別の記事に書いています。

• 色と見出し → 見出しの記事
• ヘッダー → ヘッダーの記事
• トップの並べ方と空白 → トップページの記事

この記事は、その前の話です。

部品を直しても全体がおしゃれにならなかった、その理由です。

ちなみに、このぽぽブログはSWELLで書いています。
CocoonからSWELLに変えて、記事が崩れた3ヶ月の話はこちらです。

Cocoonのカスタマイズでおしゃれにならなかった理由

理由は1つ。

お手本を決めていなかったことです。

色はなんとなく。

並べ方もなんとなく。

ゴールがないので、どこで止めればいいかもわかりません。

いま振り返ると、お手本があっても当時は無理だったかなと思います。

おしゃれなブログを見て、気づいた5つ

いまは真似したいブログがあります。

書き方も見た目も、ずっとお手本にしているブログです。

初めて見たとき、自分のスケートボードのブログと比べました。

違うと思ったのは、1か所ではありません。

比べたところ	私の感想
開いたときのぱっと見	違う
色の使い方	違う
文字の読みやすさ	違う
写真や絵の使い方	違う
記事の並べ方	違う

どこから手をつけていいか、わからないわけです。

あらためて見ると、おしゃれに見える理由はこの5つです。

おしゃれに見える理由	お手本のブログでは
色が少ない	淡い色と、濃い色がほとんど
余白が広い	箱と箱のあいだが広い
角が丸い	ボタンも箱も、角が丸い
入口がボタンで並んでいる	悩みごとにボタンが並ぶ
上に大きな絵	開いてすぐ、大きな絵が出る

1つ1つは小さいことです。

でも5つそろうと、全体の空気が変わるんですね。

お手本のおしゃれなブログは、Cocoonではなかった

ここが、いちばん驚いたところです。

この記事のために、お手本のブログを調べました。

テーマはCocoonではなく、SWELL。

そのブログを知ったのは、SWELLを買う前です。

SWELLだとは知りませんでした。

つまり私は、CocoonでSWELLのブログを目指していたことになります😇

もちろん、テーマだけで決まるわけではありません。

お手本のブログには、自分で用意した絵もあります。

手間もかかっていると思います。

ただ同じテーマだと知ると、見え方が変わりますよね。

ぽぽブログをおしゃれにカスタマイズしてみた

そこで、このぽぽブログで試してみます。

全部は真似しません。

だいたいのスタイルだけ寄せます。

絵や言葉は使いません。

借りるのは、作り方の考え方だけです。

寄せたのは、この3つです。

寄せたもの	やったこと
色	紺とクリームの2色にしぼった
余白と丸み	箱の角を丸くして、あいだを広くした
入口	「悩みから選ぶ」ボタンと「始めるまでのStep」を置いた

上の写真は、うちのチワワのぽぽ。

ブログの名前の「ぽぽ」は、この子です。

パソコンの前と後

紺一色のトップが、やわらかくなっていますね。

「数字は、全部出します」の言葉はそのままです。

スマホの前と後

スマホでも、紺一色からやわらかい見た目に変わりました。

最初は写真と文字が重なりました。

写真を小さくして、上に寄せています。

変えたやり方

部品づくりは、AIに手伝ってもらいながら進めました。

写真や色は、SWELLの設定画面で自分で選んでいます。

SWELLの設定画面は1か所にまとまっています。

トップの写真も、文字やボタンの色もそこで選べます。

記事のスライダーを消すのも「設置しない」を選ぶだけ。

変えたあとの感想は、ひと言。

めっちゃ良いです☺️

お手本がSWELLだった人へ

私のように、お手本のブログがSWELLだったなら。

Cocoonで1つずつ近づけるより、テーマを変えたほうが早いかもしれません。

ただ、CocoonからSWELLに変えると記事が崩れることがあります。

私は直すのに3ヶ月かかりました😇

その話は、こちらに正直に書いています。

まとめ：Cocoonのカスタマイズでおしゃれにならないときは

• Cocoonでおしゃれにできなかったのは、お手本を決めていなかったから
• お手本を見ると、おしゃれの正体は「色が少ない・余白・丸み・入口・大きな写真」
• 私のお手本のブログは、あとで調べたらSWELLだった
• ぽぽブログは、色・余白・入口の3つを寄せただけで、トップの顔が変わった

私のスケートボードのブログは、いまも30点のままです😇

まずは、お手本のブログを1つ決めてみてくださいね。

そのブログのテーマが何かも、見てみると面白いですよ。