「有料テーマじゃないとお洒落にならない」。あなたはそう考えていませんか？実際はそうではありません。
お洒落にデザインするためには、「知識」と「センス」が必要です。知識とは「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月時点では、トップページに雪が降るカスタマイズがされていて、とても良い雰囲気でしたよ〜。
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。開発やアップデートも活発に行われているテーマです。ユーザー間での交流なども行われていて、今一番おすすめするテーマの一つです。
カッチリしたイメージなら「SWELL」
２つ目は、私が日頃からおすすめしているSWELLです。SWELLの最大の特徴は、オリジナルブロックなどによる快適な操作性。もちろん、デザインおいても活かされており、サイト型のトップページも本当に簡単に作れてしまいます。
価格は高めですが、ぜひご一考ください。
Cocoonでもお洒落サイトが作れる
この記事であなたに伝えたかったことはひとつ。「Cocoonでもお洒落はできる」ということ。ブログ界隈では、まるで有料テーマでないとお洒落にできないというような風潮で溢れています。それは、プログラムの知識がない方の場合です。また、インフルエンサーによる印象操作かもしれません。
あなたが今後、ずっとCocoonを使っていくつもりなら、ぜひ、プログラムを覚えることに挑戦することをおすすめします。あなたのサイトがお洒落になるだけでなく、ウェブデザインの知識をおぼえていくことができるからです。
ブログとともに運営者であるあなたも成長できるなんて、とても素敵なことだと思いませんか？
どんぐり所長のおすすめツール
どこでも、どんなデバイスでも順位チェック
ブログ記事の順位を確認していますか？どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。
ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。
クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。
実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。
＼場所を選ばない快適さを体験して／
Nobilista公式サイト
当サイト推奨 デザインツール
当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ！
当サイトのデザインは、SWELLで再現可能
私はSWELLを2年使用してきました。現在４つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い。
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。
- 完全ブロックエディタ対応
- 直感で使える操作性
- 便利な専用ブロックを多数用意
- お洒落なトップページが簡単に作れる
- 最速レベルのページスピード
- 一度購入すれば複数サイトに何度でも使用可能
- ユーザーの利便性を考える熱意の運営者
- SWELLを紹介すればアフィリエイト報酬が貰える（購入者のみ参加可）
- 販売価格 ￥17,600（税込）
唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。
SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。
＼圧倒的な操作性を体験せよ／
あなたも今日からSWELLER！
お気軽にコメントください