メディアサイト | 長期運用に強い国産CMS

やながわ里山農園

１. このサイトの概要

やながわ里山農園は、福島県北部にある梁川町（やながわまち）の自然農・有機農の農園です。今回は、この農園の情報発信や商品販売のためのサイトをa-blog cmsで制作しました。

２. 公式テーマ UTSUWAを利用してスピーディに制作

クレジットカード決済サービス「Square」と連携できるECサイトテーマ

このサイトは、a-blog cmsの公式テーマの「UTSUWA」を利用しています。主な機能やデザインはUTSUWAを利用し、カスタマイズが必要な部分を、UTSUWAを継承した子テーマで制作しています。

下の画像は、左がUTSUWAで、右がUTSUWAをカスタマイズした当サイトのテーマです。

記事やカテゴリー一覧を表示するモジュールも、UTSUWAが提供しているものを使いまわす事でトップページをカスタマイズしています。

例えば、トップページに表示している「栽培暦・日誌」のエントリー表示の箇所では、UTSUWAのトップページで利用されている「募集職種」のモジュールに少し手を加えて利用しています。

このモジュールはテンプレートファイルと、モジュールIDの設定を変更しています。

UTSUWAで用意されているモジュールIDの設定は、「採用情報」のカテゴリーのエントリーを表示させるようになっていますが、このテーマでは、任意のエントリーを指定して表示させるようにしています。

コードを書かないでも表示内容を管理画面から変更できるので、カスタマイズも容易でした。

また、サイトの色の変更も、CSS変数を変更することで簡単に対応できました。

３. 制作の感想と今後の展望

UTSUWAテーマは、用途に応じたカスタマイズがしやすい構造になっているため、スピーディにコーポレートサイトを立ち上げるのに適したテーマだと実感できました。

今後は、決済サービスのSquareと連携できるECサイトテーマ「Square」を活用した商品販売機能や、カスタムフィールドや拡張アプリを活用した多言語化も行っていきたいと考えています。

株式会社銭辰堂仏壇・仏具サイト

１. リニューアルの背景

株式会社銭辰堂様は仏壇・仏具の販売、葬祭ホールを運営している会社です。事業が2つあり、一度にリニューアルできないため、昨年は葬祭ホール、今年は仏壇・仏具のように段階を追ってリニューアルしました。

銭辰堂様は江戸時代に創業した老舗で、大阪市内に自社ビルで常時100本以上の仏壇を展示しています。また葬儀を行うことで仏壇を購入するお客さまもいらっしゃることから、ウェブサイト上で仏壇・仏具を売るのではなく、来店者を増やすことが目標となっています。そのため、ウェブサイトの目に見える部分はオーソドックスな作りになっています。

２. CMSを活用した最新カタログの実現

サイトリニューアルを行う中で、銭辰堂様より印刷用のカタログを作ることができないかという相談を受けました。今までは紙のパンフレットを印刷していましたが、掲載したい仏壇が変わったり、廃番になったりするため、何百部も印刷しても、使い切れないという状態が続いていました。

そこでCMS上に商品のデータを登録することで、最新のカタログをその時にプリントアウトして来店者に渡すことができるようになりました。

３. カスタムカタログの機能と実装

カタログの表示については、商品エントリーに「商品ページに表示」「カタログに表示」というカスタムフィールドを設けることで、どちらに出すかを選べるようにしています。

コラム一覧ページ

カタログには印刷用CSSを当てることで、カタログの表示を実現させています。表紙にはグローバル変数でその日の日付を、最終ページにはその他のサービスと地図・アクセスなどをまとめた画像を配置することで、紙のカタログと同じような機能を果たせるようにしました。

商品の一覧表示にはカテゴリーエントリーサマリーモジュールを使っています。添付のサンプルでは仏壇のみの表示になっていますが、その他の商品も表示させることができます。

今回の実装は単純な一覧表示で十分でしたが、特定の商品カテゴリーだけを印刷するなどのカスタマイズも可能なはずです。

カタログの印刷例

商品の一覧には管理者だけが見える一覧ページを設け、その一覧から商品のデータを編集できるようにしています。

機能的には基本的なものしか使っていませんし、ミニマムの実装で高度なカスタマイズは行っていませんが、クライアントの希望・ビジネスに沿ったものをa-blog cmsで実装できました。

４. リニューアル後の状況

お仏壇はカタログだけで売れるものではないことと、実際に来店した方への参考資料として渡すものなので、リニューアル後間も無いこともあり、売り上げが見える形で上がったわけではありません。

