【Micro CMS】静的サイトを高く売る方法1/5【完全無料】

記事
IT・テクノロジー
はじめまして。Web制作会社で勤めています鐘倉(かねくら)と申します。
今回から5回にわたって「静的サイトを高く売る方法」というテーマで連載をしていきます。

※ここでいう静的サイトとはWord Press等のCMSを使わずHTML、CSS、javascriptで作成されたサイトを指します。

単価が上がらない...

Web制作を始められた方はまずHTML,CSSから入るかと思いますが、ひと通りコーディングが身に付いてくると直面する問題があります。
それは、「静的サイト(not CMS)」だと単価が上がらない...といった問題です。
でもHTML、CSSを使いこなせるって実はすごいことですよね。
だってHTML、CSSができればそれだけでめちゃくちゃかっこいいサイトが作れちゃいますもの。
ですが実際のところ、静的サイトのコーディングができる人は数が多いです。ライバルが多い=需要に対しての供給が多い、であれば単価が上がらないのは市場原理ですよね(汗

ですからある程度静的サイトコーディングができるようになってくると、やはりWord PressなどのCMSを覚えようかな...となってくるわけです。

そんなこんなで奮起してWord Pressを覚えたはいいものの、Word PressでのWeb制作はそれはそれで悩みが多いです。ええ、かなり多いです...涙

CMSのコスパの悪さ

自身もWeb制作会社でCMSと日々格闘していますから本気で実感しているのですが、CMSでフルのWebサイトを作成するのは実はかなりコスパが悪いです。
CMSで制作するがゆえにデザインに制約が出てしまったり、HTML+CSSだけであれば簡単にコーディングができてしまうようなことも、CMSとして全体のシステム的なバランスを考えつつコーディングするのはときに静的サイトをコーディングする何倍もの労力が必要だったりします。

また静的サイトに比べてトラブルが発生しやすく、保守がかなり大変です。HTML、CMSだけであればサクッと修正できるものも、CMSではそうもいきません。リニューアルなんて超絶大変です。

もちろんCMSとしての最大のメリットである「一度作れば誰もが簡単に編集できる」という強みはありますが、それにしてもひと通り制作し終えるまでの労力はかなりのものです...

それに実感としてですが、正直なところ一度サイトを制作してしまったら、エンドユーザーさんはそうそうサイトを編集することはありません。お知らせをたまに更新したり、メニューの金額を数ヶ月に一度更新したり、、、正直その程度です。更新や編集の頻度が少なければ少ないほど、それはCMSとしてサイトを作るメリットが享受しづらくなるということですよね。作る労力は変わりませんが、、、

であればHTML+CSS(+javascript)でスタイリッシュでかっこいいサイトを作れればどんなにいいことか(泣

ここ数年で人気急上昇!? 静的サイトとCMSのいいとこどりな「ヘッドレスCMS」

同じような悩みを持つ人は多いのでしょう、ここ数年で非常に盛り上がりを見せている「ヘッドレスCMS」というものが出てきました。

ヘッドレスCMSを使えば静的サイトとしてHTML+CSSでサイトを作成しておき、前述のように「お知らせ」とか「メニューのタイトルや金額」といった、必要最低限の項目だけをCMS化させることができちゃいます。

エンドユーザーさんは普通のCMSを使用する感覚でサイトの更新ができ、制作者側としてはコーディングにかける労力を大幅に削減することができる。こんなにありがたいものはない(涙

それに既存のWebサイトを超絶簡単にCMS化することができちゃうのも素晴らしい魅力ですね。
「現行のサイトのデザインには不満はないけれど、やっぱり更新が気軽にできるようにしたい...」そんなユーザーさんに売り込むことができますし、しかもCMS化する労力も大変少ない。まさに神!

ヘッドレスCMSの種類

ヘッドレスCMSといえば海外製のものが多いのですが、日本で開発された「Micro CMS」も非常に品質が高いです。高いクォリティでありながら、基本的な機能は無料で使うことができます。

この連載ではMicro CMSに焦点をしぼって解説を続けていこうと思います。使い方や実装方法などもなるべく丁寧に説明します。
ご安心ください、前置きだけ説明しておいて、ここぞというところで有料ブログにしたりはしません(笑

注意!APIキーを公開しない

そこでひとつだけ、注意をお願いしたいことがあります。
Micro CMSの使い方として、データをAPI経由で取得することが必要になります(これはJavaScriptを使用すれば可能です。コピペで使えるようなコードも後の連載で掲載します)。
(※PHPが使えればなお良し)
ですがJava ScriptのようにクライアントサイドでAPIを扱う場合、どうしてもソースコードにAPIキーが載ってしまうことは避けられません。それは第三者がそのAPIキーを閲覧できてしまうということを意味します。
月額制の有料プランであればそれでも問題ありません。なぜなら有料プランではAPIにアクセスするIPの制限ができるため、例えAPIキーを見られたとしてもそこでアクセスを弾くことができるからです。
(Googleが運営するFirebaseなどは同様の仕組みにより、APIキーがソースコードに載ったとしても悪用の心配はありません)

Micro CMSのAPIはデフォルトではGET(読み取り専用)のためそこまで大ごとにはならないとは思いますが、それでも悪意のある第三者がそのAPIを使って大量にデータを読み取りしたせいで、サイトにデータが表示されなくなるといったことも最悪の場合起こり得ます。

連載の第四回か五回あたりには「APIキーの隠し方」を解説する予定をしています。「静的サイトを高く売る〜」と銘打ってはいますが、その部分だけはサーバーサイドのプログラミング言語を使用せざるを得ません。が、これもなるべくわかりやすく説明するつもりです。

ロリポップなどのごく一般的なレンタルサーバーでも使用できるプログラミング言語であることを理由に、PHPを使って「APIキーを隠す」部分の実装をしようと思います。

ですのでそれまでは、APIキーを実際にうっかり公開してしまわないようご注意ください。一度公開してしまうと後からAPIキーは変更できませんので、公開する際には初めからAPIキーを隠した状態で行うことを強くお勧めいたしますm(__)m

今後の連載

第二回 Micro CMSで管理画面の設定をする
第三回 APIを使ってデータを読み込もう
第四回 APIキーの隠し方
第五回 より高いパフォーマンスで使用するための学習方法



鐘倉の提供サービスのご紹介↓


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す