サイト制作の目的

山旅ツアーの紹介サイトを制作しました。これまではお客様自作のカタログと、会社の公式サイトで集客をしていましたが、高齢者に山旅が非常に人気があり、県外の方もこの新潟の会社が企画しているツアーに参加しているなど、非常に需要の高い商品であることから、より集客強化につながるよう公式サイトを立ち上げました。

高齢者の申込みが多いことから、複雑なデザインにはせず、文字を大きくし各誘導ボタンにはアイコンをつけて、回遊しやすくするなどの工夫をしました。

検索機能を活用

ツアー検索ページではエントリーで管理している各ツアーのカスタムフィールドに入っている情報で、ユーザーが参加したい条件に絞って検索ができるようになっています。さらに、ツアー検索ページから申し込みボタンを押すと、申し込むツアーが指定された状態でフォームの入力ができるようになっているため、単純な操作でユーザーは申し込みができるようになっています。

見た目のわかりやすさも工夫

集客強化したいツアーにはサムネイル画像の右上に「おすすめ」ラベルを設定でき、また管理画面上で写真と文章を設定するだけでトップページに大きなバナーが自動生成されるように工夫しました。ユーザーの操作性・利便性を十分に考慮しながら、アピールしたいことは余すことなく情報を掲載できるようになっています。

お客様の声

お客様からは「非常に管理しやすくなった」「ツアーの最新情報を掲載しやすくなった」「ユーザーからわかりやすくなったという声をいただいた」と、非常に喜んでいただいております。

制作側としては、a-blog cmsはこのようなツアー紹介サイトに、大変適していると実感しています。 特に、以下のような点でマッチしていました。

• カスタムフィールドを活用することで検索機能を充実させることができるので、膨大な情報量でもユーザーにとっての利便性を工夫できること
• 商品（ツアー）の登録方法を非常に簡易にできるので、ウェブの知識のないお客様でも管理しやすいこと
• カスタムフィールド＋ユニットで、それぞれにツアーの魅力を十分にPRできる（表示の工夫ができる）こと

★地元の新聞にも掲載されました

今回の制作経験を活かし、他の業界のサイトでも、ユーザーにとって・お客様にとって活用しやすいサイトをたくさん世の中に広めていきたいと思います。

約3,500棟の施工実績を誇る住宅メーカー「ジョンソンホームズ」が運営する、お庭づくりや外構を提案するブランド、さっぽろガーデンライフ。住宅会社にしかできない提案力を持っており、お客様の暮らしに合わせた提案はもちろん、住まいに合った外構づくりを目指しています。また一貫したサポート体制やアフターフォローを万全にし、お客様に寄り添ったお庭・外構づくりを進めていきます。

カテゴリーとタグを組み合わせた「お庭事例」

お庭づくりや外溝工事を希望されるお客様は、既に「どこを工事したいか」が決まっている場合がほとんどです。施工事例を絞り込む際も「自分の希望と同じ施工ポイントがあるかどうか」を参考にしたいはずです。そのため、検索機能としては「施工ポイント」から絞り込める機能を実装しました。「デザイン別で探す」はカテゴリー機能、「施工ポイントで探す」にはタグ機能を利用しています。タグはクライアント側で自由に増減が可能なので、事例のバリエーションが増えても問題がないような作りにしています。

お庭事例の写真はカスタムフィールドグループで登録することができ、公開画面ではスライド形式で画像を複数表示することができます。画像リサイズに関する校正オプションを使用し、写真は自動でトリミングされます。

---

施工事例の管理画面

---

公開画面

運用を楽にするイベントフォーム

さっぽろガーデンライフは、お庭作りに興味がある人向けに、相談会やキャンペーンを定期的に開催しています。イベントの詳細画面には、イベントの参加受付が可能なように「フォーム」を設置できるようにしています。フォームはカスタムフィールドをつかって条件分岐し、ブラウザ上からクライアント様が表示／非表示を切り替えられるようになっています。 さらにこのフォームは、自由に会場を設定できるパターンと、決まった会場から選択できるパターンが管理画面から選べるようになっています。

イベントの管理画面：（上）自由に会場を設定できる　（下）デフォルトの会場を設定できる

