佐藤 あゆみ
佐藤 あゆみ

necco note

neccoが制作したCMS導入実績まとめ【事例紹介】

  • Web Development

neccoでは、ウェブサイト制作時に、お客さまが簡単にページを更新したいなどのご要望に応じて、その背景や現状などをお伺いしたうえで、最適なCMSをご提案しています。

本記事では、neccoのCMSの導入実績の一部をご紹介いたします。

CMS(Contents Management System)とは

CMSはContents Management System(コンテンツ・マネジメント・システム)の略です。

従来のウェブ制作では、ウェブサイトに掲載しているコンテンツを更新するには、コードを書いて内容を変更する必要がありました。CMSを導入すると、コンテンツ管理画面から文章や画像などを入稿するだけでウェブサイトを更新できるようになります。ウェブサイト制作に関する専門的な知識を持たない方でも、ページの更新や作成が簡単に行えるようになります。ニュースやブログのように、頻繁に記事を書いて更新していきたいサイトに最適です。

用途に応じて様々なCMSが開発されていますが、世界でもっとも利用されているのはWordPressで、CMSのシェアの62.8%を占めています(2024年3月7日現在)。

W3Techsの世界のCMSシェアの図
W3Techsの世界のCMSシェア

W3Techs / Usage statistics and market shares of content management systems

WordPressについて

WordPressのロゴ

世界的に広く利用されているCMSです。WordPressでは、一般的に、「テーマ」を制作し、テーマに対してCMSのエディターでコンテンツを入れ込み、サイトを構築します。

テーマは、従来型のクラシックテーマと、新しいブロックテーマに分かれます。クラシックテーマは、これまで長くの間、WordPressで利用されてきた伝統的なテーマです。クラシックテーマでは、PHPでテンプレートファイルを制作して、レイアウトやデザインを構築していきます。

WordPressの管理画面が表示されている。
クラシックテーマの管理画面

一方、ブロックテーマは、レイアウトを構成する要素(テキスト、画像、ボタンなど)を「ブロック」として扱います。そして、ブロックのデータやスタイルの情報をテーマファイルとして保存して利用します。これにより、レイアウトを変更する場合も、コードを書かずにWordPressの管理画面からサイト全体を変更できます。

下記はブロックテーマの例です。コードを実装せずとも管理画面の中だけでレイアウトを整えてページを作成できます。

WordPressのブロックテーマの管理画面が表示されている。
ブロックテーマ Twenty Twenty-Fourの管理画面。右サイドバー内でカラム数などのレイアウト設定が可能になっている。

WordPress.org

WordPress クラシックテーマ導入実績のご紹介

アーツセンターあきたウェブサイト

アーツセンターあきたのウェブサイトの画像が並んでいる。

クラシックテーマとブロックエディタの組み合わせで構築しています。リニューアル前はクラシックテーマ、クラシックエディタとカスタムフィールドを中心に構成されており、ページ構成に柔軟性がなく、更新しにくい状態でした。移行後は、カスタムフィールドの利用を最低限に抑え、クラシックテーマとブロックエディタの組み合わせを採用し、デザインの柔軟性を大幅に向上させました。

下記はニュース詳細の管理画面と、ウェブページの表示例です。入稿画面と実際に表示されるページとの見た目の差異が少なくなり、更新しやすくなりました。

アーツセンターあきたのWordPressの管理画面が表示されている。
ニュース詳細の管理画面

ウェブページと管理画面の見た目を近づけることによって、記事の入稿時に完成系が想像しやすくなり、運用しやすくなります。

アーツセンターあきたのニュース詳細ページが表示されている。
実際のニュース詳細ページ

アーツセンターあきたウェブサイトのプロジェクト詳細はこちら

STUDIO CMSについて

STUDIOのロゴ

STUDIOは、CMS機能を備えたクラウドベースのウェブサイト作成ツールです。ノーコードで実装できるため、エンジニアでなくともサイトの修正を簡単に行えます。また、コードを書かないため、全体の工数削減につながり、構築にかかる初期費用を抑えられます。サービス提供者がセキュリティ対策やシステムアップデートを行うため、その分、月にかかる保守費用を抑えることができます。具体的には、CMSプランでは月に2,480円〜の費用でウェブサイトを維持できます(2024年3月7日現在)

デザインエディタでは、テキストや画像の設定や配置が「見たまま編集」でおこなえるほか、PCやスマートフォンなどの幅に合わせてデザインを設定できます。このように、CMSを利用していない箇所の更新も自由に行えるため、サイト全体をコードを書かずに更新したい場合におすすめです。

STUDIOのデザインエディタの画面が表示されている。
STUDIOのデザインエディタ

CMS機能を利用すると、デザインエディタで作成したテンプレートデザインにコンテンツを入れ込めます。下記画像はCMSの一覧画面の例です。複数人の同時編集にも対応しており、誰がどの項目を編集しているかもリアルタイムで判別できるようになっています。

CMSの記事とプロパティの一覧が表示されている。
STUDIO CMSの記事一覧(STUDIO公式サイトより引用)

