シンプルなCMS「JS CMS」とは？特徴や基本的な使い方を解説

CMSによるWebサイト制作を検討するなかで「JS CMS」の存在を知ったものの、特徴や使い方が分からない方も多いのではないでしょうか。JS CMSはWordPressなどの一般的なCMSと異なる点があるため、導入前に特徴を正しく理解しておくことが大切です。

この記事ではJS CMSのメリットや注意点、具体的な使い方について解説します。企業などでCMSを使ったWebサイト運営を担当する方はぜひ参考にしてください。

圧倒的に使いやすいCMS！見たまま編集のferret One

直感的な操作で、Webサイト・LP・フォームも作成も自分で完了！さらに、問い合わせの管理や効果測定もできてPDCAが高速に回ります。

JS CMSとは？

出典：JS CMS公式サイト

JS CMSは株式会社ピクセルイメージが開発するWebサイト構築用CMSです。オープンソースで提供されていて、商用であっても無料で利用できます。

JS CMSの特徴や導入時に知っておくべき注意点は以下の通りです。

JS CMSの特徴とメリット

WordPressなどの一般的なCMSはデータベースがあり、Webページが動的に生成されます。一方、JS CMSはデータベースを持たず、静的なWebページを構築できる点が特徴です。

JS CMSを利用する場合、次のようなメリットが得られます。

簡単に導入できる

データベースが不要なJS CMSは、サーバーにファイルをアップするだけで導入が可能です。データベースやプログラムが使用できないサーバーであってもCMSによるWebサイト制作ができます。

プログラミングの知識がなくてもWebサイトが作れる

JS CMSで用意されているWebサイトのデザイン・レイアウトは520種類です。そのため、高度なプログラミングの知識がなくても、イメージに合ったWebサイトが構築できます。

Webサイトが高速で動作する

JS CMSで作られたWebサイトはデータ容量が比較的小さく、表示速度が高速です。ページの表示速度は利便性を左右する要素で、Googleの公式サイトでも重視されていると発表されています。

また、管理画面の動作も早いため、Webサイトの制作や編集を効率よく行うことが可能です。

セキュリティのリスクが低減できる

WordPressなど、動的にページが生成されるCMSでは、システムの脆弱性が狙われる場合があります。そのため、定期的なバージョンアップやセキュリティ対策が欠かせません。

一方、JS CMSはページが静的なファイルとして公開されるため、セキュリティのリスクが低く安全に使用できます。

JS CMSは小～中規模のサイト制作に向いている

JS CMSは数ページから数百ページ程度のサイト制作に特化したCMSです。そのため、企業情報を紹介するコーポレートサイトや、商品・サービスを紹介する特設サイトを制作する場合などに向いています。

また、JS CMSで作ったWebサイトは、管理画面から簡単に編集することが可能です。コーディングに関する知識がない方でも情報の更新や追加ができるため、社内にエンジニアが居なくても管理できます。

JS CMS導入時の注意点

JS CMSを導入する場合、次のような点に注意が必要です。

数千ページ以上など大規模なサイト構築には不向き

JS CMSで制作するWebサイトは、数百ページ程度までが上限となっています。そのため、数千ページ以上など大量のコンテンツを投稿したい場合には向いていません。

ブログのように過去に投稿したページをアーカイブとして公開し続けたい場合などは、データベースを備えたCMSのほうが適切です。

会員登録やコメント投稿の機能がない

JS CMSには、ユーザーが会員登録する機能がありません。そのため、ログインしたユーザーのみが閲覧できるページなどを作成したい場合、JS CMS以外の導入を検討しましょう。

また、JS CMSにはコメント投稿機能もないため、ユーザーからのコメントを受け付けたい場合は注意が必要です。

管理ユーザーは1アカウントに限られる

JS CMSの管理画面にアクセスできるユーザーは1アカウントのみとなっています。そのため、複数のアカウントを作成し、編集権限を個別に設定したい場合は、WordPressなどのCMSを利用しましょう。

JS CMSの基本的な使い方

JS CMSを使ってWebサイトを制作する場合、公式サイトからデータをダウンロードし、レンタルサーバーなどにアップロードする必要があります。その後、管理画面にアクセスすると、ページの内容を変更することが可能です。

ここでは、JS CMSをサーバーにインストールする方法と、管理画面を使った基本的な編集方法を解説します。

サーバーへのインストール方法

まずはJS CMSの公式サイトにアクセスし、作ろうとしているWebサイトのイメージに近いデザイン・レイアウトのデータをダウンロードしましょう。

JS CMSのデータは「小規模サイト用」「中規模サイト用」「ミニマム」の3つに分かれていて、それぞれレイアウトやカラーバリエーションが複数用意されています。

出典：ダウンロード | 簡単・無料の小～中規模ホームページ向けオープンソース日本語CMS - JS CMS

「JS CMSダウンロード」を選択すると、ZIP形式で圧縮されたデータ一式の取得が可能です。

次に、FTPソフトを使ってWebサイトを構築する予定のサーバーにアクセスしましょう。そして、先ほどダウンロードしたデータ一式を解凍しサーバーにアップロードすることで、インストールが完了します。

例えば、「〇〇〇.com」のルートディレクトリにデータ一式をアップロードした場合、トップページのURLは「〇〇〇.com/index.html」です。

あるいは、ルートディレクトリに「test」というフォルダを新規作成し、データ一式をアップロードすると「〇〇〇.com/test/index.html」がトップページとなります。必要に応じてサーバー上にフォルダを作成したうえで、JS CMSのデータをアップロードしてください。

トップページのURLにアクセスし、初期設定のWebサイトが表示されていれば、サーバーへのインストールは完了です。

