【Cocoon】スキン一覧|おすすめと3つの選ぶポイントを紹介

「スキン選びってどうやるの?」

「スキンのデザインを一覧で見たい」

「おすすめのスキンを教えて」

この記事では、そんな方に向けて、Cocoonでスキン一覧とおすすめスキンを解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • おすすめのスキンが分かる
  • すべてのスキンを一覧で確認できる
  • スキン選びに迷わない

ようになります。

私自身、スキン選びに失敗した経験がありますが、本記事の方法で解決できました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

目次

Cocoonおすすめスキン【3つの要素別】

Cocoonでスキンを選ぶ際に、必ずチェックしておきたい「3つのおすすめポイント」を紹介します。

かめコンパス

自分の中でどのポイントを重要視するのか優先順位を決めるといいね!

個人的におすすめの優先順位は、

  • 1位:デザイン
  • 2位:カスタマイズしやすさ
  • 3位:スキンの変更しやすさ

の順です。

それぞれのおすすめポイントを詳しく解説します。

①デザインで選ぶ

サイトを運営する中で、デザインは非常に重要です。

  • 自分好みのデザインか?
  • サイトのデザインと紹介するテーマがマッチしているか?
  • ターゲットユーザーが好みそうなデザインか?
  • どういうブランドカラーを形成したいか?

などを考える必要があります。

かめコンパス

ブログ初心者は自分好みのデザインで選ぶことをおすすめだよ

デザインで選ぶメリット
デザインで選ぶデメリット
  • 自分好みのデザインを選べる
  • スキンの選び方が分からない人の分かりやすい指標である
  • ユーザーやテーマと相性のいいと購買意欲の向上につながる
  • カスタマイズできない項目あり
  • 人気のデザインは他サイトと被りやすい
  • 今後スキンを変更するとデザインが崩れる

以下の表では、Cocoonのスキン110種類をすべて確認し、

その中でデザインが良かったおすすめスキンを4つに絞って一覧でまとめました。

スキン名特徴レイアウト
grayish画像フルスクリーン表示デザインを見る
イノセンス大人かわいいデザインを見る
てがきノート親近感のあるデザインを見る
Fuwari和の雰囲気デザインを見る
デザインがいいスキンのおすすめ一覧表
かめコンパス

当ブログは「イノセンス」を使ってるよ!

②カスタマイズしやすさで選ぶ

ブログ始めたての頃は気にする必要はありませんが、ある程度ブログの執筆が上達してくると、

  • 目次の表示を変えたい
  • ヘッダーの色を変えたい
  • アイキャッチ画像を表示したい

など細かくカスタマイズしたいという欲求が出ます。

ただ、選んだスキンによっては、カスタマイズできない=スキン制御されていて、あきらめないといけない場合もあります。

かめコンパス

私も初めはデザイン重視で選んだけど、スキン制御の項目があってスキンを選び直した経験があるよ

カスタムサイズしやすさ
で選ぶメリット
カスタムサイズしやすさ
で選ぶデメリット
  • 自由にブログ設計できる
  • カスタマイズで他サイトと差別化できる
  • カスタマイズで他サイトと差別化できる
  • 好きなデザインを選べない
  • 不要・必要な設定の変更ができない
  • 今後スキンを変更しにくい

以下の表では、Cocoonでスキン制御の項目がないスキンを一覧でまとめました。(2023年7月時点の情報)

スキン名スキン制御の数レイアウト
one0デザインを見る
Simple-Darkmode0デザインを見る
Natural0デザインを見る
Simple0デザインを見る
モノクロ0デザインを見る
カラフルライン0デザインを見る
ミックス0デザインを見る
サムライブルー0デザインを見る
Momoon0デザインを見る
Fuwari0デザインを見る
旅カメラ0デザインを見る
いつもの0デザインを見る
m-0デザインを見る
ドット0デザインを見る
ほんわかライトニング0デザインを見る
Metal Styles0デザインを見る
スキンテンプレート0デザインを見る
ふわっと追加0デザインを見る
ゆっくり色が変化0デザインを見る
カスタマイズしやすいスキンのおすすめ一覧表
かめコンパス

スキン制御がなければ、今後カスタマイズできない⁉ということがなくなるよ

上の表ではスキン制御がないスキンをまとめましたが、「この項目だったらスキン制御されてても気にしない」ということもあります。

かめコンパス

今後カスタマイズする可能性が低い項目がスキン制御されているスキンもおすすめ!

下の記事では、Cocoonでスキン制御されている項目をスキン別でまとめてますので、あわせて見てください。

③スキンの変更しやすさで選ぶ

