【WEBサイト制作実績】

当記事では、無料テーマCocoonと有料テーマSWELLで実際に制作したWebサイトの制作実績をご紹介します。

無料Cocoonテーマ、有料テーマSWELLのそれぞれの特徴もご説明します。

Cocoonで制作したサイト

SWELLで制作したサイト

　

無料テーマCocoonでサイトを整えた裏側

最初にご紹介した「サツママ育自手帳」は無料テーマのCocoonを使って作成しています。

サイトの見た目よりも記事に注力をしたい場合はCocoonで十分です。

ただし、見た目を整えるにはcss、ショートコードが必要になります。

（見た目をそれほど気にしなければ必要ありません！個人ブログやアフィリエイトサイトにはCocoonが良く使われています。）

プログラミング用語が出てきた瞬間、なんか難しそうな雰囲気になりますね。

では実際に、こちらのサイトのフロントページの裏側をお見せします。

さらに、一覧記事のサイズを整えるためにCSSを編集します。

このように、ショートコードとCSSを組み合わせてできたフロントページがこちら。

cocoonで見た目を整えるには、調べることがたくさん出てきます。

ですが、けっこう鍛えられ、試行錯誤できるので楽しくもあります。

cssに慣れれば、それなりに自由に表現できます。

有料テーマSWELLでサイトを整えた裏側

SWELLではCSSやショートコードはほぼ使わずに見栄え良くできます。

また、SWELLオリジナルの機能も充実しています。

実際に筆者がcocoonとSWELL両方を使ってみて、特に良かったSWELLの機能を２つご紹介します。

スマホ画面でのカラム横並び表示

例えば、フリーランス様のサイトのスマホ画面。

このように、カラム（横並び機能）をスマホで２つ横並びに表示させるのは、SWELLならではの機能です。Cocoonではできません。

Cocoonでは、PC上では横並びにできますが、スマホはどうしても縦並びになります。

SWELLだと、ここにワンクリックするだけで、横並びにすることができます。

　

※補足※

ちなみに、よくよく見ていただけた方はお気づきかもしれませんが、

Cocoonでもスマホで横並びになってる個所もあります。

①は「おすすめカード」という機能です。

表示場所が固定で、ヘッダー下になります。

ページの途中に挿入することはできません。

　

②は「カルーセル」という機能です。

「おすすめカード」同様、表示位置は固定です。

　

こちらは記事の表示される大きさを50%に設定しているため、このように表示されます。（上記のCSSです。）

フルワイド機能で表現が自由自在

フルワイドの機能を使って、表現したい項目ごとに背景の色を変えたり、画像を挿入したりできます。

フロントページを充実させて伝えたいことを整理できるので、読者の離脱を減らせます。

この機能は、とても多用しています。

まとめ

フリーランスや企業様がサイトを作る場合は、個人的にはSWELLが断然おすすめです。

後からインストールもできますが、使用しているブロックエディタが異なる為、記事を一つ一つ修正する必要があります。

サイトを作る目的がはっきりしているのであれば、最初からSWELLにしておいた方がいいです。

　

「これから趣味でブログを始めてみたい」「アフィリエイトブログを作りたい」という方は、Cocoonで全く問題ありません。

凝った見た目に拘らなければCSSはあまり必要ありません。

　

どちらのテーマもとても優れています。

現に、当サイトは無料テーマのCocoonを使用しています。

テーマ選びの参考になれましたら幸いです。

WordPressでお困りのことがありましたら、近々下記のサービスを開始予定ですのでご相談ください。

詳細はこちら。