また、イベントによっては、決まった日程で数日開催するものや長期的に開催するものがあります。 イベントに申し込みたいユーザーが適切に日程を選ぶことができるように、日程を指定することができます。イベントフォーム上でも、指定した日程のみを選ぶ仕組みです。

a-blog cmsと、拡張機能の「Form2Entry」を活用して、社内コミュニケーションに使えるプラットフォームを構築しました。

ヘルツでは業務終了後に日報を提出し、メンバー間でリソース状況や案件進行上の問題を共有しています。作業報告だけでなく、日々の気付きや身の回りのトピックスも書くことで、それに対していいね！を付けたり、コメントをやりとりしたり、社員間のコミュニケーションを取るうえで、重要な存在になっています。

これまでは拠点やチームにより、メール、Backlog、サイボウズOfficeを使用していましたが、大量の情報が「埋もれる」「検索できない」といった問題がありました。また、書くまでの手続きが煩雑だったり、双方向コミュニケーションに向かないといった問題がありました。

---

サイボウズOfficeで「報告書」を使用した日報は最新情報欄に通知される

---

報告書は１ページずつ発行され、コメントやいいね！などのコミュニケーションが可能

---

Backlogでの日報の運用は、課題やコメントが大量にならないようにちょっとした工夫が必要

SlackやTeamsなどのチャットツールも検討しましたが、今後の検索性や拡張性を考えて、a-blog cmsと、拡張機能の「Form2Entry」を使ってこれらの問題を解消したサイトを構築しました。

a-blog cmsの標準機能を使って実装

フォーム投稿画面

フォームから日報を投稿すると、Form2Entryによりエントリーとエントリーのカスタムフィールドとして管理画面に格納されます。本文は a-blog cms に標準で備わっている、テキストをMarkdown形式で出力する校正オプションを使い、馴染みの深いフォーマットで入力できるようにしました。（さらにBacklogの課題番号は自動的にリンクが貼られるように工夫しています。）

---

投稿がエントリー一覧に格納される

---

エントリー編集画面でカスタムフィールドを変更可能

コメントについてもエントリーで保存されているため標準機能で搭載ができました。入力欄を最小限にすることで、チャットツールのように投稿できるようにしました。

---

コメント投稿画面

---

メントはコメント管理で管理可能

投稿者の顔写真や名前はユーザ管理と紐付いており、写真の差し替えが可能です。表示画面上ではUser_Profileモジュールを使って実装を行いました。

---

ユーザ管理画面

---

ユーザ管理画面詳細

a-blog cmsの拡張性

a-blog cms はキーワード検索や、ソート、絞り込みが実装しやすいシステムなので、実装の幅が広がります。

今後、同様の仕組みを使って、簡易的なプロジェクト管理やフォーラムなどの機能なども実装し、社内ツールとして積極的に活用していきたいと思います。

お客様の運用に合わせ、制作者が運用しやすい作りに。

もちやさんは、ご家族で経営されているラーメン屋さんです。 ウェブサイトのコンテンツは少なく、お客さまが行う更新は「お知らせ」「もちやブログ」「良子さんの手相観」になります。

それ以外のコンテンツは、変更の予定が少ないことから、お客さまで更新作業をする予定はありません。変更がある時は、ご連絡いただくという形になっています。

更新が少ないページはHTMLで

お客様が作業をしないページはHTMLでページを制作し、制作者にとって作業しやすいように構築しました。

HTMLで組みつつも、a-blog cmsの機能を利用

テーマは、「@extends」や「@include」を使い、ヘッダーやフッターなど、共通パーツの読み込みを行っています。

また、フォルダとファイル名をCMSの構造と合わせると任意のHTMLファイルを読み込んでくれるので、管理画面の構造と合わせてHTMLファイルを作っています。

HTMLで組みつつも、a-blog cmsの必要な機能を利用するようにすることで、スピーディな納品を実現できました。

HTMLで組んでいるページ：おしながき

機能の取捨選択の自由度が高いことも、a-blog cmsの魅力。

中小企業や商店などのウェブサイトでは、コンテンツの量が少ないことがあります。 しかし、一部のCMSでは、お客様のご要望をカバーしきれないことがあります。そういった場合は、a-blog cmsをご提案しています。

必要な機能を必要な分だけ使えるという、自由度が高い点も a-blog cms の魅力だと感じています。