最初のスキン選びを間違えたり、サイトの雰囲気を変えたいと思った場合のことも考え、変更しやすいスキンを選ぶことも重要です。

変更しやすいスキンとは、種類が多いスキンになります。

変更したい場合は、同種類のスキン同士で変更します。

かめコンパス

スキン選びに迷ったら、のちに変更しやすいスキンを選ぶのもおすすめだよ!

スキンの変更しやすさ
で選ぶメリット
スキンの変更しやすさ
で選ぶデメリット
  • 今後スキンを変更しやすい
  • 選べるスキンの選択肢が多い
  • サイトデザインを崩さずスキンを変更できる
  • 好きなデザインを選べない
  • カスタマイズできない項目あり
  • スキンの変更前と後であまりデザインが変わらない

以下の表では、Cocoonでスキンの種類が多い順に一覧でまとめています。

かめコンパス

2種類以上あるスキンのみを一覧でまとめているよ

スキン名種類の数レイアウト
Veilnui Simplog17デザインを見る
tecurio9デザインを見る
COLORS6デザインを見る
アリス6デザインを見る
てがきノート5デザインを見る
Simple5デザインを見る
Momoon5デザインを見る
Bizarre-food5デザインを見る
Season4デザインを見る
Fuwari4デザインを見る
ダーク3デザインを見る
ミックス3デザインを見る
おでかけ3デザインを見る
いつもの3デザインを見る
スキンからオプション変更サンプル3デザインを見る
Simple-Darkmode2デザインを見る
Natural2デザインを見る
サムライブルー2デザインを見る
m-2デザインを見る
ドット2デザインを見る
スキンテンプレート2デザインを見る
スキンの変更しやすさ順で並べたおすすめ一覧表
かめコンパス

スキンの種類の数が多いほど、のちに変更しやすくなるよ!

Cocoonスキン一覧【110種類】

Cocoonで設定できるスキン全110種類を一覧にしてまとめました。

\クリックで気になるスキンへジャンプ/

かめコンパス

PC・スマホそれぞれの見え方をチェックしてね!

なし

PC・スマホ画面で見たスキン「なし」
なし
スキン名なし
作者
レイアウト一覧≫ Cocoon公式サイトへ

grayish

PC・スマホ画面で見たスキン「grayish」
grayish
スキン名grayish
作者Na2factoryさん
レイアウト一覧≫ Cocoon公式サイトへ

SILK(シルク)

PC・スマホ画面で見たスキン「SILK(シルク)」
SILK(シルク)
スキン名SILK(シルク)
作者ろこさん
レイアウト一覧≫ Cocoon公式サイトへ

みるらいと

PC・スマホ画面で見たスキン「みるらいと」
みるらいと
スキン名みるらいと
作者みるみさん
レイアウト一覧≫ Cocoon公式サイトへ

イノセンス

PC・スマホ画面で見たスキン「イノセンス」
イノセンス
スキン名イノセンス
作者おはようポテトさん
レイアウト一覧≫ Cocoon公式サイトへ

COLORS

PC・スマホ画面で見たスキン「COLORS(イエロー)」
COLORS(イエロー)
PC・スマホ画面で見たスキン「COLORS(グリーン)」
COLORS(グリーン)
PC・スマホ画面で見たスキン「COLORS(ピンク)」
COLORS(ピンク)
PC・スマホ画面で見たスキン「COLORS(ブラック)」
COLORS(ブラック)
PC・スマホ画面で見たスキン「COLORS(ブルー)」
COLORS(ブルー)
PC・スマホ画面で見たスキン「COLORS(レッド)」
COLORS(レッド)
スキン名COLORS
作者わいひらさん
レイアウト一覧≫ Cocoon公式サイトへ

Like Simplicity

PC・スマホ画面で見たスキン「Like Simplicity」
Like Simplicity
スキン名Like Simplicity
作者わいひらさん
レイアウト一覧≫ Cocoon公式サイトへ

てがきノート

PC・スマホ画面で見たスキン「てがきノート(ブルーコーラル)」
てがきノート(ブルーコーラル)
PC・スマホ画面で見たスキン「てがきノート(グリーンオレンジ)」
てがきノート(グリーンオレンジ)
PC・スマホ画面で見たスキン「てがきノート(ピンクレモン)」
てがきノート(ピンクレモン)
PC・スマホ画面で見たスキン「てがきノート(ホワイトバナナ)」
てがきノート(ホワイトバナナ)
PC・スマホ画面で見たスキン「てがきノート(ダークスカイ)」
てがきノート(ダークスカイ)
スキン名てがきノート
作者ゆうそうとさん
レイアウト一覧≫ Cocoon公式サイトへ

