ヤマハナ様は、愛知県豊田市のリフォーム会社さんです。 a-blog cms がVer.1系の頃（2012年）から、長くa-blog cmsでWebサイトを運用されています。

2019年にリニューアルする際には、2,000件以上あるリフォーム事例を損なうことなく、リニューアルされた事例ページを制作することができました。 ここではリニューアルした内容の一部と、長く運用するWebサイトにおけるa-blog cmsのメリットについて紹介します。

旧コンテンツの流入を損なわず、新URLヘリダイレクト

Webサイトを長く運営していると、サイト構造の変更によりURLにも変更が必要になるケースがあります。 ヤマハナ様のWebサイトにおいても、リニューアルにて事例コンテンツのURL変更が必要になりました。 2,000件以上あるページのリダイレクトが必要になりましたが、旧コンテンツの流入を活かしたままリニューアル完了できました。 a-blog cmsのリダイレクト機能は、URLの変更にも強いです。

入力は、表示画面の並び順通り

Webサイトの運営者さんが入力する「管理画面」を、a-blog cmsで簡単に設計・制作できました。 特に事例コンテンツは入力項目が多いため、使いやすい設計にしたいと考えていました。 a-blog cmsは管理画面の制作がしやすく、変更もスムーズです。 今回のリニューアルでは、表示画面の並び順・レイアウト通りに、管理画面の項目を配置できました。

入力しやすい順番・レイアウト

入力不要な情報は、項目ごと非表示に

記事の入力画面にてデフォルトで付いている「タグ」や「日付」項目も、簡単に非表示にできます。 さらに更新ユーザーの情報と紐付けて、入力を省力化することも簡単です。 たとえば更新ユーザー「鈴木さん」がつくったページは、当然「鈴木さんが担当の事例」になります。 リニューアル前は、担当者を毎回選択する必要があったのですが、リニューアル後は自動的に「担当者：鈴木」と紐付くようになっています。

担当スタッフの入力は省力化

Webサイトを接客ツールとしても利用

クライアント様はWebサイトを情報発信だけではなく、接客ツールとしても利用されていました。 たとえばご来店いただいたお客様に、これまでの事例をWebサイトで紹介しながら接客する･･･といった使い方です。 そうした利用方法をお聞きしていたので「ご来店時のお楽しみ機能」をクライアントさんへ提案しました。

https://www.yamahana.com/case/yane/entry-2202.html

上記キャプチャ画像「屋根リフォーム、ここだけの話」内にて「続きは店頭で」部分が、店頭での接客時には表示される機能です。 CMSのカスタマイズとしては、ログイン時と非ログイン時で情報の表示を分ける機能を使いました。 伝え方に気を遣いたい業界知識や、個別のポイントなど、繊細な部分はクローズにしつつも、各種ポイントを記録でき、新入社員さんへの教育にも役立てていただけそうです。 こうした機能を、a-blog cmsならPHPの知識がない制作者でもすぐにプロトタイプで試し実装できました。

基本テンプレートを使って、合理的に制作

テンプレートの継承機能を使うことで、自社に都合の良い基本テンプレートを用意できます。 Web制作会社と一口にいっても、規模や、求められる価値は様々かと思います。 弊社の場合は「まずクイックに作り、1年かけて改善していく」ような案件が多数なので、案件のありようにあわせた基本テンプレートを用意しています。 ヤマハナ様のWebサイトでも、ベースは弊社基本テンプレートを使い、必要な部分を別途カスタマイズしました。

自社の基本テンプレートで、画像の出し分けや、トラッキングに対応

文字装飾の仕方も、簡単にカスタマイズ

プロトタイピングの時は、ささっと色を決めて制作

こうした基本テンプレートは、CMSの継承機能を使うことにより、CMSのアップデート時にも大きな労力なく対応できます。 長く使っていくWebサイトで、破綻せずに運営できています。

Web担当者の運用・管理面での利便性向上のためのa-blog cmsという選択肢

今回、以下のような目的で、リーンロゼショップサイトのリニューアルのご依頼をいただきました。

• Web担当者の運用・管理面での時間工数の低減
• 購買年齢層が40代、50代と高めになってきているので、将来を考えて30代を含む購買層の若返りを図るべく、デザインの改善をしたい
• 店舗への来店促進

リニューアル前のWebサイトでは、管理画面の設計もデザインも悪くない状態でしたが、導入されていたCMSには、以下のような課題がありました。

1. 実際の運用ではランディングページ的要素の強いイベント・キャンペーン告知が多かったにもかかわらず、デザイン性を重視した設計だったため、Web担当者がWYSIWYGエディタの中にHTML、CSSを使ってイベント・キャンペーン情報を入力しなければならず時間がかかる
2. サイトのユーザービリティが悪く、コンテンツ導線が分かりづらい
3. リーンロゼは、ブランドサイトと店舗情報のショップサイトの２つがあり差別化できてない

上記課題を受けて、以下のような改善提案をいたしました。１、２については、2018年で実施し、３については2019年で実施することになりました。