CMSの記事編集画面では、見出しや画像などを挿入できるのはもちろんのこと、記事にコメントを入れられ、文章を推敲しやすいようにできています。

CMS記事の入稿画面。タイトルと本文や、コメントを入れた場合の表示例。
STUDIO CMSの記事詳細画面

STUDIO | ノーコードWeb制作プラットフォーム

STUDIO CMS導入実績のご紹介

ウニノミクスコーポレートサイト

ウニノミクスののウェブサイトの画像が並んでいる。

お知らせやスタッフ紹介をSTUDIO CMSで更新可能にしています。また、サイト全体がノーコードで制作されているため、その他のページもお客さまにて変更できるようになっています。

お知らせでは、カテゴリー別の記事一覧を表示できるように構築しました。

ウニノミクスのお知らせ一覧ページが表示されている。
お知らせ一覧ページ

ウニノミクスコーポレートサイトのプロジェクト詳細はこちら

ヘッドレスCMSとは

一般的なCMSは、コンテンツの作成や管理が行われるバックエンド部分に加えて、コンテンツが表示されるフロントエンド部分の表示機能も同時に担いますが、ヘッドレスCMSはバックエンド部分のみ切り離したCMSです。

従来のCMSはフロントエンドとバックエンドが一体化されていました。ヘッドレスCMSではフロントエンドとバックエンドが切り離され、API経由で同じコンテンツを表示できます。ウェブサイトやアプリなど、それぞれの目的に応じたフロントエンド開発ができます。

コンテンツ管理とフロントエンドを切り離すことで、フロントエンドフレームワークやライブラリの選択肢が広がり、ビジュアル表現の選択肢が増えます。

また、一般に、フロントエンドを介して直接CMSの管理画面にアクセスできないように構築するため、管理画面のURLを隠蔽しやすく、管理画面への攻撃を受けにくくなります。

ヘッドレスCMSでコンテンツを管理し、フロントエンドにてAstroやNext.jsなどのフレームワークを利用しつつ、VercelやNetlifyなどのホスティングサービスにデプロイすることで、静的なウェブサイトを構築します。広くJamstackと呼ばれるこの構成では、安全かつ高速に表示できるウェブサイトを構築しやすくなります。

ヘッドレスWordPressについて

通常のWordPressは、コンテンツ管理とコンテンツの表示の2つの機能を担いますが、コンテンツの表示部分を切り離して「ヘッドレスWordPress」としても利用できます。CMSとフロントエンドを切り離すことで、フロントでの表現力を高めながら、使い慣れたWordPressの管理画面で運用できます。

ヘッドレスWordPress導入実績のご紹介

ACES コーポレートサイト

ACESのウェブサイトの画像が並んでいる。

実績、ニュース、採用情報、メンバー紹介、資料ダウンロードなどの更新頻度の高いコンテンツをWordPressにて更新できるようにしています。フロントエンドフレームワークにはNext.jsを採用しています。

入力のしやすさと、フロント表示との同一性のバランスを考慮しながら、記事の編集画面を構築しました。

ACESの実績一覧ページが表示されている。
実績一覧ページ
ACESの実績詳細ページが表示されている。
実績詳細ページ

ACES コーポレートサイトのプロジェクト詳細はこちら

WORDS コーポレートサイト

WORDSのウェブサイトの画像が並んでいる。

お客さまの声、お知らせ、編集者紹介をWordPressにて更新できるようにしています。フロントエンドフレームワークにはNext.jsを採用しています。

アニメーションを採用したデザイン性の高いページはコーディングで実装しつつも、定期的に更新したいコンテンツに関しては、カスタムフィールドを用いて、簡単に更新できるように構成しています。

WORDSのお客様の声詳細のWordPressの編集画面が表示されている。
お客様の声詳細の管理画面
WORDSのお客様の声詳細ページが表示されている。
お客さまの声詳細ページ

WORDS コーポレートサイトのプロジェクト詳細はこちら

necco コーポレートサイト

neccoのウェブサイトの画像が並んでいる。

フロントエンドフレームワークにはNext.jsを採用しています。実績、ニュース、採用情報、メンバー紹介、資料ダウンロードなどの更新頻度の高いコンテンツをWordPressにて部分的に更新できるようにしています。

WordPressの機能である「再利用ブロック」なども活用し、WordPressの豊富な機能、プラグインを活用しながら構築運用しています。

neccoのWordPressの再利用ブロックの編集画面が表示されている。
再利用ブロックの利用例

necco コーポレートサイトはこちら

microCMSについて

microCMSのロゴ

microCMSは、コンテンツの作成、編集、管理を直感的に行えるヘッドレスCMSサービスです。規定の場所に文字や画像をはめ込むような、定形コンテンツの制作運用に特に向いています。管理画面の操作方法が一貫しており、バージョンアップを重ねても、サービスを開始した2019年時点からほとんど変わらない操作感を維持しており、運用者の学習コストを低く抑えられます。