Season

PC・スマホ画面で見たスキン「Season (Spring)」
Season(Spring)
PC・スマホ画面で見たスキン「Season (Summer)」
Season(Summer)
PC・スマホ画面で見たスキン「Season (Autumn)」
Season(Autumn)
PC・スマホ画面で見たスキン「Season (Winter)」
Season(Winter)
スキン名Season
作者ぽんひろさん
レイアウト一覧≫ Cocoon公式サイトへ

モダンブラック

PC・スマホ画面で見たスキン「モダンブラック」
モダンブラック
スキン名モダンブラック
作者アオイさん
レイアウト一覧≫ Cocoon公式サイトへ

Fuwari

PC・スマホ画面で見たスキン「Fuwari -御召茶(おめしちゃ)-」
Fuwari-御召茶(おめしちゃ)-
PC・スマホ画面で見たスキン「Fuwari -海松茶(みるちゃ)-」
Fuwari-海松茶(みるちゃ)-
PC・スマホ画面で見たスキン「Fuwari -海老茶(えびちゃ)-」
Fuwari-海老茶(えびちゃ)-
PC・スマホ画面で見たスキン「Fuwari -褐色(かちいろ)-」
Fuwari-褐色(かちいろ)-
スキン名Fuwari
作者アオイさん
レイアウト一覧≫ Cocoon公式サイトへ

one

PC・スマホ画面で見たスキン「one」
one
スキン名one
作者haijiさん
レイアウト一覧≫ Cocoon公式サイトへ

Simple-Darkmode

PC・スマホ画面で見たスキン「Simple‐Darkmode」
Simple-Darkmode
PC・スマホ画面で見たスキン「Simple‐Darkmode Always(常時ダークモード)」
Simple-Darkmode Always(常時ダークモード)
スキン名Simple-Darkmode
作者Hirositeさん
レイアウト一覧≫ Cocoon公式サイトへ

Hygiene

PC・スマホ画面で見たスキン「Hygiene」
Hygiene
スキン名Hygiene
作者ハイジさん
レイアウト一覧≫ Cocoon公式サイトへ

Natural

PC・スマホ画面で見たスキン「Natural(ブルー)」
Natural(ブルー)
PC・スマホ画面で見たスキン「Natural(グリーン)」
Natural(グリーン)
スキン名Natural
作者Takaさん
レイアウト一覧≫ Cocoon公式サイトへ

Simple

PC・スマホ画面で見たスキン「Simple-Blue」
Simple Blue
PC・スマホ画面で見たスキン「Simple-Green」
Simple Green
PC・スマホ画面で見たスキン「Simple-Navy」
Simple Navy
PC・スマホ画面で見たスキン「Simple-Pink」
Simple Pink
PC・スマホ画面で見たスキン「Simple-red」
Simple-red
スキン名Simple
作者Takaさん
レイアウト一覧≫ Cocoon公式サイトへ

モノクロ

PC・スマホ画面で見たスキン「モノクロ」
モノクロ
スキン名モノクロ
作者yurukei20さん
レイアウト一覧≫ Cocoon公式サイトへ

アリス

PC・スマホ画面で見たスキン「アリス(無印)」
アリス(無印)
PC・スマホ画面で見たスキン「アリス(チェシャ猫)」
アリス(チェシャ猫)
PC・スマホ画面で見たスキン「アリス(白ウサギ)」
アリス(白ウサギ)
PC・スマホ画面で見たスキン「アリス(ユニコーン)」
アリス(ユニコーン)
PC・スマホ画面で見たスキン「アリス(ローズ)」
アリス(ローズ)
PC・スマホ画面で見たスキン「アリス(ビタミン)」
アリス(ビタミン)
スキン名アリス
作者Yuhomyanさん
レイアウト一覧≫ Cocoon公式サイトへ

カラフルライン

PC・スマホ画面で見たスキン「カラフルライン」
カラフルライン
スキン名カラフルライン
作者y.hiroakiさん
レイアウト一覧≫ Cocoon公式サイトへ

ダーク

PC・スマホ画面で見たスキン「ダークエンジ」
ダークエンジ
PC・スマホ画面で見たスキン「ダークカモノハ」
ダークカモノハ
PC・スマホ画面で見たスキン「ダークルリ」
ダークルリ
スキン名ダーク
作者y.hiroakiさん
レイアウト一覧≫ Cocoon公式サイトへ

ミックス