しかしながら、これまでのようにただ公開のみのウェブサイトではなく、さまざまな形で活用できる可能性を感じていただくことができました。それによって更新の頻度や商品の登録が進んだり、今回のリニューアル対象ではなかった葬祭ページの内容についても、社内で議論が行われ新たな要望が出るようになっています。

竹内建設

１. 進化したa-blog cmsでパフォーマンス改善

すでに別のCMSを導入しサイトを運用していた竹内建設様。今回のリニューアルにともない、新たな選択肢としてa-blog cmsを採用いただきました。リニューアルの目標は、新築住宅の集客強化と、ブランディングに合わせたサイトデザインへの大幅刷新です。まずバージョン3系になり、大きな進化を遂げたa-blog cmsの導入により、サイトパフォーマンスが劇的に向上しました。閲覧者だけではなく管理画面の動作も機敏になり、更新性も高まりました。結果、業務効率の大幅な改善に貢献しました。

２. 新築住宅の集客強化とブランディングに貢献

新築住宅の集客強化とブランディングは、競争が激しい不動産業界において重要な課題でした。私たちはa-blog cmsを選び、その柔軟性と機能性を最大限に活かし、竹内建設様のサービスに寄り添ったカスタマイズを提供しました。

カスタマイズ1：アクセス増とCV増につながるコラム

リニューアル前はスタッフが持ち回りで「スタッフブログ」を展開していました。それをアクセス増やコンバージョンの増加を目的とするコンテンツマーケティングを実現するために「コラム」をa-blog cmsで構築しました。コラムには、いくつかの特徴的な機能を実装しました。

まず、著者情報機能です。コラム記事の最後に、著者情報を明示することができます。この著者情報は、別ブログで管理された「スタッフ」の情報と紐づいています。「スタッフ」のブログでスタッフ情報を編集することで、コラムの著者情報として利用するスタッフの情報も変更することができます。正しい著者情報を表示することで、読者との信頼関係を構築し、ブランドの信頼性と専門性を向上させることができます。

コラム一覧ページ

コラム記事ページ

また、コラムの下部には、いくつかの集客目的のCV導線が自動的に挿入されるようになっております。コラムから流入したユーザーを、効率よくCVにつなげる施策を行なっています。

カスタマイズ2：豊富なカスタムフィールドで魅せるモデルハウスページへ

a-blog cmsを活用してモデルハウスを魅力的に紹介するページを生成しています。魅力的な見せ方を実現するために、a-blog cmsの柔軟なカスタムフィールド機能を多用しました。これにより、ユニークな情報や特徴を簡単に追加し、モデルハウスの魅力を最大限に引き出すことができました。しかし、カスタムフィールドの多用によって編集画面が複雑になることを避けるためにも注意しました。わかりやすく使いやすい編集画面を提供することで、スタッフや担当者が効率的に情報を更新できるようにしました。a-blog cmsの直感的なインターフェースを活用し、必要な情報の追加や編集が簡単に行えるように配慮しました。

モデルハウス一覧ページ

モデルハウス詳細ページ

より強調したいモデルハウスについては、別途構築するLPへのリンクURLを設置します。こうすることで、サイトとLPを一体化させ、ユーザーを迷わせることなく目的のモデルハウスへ誘導することができます。

カスタマイズ3：便利な組み込みjs「SmartPhoto.js」を活用した施工事例

a-blog cmsの組み込みjsである「SmartPhoto.js」を活用して、施工事例の写真ギャラリーを構築しました。この機能には、運用側と閲覧者側の両方に多くのメリットがあります。運用側のメリットは、まず簡単な画像管理です。画像のアップロードや配置をスムーズに行えるため、複雑な手順や独自のギャラリープラグインの導入をする必要がありません。また、カスタムフィールドグループを活用することで、ギャラリー内の画像順序の変更や新しい写真の追加も容易に行えます。

施工事例のギャラリー

ギャラリーの編集画面

一方、閲覧者側のメリットは、使いやすいインタラクティブな写真ギャラリーです。SmartPhoto.jsは、閲覧者は直感的に写真を操作することができます。レスポンシブデザインに対応しており、モバイルデバイスであってもフリック操作が直感的で快適に閲覧することができます。

まとめ

総合的に見て a-blog cms の豊富な機能は、運用側と閲覧者の双方にとって使いやすく魅力的なメリットを提供してくれます。運用者には簡単な管理を、閲覧者はインタラクティブなデザインに耐えうるハイパフォーマンスを享受できます。最後に、飽きることなくサイトを隅々まで見てもらえるよう、写真を「ショート動画」に置き換えた表現を行っております。ぜひ、動画になっている部分を探してみてください。