GeoLocation(ジオロケーション)によるサービス強化

以前のサイトは、Movable Typeで作られており、バージョンも古くスマホ、SSL対応含めたリニューアルのご依頼をいただきました。サイトリニューアルに際して以下のようなご要望をいただきました。

今回、サイト自体のデザインは、踏襲して大幅に変更しない前提で、Movable Typeからa-blog cmsに変更し、GeoLocationを使った店舗情報を表示することで、エンドユーザーの位置情報から一番近いお店を上位に表示することで本部への電話による問い合わせの軽減を測りました。

左の写真はリニューアル前、右の写真はリニューアル後の店舗一覧です。 右側は、ジオロケーションで現在いる位置から近い順に表示され、距離も合わせて表示されるようになっています。

サイトリニューアル後に電話自体の件数は、残念ながら増加しました。理由としては、サイトをリニューアルしたことでアクセスボリューム自体が増えたため、電話の総数自体が増えたからです。結果としては、GeoLocationを使うことで、日々変わる現場で急ぎで必要となる資材を近くのお店で調達できるようになり、多店舗展開の利点を生かしたお店の紹介が可能な仕組みになり、お客さんが増えたので嬉しい悲鳴となりました。

また現場の担当者が、ブログを簡単に更新できるようになったことから、以前より頻繁にアップしてくれるようになりました。ダイレクト編集機能を使うことで画像の変更も変更したい画像の上でクリックして簡単に変更できるなど、ITリテラシーが高くないユーザーでも簡単に対応できるようになりました。

他にも店舗担当者の移動があるということで、ユーザー管理画面にカスタムフィールドで所属店舗などの情報を持つことで、将来、店舗が変更しても簡単に変更できるようなカスマイズをしました。

a-blog cmsを選択した理由

以下の理由から今回の制作においてa-blog cmsを選択いたしました。

• ジオロケーションの機能が基本機能として実装されており、位置情報を使った並び替えが容易にできる
• ユーザーのカスタムフィールド機能のおかげでユーザー管理が容易にできる
• ブログの登録・編集がみたまま操作することが可能で、ユーザービリティが非常に良い

最後に、a-blog cmsには、WEB制作において必要な機能がディフォルトで実装されており、工夫次第で色々なことに柔軟に対応できます。ライセンスは有償ですが、結果的にメンテナンスコストなどを考えると非常に安価と言えます。

多数のキッチン関連商品を開発・製造・販売するアルファミック株式会社様。クッキングシートやくっつかないホイル等のイチオシ商品の使い方やメリット、開発の経緯等を掲載し、商品の魅力をしっかりとアピールできるウェブサイトにしました。BtoB取引も活発で、ウェブサイトからはOEM製造のご相談を受け付けており、丁寧なヒアリングで正確に要望を聞き取り、販売先や展開先もご提案する、手厚い取り組みを行っています。

ウェブサイトにa-blog cmsを導入することで、企業広報だけでなく、「商品情報」を自由に変更できる仕組みを導入しました。

商品をCSVで一括登録

アルファミック様は、取り扱う商品のジャンルが多彩で、その中に紐づく商品点数も多く、さらに商品の名称やサイズ、内容量もさまざま・・・。大量で複雑な商品情報をCMS管理に移行する必要があったため、テーマの設計が完了し、数点の商品登録テストを行ったあとは、商品情報を一括でインポートできる「CSVファイルからのインポート」を利用しました。

CSVファイルは、Google スプレッドシートでお客様に用意していただいた「商品管理シート」から出力し、インポートできる形式への微調整を行いました。一つ一つ商品を登録するよりも、遥かに少ない工数で、商品登録が済みました。

商品の情報はカスタムフィールドグループで管理

商品には、例えば「アルミホイル」というカテゴリーの中に、6種類の商品ジャンルが属します。さらに1種類に付き、取り扱い商品が数種類存在します。この取り扱い商品を一つ一つをエントリーにしてしまうと、編集画面が膨大な数になり、管理がしずらくなってしまいます。効率良く管理していただくため取り扱い商品を「カスタムフィールドグループ」で管理し、1つのエントリー編集画面で見通すことができ、かつ順番変更が容易な仕様にしました。