PC・スマホ画面で見たスキン「ミックスグリーン」
ミックスグリーン
PC・スマホ画面で見たスキン「ミックスブルー」
ミックスブルー
PC・スマホ画面で見たスキン「ミックスレッド」
ミックスレッド
スキン名ミックス
作者y.hiroakiさん
レイアウト一覧≫ Cocoon公式サイトへ

サムライブルー

PC・スマホ画面で見たスキン「サムライブルー(勝色)」
サムライブルー(勝色)
PC・スマホ画面で見たスキン「サムライブルー(無印)」
サムライブルー(無印)
スキン名サムライブルー
作者y.hiroakiさん
レイアウト一覧≫ Cocoon公式サイトへ(勝色)
≫ Cocoon公式サイトへ(無印)

Veilnui Simplog

PC・スマホ画面で見たスキン「Veilnui Simplog (amber)」
Veilnui Simplog(amber)
PC・スマホ画面で見たスキン「Veilnui-Simplog-blue」
Veilnui Simplog(blue)
PC・スマホ画面で見たスキン「Veilnui-Simplog-brown」
Veilnui Simplog(brown)
PC・スマホ画面で見たスキン「Veilnui-Simplog-cyan」
Veilnui Simplog(cyan)
PC・スマホ画面で見たスキン「Veilnui-Simplog-deep-orange」
Veilnui Simplog(deep orange)
PC・スマホ画面で見たスキン「Veilnui-Simplog-deep-purple」
Veilnui Simplog(deep purple)
PC・スマホ画面で見たスキン「Veilnui-Simplog-green」
Veilnui Simplog(green)
PC・スマホ画面で見たスキン「Veilnui-Simplog-indigo」
Veilnui Simplog(indigo)
PC・スマホ画面で見たスキン「Veilnui-Simplog-light-blue」
Veilnui Simplog(light blue)
PC・スマホ画面で見たスキン「Veilnui-Simplog-light-green」
Veilnui Simplog(light green)
PC・スマホ画面で見たスキン「Veilnui-Simplog-lime」
Veilnui Simplog(lime)
PC・スマホ画面で見たスキン「Veilnui-Simplog-orange」
Veilnui Simplog(orange)
PC・スマホ画面で見たスキン「Veilnui-Simplog-pink」
Veilnui Simplog(pink)
PC・スマホ画面で見たスキン「Veilnui-Simplog-purple」
Veilnui Simplog(purple)
PC・スマホ画面で見たスキン「Veilnui-Simplog-red」
Veilnui Simplog(red)
PC・スマホ画面で見たスキン「Veilnui-Simplog-teal」
Veilnui Simplog(teal)
PC・スマホ画面で見たスキン「Veilnui-Simplog-yellow」
Veilnui Simplog(yellow)
スキン名Veilnui Simplog
作者veilnuiさん
レイアウト一覧≫ Cocoon公式サイトへ

Momoon

PC・スマホ画面で見たスキン「Momoon(アクア)」
Momoon(アクア)
PC・スマホ画面で見たスキン「Momoon(グリーン)」
Momoon(グリーン)
PC・スマホ画面で見たスキン「Momoon(オレンジ)」
Momoon(オレンジ)
PC・スマホ画面で見たスキン「Momoon(ピンク)」
Momoon(ピンク)
PC・スマホ画面で見たスキン「Momoon(パープル)」
Momoon(パープル)
スキン名Momoon
作者タイジーWPさん
レイアウト一覧≫ Cocoon公式サイトへ

tecurio

PC・スマホ画面で見たスキン「tecurio earth」
tecurio earth
PC・スマホ画面で見たスキン「tecurio grape」
tecurio grape
PC・スマホ画面で見たスキン「tecurio lime」
tecurio lime
PC・スマホ画面で見たスキン「tecurio mango」
tecurio mango
PC・スマホ画面で見たスキン「tecurio moon」
tecurio moon
PC・スマホ画面で見たスキン「tecurio peach」
tecurio peach
PC・スマホ画面で見たスキン「tecurio sky」
tecurio sky
PC・スマホ画面で見たスキン「tecurio soil」
tecurio soil
PC・スマホ画面で見たスキン「tecurio sunset」
tecurio sunset
スキン名tecurio
作者風塵(ふーじん)さん
レイアウト一覧≫ Cocoon公式サイトへ

Bizarre-food

PC・スマホ画面で見たスキン「Bizarre-food(グリーンソバ)」
Bizarre-food(グリーンソバ)
PC・スマホ画面で見たスキン「Bizarre-food(ピンクワイン)」
Bizarre-food(ピンクワイン)
PC・スマホ画面で見たスキン「Bizarre-food(ブラックバーガー)」
Bizarre-food(ブラックバーガー)
PC・スマホ画面で見たスキン「Bizarre-food(ブルーカレー)」
Bizarre-food(ブルーカレー)
PC・スマホ画面で見たスキン「Bizarre-food(ホワイトラーメン)」
Bizarre-food(ホワイトラーメン)
スキン名Bizarre-food
作者takasakiさん
レイアウト一覧≫ Cocoon公式サイトへ

