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

2023 1/29

2023-01-29

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

お洒落にデザインするためには、「知識」と「センス」が必要です。知識とは「HTML」や「CSS」といったプログラム。「センス」はデザインの案や配色を指します。どんなに良いセンスを持っていても、それを表現するプログラム知識がなければ再現できません。

本当に「あなたの思い通りのデザイン」にしたい場合、一体どうしたらよいのでしょうか。答えは簡単です。自分でプログラムを覚えればいいのです。答えは簡単ですが、プログラムを覚えるのは簡単ではないですよね。しかも、デザインを思いついたとしても実際に表現できるかどうかがわからない。

それなりのデザインを簡単に表現できるのが「有料テーマ」というわけです。ただし、有料テーマは万能ではありません。そのテーマごとに得意なデザインの方向が決まっています。必ずしもあなたの理想のデザインになるとは限りません。

この記事では、無料テーマ「Cocoon」を使用してオリジナルカスタマイズしているお洒落なサイト達を紹介していきます。実際にCocoonでカスタマイズされているサイトを参考に、あなたもCocoonでデザインカスタマイズに挑戦してみましょう！

Cocoonデザインサイトを募集

2022年12月に、Cocoonのお洒落サイトを募集しました。

【お洒落なCocoonサイト募集！】
CSSを駆使してまるでcocoon にみえないサイト。配色や画像にこだわったブログ。などなど。我こそはCocoon を愛してやまないと言う方、サイトを紹介させて頂けませんか？Cocoon のデザインサイト集にしたいと思っています。いいよーという方はリプお願いします☺️
— どんぐり所長🍀ブログデザインラボ (@donguriweb) December 27, 2022

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のデザイン集にも掲載していただいたどんぐり所長さん（@donguriweb）のトップページにも使われているうねうねをやってみました！

動いていて自分で感動してます。笑
これで私もうねらー😄 pic.twitter.com/7qEnr0kN9x
— はっちゃん@Cocoonでブログ運営中 (@hacchan_415) January 19, 2023

どんぐり所長

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

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月に早速リニューアル！海外旅行をテーマとするブログに生まれ変わり、デザインも一新されました！

【旧ブログ】社会人のオランダ研究留学

＼スクロールしてね！／

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公式ページはこちら

カッチリしたイメージなら「SWELL」

２つ目は、私が日頃からおすすめしているSWELLです。SWELLの最大の特徴は、オリジナルブロックなどによる快適な操作性。もちろん、デザインおいても活かされており、サイト型のトップページも本当に簡単に作れてしまいます。

価格は高めですが、ぜひご一考ください。

もっとSWELLを詳しく知りたい方はこちら

Cocoonでもお洒落サイトが作れる

この記事であなたに伝えたかったことはひとつ。「Cocoonでもお洒落はできる」ということ。ブログ界隈では、まるで有料テーマでないとお洒落にできないというような風潮で溢れています。それは、プログラムの知識がない方の場合です。また、インフルエンサーによる印象操作かもしれません。

あなたが今後、ずっとCocoonを使っていくつもりなら、ぜひ、プログラムを覚えることに挑戦することをおすすめします。あなたのサイトがお洒落になるだけでなく、ウェブデザインの知識をおぼえていくことができるからです。

ブログとともに運営者であるあなたも成長できるなんて、とても素敵なことだと思いませんか？

推奨デザインツール

当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。

著者

どんぐり所長

カテゴリー

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

最近の投稿