上の画像は「小規模サイト用」の一例のため、ダウンロードしたデータによっては外観が異なる場合があります。

もし初期設定のWebサイトが表示されない場合は、アップロード先のディレクトリが正しいか、データの抜け漏れがないかなどを確認しましょう。

管理画面の機能

JS CMSのテキストや画像の編集を行うための管理画面には、サイトのアップロード先に「/_cms/」を追加したURLからアクセスできます。

例えば、「〇〇〇.com/test/」にサイトをアップロードした場合、管理画面のURLは「〇〇〇.com/test/_cms/」です。

管理画面のURLにアクセスすると、ログイン情報の入力欄が表示されます。

初期設定のIDとPASSはいずれも「guest」です。IDとPASSを入力し「LOGIN」を選択すると、管理画面にアクセスできます。

左側にあるメニューは、すでに作成されているページの一覧です。「HOME」や「会社概要」などを選択すると、該当ページの編集画面が中央部に表示されます。

画像やテキストをダブルクリックすることで編集が可能です。例えば、「HOME」のページにある「お知らせ」のテキストを変更する際は、ダブルクリックまたは「編集」をクリックして修正を行いましょう。

今回は、「お知らせ」から「新着ニュース」にテキストを変更しました。

変更を実際のWebサイトに反映させるために、管理画面右上から「保存する」を選択後、「公開する」を選択してください。ただしロックがかかっていると変更が保存できないため、管理画面右上の「ロック」ボタンを選択して解除しましょう。

同様の手順でサイト内にある各ページの画像やテキストを変更することで、自社サイトの制作が可能です。

JS CMSをカスタマイズして使う方法

JS CMSでより詳細なカスタマイズを行いたい場合、ローカル開発環境で細かな調整を行ってから、サーバーにアップする方法が推奨されます。

ローカル開発環境を構築する方法と、カスタマイズの一例は以下の通りです。

ローカル開発環境の構築

PC上にローカル開発環境を構築すると、サーバー上にデータをアップすることなくJS CMSによるサイト制作ができます。また、ローカル開発環境で作成したデータは、サーバーにアップすることでインターネット上への公開が可能です。

ローカル開発環境を構築するためのソフトとして、Windowsでは「XAMPP」、Macでは「MAMP」などが挙げられます。

XAMPPを使用してローカル環境でJS CMSを編集する方法は次の通りです。

XAMPPの公式サイトからインストーラーをダウンロード

出典：XAMPP Installers and Downloads for Apache Friends

まずは、XAMPPの公式サイトからインストーラーをダウンロードしましょう。インストーラーを開き、メニュー画面の表示に従ってXAMPPをインストールしてください。

XAMPPの設定画面からサーバーを起動する

XAMPPが起動したら、設定画面の「Apache」と書かれた行にある「Start」ボタンを選択し、サーバーを起動しましょう。

サーバーの起動に成功していれば、ブラウザのアドレスバーに「localhost」と入力することで、XAMPPの画面が表示されます。

ローカル開発環境のディレクトリにJS CMSのデータを保存する

ローカル開発環境では、XAMPPをインストールしたフォルダにある「htdocs」というディレクトリに配置されたデータがページとして表示されます。

例えば、Cドライブの直下にXAMPPをインストールした場合、「Cドライブ/xampp/htdocs/」のディレクトリにJS CMSのデータを保存しましょう。

その後、ブラウザから「localhost/_cms/」のディレクトリを開くことで、JS CMSの管理画面にアクセスできます。管理画面の使用方法は、Webサーバー上にインストールした場合と同様です。

タグの編集によるカスタマイズ例

JS CMSの管理画面では、テキストや画像だけでなく、HTMLのコードも編集できます。JS CMSでは専用のタグを記述することで、表示内容のカスタマイズが可能です。

例えば、「default.html」というテンプレートは、「編集」ボタンを選択することで書き換えられます。

試しに、ページのコンテンツ部分にパンくずリストを表す「 {{PAGE_BREADLIST}} 」 というタグを記入し、保存したうえで公開してみましょう。

上記の編集を行うと、ページ内のコンテンツ上部にパンくずリストが表示されるようになります。

このように、管理画面からHTMLのコードを編集することで、必要な機能を追加できます。使用できるタグはほかにも数多く存在するため、詳しくはJS CMSの公式サイトを参照してください。

参考：JS CMS公式サイト

まとめ

JS CMSは簡単に導入できるシンプルなCMSです。数ページから数百ページまでのWebサイト制作に向いています。

またWordPressなどと異なり、JS CMSはデータベースを持たないCMSで、高速に動作することが特徴です。所定のファイルをサーバーにアップロードするだけでインストールできます。さらに、既存サイトの一部をJS CMSで構築することも可能です。

企業・団体のホームページやブログを手軽に構築したい方は、JS CMSの活用を検討してみてはいかがでしょうか。

関連記事

Netlify CMSで静的サイト運営を円滑化！メリットや比較項目をチェック

Netlify CMSではシンプルなデザインで、サイトの更新を簡略化することが可能です。テンプレの活用でサイトの統一感も保てるので、ホームページでのブランディング効果も期待できます。今回はNetlify CMSの特徴やメリットを見ていきましょう。

WordPressのSEOを強化するコツとは？

WordPressは導入や更新の手軽さから多くのユーザーに支持されているCMSのひとつ。しかし、ただWordPressを用いてWebサイトを作成しただけでは十分なSEO対策がなされないため、Webサイトの評価が低くなってしまいます。適切なSEO対策を学んで、Webサイトの順位を向上させましょう。