せいかつブログ

【Cocoon】スキンどれ選ぶ?特徴と評判|「モノクロ」~「ミックス」シリーズまで

この記事は約16分で読めます。

こんにちは、まちゃりさです。

今回の記事では、Cocoonユーザ向けに「スキン」の特徴と使用ユーザさんの評判について紹介します。

本記事では、以下10個のスキンについてご紹介しています。

  • 「シリーズ」として、まとめているスキンもあります。
  • Twitterフォロワーさんの評価をいただいたスキンは「*」にて表現しています。
  • 2021年9月2日時点のスキン一覧です。(紹介サイトのスキンに変更があった場合、リンクを削除させていただく可能性があります)
  • リンクをクリックすると、該当スキンの詳細説明(見出し)にジャンプします。
  • スライドショーの不具合で画像が正しく表示されていません。現在、適宜修正中です。(修正終了:2022/8/9)

>> スキン一覧(まとめ記事)に戻る

スポンサーリンク

モノクロ

作成者:ゆるけーさん

引用:「Cocoon」公式サイト

スタイリッシュでシンプルなモノトーン調のデザインが特徴のスキンです。

スキン使用者一覧(Twitterより)

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

 

気に入っている点(使用者目線)

・マウスホバー

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

・特になし

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです。

↓ ↓ ↓

まちゃりさ
まちゃりさ

モノクロのデザイン、統一感があってかっこいい!

 

「いいな」と思う点(わたし目線)
  • マウスカーソルをあてると、色が変化する
  • マウスカーソルをあてると、「Read More」が表示される
  • 見た目がかっこいい
  • モノクロで統一されたデザイン

▼カルーセルや関連記事のリンクにマウスをかざすと色が変化し、右下に「Read More」が表示されます。

ブログカードのイメージ
ブログカード
関連記事のイメージ
関連記事
カテゴリー記事一覧のイメージ
カテゴリー記事一覧
前後の記事のイメージ
前後の記事

↑目次に戻る

イノセンス

作成者:おはようポテトさん

引用:「Cocoon」公式サイト

大人かわいいデザインが特徴のスキンです。

スキン使用者一覧(Twitterより)

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

まちゃりさも以前使用していた、お気に入りスキンです。

 

気に入っている点(使用者目線)

・背景がチェックみたいでかわいい

・縦型になる

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

・目次の番号が表示されない(まちゃりさ)

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです。

↓ ↓ ↓

まちゃりさ
まちゃりさ

グレーの背景チェックデザインがかわいいです。

 

「いいな」と思う点(わたし目線)
  • 丸みもあって、デザインがかわいい
  • カテゴリやタグに表示されるマークがかわいい
  • 全体的にグレー色の統一感がある

▼全体的に、グレーの丸みあるデザインが特徴です。

プロフィール欄のイメージ
プロフィール
カテゴリー記事一覧のイメージ
カテゴリー記事一覧
カテゴリー表示のイメージ
カテゴリー表示
目次表示のイメージ
目次

↑目次に戻る

「アリス」シリーズ

作成者:Yuhoさん

不思議の国のアリスをモチーフにした、パステルカラーデザインのスキン3種類です。

  1. アリス
  2. チェシャ猫(ピンク×パープル)
  3. 白ウサギ(白×ブルー)

全体的に柔らかい色調が特徴です。

スキン使用者一覧(Twitterより)
  • 現在、いませんでした。

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

 

気に入っている点(使用者目線)

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです

(現在、いませんでした。)

「いいな」と思う点(わたし目線)
  • 世界観、コンセプトが明確
  • パステルカラーデザインのスキンは他にない
  • 1つ1つのパーツデザインがシンプル!使いやすそうな印象
  • マウスをかざしたとき、ふわっと浮かぶアニメーション
  • ボックスメニューがピンクで統一されている

▼目次やボックスメニューのデザインはピンクでかわいい印象。

↑目次に戻る

SILK(シルク)

作成者:ろこさん

引用:【Cocoonスキン】SILK(シルク)の使い方とカスタマイズ方法

シンプルながら、細かい部分まで配慮された、完成度の高いスキンです。

スキン使用者一覧(Twitterより)

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

私も現在使用中!かなりおすすめのスキンです!

 

気に入っている点(使用者目線)

・マテリアルデザインがかわいい

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

・(強いて挙げれば)カルーセル表示にするとタイトルが切れてしまうので、今のところCSS対応が必要

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです。