1. a-blog cmsを利用したサイトのメンテナンス性向上
2. マーケティングを意識したコンテンツ導線とデザイン改善
3. Zoho CRM Plusとの連携＆ライターによるコンテンツマーケティング

a-blog cmsを利用したサイトのメンテナンス性向上

今までイベントやキャンペーンは、WYSIWYGエディタの中にHTML、CSSを記載していましたが、a-blog cmsのユニットを利用することで多彩な表現がHTMLやCSSを使わずにできるようになりました。

以下は、上記でふれたイベント告知ページの作成画面です。 WordPressによる既存サイトではWYSIWYGエディタにHTML、CSSを記載してつくっていましたが、a-blog cmsのユニットでは、HTML、CSSを使わずに、コンテンツを積木のように重ねるだけで作成することができるようになり、Web担当者の時間工数の削減ができました。

a-blog cms導入後には、以下のようなパターンの違うキャンペーンやイベント情報を、Web担当者がHTML、CSSを使わずに作成できるようになりました。

会社の沿革についても、デザイン性を保ちつつ簡単に更新・追加できるようにカスタムユニットを作成。これによりHTML、CSSは一切使わずに、お客様側で後から情報の追加・変更を、一般的な文字入力と画像選択だけで対応可能になりました。

ショップが複数店舗あり、それぞれの店舗ごとの担当者がブログ、アウトレット情報を記載するため、各店舗ごとにログインユーザーを分けて、店舗担当者で管理・運営できるように子ブログを作成しました。

ダイレクト編集（編集したい箇所にマウスオーバーするだけで編集可能）を使うことで、ブログ、アウトレット商品情報の変更を公開時と同じ見た目でできるため、店舗担当者の利便性もアップしました。

ダイレクト編集機能の操作例

各店舗への問合せは、選択した店舗ごとに自動でメール配信先が変わるのですが、この設定は、親ブログで簡単に送信先メールアドレスを設定・変更できるようにしました。

この他にもブログとアウトレット商品を関連づける機能や、商品ページとデザイナーページを登録時に簡単に関連付けて表示できるような機能など、Web担当者側や店舗担当者側で簡単に対応できるようにすることで、情報をタイムリーに更新できるようにしました。

a-blog cmsを選択した理由

今回、a-blog cmsを選択した最大の理由としては、サイトを運営するお客様にとって運用・管理の工数削減やユーザビリティなど非常に多くのメリットがあったからです。 最近、WordPressでもGutenberg（グーテンベルグ）というブロックタイプの新しいエディタが実装されましたが、a-blog cmsのユニットでは基本的なエディタの機能だけではなく、ブロックタイプという特徴を活かした様々な機能が実装されています。　今後、多店舗対応を考えているお客様にはおすすめです。

リニューアル後、Web担当者からは「イベント・キャンペーンページの作成が簡単になり、タイムリーに情報発信ができるようになった。　店舗担当側でもブログの作成がやりやすくなった」などのお声をいただきました。

地域重視のポータルサイトを作りたい！

「いえズーム」は住宅業界の専門紙を発行する、株式会社北海道住宅新聞社が、日頃の住宅業界への取材を元に、優れたハウスメーカー・工務店を紹介しているポータルサイトです。

開設の経緯について、北海道住宅新聞社・栗原さんに当時のお話をいただきました。

更新担当者の要望を聞きながらの構築

いえズームの制作は、企画段階から更新を担当する編集部と連携し、都度ご要望を伺いながら進めていきました。 企画を形にしていくにつれ、このような機能も必要だった！と気付くことはよくあります。最初から作り込まず、プロトタイプを立ち上げて、話し合いながら構築を進めていく手法は、a-blog cmsに適しています。

編集部からは、以下のような要望がありましたが、すべてa-blog cmsの仕様内で実現しています。

• メイン地域、サブ地域での多次元分類
• 多様な掲載順（数値フィールド順、近い順、五十音順）
• 関連記事（手動で指定、同地域の記事、タグが似ている記事）
• 位置情報との連携（近くの住宅会社、近くのイベント）
• イベントの公開・非公開予約
• SEO設定

いえズームでは、トップページ以上に地域ページが重要視されており、要望の大半はこのページに導入されています。

札幌圏の住宅会社（ハウスメーカー・工務店）一覧 | いえズーム（iezoom）

いえズーム（iezoom）

導線のこだわり

（１）ルール機能による変更

編集部側で特にこだわりがあったのが、デスクトップ・スマートフォンそれぞれの導線でした。

本文以外のモジュールの注目度は、デスクトップの２カラムレイアウトでは、サイドバーの先頭が最も高くなります。一方で、スマートフォンでは本文の直下が高くなります。 このため、a-blog cmsの「ルール」機能を活用し、訪問したときの端末によってモジュールの配置を変更し、サイト内のスムーズな回遊を促しました。

「イベント」の詳細ページでは、デスクトップではサイドメニュー（画像左）先頭に「近くにある会社（Entry_GeoListモジュール）」がありますが、スマートフォンでは本文下（画像右）の「近くのイベント」の下へ移動しています。