microCMSの管理画面が表示されている。

microCMS|APIベースの日本製ヘッドレスCMS

miscroCMS導入実績のご紹介

GO GX メディアサイト

GO GXのウェブサイトの画像が並んでいる。

実績、メディア、採用情報をmicroCMSで更新できるようにしています。動的なCMS部分をフロントサイトとは切り離すことでセキュリティを高めつつ、豊かなビジュアル表現と両立させています。フロントエンドフレームワークにはAstroを採用しています。

GO GXのメディア一覧ページが表示されている。
メディア一覧ページ

下記はメディア記事の入稿画面です。リッチエディタを用いて、直感的に記事を入稿できるようにしています。

GO GXのmicroCMSの編集画面
メディア詳細の編集画面
GO GXのメディア詳細ページが表示されている。
メディア詳細ページ

GO GX メディアサイトのプロジェクト詳細はこちら

FiTO サービスサイト

FiTOのウェブサイトの画像が並んでいる。

ご利用ガイド、FiTOジャーナル、フィトくんの豆知識、ニュースをmicroCMSで更新できるようにしています。ヘッドレスCMSの、同一データでさまざまなメディアに配信できる特性を活かし、ニュース記事はウェブアプリケーション内でも配信しています。

ご利用ガイド記事の独自のレイアウト構成に合わせて、管理画面では「リードテキスト」と「本文」欄を分けて入力できるように構成しています。実現したい機能やレイアウトに応じて、必要な入力欄を柔軟に用意できる点が使いやすさを高めています。

FiTOのmicroCMSの編集画面
ご利用ガイド記事の入稿画面
FiTOのご利用ガイド詳細ページが表示されている。
ご利用ガイド詳細ページ

FiTO サービスサイトのプロジェクト詳細はこちら

湯沢地熱 コーポレートサイト

湯沢地熱のウェブサイトの画像が並んでいる。

お知らせをmicroCMSで更新できるようにしています。タイトル、公開日、カテゴリ、本文の入力欄をmicroCMSにて設け、ウェブサイトに出力できるように実装しています。

湯沢地熱のmicroCMSの編集画面が表示されている。
お知らせ記事の入稿画面
湯沢地熱のお知らせ一覧ページが表示されている。
お知らせ一覧ページ
湯沢地熱のお知らせ詳細ページが表示されている。
お知らせ詳細ページ

湯沢地熱 コーポレートサイトのプロジェクト詳細はこちら

おわりに

neccoでは様々なCMSを活用し、お客さまのご要望に応じてウェブサイトを構築しています。記事にて取り上げているほかにも対応可能なCMSがございます。

更新頻度が高く内容が絶えず変化するコンテンツを扱う場合はCMSの導入が効果的です。また、ヘッドレスCMSを採用することで、ビジュアル表現とコンテンツの更新しやすさを両立させられます。

neccoはSTUDIO、そしてmicroCMSのパートナー企業です。

また、私、佐藤あゆみは microCMSコミュニティの Top Contributor、また、STUDIOコミュニティのGOLDメンバーでもあり、導入時や運用時のお困りごとを広くサポートする知識を持っています。

お客さまがウェブサイトを心地よく運用できるよう、neccoではCMS選定からカスタマイズ、導入サポートまでをトータルでご提供しています。ウェブサイトの課題やご要望をお聞かせいただければ、最適なCMS活用方法をご提案いたします。ぜひご相談ください。

お仕事のご依頼・採用募集

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか?

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

  • アシスタントデザイナー
  • フロントエンドエンジニア
  • アシスタントフロントエンドエンジニア
  • エディター・ライター

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

株式会社necco ダウンロード資料へのバナー画像

(2024年4月時点)

佐藤 あゆみ

佐藤 あゆみ

Ayumi Sato

ニューヨーク生まれ。まもなく東京に移住し、1994年から2年間のオーストラリアでの生活を経て、ふたたび東京へ戻り、今も暮らす。1997年頃より趣味としてWeb制作を始め、以後も独学で学ぶ。 音楽専門学校中退後、音楽活動での成功を夢見ながら、PCパーツショップやバイク輸出入会社、楽器店など、掛け持ち含めて計20以上(?)の業種でアルバイトを重ね、ECサイトの運営管理や自社サーバの管理、プログラミングなども学ぶ。音楽活動を展開する中で、集客やフライヤー制作、プロモーションビデオ制作を行い、周辺技術を身につけるきっかけとなるも、2011年頃に区切りをつけ、ウェブ制作で生計を立てることを決意。その後は画廊やウェブ制作会社などで勤め、2014〜2022年まではフリーランスとして活動。2018年より、CSS NiteやBAU-YAなどのイベント、スクールにて登壇。2019年に「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」を出版。 趣味はガジェットいじり&新しいサービスを試すこと。

SHARE

Other Note

necco note
デザイン雑誌WebDesigning表紙写真

雑誌掲載のおしらせ | GO GXのウェブサイトが「Web Designing」4月号に掲載されました