いえズーム:北海道の住宅会社ポータル

https://iezoom.jp/

いえズーム:北海道の住宅会社ポータル スクリーンショット

制作:ウェビングスタジオ 口田 聖子

制作パートナー:
企画・運営:北海道住宅新聞社
デザイン:川原田 このみ

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

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

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

2008年に、札幌圏の住宅会社を取材記事などで紹介する『札幌良い住宅jp』というポータルサイトを開始しました。その際は、他のCMSで制作会社にサイトを構築してもらい、当社は、事例記事・写真などを制作し、アップしてサイトを育ててきました。

a-blog cmsとの出会いは、当社にとっては口田さんとの出会いとイコールです。2017年に、住宅会社のサイトを数件、口田さんにお願いし、その際非常に良い連携ができ、当社としては口田さんにお願いすればよいサイト制作ができる手ごたえがありました。

2017年9月に、口田さんに『札幌圏だけではなく全道・東北も視野に入れ、より地域重視の、情報量も深いポータルサイトを立ち上げたい』と相談したところ、エントリー数が多くなり、高度な検索、拡張性も求められるなら、a-blog cmsにすべきだと明言されました

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

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

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

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

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


導線のこだわり

(1)ルール機能による変更

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

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

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



(2)関連記事カスタムユニット

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

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




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



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


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

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


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

新機能の導入

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

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

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

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

おわりに

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

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

「コンテンツの投稿は当社の編集社員だけでなく、パートの職員なども行っています。文章、画像の投稿や、関連記事や企業との紐づけ、エリアページでの掲載順位のコントロールなど、一通りの操作は、一度教えたら難なくできるようになりました。ITリテラシーはあまり無いスタッフでもできる、というのが大事なポイントで、この点も大変助かっています。

何よりも、札幌圏で高断熱・高気密住宅を建てた10の体験談住宅の子育て環境づくりのポイントのようなまとめ記事、ノウハウ提供記事を考え付いた際にストレスなくどんどん投稿、更新できるので、記事制作がはかどります。そしてアクセスも、反響も伸びているので、結果が出たという意味で極めて満足しています」

制作会社紹介

ウェビングスタジオ 口田 聖子

そのほかの制作事例

チェック済みのものは過去に訪問した制作事例になります。未訪問の制作事例もみてみましょう!

a-blog cmsの詳細はブランドサイトへ

本ページに掲載されている制作事例は a-blog cms というCMSを使って制作されています。
a-blog cms について詳しい情報を知りたい場合はブランドサイトをご覧ください。

こんな方はブランドサイトへ!

  • a-blog cms ってどんなCMSなの?
  • どんな機能が揃ってるの?
  • 導入したいけど、どうすればいい?

ブランドサイトへ