こんにちは、第 3 事業部の永田です。
この度、9 月 11 日にコーポレートサイトをリニューアルしました。
Top ページ | イースト株式会社
さて、9 月にはデザイン室の M さんからデザイン面でご紹介いただきました。
コーポレートサイトをリニューアルしました！
今回は開発の面から、リニューアルにあたっての感想や工夫点などをご紹介します！
製作手順
ざっくりと以下のような流れで実施しました。
このうち、★ マークが主に開発側の作業でした。
キックオフ
↓
★ 要件定義：CMS の選定やサイトに必要な機能など洗い出し
↓
ページのデザイン
↓
★ どのページのどの部分を CMS で管理するか打ち合わせ
↓
ページのコーディング
↓
★ フロントエンドの実装
↓
★ データ移行に関する説明会
↓
データ移行
↓
動作・表示の確認
↓
★ 公開！
要件定義
サイトの規模や価格、必要な機能等の観点から、今回は CMS に microCMS を利用することになりました。
また、フロントエンドのフレームワークは軽量でシンプルな Astro を利用することになりました。
microCMS にして良かった点
- シンプルで使いやすい
- 国産のヘッドレス CMS
- SaaS
まず、microCMS は開発の面でもかなり使いやすかったです。
国産なのでドキュメントも日本語でわかりやすくまとまっており、開発していて「これってどういうことなんだろう」と思うことが無かった気がします。
機能もシンプルで、データ構造を定義して入力したら API になるのでデータをそこから取得する、というような感じです。
また、ヘッドレス CMS なのでフロントエンドと分離していて、フレームワークや構成を自由に決められます。
セキュリティ的にも、Web サイトの置き場所とデータの置き場所を分けられるので、ページを静的に生成してしまえばかなり堅牢になると言えます。
そして SaaS なのでサーバーの管理も不要です。
ということで、ほとんどフロントエンドのみに集中できました！
他の CMS との比較
イーストでは、microCMS 以外にも Sitecore という CMS を利用して開発しています。
microCMS と比較すると、Sitecore は多機能で大規模なサイト・アプリ向けです。
コンテンツの数がとても多かったり機能を拡張したいような場合は、Sitecore が向いていると言えます。
一方でコンテンツ数が数千～ 2, 3 万程度の比較的中小規模のサイトで、費用を抑えて始めたい場合は、microCMS が使いやすくて合っていそうです。
他にも、有名な CMS といえば Wordpress もあります。
豊富なカスタマイズ性、高いシェア率などが Wordpress の強みです。
その分、脆弱性など気を付けるべきことや導入の手間などもあります。
それと比べると microCMS は素早く始められ、セキュリティ的にも強いと言えます。
その他詳しい比較については以下の記事もご覧ください。
CMS 比較｜イースト株式会社
どのページのどこを CMS で管理するかを設計
デザインをいただいてから、サイトの構成やデザインを基に miro を使ってパーツ分けをしました。
そしてそれらを CMS で管理するかどうか分類し、管理するものはどのようにするかを設計しました。
工夫した点
API の数の制限について
microCMS を利用するにあたって、プランにもよりますが API の数に制限があり、それを超えると追加料金が発生します。
なので以下のような観点で、ページを CMS 上で管理するかどうか分類しました。
- 企業情報など変更が稀なものは管理せずフロントエンドに静的なページを作成する
- カテゴリのような選択肢は、できる限り固定にしてセレクトフィールドにする
- ページ階層が多いもの（弊サイトではサービスや製品）はサービス名や製品名、サブページ名のフィールドを設けて、API を 1 つにする
特に microCMS では構造上、子ページ孫ページといったように階層が深くなるコンテンツが苦手のようです。
今回はサービス名やサブページ名を入力するようにしましたが、コンテンツ参照フィールドで親ページや子ページを指定する方式でも良さそうです。
他には、キーと値のみを持った汎用的な API を 1 つ作るのも良いかもしれません。
汎用パーツについて
お知らせや導入事例のメインとなる箇所は、コンテンツの編集者が自由にパーツを組み合わせて作成できるようにしています。
編集のしやすさとデザイン統一の観点から、それぞれのパーツのフィールドの数をなるべく少なく、リッチエディタも使わない機能は制限しています。
例として、このような感じでカスタムフィールドにした汎用パーツを、繰り返しフィールドに設定してページを作成します。
感想
全体を通して、microCMS も Astro も開発にほとんど問題ありませんでした。
かなり好感触だったので、個人的にも今後も推していきたいです！
また、ツールや拡張フィールド等、もっと使いやすくすることもできそうです。 こちらも調査、研究していきます。
ちなみに、microCMS には公式の MCP サーバーがあります。 ドキュメントの MCP サーバーもありますし、AI との開発もスムーズに進みそうですね。
最後に、デザイン室をはじめ各部署に多大な協力をいただき無事に公開できました。 この場をお借りして、改めてお礼申し上げます。
