「有料テーマじゃないとお洒落にならない」。あなたはそう考えていませんか?実際はそうではありません。
お洒落にデザインするためには、「知識」と「センス」が必要です。知識とは「HTML」や「CSS」といったプログラム。「センス」はデザインの案や配色を指します。どんなに良いセンスを持っていても、それを表現するプログラム知識がなければ再現できません。
本当に「あなたの思い通りのデザイン」にしたい場合、一体どうしたらよいのでしょうか。答えは簡単です。自分でプログラムを覚えればいいのです。答えは簡単ですが、プログラムを覚えるのは簡単ではないですよね。しかも、デザインを思いついたとしても実際に表現できるかどうかがわからない。
それなりのデザインを簡単に表現できるのが「有料テーマ」というわけです。ただし、有料テーマは万能ではありません。そのテーマごとに得意なデザインの方向が決まっています。必ずしもあなたの理想のデザインになるとは限りません。
この記事では、無料テーマ「Cocoon」を使用してオリジナルカスタマイズしているお洒落なサイト達を紹介していきます。実際にCocoonでカスタマイズされているサイトを参考に、あなたもCocoonでデザインカスタマイズに挑戦してみましょう!
目次
Cocoonデザインサイトを募集
2022年12月に、Cocoonのお洒落サイトを募集しました。
CSSを駆使してデザインをおこなっていたり、配色をこだわって決めているお洒落サイトに限定して募集しました。よくある、応募してきた方を全部載せる募集と違い、デザインにこだわったサイトが集まってくれました!
こちらの画像はスクロールでサイトのトップページが見られるようにしています。アニメーションなどは表示されません。またフルスクリーンショットのため、デザインが崩れている箇所があります。実際のサイトに飛んで本当のデザインの良さを確認してくださいね。
では、早速ご紹介していきましょう。
プログラムを駆使してCocoonに見えないサイト

