microCMSテンプレート│Nuxt.jsを使用したコーポレートサイト

Nuxt 3とmicroCMSを使ったコーポレートサイトのテンプレートを制作し、公開しました。画面と導入方法は、以下のmicroCMS公式テンプレート紹介ページでご確認いただけます。

工夫した点

Jamstack構成 + Nuxt3 + microCMS

フロントエンドにNuxt 3、コンテンツ管理にmicroCMSを採用した制作事例です。

会社案内の画面と、お知らせを更新する場所を分けた構成です。microCMSの掲載ページでは、トップ・お知らせ一覧/詳細・私たちについて・サービス・会社情報・お問い合わせ・個人保護方針を持つテンプレートとして紹介されています。

以下、主に工夫した点です。

Nuxt3（Vue.js）ベース

サイトの画面は、Vue.jsをベースとするNuxt 3で構築しました。

microCMSのテンプレート一覧に、MOTOKIが制作したテンプレートとして掲載されています。

microCMSを利用

更新するお知らせとカテゴリーはmicroCMSで管理します。画面のデザインを編集する作業と、日々のお知らせの文章を更新する作業を分けられるようにしました。

運用を始める前に、お知らせのタイトル・本文・カテゴリーを編集し、公開サイトの一覧と詳細へ反映されるまでを確認します。反映に必要な処理や待ち時間は配置先の構成によるため、CMSで保存した時点だけで公開確認を終えないようにします。

SEOに配慮

アクセス解析に加え、パンくずと構造化データを実装しました。これは実装範囲の説明であり、検索順位や流入の改善効果を測定した実績ではありません。

お問い合わせ

お問い合わせにはGoogleフォームを利用し、フォームの見た目をサイトのデザインに合わせて実装しました。

テンプレートの利用を検討する際は、掲載ページからデモと導入手順をご確認ください。フォームはGoogleフォームとの連携を使うため、導入先の設定で送信・保存・必要な通知まで確かめます。今回、デモへのテスト送信は実施していません。

自社サイトへの導入や機能の調整をご希望の場合は、お問い合わせから、掲載したい情報と更新方法をお知らせください。

導入を相談するときに決めておくこと

• 会社案内のどのページを使い、文章と写真を誰が用意するか。
• お知らせを更新する担当者と、公開前に確認する人。
• 公開先の契約・デプロイ・ライブラリ更新を誰が担当するか。
• フォームの保存先・通知先と、問い合わせの確認担当者。

2026年10月20日にmicroCMSの掲載内容を確認しました。MOTOKI制作のユーザーテンプレートとしての掲載であり、microCMSが保守する公式テンプレートとは区別してください。採用時は依存ライブラリの更新状況も確認します。