「スキン選びってどうやるの?」
「スキンのデザインを一覧で見たい」
「おすすめのスキンを教えて」
この記事では、そんな方に向けて、Cocoonでスキン一覧とおすすめスキンを解説します。
こんにちは、かめコンパスです!
この記事を読めば、あなたも簡単に
- おすすめのスキンが分かる
- すべてのスキンを一覧で確認できる
- スキン選びに迷わない
ようになります。
私自身、スキン選びに失敗した経験がありますが、本記事の方法で解決できました。
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
\もっと早く乗り換えればよかった…/
使い心地バツグン、高機能でオシャレ!
Cocoonおすすめスキン【3つの要素別】
Cocoonでスキンを選ぶ際に、必ずチェックしておきたい「3つのおすすめポイント」を紹介します。
自分の中でどのポイントを重要視するのか優先順位を決めるといいね!
個人的におすすめの優先順位は、
- 1位:デザイン
- 2位:カスタマイズしやすさ
- 3位:スキンの変更しやすさ
の順です。
それぞれのおすすめポイントを詳しく解説します。
①デザインで選ぶ
サイトを運営する中で、デザインは非常に重要です。
- 自分好みのデザインか?
- サイトのデザインと紹介するテーマがマッチしているか?
- ターゲットユーザーが好みそうなデザインか?
- どういうブランドカラーを形成したいか?
などを考える必要があります。
ブログ初心者は自分好みのデザインで選ぶことをおすすめだよ
- 自分好みのデザインを選べる
- スキンの選び方が分からない人の分かりやすい指標である
- ユーザーやテーマと相性のいいと購買意欲の向上につながる
- カスタマイズできない項目あり
- 人気のデザインは他サイトと被りやすい
- 今後スキンを変更するとデザインが崩れる
以下の表では、Cocoonのスキン110種類をすべて確認し、
その中でデザインが良かったおすすめスキンを4つに絞って一覧でまとめました。
スキン名 | 特徴 | レイアウト |
---|---|---|
grayish | 画像フルスクリーン表示 | デザインを見る |
イノセンス | 大人かわいい | デザインを見る |
てがきノート | 親近感のある | デザインを見る |
Fuwari | 和の雰囲気 | デザインを見る |
当ブログは「イノセンス」を使ってるよ!
②カスタマイズしやすさで選ぶ
ブログ始めたての頃は気にする必要はありませんが、ある程度ブログの執筆が上達してくると、
- 目次の表示を変えたい
- ヘッダーの色を変えたい
- アイキャッチ画像を表示したい
など細かくカスタマイズしたいという欲求が出ます。
ただ、選んだスキンによっては、カスタマイズできない=スキン制御されていて、あきらめないといけない場合もあります。
私も初めはデザイン重視で選んだけど、スキン制御の項目があってスキンを選び直した経験があるよ
- 自由にブログ設計できる
- カスタマイズで他サイトと差別化できる
- カスタマイズで他サイトと差別化できる
- 好きなデザインを選べない
- 不要・必要な設定の変更ができない
- 今後スキンを変更しにくい
以下の表では、Cocoonでスキン制御の項目がないスキンを一覧でまとめました。(2023年7月時点の情報)
スキン名 | スキン制御の数 | レイアウト |
---|---|---|
one | 0 | デザインを見る ∨ |
Simple-Darkmode | 0 | デザインを見る ∨ |
Natural | 0 | デザインを見る ∨ |
Simple | 0 | デザインを見る ∨ |
モノクロ | 0 | デザインを見る ∨ |
カラフルライン | 0 | デザインを見る ∨ |
ミックス | 0 | デザインを見る ∨ |
サムライブルー | 0 | デザインを見る ∨ |
Momoon | 0 | デザインを見る ∨ |
Fuwari | 0 | デザインを見る ∨ |
旅カメラ | 0 | デザインを見る ∨ |
いつもの | 0 | デザインを見る ∨ |
m- | 0 | デザインを見る ∨ |
ドット | 0 | デザインを見る ∨ |
ほんわかライトニング | 0 | デザインを見る ∨ |
Metal Styles | 0 | デザインを見る ∨ |
スキンテンプレート | 0 | デザインを見る ∨ |
ふわっと追加 | 0 | デザインを見る ∨ |
ゆっくり色が変化 | 0 | デザインを見る ∨ |
スキン制御がなければ、今後カスタマイズできない⁉ということがなくなるよ
上の表ではスキン制御がないスキンをまとめましたが、「この項目だったらスキン制御されてても気にしない」ということもあります。
今後カスタマイズする可能性が低い項目がスキン制御されているスキンもおすすめ!
下の記事では、Cocoonでスキン制御されている項目をスキン別でまとめてますので、あわせて見てください。
③スキンの変更しやすさで選ぶ
最初のスキン選びを間違えたり、サイトの雰囲気を変えたいと思った場合のことも考え、変更しやすいスキンを選ぶことも重要です。
変更しやすいスキンとは、種類が多いスキンになります。
変更したい場合は、同種類のスキン同士で変更します。
スキン選びに迷ったら、のちに変更しやすいスキンを選ぶのもおすすめだよ!
- 今後スキンを変更しやすい
- 選べるスキンの選択肢が多い
- サイトデザインを崩さずスキンを変更できる
- 好きなデザインを選べない
- カスタマイズできない項目あり
- スキンの変更前と後であまりデザインが変わらない
以下の表では、Cocoonでスキンの種類が多い順に一覧でまとめています。
2種類以上あるスキンのみを一覧でまとめているよ
スキン名 | 種類の数 | レイアウト |
---|---|---|
Veilnui Simplog | 17 | デザインを見る ∨ |
tecurio | 9 | デザインを見る ∨ |
COLORS | 6 | デザインを見る ∨ |
アリス | 6 | デザインを見る ∨ |
てがきノート | 5 | デザインを見る ∨ |
Simple | 5 | デザインを見る ∨ |
Momoon | 5 | デザインを見る ∨ |
Bizarre-food | 5 | デザインを見る ∨ |
Season | 4 | デザインを見る ∨ |
Fuwari | 4 | デザインを見る ∨ |
ダーク | 3 | デザインを見る ∨ |
ミックス | 3 | デザインを見る ∨ |
おでかけ | 3 | デザインを見る ∨ |
いつもの | 3 | デザインを見る ∨ |
スキンからオプション変更サンプル | 3 | デザインを見る ∨ |
Simple-Darkmode | 2 | デザインを見る ∨ |
Natural | 2 | デザインを見る ∨ |
サムライブルー | 2 | デザインを見る ∨ |
m- | 2 | デザインを見る ∨ |
ドット | 2 | デザインを見る ∨ |
スキンテンプレート | 2 | デザインを見る ∨ |
スキンの種類の数が多いほど、のちに変更しやすくなるよ!
Cocoonスキン一覧【110種類】
Cocoonで設定できるスキン全110種類を一覧にしてまとめました。
\クリックで気になるスキンへジャンプ/
PC・スマホそれぞれの見え方をチェックしてね!
なし
スキン名 | なし |
作者 | ー |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
grayish
スキン名 | grayish |
作者 | Na2factoryさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
SILK(シルク)
スキン名 | SILK(シルク) |
作者 | ろこさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
みるらいと
スキン名 | みるらいと |
作者 | みるみさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
イノセンス
スキン名 | イノセンス |
作者 | おはようポテトさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
COLORS
スキン名 | COLORS |
作者 | わいひらさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Like Simplicity
スキン名 | Like Simplicity |
作者 | わいひらさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
てがきノート
スキン名 | てがきノート |
作者 | ゆうそうとさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Season
スキン名 | Season |
作者 | ぽんひろさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
モダンブラック
スキン名 | モダンブラック |
作者 | アオイさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Fuwari
スキン名 | Fuwari |
作者 | アオイさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
one
スキン名 | one |
作者 | haijiさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Simple-Darkmode
スキン名 | Simple-Darkmode |
作者 | Hirositeさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Hygiene
スキン名 | Hygiene |
作者 | ハイジさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Natural
スキン名 | Natural |
作者 | Takaさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Simple
スキン名 | Simple |
作者 | Takaさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
モノクロ
スキン名 | モノクロ |
作者 | yurukei20さん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
アリス
スキン名 | アリス |
作者 | Yuhomyanさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
カラフルライン
スキン名 | カラフルライン |
作者 | y.hiroakiさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
ダーク
スキン名 | ダーク |
作者 | y.hiroakiさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
ミックス
スキン名 | ミックス |
作者 | y.hiroakiさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
サムライブルー
スキン名 | サムライブルー |
作者 | y.hiroakiさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ(勝色) ≫ Cocoon公式サイトへ(無印) |
Veilnui Simplog
スキン名 | Veilnui Simplog |
作者 | veilnuiさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Momoon
スキン名 | Momoon |
作者 | タイジーWPさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
tecurio
スキン名 | tecurio |
作者 | 風塵(ふーじん)さん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Bizarre-food
スキン名 | Bizarre-food |
作者 | takasakiさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
旅カメラ
スキン名 | 旅カメラ |
作者 | がんちゃんさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
おでかけ
スキン名 | おでかけ |
作者 | がんちゃんさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
いつもの
スキン名 | いつもの |
作者 | がんちゃんさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
m-
スキン名 | m- |
作者 | marineさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
ドット
スキン名 | ドット |
作者 | をまつさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
ほんわかライトニング
スキン名 | ほんわかライトニング |
作者 | ライトニングさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Metal Styles
スキン名 | Metal Styles |
作者 | まとめたるさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
凸凹
スキン名 | 凸凹 |
作者 | 北さん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
スキンからオプション変更サンプル
スキン名 | スキンからオプション変更サンプル |
作者 | わいひらさん |
スキンテンプレート
スキン名 | スキンテンプレート |
作者 | わいひらさん |
ふわっと追加
スキン名 | ふわっと追加 |
作者 | らくさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
ゆっくり色が変化
スキン名 | ゆっくり色が変化 |
作者 | らくさん |
レイアウト一覧 | ≫ Cocoon公式サイトへ |
Cocoon公式サイトでスキンを確認できる
「スキンの細かなデザインを見たい!」という人は、Cocoon公式サイトで確認することもおすすめします。
下記2ヵ所からスキン一覧を確認できます。
当ブログ愛用「SWELL」のデザインは洗練されていてオシャレ!
当ブログでは、2024年4月からWordPressテーマ「SWELL
SWELLはデザインが好評で、シンプルでとてもオシャレです。
以下の画像は、公式サイトで公開されているデモサイトです。
あたかもプロのデザイナーが作ったかのような美しいサイトを作ることができます。
サイトがおしゃれだと良い気分にもなるね
もし一流のデザイナーが作ったかのようなオシャレなサイトを作りたければ、SWELLはおすすめできそうですよ。
\サイトをよりオシャレに!/
まとめ:Cocoonスキンで自分・ユーザー好みのサイト設計に!
今回は、Cocoonでスキン一覧とおすすめスキンを紹介しました。
スキンを選び終えたら、次はサイト全体の設定=サイト設計していきます。
以下の記事では、Cocoonで設定できる項目について解説しているので、気になる記事から読んでみてください。
ブログの顔であるアイコン画像を設定がまだの方は、以下の記事もおすすめです。
ためになったという人は“コメント”してくれると嬉しいです!
コメント