デザインに迷ったらこれを見て!cocoonユーザー総勢108名のブログ大特集

ゆぴ
ゆぴ

アラサー専業主婦のゆぴです。

サイトを運営する上で、文章、内容と同等に大切なのが「デザイン」!!

パッと惹きつけられるデザインだと、自然と記事も読みたくなりますよね。

今回は、WordPressの無料テーマ「cocoon」を使用している総勢108名のサイトを一挙大公開!!

ブログ初心者の方はもちろん、デザインに迷っていたり、同じテーマでできているサイトを見てみたい!という方はぜひ参考にしていただければと思います♪

ゆぴ
ゆぴ

私もcocoonを使用しています!!

簡単に可愛いデザインが作れるのでお気に入り♪

この記事はこんな人に読んでほしい
  • ブログ初心者の方
  • cocoonに興味のある方
  • サイトのデザインを参考にしたい人

目次

スポンサーリンク

cocoonってどんなもの?

cocoonはWordPressの無料テーマです。

ざっとcocoonのポイントを挙げると…

  • SEOやページ高速化に適している
  • シンプルなデザインを作るのに向いている
  • ブログ初心者の人でも使いやすい
  • カスタマイズがしやすい

とにかく、使いやすく簡単にオリジナルのサイトが作れるのがcocoonの魅力です!!

それでは早速cocoonを使用したサイトをご紹介していきます♪

運営者さんにサイトをデザインする際にどんなことを意識しているのかも聞いてみました!

※今回は著者の独断で以下7つのカテゴリーに分けさせていただいています。

  1. 色を意識したデザイン
  2. シンプル、わかりやすくを意識したデザイン
  3. やわらかい、ほっとするようなデザイン
  4. ポップで明るいデザイン
  5. アイキャッチや画像にこだわったデザイン
  6. テーマ、イメージに沿ったデザイン
  7. 見やすさ、使いやすさにこだわったデザイン

参加者の皆さん、ご了承ください。

※順不同

ゆぴ<br>
ゆぴ

私はサイトやアイキャッチ画像にくすみカラーを使用しておしゃれなサイトを意識しています♪

