オリジナルCocoonスキン「アリス」かわいさと読みやすさを追求して作りました。

Cocoonアリススキンスキン
この記事は約4分で読めます。

「とことんまでかわいい&読みやすい」を追求した、Cocoonのオリジナルスキン「アリス」を自作しました!

こんなに尖ってかわいい、居心地の良いデザインはなかなかないと思います!

かわいい色ばかり集めて使っているものの、1つ1つのパーツデザインはシンプルなので使いやすいはず。

記事内のボタンからダウンロードして気軽に使えるので、ぜひ使ってみてください。

ついに公式で同梱していただきました!

「Cocoon設定」の「スキン」の項目から、クリック一つで簡単に使っていただけるようになりました。

アリススキンについて

とことんまでかわいい&独自の世界観を持つ「不思議の国のアリス」のイメージをもとに、記事の読みやすさにもこだわって作りました。

ここまでかわいいデザインはなかなかないと思うので、ブログにとって大切な、独自のブランディングもしやすくなります。

色も好みや記事の内容に合わせて使いやすいように、

  • ピンク×ミントグリーンで元気いっぱいのアリス
  • ピンク×パープルでかわいらしさ全開のチェシャ猫
  • ブルー×ホワイトでパステルながらすっきりしたデザインの白ウサギ

の3色を展開しています。

Cocoonスキン「アリス」
アリス
Cocoonスキン「チェシャ猫(ピンク×パープル)」
チェシャ猫
Cocoonスキン「白ウサギ」
白ウサギ

スキン適用イメージ

アリス

アリス
アリス

チェシャ猫

チェシャ猫
チェシャ猫

白ウサギ

白ウサギ
白ウサギ

見出しデザインH2

見出しデザインのサンプルを紹介します。

見出しもH4まで対応しています。(H5、H6はあまり使わないと思ったので省略しました)

見出しデザインH3

見出しデザインH4

ナビバーデザイン&アニメーション

Cocoonスキンアリスナビバー

ナビゲーションバーをハバーすると白線がスイスイ動く、シンプルで心地の良いアニメーションをつけました。

記事一覧のデザイン&アニメーション

記事一覧のデザイン&アニメーション
記事一覧のデザイン&アニメーション

メタ情報やカテゴリなど、記事一覧のデザインも細部までこだわっています。

ハバーしたときにふわっと浮かぶアニメーションもつけています。

SNSシェアボタン

ブランドカラー(白抜き)タイプ
ブランドカラー(白抜き)タイプ
ブランドカラータイプ
ブランドカラータイプ

全SNSを、可読性を損なわないパステル系で統一しています。

ホワイト(白抜き)とブランドカラーのどちらにも対応しています。

ボックスメニューをかわいく

ボックスメニュー
ボックスメニュー

標準からかなりかわいいのですが、ピンクとミントカラーでサイト全体の雰囲気に合わせた印象にしました。

ハバーした時もかわいいおすすめポイントです。

プロフィールウィジェット

プロフィールウィジェット
プロフィールウィジェット

シンプルながらフォローボタンをかわいく見やすくしました。

カレンダー

カレンダー

カレンダーもパステル系の優しい色合いに。

カレンダーらしく土日に色をつけました。

コメント欄

コメント欄

コメント欄も抜かりなく、パステル系でかわいくしてあります。

スキンのダウンロードはこちらから

ダウンロードはこちらからお願いいたします。

Cocoonスキン「アリス」
Cocoonスキン「チェシャ猫(ピンク×パープル)」
Cocoonスキン「白ウサギ」

まとめ:「アリス」は最高にかわいいスキンです!

「アリス」イメージ写真

もともと自分のカスタマイズが楽しくて始めた「アリス」ですが、細部まで作りこんでいて、かわいい系・パステルカラー好きな方にはたまらないデザインになっております。

中でもこだわったのは、「大事な情報が目立つように優先順位をつけたデザイン」です。

パステルカラーをベースとしたデザインの難しさは、使い方によっては各パーツが喧嘩して、ごちゃごちゃしてしまうことです。

アリススキンでは、

  • タイトルやボタンなど大事な情報を目立たせる
  • コンテンツやブランディングに直接関与しない情報は目立ちすぎないように(例えば日付など)
  • 色が個性的な分、各パーツの形はシンプルに、余白を気持ち大きめに
  • もともとのCocoonのシンプルな良さを活かす

こうした足し算引き算に徹底して細部までこだわって作ったので、とことんまでのかわいさと読みやすさを両立させています。

たくさん使っていただけたら嬉しいです!

コメント

  1. […] アリススキンと同じく居心地の良さ・読みやすさへのこだわりはそのまま、こちらではアリスよりも落ち着いた、シックなかわいさを追求しました。 […]

  2. Excellent weblog right here! Additionally your website rather a lot up fast!

    What web host are you the use of? Can I get your affiliate
    link on your host? I wish my website loaded up as fast as yours lol

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