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

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

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

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

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

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

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

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

導線のこだわり

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

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

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

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

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

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

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

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

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

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

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

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の土台のもと完成しました。

位置情報を活用した基本テーマとして

a-blog cms Ver.2.7で実装された位置情報機能を活用するサンプルとして制作したWebサイトを、Ver.2.10リリースとともに、より最新の仕様に合わせてリニューアルしました。

位置情報の利用は、ある程度経験のある制作者なら簡単につくれるものですが、a-blog cmsでの制作に慣れていなくても、テーマのカスタマイズができるように以下のことに配慮しています。

• できるだけa-blog cmsの基本機能を使い、運用・保守の負荷を減らすこと
• 標準テンプレートであるbeginner2018の構造に近いものにし、カスタマイズ工数を減らす
• 予算の小さな案件での場合でも、インストールするだけで最低限使える機能を持たせる

主要な機能について

現在位置から近いスポットを表示

スマートフォンの位置情報を利用して、現在位置を中心として、周辺のスポットを地図上に表示できるようにしました。

またこのサイトでは、Yahoo!地図を利用しています。a-blog cmsの基本機能として無料で使える地図には、他にもオープンストリートマップがありますが、地方都市では建物の形状などが表示されないことも多く、地域情報で利用するには物足りません。

Yahoo!地図はGoogleマップに比べて、カスタマイズできる部分は少なくなりますが、ゼンリンの地図を利用し細部まで表示できるため、地方都市や高いズームレベルが必要な場合には、現時点で最も効率的だと考えています。

現在位置を取得して中心に表示しているため、周囲にある行きやすい場所を把握しやすい

近隣のスポットを近い順にピックアップ

現在見ているエントリーから近い順に距離と徒歩での時間を表示しています。

徒歩10分以内でいける非常に近いスポットについては、目立たせて表示。表示件数も簡単に変更できます

近い順の表示と距離を表示するのは標準機能ですが、距離はメートルでの表示となるため、キロメートル表示に直す校正オプションを作成しています。

また徒歩での時間も校正オプションを作成しています。こちらは距離から不動産広告で利用される分速80mを使って計算しています。

さらに、現在見ているページから歩いて行ける範囲のスポットを判断できるようにし、散策・訪問コースを決めやすくする工夫を行っています。現在位置に近いスポット→その近隣のスポットの流れをつくることができます。1つの目的地だけでは訪問のハードルが高くなりがちですが、複数の目的地があれば訪問しやすくなることを想定しています。

スポット一覧の印刷

登録してあるスポットの一覧をQRコード付きでプリントアウトすることができるテンプレートを用意しています。

ページタイトルとQRコード・サマリーを出力

Webサイトを見ている分には不要なものですが、観光案内所や休憩所などにQRコードを掲示するだけでも、現地の利用者が簡単にこのサイトに訪問できるようになります。Webサイトからの集客はもちろんですが、逆に現地からサイトを利用する場合にもお使いいただけます。

ナビゲーションにはカテゴリーリストモジュール

デフォルトテーマではグローバルナビゲーションにはナビゲーションモジュールが使われていますが、カテゴリーリストに変更しています。

カテゴリーにカスタムフィールドをつくり、表示させたいものだけにチェックすることでナビゲーションとしています。またアイコン・画像もカスタムフィールドにしていますので、自由に変更することができます。

アイコン画像も変更可能

エリアリストをカスタムフィールドで管理

小エリアを設定することができますので、同じ地域内でも細かくエリアを設定することができます。エリア追加・削除も管理画面で設定できるようにしています。

カテゴリーとは別にエリアを設定。エリアは管理画面で増減可

カスタムフィールドで増減できるエリア

エントリー作成時にエリアを選択

作例では市内のエリアを分けるという使い方をしていますが、同じ商店街であっても、駅の北側と南側に分けるような使い方もできますし、A商店会・B商店会のように分けて設定することもできます。

サブカテゴリー機能を使えばより細かい管理ができますが、小規模利用を想定したテーマですので、管理が複雑にならないようにしています。

デザインテイストの変更

大きな写真・ナビゲーションの画像など、管理画面で複数の箇所を変えられるため、デザインイメージの変更も容易です。

管理画面で変えられる画像は以下の通りです。

• ロゴ
• 各カテゴリー用のアイコン
• お知らせエリアの背景画像
• 観光・見どころ案内の背景画像
• バナーエリアの画像
• フッターの上の画像