旅カメラ

PC・スマホ画面で見たスキン「旅カメラ」
旅カメラ
スキン名旅カメラ
作者がんちゃんさん
レイアウト一覧≫ Cocoon公式サイトへ

おでかけ

PC・スマホ画面で見たスキン「おでかけピンク」
おでかけピンク
PC・スマホ画面で見たスキン「おでかけブルー」
おでかけブルー
PC・スマホ画面で見たスキン「おでかけレモン」
おでかけレモン
スキン名おでかけ
作者がんちゃんさん
レイアウト一覧≫ Cocoon公式サイトへ

いつもの

PC・スマホ画面で見たスキン「いつものコーヒー」
いつものコーヒー
PC・スマホ画面で見たスキン「いつものローズ」
いつものローズ
PC・スマホ画面で見たスキン「いつもの深海」
いつもの深海
スキン名いつもの
作者がんちゃんさん
レイアウト一覧≫ Cocoon公式サイトへ

m-

PC・スマホ画面で見たスキン「m-sora」
m-sora
PC・スマホ画面で見たスキン「m-tomato」
m-tomato
スキン名m-
作者marineさん
レイアウト一覧≫ Cocoon公式サイトへ

ドット

PC・スマホ画面で見たスキン「ドット・レイニーブルー」
ドット・レイニーブルー
PC・スマホ画面で見たスキン「ドット・ワインレッド」
ドット・ワインレッド
スキン名ドット
作者をまつさん
レイアウト一覧≫ Cocoon公式サイトへ

ほんわかライトニング

PC・スマホ画面で見たスキン「ほんわかライトニング」
ほんわかライトニング
スキン名ほんわかライトニング
作者ライトニングさん
レイアウト一覧≫ Cocoon公式サイトへ

Metal Styles

PC・スマホ画面で見たスキン「Metal Styles」
Metal Styles
スキン名Metal Styles
作者まとめたるさん
レイアウト一覧≫ Cocoon公式サイトへ

凸凹

PC・スマホ画面で見たスキン「凸凹」
凸凹
スキン名凸凹
作者さん
レイアウト一覧≫ Cocoon公式サイトへ

スキンからオプション変更サンプル

PC・スマホ画面で見たスキン「スキンからオプション変更サンプル(CSV)」
スキンからオプション変更サンプル(CSV)
PC・スマホ画面で見たスキン「スキンからオプション変更サンプル(JSON)」
スキンからオプション変更サンプル(JSON)
PC・スマホ画面で見たスキン「スキンからオプション変更サンプル(PHP)」
スキンからオプション変更サンプル(PHP)
スキン名スキンからオプション変更サンプル
作者わいひらさん

スキンテンプレート

PC・スマホ画面で見たスキン「[Child]スキンテンプレート」
[Child]スキンテンプレート
PC・スマホ画面で見たスキン「スキンテンプレート」
スキンテンプレート
スキン名スキンテンプレート
作者わいひらさん

ふわっと追加

PC・スマホ画面で見たスキン「ふわっと追加」
ふわっと追加
スキン名ふわっと追加
作者らくさん
レイアウト一覧≫ Cocoon公式サイトへ

ゆっくり色が変化

PC・スマホ画面で見たスキン「ゆっくり色が変化」
ゆっくり色が変化
スキン名ゆっくり色が変化
作者らくさん
レイアウト一覧≫ Cocoon公式サイトへ

Cocoon公式サイトでスキンを確認できる

「スキンの細かなデザインを見たい!」という人は、Cocoon公式サイトで確認することもおすすめします。

下記2ヵ所からスキン一覧を確認できます。

Cocoon公式サイトの「スキン動作デモ」がある場所
スキン動作デモがある場所

まとめ:Cocoonスキンで自分・ユーザー好みのサイト設計に!

今回は、Cocoonでスキン一覧とおすすめスキンを紹介しました。

スキンを選び終えたら、次はサイト全体の設定=サイト設計していきます。

Cocoonでサイト設計する場所

以下の記事では、Cocoonで設定できる項目について解説しているので、気になる記事から読んでみてください。

ブログの顔であるアイコン画像を設定がまだの方は、以下の記事もおすすめです。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonのスキン一覧とおすすめスキンの記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次