コーポレートサイトとは、企業や団体が自社情報を公開し、ブランドイメージを向上させるために運営するWebサイトです。会社概要、製品やサービスの紹介、採用情報、ニュースリリースなどが掲載されており、企業の認知度を高める目的があります。
WordPressの無料テーマ「Cocoon」(コクーン)で作られたWebサイトのうち、コーポレートサイトの参考になりそうな事例をまとめました。
(※ 参照:WordPressサイトの事例を確認できるサイト「WP-Search」)
【10の事例】Cocoonで作ったコーポレートサイト参考例
学校法人 鹿児島純心女子中・高等学校
グローバルメニュー(画面上の案内メニュー)は、コーポレートサイトらしいオーソドックスな作り。サイト設計として面白いのが、「入試情報」や「活動報告」などがnoteにリンクされている点です。noteはWordpressよりハードルが低いので、各部署の担当者はnoteで記事を書いているのでしょう。
トップページは、プラグイン「Elementor Website Builder」(エレメンター ウェブサイト ビルダー)で作られています。このプラグインはCocoonと相性が悪く、使いこなすのが難しいので、知識のあるかたがトップページを作成したと思われます。
東京女子医科大学病院 臨床工学部
サイドバーが左に設置されている以外は、Cocoonらしいシンプルなサイト。WordPress初心者でもじゅうぶんに作成可能で、参考になるサイトです。
株式会社M・K・G
![株式会社M・K・G、コーポレートサイト](https://pasonoob.com/wp-content/uploads/2024/06/%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BEM%E3%83%BBK%E3%83%BBG.jpg)
サイドバーを非表示にした1カラムは、企業サイトらしいデザインです。
ただ、大きな画像をベースにしたページ構成や質の高いオリジナル画像を見ると、プロのホームページ制作会社が入っていると思われます。
さくら咲株式会社
寝屋川市にあるグループホームを運営する会社のコーポレートサイト。全体が「桜色」で統一されており、温かみが伝わってくるデザインです。
サイドバーや関連記事にあるアイキャッチ画像がふわっと浮かび上がってくる演出は、プラグイン「WP-Slimbox2」を使用しているものと思われます。
チャームデザイン(株式会社つたえる)
熊本にあるホームページ制作会社の企業サイト。無料テーマのCocoonでもここまでできる、という見本になるWebサイトです。
文字が浮かび上がってくる演出は、プライグイン「Slider, Gallery, and Carousel by MetaSlider」だと思われます。
株式会社富士コンプレッサー製作所
建設工事などで活躍するコンプレッサーを製作する会社のWebサイト。各項目によってページ構成を変えており、回遊率を高める(他のページを読んでもらう)ために考えて設計されています。
トップページの写真がスライドする機能は、プラグイン「Slider, Gallery, and Carousel by MetaSlider」を使っているものと思われます。
玉鈴醤油株式会社
福岡県にある、老舗の醤油メーカーのWebサイト。
このサイトを見て、Cocoonで作ったとは普通は思わないでしょう。明らかに、Webサイト制作会社によるプロの仕事です。トップページのブロックを組み合わせたようなページ構成は、おそらくプライグイン「プラグイン「Elementor Website Builder」(エレメンター ウェブサイト ビルダー)によるもの。
また、インスタグラムを表示させるために、プラグイン「Smash Balloon Social Photo Feed」を使用しています。
ベアリーズ株式会社
![ベアリーズ株式会社、Cocoon](https://pasonoob.com/wp-content/uploads/2024/06/%E3%81%B9%E3%82%A2%E3%83%AA%E3%83%BC%E3%82%BA%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE.jpg)
インターネット通販をあつかうベアリーズ株式会社のコーポレートサイト。
通販のメインサイトはWordPressとは別のCMSで作られていますので、サイトの役割によってシステムを変えているのがわかります。トップページの写真が入れ替わるスライド機能は、プラグイン「Smart Slider 3」によるものだと思われます。
株式会社ケンオウ
新潟県にある、空調や給排水設備の修理をおこなうケンオウのWebサイト。
画像をWebP形式に変換し、表示速度をおさえるプラグイン「WebP Converter」を使用しているものと思われます。社名のロゴで使っている「青」と「赤」をベースカラーに使っています。
「青」と「赤」をデザインで使い分けるのは難しいので、プロのサイト制作会社に依頼していると思われます。
プラージュボーテ
エステサロンから生まれたスキンケア化粧品の販売サイト。
こちらも、Cocoonで作られたとは信じられないプロ仕様のデザイン。ホームページ制作会社が独自にカスタマイズしてものと思われます。インスタグラムを表示させるために、プラグイン「Smash Balloon Social Photo Feed」を使用しています。
Cocoonで作ったコーポレートサイトに、よく使われていたサーバーとプラグイン
レンタルサーバーは、エックスサーバーかさくらインターネット
この記事を書くにあたって、Cocoonで制作されたコーポーレートサイトや行政書士事務所のサイト、財団法人のサイトなどを調べました。
多くのWebサイトで使われていたサーバーが、エックスサーバーかさくらインターネットでした。レンタルサーバーは、ほぼこの二択でした。
エックスサーバー経由でWordPressの「簡単インストール」に登録すると、Cocoonをインストールした状態でWordPressサイトを開設できます。
Cocoonでサイドバーを非表示にする手順
「ダッシュボード」より、「Cocoon設定」をクリックします。
![Cocoon設定、サイドバーの非表示、コーポレートサイト](https://pasonoob.com/wp-content/uploads/2024/06/cocoon%E8%A8%AD%E5%AE%9A.jpg)
Cocoon設定の「全体」をクリックします。
![Cocoon設定、サイドバーの非表示、コーポレートサイト](https://pasonoob.com/wp-content/uploads/2024/06/cocoon%E8%A8%AD%E5%AE%9A%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC.jpg)
画面を下にスクロールすると、「サイドバーの表示状態」という項目があります。
「全てのページで非表示」にチェックを入れると全ページが、「フロントページで非表示」にチェックを入れるとトップページのみ非表示になります。
![Cocoon設定、サイドバーの非表示、トップページのみ非表示](https://pasonoob.com/wp-content/uploads/2024/06/cocoon%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E9%9D%9E%E8%A1%A8%E7%A4%BA.jpg)
設定を変えたら、画面下にある「変更をまとめて保存」をクリックします。
コーポレートサイトによく使われていたプラグイン
- Akismet Anti-spam・・・スパム対策
- Contact Form 7・・・お問い合わせフォーム
- TablePress・・・表を作成
- Smart Slider 3・・・写真や画像のスライド
- Elementor Website Builder・・・「ペライチ」のようにノーコードで独自のデザインを作れる
「Elementor Website Builder」はオリジナリティの高いサイトを作れますが、Cocoonとの相性が悪いため、使いこなすにはかなりの知識が必要です。