HTMLやCSSを駆使して、よくある「Cocoonっぽさ」を消したデザインサイトたち。私が知っているCocoonサイトのほとんどはCocoonの域をでず似通っていました。
しかし、今回デザインサイトを募集して驚愕しました。見たこともないようなお洒落サイトの数々。まったくCocoonとわからないサイトが多くあったのです。
逆に言えば、知識とアイデアがあれば、ここにあるサイト達のようなメディアはCocoonで作れるということ。
さぁ、Cocoonカスタマイズの世界に足を踏み入れていきましょう。
koikenote
\スクロールしてね!/
koikenote https://koikenote.com/
落ち着いた配色に、味のあるイラスト。トップページの配置バランスも良くの参考にするのにぴったりのサイトですね!
Turicco
\スクロールしてね!/
Turicco https://turicco.com/
まったくCocoonに見えないですね(汗)12月時点では、トップページに雪が降るカスタマイズがされていて、とても良い雰囲気でしたよ〜。
Turiccoがお洒落な理由はこちら
2023年1月に早速リニューアル!
SWELLカスタマイズで有名な、クロード鰥夫さんが作成したカスタマイズ「うねうね」。それを、なんとCocoonで再現してしまいました!これは、発想になかった。やれるとわかれば、大人気になりそうですね。
クロード鰥夫氏による、「SWELLのうねうねカスタマイズ記事」はこちら
POINT OF VIEW 略して、ポイビュ…
SVGモーフィングで「流体シェイプ」をウネウネさせる – SWELLカスタマイズ – POINT OF VIEW 略して、ポイ…
こんなSWELLユーザーに読んでほしい! SWELLの「境界線の波形状」を使ってデザインしている流体シェイプに動きを加えたいSVGモーフィングについて知りたい SVGモーフィング… Mammy’s Easy Life
\スクロールしてね!/
Mammy’s Easy Life https://momomammy.com/
優しいメインビジュアル。ヘッダーメニューもアイコンつきで可愛い。サイト型にシンプルにまとめられています!
イカタビ
\スクロールしてね!/
イカタビ https://www.ikatakoblog.com/
しゃけさんの運営するブログが、2023年1月に早速リニューアル!海外旅行をテーマとするブログに生まれ変わり、デザインも一新されました!
【旧ブログ】社会人のオランダ研究留学
\スクロールしてね!/
まるでお洒落雑誌のようなレイアウト。アイテムが下部からフェードインしてくるアニメーションを使って動きをだしていますね!
I’ll go simply
\スクロールしてね!/
I’ll go simply https://illgosimply.com/
背景をスクロールで見せる処理をうまく活用。ここで見るより実際にサイトに行った方が綺麗なのでぜひ訪問してみてくださいね。
ユルリトラボ
\スクロールしてね!/
ユルリトラボ https://yururitolabo.online/#new
これはまるでSWELLのメインビジュアル!Cocoonでここまで似せるとは素晴らしい。紙吹雪が舞うアニメーションも素敵ですね。
ぴよたんブログ
\スクロールしてね!/
ぴよたんブログ https://piyotan.blog/
アニメーションを少しだけ使用しているのが効果的。色合いやデザインもよく考えられていますね。
助産師きーまのブログ
\スクロールしてね!/
助産師きーまのブログ https://www.reo0309.com/
シンプルに配色してオリジナリティをだしていますね。
リメイーナ
\スクロールしてね!/
リメイーナ https://meinadiary.com/
柔らかい印象でまとめられた素敵サイト!タイトルがフェードインしてくるのもいいですね。
ワーママエール
\スクロールしてね!/
ワーママエール https://noji-diary.com/
アニメーションを入れたり、可愛いフォントを使ってサイトイメージを作っていますね。画像を効果的に使ってお洒落です!
好きなモノと北国の日々
\スクロールしてね!/
好きなモノと北国の日々 https://kotori-pata.site/
メインビジュアルを少し淡く配置して配色のイメージを合わせています。小鳥が可愛い。
シチミカメラ
\スクロールしてね!/
シチミカメラ https://shichimicamera.com/
カメラのショップサイトのようなデザインに仕上がっていますね。メインビジュアルにボタンを設置したり、カテゴリーをアイコン化してすっきりしたデザインになっています。
キラペット.com
\スクロールしてね!/
キラペット.com https://kirapetto.com/
Cocoonのデザインカスタマイズといえばキラさん!まったくCocoonっぽさが残ってない、お洒落デザイン。至る所に工夫が凝らしてあります。カラムが浮いて影がついているのが好きです。
kenchico生活力
\スクロールしてね!/
kenchico生活力 https://kenchico.com/
クックパッドアンバサダーのkenchicoさんのサイト。写真もお上手で、画像のこだわりが凄い!CSSなどを駆使して、Cocoonっぽさを消しています。フェードインなども使っているのでぜひ本物のサイトも訪れて見てほしいです。
Cocoonのデザインを活かしたサイト

Cocoonには「スキン」という機能があります。配色や見出しデザインなど、あらかじめ用意してある組み合わせを使って簡単に変化することができます。
この項では、その「スキン」を活用してお洒落にしているサイトをご紹介していきます。
ゆとりまいんど
\スクロールしてね!/
ゆとりまいんど https://yutorimind.com/
使用スキン Veilnui Simplog_(amber)
綺麗で大きなひまわりのヘッダーが特徴的。サイトカラーもひまわりのオレンジに合わせて統一感がでていますね。
BAUM RING
\スクロールしてね!/
BAUM RING https://baumring.net/
※実際のサイトでは、右からサイドバーがスライドしてきます。
暮らしにピース
\スクロールしてね!/
暮らしにピース https://kurashinipeace.com/
ズボラ暮らブ
\スクロールしてね!/
ズボラ暮らブ https://riinijiiro.com/
使用スキン Momoon
上手にサイト型に挑戦されていますね!ヘッダーもシンプルかつ効果的で素敵です。
すみこのくらし
\スクロールしてね!/
すみこのくらし https://sumiko-kurashi.com/
使用スキン イノセンス
スキン使用を思わせない、色使いやデザインですね!アイキャッチも統一してあるので、サイトイメージの向上に役立っています。
がじゅまるパパの自分育成日記
\スクロールしてね!/
がじゅまるパパの自分育成日記 https://usk-blog.com/
使用スキン イノセンス
ホワイト&グレーで統一されていて清潔感がありますね!
キベマンションの住人たち
\スクロールしてね!/
キベマンションの住人たち https://www.kibems.com/
色で統一感をだしていますね。ピックアップバナーもお洒落。
Cocoonでデザインカスタマイズする理由