またロゴはトップページ（写真を背景に置く場合）と下層ページ（白背景を前提とする場合）の2種類を登録可能です。トップページには装飾を施した特別なロゴを、下層ページにはシンプルなものを置くなど使い分けが可能です。ロゴのサイズは3サイズ（400px、320px、240px）を選べるようにし、デザインに応じてサイズをお選びいただけます。

それ以外の部分については、CSSを書き換えることになりますが、多くの部分はSCSSファイル内で変数化（デフォルトテーマと同じ_variables.scss）していますので、色の変更は容易です。

Instagramについて

Instagramの写真を貼りたいという需要は多いかと思われますが、今後APIが使えなくなるため、a-blog cmsの機能は使わず、外部に既存サービスのウィジェットを貼り付けられるようにしています。

地域情報のスモールスタート用テーマとして

地方都市の観光協会・商店街ではWebサイトをつくったものの活用されていない場合や、大昔につくったまま放置されていて、スマートフォンでは表示できないものが多くあります。

保守・更新費用に耐えかねるような規模の団体でも、a-blog cmsであれば自身で運用し、メリットを感じれば拡張するという選択も可能なはずです。

「一度失敗したものの、新たなWebサイトで再スタートを切りたい」という要望にも応えやすい設計になったのではないかと思います。

石川県金沢市にある情緒溢れる坂道の名前の由来や歴史、写真、地図、コラムなどを掲載しています。旅のお供に、または、故郷を思い返すきっかけになればという思いでサイトを制作しました。
金沢市内にある38個の坂道を紹介しています。現在地から坂道までの距離を表示する機能や、exif情報表示など、a-blog cmsの機能拡張にあわせて、サイトのコンテンツを充実させています。
デザイン面では、写真を大きく掲載、印象に残るビジュアルデザインを心がけました。コンテンツ面では、坂道の情報だけでなく、関連知識を深掘りできるコラムを提供することで、金沢の歴史的資産である坂道により興味を持ってもらうことに力を注いでいます。

坂道一覧は「写真表示」、「由来表示」で切り替えることができます。

充実の坂道情報

坂道の詳細ページでは、名前の由来、写真集、関連コラム、地図を掲載しています。

87の金沢の坂道コラムを掲載

コラムでは、他のライターさんとともに定期的に更新し、現在までに87のコラムを掲載しています。

関連コラム表示

コラムの下部には「あわせて読みたい」記事の一覧を表示しています。同じ坂道やテーマを扱った記事を表示しています。

オンライン写真共有サービス風の写真ブログ

2010年から撮りはじめた坂道の写真の中でもお気に入りの写真だけを紹介する「坂道に吹く風やにおい」という写真ブログがあります。

坂道毎の情報（コラム・位置・写真）を一元管理、複数のコンテンツに展開

a-blog cms導入以前は、1ページですべての坂道を紹介していましたが、導入時に坂道個別ページを作成しました。思い出の坂道、或いは気になった坂道を起点により深掘りできるサイト構成を目指しました。 坂道毎のページは子ブログにしてあります。坂道個別の情報を子ブログのカスタムフィールドで登録しました。登録した情報を「坂道一覧」、「坂道コラム」、「坂道マップ」など様々なコンテンツから呼び出しています。

Blog_Geolistの活用

登録した坂道の位置情報を参照して現在地から近い順に並べるページも用意しています。現在地からの距離も表示されるので、観光に来られた方が目的の坂道を探しやすくなっています。

※位置情報が有効になっていないと正常に表示されない場合がございます

exif情報読み込み機能の活用

「坂道に吹く風やにおい」は、写真を通して金沢の坂道の魅力に気づいてもらう、四季の変化を感じてもらうことがこのコンテンツの目的です。坂道別、ポートレートテーマ別、カメラ別、撮影年で写真の一覧表示を切り替えることができます。 カメラ好きの人、金沢にきた時の撮影スポットの参考にしたい方のニーズを満たすため、写真ごとにエントリーを持たせ、a-blog cms の exif情報読み込み機能でexif情報を表示しています。また、カメラ毎に写真一覧を切り替える実装を行いました。カメラ別のメニューでは、カメラボディの画像から選択できるようにデザインを工夫しました。

弊社では2019年4月27日（土）〜5月6日（月）までをゴールデンウィーク休業日とし、期間中の通常業務（ライセンス発行、メールサポート）はお休みさせていただきます。
5月7日（火）より通常営業となります。

お客様にはご迷惑をおかけいたしますが、ご理解のほど、宜しくお願い申し上げます。