MENU

著者

どんぐり所長

Nobilista公認バッジ

当サイトはリンクフリーです

当ブログ内の記事本文や図解等は、以下の注意事項を守っていただければご自由にお使いいただいて結構です。

【注意事項】

  • 引用元として当サイト名を記載の上、対象記事へリンクしてください。
  • 添削記事などの紹介者のアイコンは転載不可です。

ご不明な点があれば、twitterのダイレクトメールまでお願い致します。

愛用 順位チェックツール

オリジナルグッズ購入

👉 今イチオシのクラウド型 順位検索ツール【Nobilista】愛用レビュー!

Cocoonでもここまでできる!お洒落なデザインカスタマイズ集

「有料テーマじゃないとお洒落にならない」。あなたはそう考えていませんか?実際はそうではありません。

お洒落にデザインするためには、「知識」と「センス」が必要です。知識とは「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月に早速リニューアル!

どんぐり所長
どんぐり所長

Cocoonでウネウネが…!これは凄い。

SWELLカスタマイズで有名な、クロード鰥夫さんが作成したカスタマイズ「うねうね」。それを、なんとCocoonで再現してしまいました!これは、発想になかった。やれるとわかれば、大人気になりそうですね。

クロード鰥夫氏による、「SWELLのうねうねカスタマイズ記事」はこちら

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にすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。

Canvaを詳しく知る

おすすめWordpressテーマ

私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。

SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。

SWELLを詳しく知る

トップページへ戻る

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

コメントする

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

目次