（２）関連記事カスタムユニット

公開後、コンテンツが増えるに従って、「本文中に関連する住宅会社や記事の情報を掲載したい」というご相談をいただきました。

住宅会社名や記事タイトルを選択するだけで情報一式が表示されるカスタムユニットを作成したところ、要望を満たせただけではなく、このユニットを活用した「特定のテーマに沿ったまとめ記事」も簡単に書けるようになりました。

編集を補助するカスタマイズ

いえズームにログインすると、ほぼすべての記事に「編集ボタン」がついています。 ポータルサイトでは、コンテンツの公開後も細かな修正が発生することがあり、できる限り少ないページ遷移で編集画面へ移動できるように配慮しています。

編集画面へ移動すると、通常は本文（ユニットを並べる箇所）の上にあるカスタムフィールドが、下に配置されています。 いえズームのコンテンツは長文となる傾向があり、「まず本文の作成に集中してから各情報を改めて入力したい」という要望を受けたものです。

編集画面の不要項目の非表示は、jQueryでDOMを操作することで実装していますが、

a-blog cmsのエントリー基本項目を「edit.html」を編集せずカスタマイズする - Qiita

Qiita

![24f3f46370df583fc0f2324f853e13f1.jpg](https://qiita-image-store.s3.amazonaws.com/0/21049/20733d6f-dd6f-72fc-5ba7-31...

Ver.2.10から管理画面で操作可能になったので、順次移行したいと考えています。

新機能の導入

「いえズーム」の制作を開始した時点では、a-blog cmsの最新バージョンはVer.2.7でした。 公開後に追加された以下の機能は有用度が高く、公開後に積極的に導入しました。現在も都度、サイトの改良を行っています。

• テンプレートの継承
• @include構文と変数渡し
• モジュールにテンプレート側から表示条件を指定（ctx属性）
• 見出し一覧表示組み込みJS（目次モジュール）

Ver.2.8からの新しいテンプレートタグは、テーマ内のテンプレートのファイル数を大幅に減らすことができました。

また「ctx属性」は、関連記事ユニットを実現できただけでなく、同地域のエントリーの表示条件に使用したことで、これまでPHPを書いて、独自のグローバル変数を作成して対応していた箇所を、PHPを使用せず実装できるようになりました。

おわりに

「いえズーム」は公開から一年が経過しました。PVが増え、道内の主要キーワードで検索結果の上位を確保するなど、順調に成長しています。

北海道住宅新聞社・栗原さんから、現在の状況についてコメントをいただきました。

株式会社家計画様は、北海道・旭川で多数の注文住宅を展開する住宅会社です。今回のWebサイトは顧客にメッセージを伝える重要な場と考え、制作にあたり「企業メッセージ」を見直すべく、ペルソナやカスタマージャーニーマップなどのUX手法を取り入れた「ワークショップ」を実践しました。

ワークショップでは、サイトのビジュアルや設計、運用面の改善点を探ることはもちろん、社員全員を巻き込みプロジェクトに積極的に参加していただいたことで、会社への所属意識の醸成という副次的効果も得られました。

魅力的な写真で住宅購入を促す「見学できる家」

家計画様は、各地で定期的にモデルハウス等の住宅見学会を開催しています。見学会の開催日や開催場所（地図など）を更新可能なことは前提としつつ、住宅の魅力を存分に伝えていただくために「カスタムフィールドグループ」を採用し、カスタムフィールドグループで手軽に写真の登録や増減をできるようにしました。

社員全員で更新する「スタッフブログ」

スタッフブログは、家計画様の社員一人ひとりの個性を活かし、ローテーション形式で更新しています。文章の入力や写真の配置方法など、基本的な更新方法はレクチャー会でお知らせしました。運用開始から現在までに、バリエーション豊かな記事がどんどんストックされています。

エントリーの編集時にアイキャッチ画像を設定できるようカスタムフィールドで構築しているので、パネル型の一覧画面での表示が可能となり、家計画様からも高評価をいただいています。

パネル型のスタッフブログ一覧画面

スタッフ紹介ページ

ブログの著者であるスタッフ様の情報は、「ブログのカスタムフィールド」で管理しています。 そうすることで、ブログとは別の「スタッフ紹介」ページで、スタッフ様の情報を一度に確認することができます。

日々の建築の様子を伝える「建築日誌」

建築中のお客様へのフォローも大切にしている家計画様。家づくりの進捗をほぼリアルタイムでWebサイトに掲載しています。更新担当になっている現場の工事スタッフ数名が、自ら所持しているスマートフォンから更新できる仕組みです。

社員全員がWebサイトを育てる

冒頭でふれた事前の「ワークショップ」から始まり、制作の過程でも「継続してウェブサイトを成長させるために、どういった情報をどのように発信するべきか」を社員様と一緒に検討するシーンが多くありました。その結果、上記のようなスタッフ全員を巻き込む様々なコンテンツが生まれ、a-blog cmsの土台のもと完成しました。