CMSで管理するコンテンツは、その情報構造が複雑であればあるほど、管理画面はより操作性の高いものであるべきだと考えます。a-blog cmsは管理画面をHTMLベースでカスタマイズできるため、クライアント様の要望以上に管理しやすい管理画面を構築できます。

制作意図・経緯

「山形を旅するように楽しむ」をコンセプトに、山形県内の写真を中心としたストックフォトサービス「YAMAGATA IMAGES」を開始しました。従来のストックフォトサービス（レンタル写真／写真素材サイト）と大きく違う点は、商用素材の提供に加えて、山形県内の名所・名物の紹介文と紹介サイトへのリンクを併載していることです。

写真利用を目的としない方にも、山形県の美しい風景や貴重な歴史文化施設などを提示し、山形への旅や観光を促進すること、山形のファンづくりを目的に運営しています。

アピールポイント

ストックフォトの検索はキーワードだけでなく、山形県の４つの地域（村山・置賜・庄内・最上）別、やまがたの春夏秋冬・建造物・歴史文化・名物・自然（山・滝）などの各ジャンル別に、写真の閲覧が可能です。写真のほとんどは山形県内で撮影されたものや山形の食などが多く、撮影場所の市町村も明記しました。観光客へのアクセス案内や写真愛好家へのロケーションサービスを充実させることで、山形の観光資源の見直しや再発見に寄与します。

各テーマ内の写真をランダムに表示しています

問い合わせからオリジナルサイズの購入にも対応

a-blog cms を採用した理由、採用して良かったこと

開始当初は、将来的に素材販売を考え「EC-CUBE」で運営していました。ところが、画像のカテゴリーやテーマ分け、また検索したときの表示も思うような結果になりませんでした。そこで、再度、サイトコンセプトやターゲット等を見直し、システムも柔軟にカスタマイズができる「a-blog cms」で再構築することになりました。前システムに登録済みだった写真素材（エントリー）をa-blog cms に移動させるのには苦労しましたが、メンテナンスのしやすさ、機能改良や追加などにも対応できるので、切り替えて良かったと感じています。

撮影場所や状況によって複数項目に登録できるようにカスタムフィールドを作成

感想など

ヤマガタイメージズは、撮影者に写真の投稿をおまかせしています。a-blog cms の投稿画面は分かりやすいので、操作方法の説明も難しくありません。また、すぐに理解していただけていると思います。システムはまだ最新ではありませんが、アップデートとともに「YAMAGATA IMAGES」をブラッシュアップしていき、より使いやすいサービスを目指します。

開発の経緯

私はフリーランスのウェブ制作業をしながら、このJUSO Coworkingの運営を夫婦で行っています。

ながらくWordPressでクライアントのウェブサイトや自社サイトを構築している私ですが、異なった文脈のコンテンツ管理を実際に自分のサイトで試してみたいと思い、2016年からJUSO Coworkingのサイトをa-blog cmsでの運用に切り替えました。

当時はデフォルトテーマをそのまま使用していたのですがもう一歩踏み込んで自分でテーマ制作に挑戦してみようと思い、2017年からちょこちょことリニューアルと開発を進め、2018年夏に無事公開できました。

2017年夏にワイヤーフレームを書き始めました。それからようやくデザインの大まかな完成まで半年、コーディングにまた数ヶ月かかってしまいました。コーディングが終わってからはテーマ開発が楽しく、またJUSO Coworkingでのa-blog cms勉強会でアドバイスを賜われたこともあってものの一ヶ月もしないうちに2018年夏の公開までこぎつけることができました。

テーマ開発のポイント

独自ユニット開発でサイトの表側からガシガシ更新

a-blog cmsの大きな特長はブロック（ユニットと呼びます）を積み上げるようにコンテンツを組める編集画面です。ユニットグループ機能などをつかって、カラム管理などレイアウトまで編集画面で管理できることが大きなアドバンテージです。