サイトオーナー様のご感想

昨年12月にGazi工房様に依頼しHPをリニューアルいたしました。 「当店で扱っているものが、ラーメン、ピザ、弁当、手相と全く関連性のないものばかりですが、テーマに沿ったHPを作成していただき、大変見やすくまとまりのあるHPになった」と、お客様からのうれしい声が届きました。 ブログも書きやすく（もう少し慣れないといけないのですが笑）SNSとも連動しているので扱いやすく感じております。

株式会社海外教育コンサルタンツ様が運営する「エディクム」は、 海外留学・ボーディングスクールの紹介・留学支援を行っています。

以前は別のCMSで構築されていましたが、コンテンツがまとまらなくなり、サイトの構造や導線が複雑であることから、情報整理と運用の負荷軽減のためにa-blog cmsが導入されることとなりました。

実際に利用してみたところ、運用・更新が非常に楽になったとの声をいただいています。

サイトの情報整理

既存サイトの散らばっていたコンテンツを全て読み込んだ上でページの分解と統合、ディレクトリの整理を行い、一目で内容を把握できるコンテンツマップをまず作りました。

それを元に、どのページを子ブログ・カテゴリーへ割り振れば更新がスムーズになるかを考えて、CMSの構造を決めています。

更新・運用の省力化

1つの修正に対し、複数箇所・複数ページの更新がないように注意しましたが、最も更新されるイベント情報の扱いに特に注力しています。

まず同じフォーマットでの記述・表示が維持できるよう、カスタムフィールドを使った入力を基本としてイベントページを作っています。

イベント開催日による分岐表示

またイベントの一覧は、開催前か終了後かを日付で判断し、2つのエントリーサマリーを使って表示させています。

イベントの開催日を自動的に判断して出力

イベント申し込みボタンのカスタマイズ

またイベントページには申し込みページへのリンクボタンを付けていますが、イベントが終了した場合・あるいは個別のページで申し込みを締め切った場合には、ボタンは表示させず、申し込みそのものができないようになっています。

イベントの開催状況のフォームへの反映

このイベントが申し込み可否の状況は、申し込みフォームにも反映させるようにし、終了したイベントや中止になったものについては、表示させないようにしています。この部分はフォームの中に、エントリーサマリーとIFブロックの組み合わせを埋め込んで実現させています。

開催日前のイベントのみを表示

留学体験談の掲載

留学体験談は1つにつき1エントリーとしており、「国」「年齢」「学校の種類」をタグを使って選別しています。例えば「ニュージーランド」「サマースクール」「小学生の留学」タグが選ばれている体験談であれば、それぞれのタグ名と同じ「国」「年齢」「学校の種類」のページに自動で掲載されるようになっています。

カスタムフィールドで実装させる方法もありましたが、カテゴリーの増加に柔軟に対応できるようタグを利用しています。

タグを利用して、関連ページに自動で出力させる体験談

子ブログの活用

運用しやすいよう、イベント・ブログ・体験談・お知らせの4つの子ブログを作り、それぞれの更新が行いやすいよう、管理ボックスをカスタマイズしてボタンを増設しています。

子ブログ用に増設されたボタン

デフォルトのボタン

前サイトからのブログ記事の移行

前サイトには700件以上のブログ記事がありましたが、前サイトのデータをCSV形式に変換したものを、a-blog cmsの標準機能で一括インポートしています。

a-blog cmsを導入して

リニューアル前のウェブサイトは、前任のウェブ制作会社が開発していた独自のCMSを使っていたため、情報の抽出や移設は難易度が高いと感じていましたが、問題なく行っていただけました。リニューアル後にコンバージョンという結果も出ていてお客様も満足しています。

以前のウェブサイトでは自由に装飾ができたため、文字の色やサイズなどが統一されていませんでした。編集ルールを設定すればよいのですが、お客様にはストレスになってしまいます。そこで今回のリニューアルのタイミングで文書作成時に使える機能を大幅に制限してもらいました。

お客様も迷いなくシステムが利用できますし、見た目がバラバラになることも防げています。その他、ウェブサイト運営時の手間を配慮して管理しやすい仕組みにカスタマイズしていただいており、このように柔軟に対応できるところがa-blog cmsの強みだと感じました。