ゆぴ(@yuikkuma23

スポンサーリンク

色を意識したデザイン

るれりママさん(@rureri072521

色を統一させてどんなブログかわかりやすいヘッダーにしている♪

いぬねこさん(@inuneko-dogcat

派手な装飾は使用せず、3色以内に留めている♪

ゆうさん(@panpeoryman

色味を穏やかに♪

ぱーかーさん(@pakavlog

色を統一させ、デザインが内容の邪魔をしないようにしている♪

なかのゆさん(@tjammwm

青色を基調とし、囲い枠も青で統一している♪

ゆまこさん(@yuu-ma-koo

色をそろえてスッキリ見せる♪

やまみちさん(@yamamichiblog

全体的に青をベースにしている♪

ぷんまるさん(@FLYING-MEMO

使う色コードと割合、文字フォントを厳選している♪

なるさやさん(@7638blog

色合いと見やすさを意識している♪

MAYUKOさん(@Mayuk0l

全体的に淡いピンクのガーリーな雰囲気にしている♪
ヘッダーは自分で描いたもの♪

いがぐりさん(@higokkojyaken

男の人でも見てもらえるようにピンクなどを使用した可愛いデザインではなく、目にも優しい青、緑、茶のアースカラーを使用♪

Takeさん(@take-2021

色を統一している♪
見てほしい情報はサイトの上部に記載している♪

あめりさん(@amerixx09

緑とピンクでナチュラル可愛く♪

あいさん(@jin-ai10

大好きな色を使用して気分を上げいている♪

omatsuさん(@omatsu-suzuran

黄、黄緑、グレーの優しい色合いを基調にして読者にとって心地よい空間を♪

そういちの手帳さん(@Soichi-uk

色を統一してシンプルなデザインに♪

みちゃママさん(@michamama813

青を基調として統一感を出すようにしている♪
ヘッダーや背景は主張しすぎない目に優しい色にしたい!

minaさん(@tanokabu-com

優しい色合いで視認性を意識している♪

おかゆうさん(@yujinji-2020

色を統一してカラフルにしすぎないように♪
アイキャッチ画像がパッと見てどんな記事が書いてあるか分かるように!

まめさん(@soratobisheep

緑を基調としてあまり色が多くならないように♪
柔らかい雰囲気になるように!
  • 色を統一することでスッキリした印象になる
  • 好みの色を使用して自分好みのデザインにしている♪

シンプル、わかりやすくをイメージしたデザイン

ばしおさん(@bassiy

誰でも読みやすく、わかりやすく!
ごちゃごちゃしないように♪

りーぬさん(@zuborra23

ズボラさんにも簡単に見てもらえるようなシンプルデザイン♪

Rinさん(@rin-Tube1

シンプルで見やすく、見てもらいやすいようなデザイン♪

きなこさん(@mathuko01

できるだけ見やすいように字を詰めすぎないようにしたり、大切なことは字を大きくする♪

ふくちさん(@marufukuchi

cocoonらしいシンプルさに自分らしさをプラスしてゆる可愛く♪
親しみやすいサイトに♪

トラみさん(@toramifire

シンプルな作り♪

まささん(@mappyinME

目的記事にたどり着くまで早くするために、シンプルな構成を意識♪

たかなしさん(@justidea0712

邪魔しないようなシンプルさ♪

きりんさん(@kirinnosu-tweet

無駄な装飾を省いて読者第一でシンプルに♪

たっぴーさん(@tappy-0808

ほとんどいじらずシンプルに♪
アイキャッチでわかりやすく♪

ゆっかさん(@yukka-osaka

スマホでも読みやすいように装飾は抑えて行間も空ける♪

MAG2さん(@T21094M

ごちゃごちゃしないブログ作り♪

ぶちさん(@buchi-daradara

「ごちゃごちゃしない」がテーマ♪

なまこさん(@1173blog

わかりやすくするためにメニューを配置!
ワンクリックでメニュー、記事が開けるように♪

さすけさん(@ojalial-maru

読みやすく、ごちゃごちゃしないブログ♪

よぴをさん(@YOPIWO-BLOG

見やすく!
自分の体験談を入れる♪

せいかしさん(@seikashi22

目に優しい淡い色を使ってシンプル落ち着くデザイン♪

ペーちゃんさん(@manabinopeechan

おしゃれで見やすいブログを目指している♪

マルさん(@maruniti-vym

何のブログか見たらすぐわかってもらえるよう意識♪

たかぴょんさん(@takapyon777

「cocoon感が出やすい」を逆手にとって親しみやすい低予算感のあるデザイン♪

シモネさん(@yi9wQdMEAYV7Oik

読者にいかに見やすく必要な情報だけを載せるか♪

とっきーさん(@moshiblo

見やすく、わかりやすく吹き出しや画像を使用♪

ぽんこさん(@EScokx

できるだけシンプルに♪

でんしょばさん(@denshoba10wing

記事を見つけやすく!誰でもわかりやすく♪

こよカツさん(@katsu-2-tonight

「何となく目に止まる」デザイン♪

ききさん(@kikis-blog

cocoon特有のシンプルなデザイン♪

ちゃきさん(@chyaki-kom

読みやすさを意識♪
シンプルだけど自分らしさが出るように!

ろみぃさん(@romy7sblog

タイトルに目が入った瞬間読めているように♪

かっちゃんさん(@Fukusuke7772

わかりやすく♪

拡散するし、してほしいんじゃさん(@pfm10000gg

シンプル&コンパクト♪

なおさん(@twelvetheme

Simple is Best!!

まなみんさん(@mana blog-mana

シンプルなデザイン♪

まっちゃんさん(@KeigoM1024

見やすいように吹き出しやチェックを入れる♪

エマさん(@emmablog810

シンプル×大人っぽく♪

Fukuchiさん(@fukuchi-blog

シンプルにまとめる♪
わかりやすく!

ライトさん(@RtTxU721S7aPIEI

シンプル+パッと見てどんな記事があるのか分かるように♪

イセさん(@sabo-reco

シンプル+ちょっとした遊び心を意識♪
ブログ名の「サボテン」にかけて、おすすめカードの絵柄をサボテンにしているのがお気に入り!

チコさん(@chico-mam3580

見やすいデザイン♪

noripieさん(@noripie37

オシャレなサイトにしていきたい♪
  • シンプルなデザインは見やすい!
  • 見やすくするために細かな工夫を取り入れている!

やわらかい、ほっとするようなデザイン

ひまつぶしーずさん(@HimatubushiZ

見ていて気持ちが休まるように、緑や茶色の自然色をベースにしている♪

すみこさん(@sumiko3panda

シンプルで見やすく、少しほっこりできるようなデザインに♪

よいちょさん(@playstudyyoicho

ゴテゴテした色使いやデザインにならないように見やすくして落ち着くページに♪

ぺりさん(@yunyun2193

オシャレを意識しつつ、アラサーの方に見てもらえるように落ち着いたデザインに♪

元気な40代とっちゃんさん(@tocchan696

シンプルで読みやすく目に優しいデザイン♪

はるパパさん(@Takahashi-techs

ゆるかわ×おしゃれ♪

ひれパパさん(@tonkatsukakeibo

ほっこりやる気の出るサイト♪

さなさん(@37cha

やわらかさ、見やすさを意識♪

ちゃむさん(@manmo-chi-

やわらかい雰囲気、まとまり感♪

きなこさん(@kinako-pupipu

できるだけ見やすく♪
優しい色合いになるように!

まるしぇさん(@shiomusup

目と心に優しいデザイン♪

ちゃむマユさん(@mayutoito

柔らかく、親しみやすく♪
  • 色やイラストなどでやわらかい印象になる♪
  • ほっとするデザインで自然と心も落ち着く♪

ポップで明るいデザイン

かねまるこさん(@kanemarukoblog

あえてのごちゃごちゃ感♪
派手さ×好きな緑色♪

柳葉ぐみさん(@gumiyanagiba

season summerを使用!
パキッとした色合いで見やすく、明るい気持ちに♪

ゆうもんさん(@salaryman-oko

初期設定からほぼ手を加えていないが、POPなイメージにしたい♪

きゃりーさん(@enkura-carrie

テーマの「スポーツ」に合わせてポップで明るく親しみやすい外観に♪
テーマカラーを絞って統一感を出している!

ぽにさん(@ponisanbrog

ポップな色使いと「郵便局」とすぐわかるようなデザイン♪

けんたろうさん(@tadano ETF

シンプルだけど軽くポップな感じが出るように♪
  • 色でポップなデザインになる♪
  • ポップなデザインは見ていて元気になる♪

アイキャッチや画像にこだわったデザイン

せとうちさん(@setouchisannnnn

アイキャッチ画像にもタイトルを入れておき、画面の右半分左半分どちらに目線がいってもなようが分かるように♪

ぴよ吉さん(@piyokichidy

色を限定する♪
アイキャッチはブログの雰囲気に合わせて同じ形に♪

麦チョコさん(@mugichoko0129

読みやすくなるように枠や吹き出しを使用♪
アイキャッチに文字を入れる♪

tairaさん(@tairablog1102

アイキャッチはcanvaで作ってわかりやすく♪
子どもが作ってくれたアバターを使用♪

ちっちママさん(@chicchimama2104

シンプルだけどオシャレに見えるように♪
色味とアイキャッチの統一感を意識♪

やぎさん(@mBXWpdAeTbkF4Jn

いかにcocoonらしく見せないか!
画像に重きを置いた作りに♪

あきるの部屋さん(@akichocoball

親近感、読みやすさを意識!
自作の画像でオリジナリティに♪

あじさいさん(@ajisai-kiwidojo

読みやすさ、アイキャッチを意識♪

シンカさん(@sinkanoblog136

アイキャッチの色をなるべく統一する♪
  • アイキャッチを工夫するだけでわかりやすさがアップ!
  • 自作のアイキャッチや画像で一気にオリジナリティのサイトになる♪

テーマ、イメージに沿ったデザイン

エージさん(@eiji-oniku

お肉テーマのブログなので、お肉の写真が映えるように白で統一♪
写真は自分で撮ったもの!

おもちさん(@manmaruword

テーマの食べ物の家庭菜園から連想し緑を使用♪

PAOさん(@pao-log-net

子育てブログなのでやわらかいブラウンで統一♪

よつさん(@aonisai-blog

スキンは summer♪
ブログ名にちなんだ青を使用したデザイン♪

ふかみんさん(@tabibitoshushu

アラフォー女性に向けてのサイトなので大人っぽさ、女性らしさ、スタイリッシュさで統一感♪

まんまるさん(@w7jjE47pArAI4GN

キャンプをテーマにしているので晴れた日を意識した配色♪

ぐりまろさん(@gurimaro74

30代に向けたサイト♪
明るい感じに修正したい!

さかさん(@sakasanblog

コンセプト「ゆるく季節の行事を楽しむ」に合わせやわらかい雰囲気に♪

まるさん(@kodomonoha118

医療系のサイトなので清潔感、優しい雰囲気に♪

Jackとまめさん(@jacktomameblog

ジャックと豆っぽくする♪

りくさん(@riku-blogger

ジムをイメージ♪
男磨きのモチベーションが上がるように♪

ゆうさん(@gakuseitousi-yu

自分の好きな飛行機をイメージした優しい色合い♪
スマホとPC両方で見やすく!

やこさん(@yakobeeaam

可愛い世界観を作る♪
他の人と被らないように!
  • テーマに合わせたデザインにすることで何のブログなのかすぐわかる!
  • 購読者のイメージに合わせたデザインづくりも大事♪

見やすさ、使いやすさにこだわったデザイン

中村松太郎さん(@matsutaro-blog

記事作成に時間をかけることを意識♪
イラストで統一感とゆるい世界観を演出!

ももさん(@140cm-mama

興味のあるページに移動しやすいように♪
色はゴテゴテしいないようにする!

TaroTechさん(@Taro-Tech724

シンプルな色使い♪
カテゴリごとにボタンで遷移できるように!

ながパパさん(@nagapapa1192

スマホユーザーが多いので、スマホでの操作性を意識♪

masaaさん(@zeta-masa

cocoonコンセプトのシンプルさを損なわず細かいところからカスタマイズ。
動きのあるカスタマイズで印象に残るように♪

のじさん(@noji-diary

cocoonぽくないデザイン、使いやすいように♪
簡単なアニメーションで目を引くようにしている!

ゆーみー夫婦さん(@yuu2021mii

記事によってデザインを変更している♪

りんごジャムさん(@omorosagashi

メニュータブを作ってカテゴリーを分け、気になる記事に飛びやすいように♪

旅ブログさん(@shimacotrip

地域、国別にアイコンを並べて探しやすく♪
  • 少しでも読んでもらいやすく工夫をしている!
  • アイコンやメニュータブを入れるだけでグッとわかりやすくなる♪

終わりに

以上、cocoonユーザー総勢108名のサイト紹介でした。

同じcocoonを使用していても、色や画像、記事の配置の仕方などによってイメージがグッと変わるのがお分かりいただけたのではないでしょうか!

どのサイトも、運営者さんの思いやこだわりが詰まっている素敵なサイトでした♪

ブログのデザインに迷われている方はぜひ参考にしてみてください。

参加してくださったブロガーさん、ありがとうございました!

この記事を書いた人

30代ズボラ主婦のゆぴです。
子なしですが旦那と仲良く暮らしています。
食べること、寝ること、K-POPが好き。
最近は、ボディメイクや韓国語勉強にハマっています。

ゆぴをフォローする
副業
スポンサーリンク
ゆぴをフォローする
ズボラ主婦部
タイトルとURLをコピーしました