↓ ↓ ↓

まちゃりさ
まちゃりさ

シンプルながら、洗練されたデザインがおしゃれ!

 

「いいな」と思う点(わたし目線)
  • シンプルなので、カスタマイズしやすい
  • HTML/CSSのソースコードをコピーできるボタンがついている(←これ便利です
    参考記事>> HTML/CSSのソースコードを載せる方法
  • スマホ向けのブログカードデザインがある
  • アコーディオンボックスや比較表などが使用できる

▼色の統一感があり、おしゃれに使いこなされています。

カテゴリー表示のイメージ
カテゴリー表示
アイコンボックスのイメージ
アイコンボックス
そのほか

↑目次に戻る

みるらいと

作成者:みるみさん

引用:「Cocoon」公式サイト

全体的に柔らかな印象のスキンです。

サイトに統一感が出るように、細部まで徹底的にスタイリングされているのが特徴です。

スキン使用者一覧(Twitterより)

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

 

気に入っている点(使用者目線)

・色味が可愛い

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

・背景色がPCで見る時は白いのにモバイルで見ると若干色が付いてる

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです。

↓ ↓ ↓

まちゃりさ
まちゃりさ

温かみのある統一感のあるサイトに仕上がっていますね!

 

「いいな」と思う点(わたし目線)
  • カスタマイズせずとも、デザインに必要な機能がある程度備わっている
  • 全体的に丸みのあるデザインがかわいい

▼柔らかくあたたかい雰囲気のデザインが、サイトとマッチしていますね。

トップページ・サイドバーのイメージ
トップページ、サイドバー
プロフィール欄のイメージ
プロフィール
吹き出し(記事内)のイメージ
吹き出しも丸いデザイン
そのほかのイメージ

↑目次に戻る

凸凹(でこぼこ)

作成者:さん

引用:「Cocoon」公式サイト

デコボコとした立体感をテーマとしたスキンです。

▼デモサイトはこちら。

 

スキン使用者一覧(Twitterより)
  • 現在、いませんでした。

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

 

気に入っている点(使用者目線)

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです

(現在、いませんでした。)

「いいな」と思う点(わたし目線)
  • 他のスキンにはない、独自性があるデザインで面白い
  • 色を自在に変更できる
  • 画像が浮き出てくる感じ、立体感

▼凸凹(でこぼこ)というだけあって、ゴツゴツ感あり。角は丸みがあって、少し温かい印象。

トップページのイメージ
トップページ/引用:凸凹デモサイト
関連記事のイメージ
関連記事/引用:キタタリアン
そのほかのイメージ
まちゃりさ
まちゃりさ

Cocoonの中でも、デザインに独自性を出したい方におすすめです。色や角の丸さも設定で調節できるデザインで、カスタマイズの幅が広がりますね!

↑目次に戻る

「Simple」シリーズ

作成者:Taka@KARASUさん

「Simple」シリーズは、色別に全5種類あります。

  • Simple Blue(シンプルブルー)
  • Simple Green(シンプルグリーン)
  • Simple Navy(シンプルネイビー)
  • Simple Pink(シンプルピンク)
  • Simple Red(シンプルレッド)

名前のとおり、装飾が控えめなシンプルなデザインです。

スキン使用者一覧(Twitterより)

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

 

気に入っている点(使用者目線)

・特になし

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

・特になし

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです。

Simple Navy(シンプルネイビー)を使用中】

↓ ↓ ↓

まちゃりさ
まちゃりさ

カスタマイズをたくさんされてます。デザインがシンプルなため、自由度が高いスキンと言えそうです。

【参考:カスタマイズ箇所】

・サイドバー見出し ・ブログカードの枠、見た目 ・プロフィール ・トップページのタブの色 ・アプリーチのボックス ・目次 ・スマホの追尾目次 ・モバイルメニュー辺りの色 ・記事内見出し

 

「いいな」と思う点(わたし目線)
  • 自由度の高いシンプルなデザイン
  • カスタマイズしやすい

▼自分好みにカスタマイズして、有料サイトのようなすてきなページにしています。

トップページのイメージ
トップページ
プロフィールのイメージ
プロフィール
検索ボックスのイメージ
検索画面
そのほかのイメージ

↑目次に戻る

カラフルライン

作成者:ヒロアキさん

引用:「Cocoon」公式サイト

様々な色を要所要所に配色した綺麗なスキンです。

 

スキン使用者一覧(Twitterより)
  • 現在、いませんでした。

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

 

気に入っている点(使用者目線)

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです

(現在、いませんでした。)

「いいな」と思う点(わたし目線)
  • カードにマウスを載せると色が変わる
  • アニメーションが工夫されている
  • 色がカラフルでおしゃれ

▼カラフルなので、見栄えがいいなと感じました。

目次のイメージ
目次イメージ
見出しのイメージ
見出しイメージ
ブログカード・引用のイメージ
ブログカード、引用
エントリーカードのイメージ
エントリーカード
ページネーションのイメージ
ページネーション
グローバルメニューのイメージ
グローバルメニュー
関連記事のイメージ
関連記事

↑目次に戻る

「ダーク」シリーズ

作成者:ヒロアキさん

「ダーク」シリーズは、色別に全3種類あります。

  • ダークエンジ(赤系)
  • ダークルリ(青系)
  • ダークカモノハ(緑系)

都市伝説系、オカルト、占いサイトなど、暗色系の雰囲気のジャンルにおすすめのスキンです。

▼デモサイトはこちら

 

スキン使用者一覧(Twitterより)
  • 現在、いませんでした。

※ほか使用者が見つかれば、追記していく予定です。

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

 

気に入っている点(使用者目線)

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです

(現在、いませんでした。)

「いいな」と思う点(わたし目線)
  • とにかくダークにこだわっている
  • ダーク色で全デザインが統一されている
  • 他のスキンにない独自性

▼ダークカラーに合わせ、すべてのデザインが統一されています

目次のイメージ
目次イメージ
見出しのイメージ
見出しイメージ
アイコンボックスのイメージ
アイコンボックス
吹き出しのイメージ
吹き出し
タブボックスのイメージ
タブボックス
アイコンリストのイメージ
アイコンリスト
表のイメージ
引用のイメージ
引用
そのほかのイメージ

↑目次に戻る

「ミックス」シリーズ

作成者:y.hiroakiさん

「ミックス」シリーズは、色別に全3種類あります。

  • ミックスグリーン
  • ミックスブルー
  • ミックスレッド

シンプルで、色にこだわったデザインが特徴のスキンです。

 

スキン使用者一覧(Twitterより)

実際の使用感がさらに気になる場合は、上記ユーザさんに聞いてみてね!

 

気に入っている点(使用者目線)

・シンプル、青系の淡いグラデーション(つばめさん:ミックスブルー使用)

・やっぱりシンプルなのが気に入ってます(ヤスさん:ミックスブルー使用)

・緑、サブ色:オレンジがほっこりで好きです!(ふくすけさん:ミックスグリーン使用)

※ほかの意見があれば、追記していく予定です。

 

不足している点(使用者目線)

・h3見出しカスタム変更四苦八苦(開発者様に聞いて解決済)(つばめさん:ミックスブルー使用)

※ほかの意見があれば、追記していく予定です。

 

▼ 使用者さんのサイトトップページです。

つばめさんのブログトップページ

↓ ↓ ↓

ヤスさんのブログトップページ

↓ ↓ ↓

ふくすけさんのブログトップページ

↓ ↓ ↓

まちゃりさ
まちゃりさ

シンプルなデザインが気に入っている」という声が多かったスキンです。

同じスキンでも、それぞれのサイト個性が出ていて素敵でした。

 

「いいな」と思う点(わたし目線)
  • シンプルにこだわったデザイン
  • グラデーション色がきれい
  • 見出しのデザイン

▼グラデーション色がおしゃれだなと感じました。シンプルなので、サイトが見やすいです。

トップページのイメージ

トップページ
サイドバーのイメージ
サイドバー(人気記事)
サイドバー(カテゴリ①)
サイドバー(カテゴリ②)
目次のイメージ
目次①
目次②
本文のイメージ
本文①
本文②
ページネーションのイメージ
ページ送り
関連記事のイメージ
関連記事
まちゃりさ
まちゃりさ

見ていただいてわかるように、どのサイトもそれぞれのサイト色が出ていますね。シンプルなデザインならではかと思います。

↑目次に戻る

まとめ

本記事では、以下10個のスキンについてご紹介しました。

別のスキンの特徴や評判を知りたい方は、下記の記事を参考にしてみてください。

それでは、今回はこの辺で終わります。

最後まで、お読みいただきありがとうございました!おわり。

コメント

SNS

最近の投稿

タイトルとURLをコピーしました