デザインカスタマイズをプログラムを使って行うのであれば、Cocoonが最適でおすすめです。
有料テーマを使えばもっと簡単では?と不思議に思われるでしょう。有料テーマは独自のデザイン機能がたくさん実装されています。機能が多ければ多いほど、あなたが実装したいデザインの邪魔になる場合があります。自身でデザインカスタマイズする場合は、なるべく機能の少ないオーソドックスなテーマで始めるのがよいでしょう。
Cocoonなら無料で、CSSなどのプログラムとの相性も良好。はじめてのオリジナルデザインカスタマイズにおすすめのテーマです。
CSSやHTMLの基礎を安価に学びたい方におすすめ! >「WPHack」
プログラムを覚えるのは無理!それでもお洒落にしたいなら有料テーマを

ここまで、Cocoonの素敵サイトをみてきて、「私にはこんなの作れない!」と感じた方は有料テーマを使用する方がよいかもしれません。あなたの理想に近いデザインの有料テーマを使えば、比較的簡単にお洒落なサイトが作ることができます。
ここでは、デザインの趣向が違う、ふたつの有料テーマをおすすめしておきますね。
柔らかい印象なら「SANGO」
SANGO公式柔らかい色使いが特徴的なSANGO。開発やアップデートも活発に行われているテーマです。ユーザー間での交流なども行われていて、今一番おすすめするテーマの一つです。
SANGO公式ページはこちら
カッチリしたイメージなら「SWELL」
SWELL公式2つ目は、私が日頃からおすすめしているSWELLです。SWELLの最大の特徴は、オリジナルブロックなどによる快適な操作性。もちろん、デザインおいても活かされており、サイト型のトップページも本当に簡単に作れてしまいます。
価格は高めですが、ぜひご一考ください。
もっとSWELLを詳しく知りたい方はこちら
Cocoonでもお洒落サイトが作れる

この記事であなたに伝えたかったことはひとつ。「Cocoonでもお洒落はできる」ということ。ブログ界隈では、まるで有料テーマでないとお洒落にできないというような風潮で溢れています。それは、プログラムの知識がない方の場合です。また、インフルエンサーによる印象操作かもしれません。
あなたが今後、ずっとCocoonを使っていくつもりなら、ぜひ、プログラムを覚えることに挑戦することをおすすめします。あなたのサイトがお洒落になるだけでなく、ウェブデザインの知識をおぼえていくことができるからです。
ブログとともに運営者であるあなたも成長できるなんて、とても素敵なことだと思いませんか?
推奨デザインツール
当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。
あわせて読みたい
【CanvaPRO】有料プランでもっと快適・便利に【比較】
Canvaをお使いのあなた。写真やイラスト素材を選ぶときに、ほとんどが有料のマークが付いていてイライラ…こんな経験していませんか? 有料のCanva Proにすれば、このイ… Canvaを詳しく知る ➤
おすすめWordpressテーマ
私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。
SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。
あわせて読みたい
SWELLを2年使った感想を本音レビュー【WordPressテーマ】
お洒落なブログを作りたい─あなたはそうお考えではないですか? お洒落にするにはデザインセンスが必須。確かにそういうところもあります。なら、デザインのセンスがな… SWELLを詳しく知る ➤

お気軽にコメントください