管理しやすいサイトを実現するにあたって、サイトを特徴づけるユニットを自作し、これを誰でもページ内に配置できるようにすることがなにより大切なことでした。

設備ステッカーユニット外観

ログインしていればサイトの表側からでも設備リストを更新できる。またステッカーの下につくキャプションについても管理が可能に

たとえば上記の「設備ステッカーユニット」。部屋ごとに備えている設備は変更されることがあるため、この設備情報の更新がしやすいことはとても重要でした。ログインしていれば、サイトの表側からでもこのリストが直感的に扱えることはとても素晴らしい体験でした。

画面幅いっぱいのパララックス画像もユニットに

同じくサイトの表側から画像の差し替えがカンタンに

おなじく、上記のパララックス（視差効果）画像もこのサイトを特徴づけるものですが、これもユニット化してあります。コワーキングスペースのサイトにとって大切なのはできる限り今の状況を捉えた、フレッシュな写真を印象的に見せること。こうした大きなイメージもユニット化することで更新を容易にできました。

見た目の異なる見出しもテキストタグセレクトで実現

h2・h3にもさまざまなバリエーションをもたせている

こちらもブロック編集時に手軽に選択し適用できる

前述したパララックスユニット・設備ステッカーユニットだけでなく、複数の外観をもつ見出しにも拡張ユニットやテキストタグセレクトで対応しています。同じ「大見出し」でも、使用箇所によって外観を変えたいことはよくあること。デザイン・HTMLコーディング時に生じたいくつかの見出しのバリエーションを簡単にユニットとして挿入できるようになりました。

結果、共同運営者も更新しやすいサイトに

リニューアル第一の目標は一緒に運営している妻も更新しやすいサイトを実現することでした。すべてのエントリの写真差し替え・レイアウト改変・独自パーツの追加がしやすいことが理想です。

a-blog cmsの強みの一つは記事を構成するユニットをわりとお手軽に自作できることです。WYSIWYGではなかなか実現しにくいような機能を持ったユニットをわりとお手軽に用意して更新者に使ってもらうことができます。 少し慣れはいりますが、記事のカラム分けなどにもある程度対応しやすいため、専門家でない妻がエディタからレイアウトに関する編集もできるようになりました。

その他便利になったこと

イベントの外部リンクがカンタンに

ここ数年、JUSO Coworkingはイベント情報はサイトに置かず、FacebookイベントやDoorkeeperなどの外部のイベント管理サービスを利用して広報することが多くなっています。そうなったときに外部へのリンクがしやすいことは大変助かりました。a-blog cmsでは各エントリに管理画面から「リンク先URL」を設定することで、カンタンに外部サービスへのリンクを実現することができます。

HTMLの形を規定しないから、思いのままに書ける

新しいユニットやモジュールを開発する必要が出たときも、自由にHTMLを書いて必要な箇所だけ動的コンテンツにできるので、HTMLやCSSの書き方にこだわりのある人にはオススメです。一切HTMLタグやclassの命名を縛らないCMSなので、首尾一貫した設計のコーディングができます。 こちらについては拙ブログの記事に掘り下げて書いてあるのでよろしければご覧ください。

商品、在庫、施工例をそれぞれ行き来できる導線を設計

リニューアル前は静的ページで作成されており、異なるコンテンツ間の行き来の導線が弱い状態でした。そこをCMS化し、商品情報、在庫、施工例それぞれをスムーズに遷移できる導線を追加しました。

商品情報の詳細ページから、その商品を使っている施工例と在庫情報を表示

商品詳細ページ

施工例や在庫情報に、商品ごとに選べる分類を表示

モジュールの入れ子とctxを組み合わせて、商品一覧ブログのデータをそのまま利用して一覧を作成しました。

施工例詳細ページに、「この施工例で使用している古材」として商品ページへのリンクを設置

こちらもモジュールの入れ子とctxを組み合わせ、施工例と商品を紐付けて表示。施工例から商品に興味を持ったユーザーに、商品ページにアクセスしてもらいやすくしました。