制作経緯・意図

以前のサイトは2008年の制作。10年以上が経ち、トレンドはもちろんエンドユーザーのデバイスも多様に変化しました。スマートフォンへの対応はもちろん、トレンドも意識しつつホテルの売りを全面に出すサイトにしようというのが発端でした。

アピールポイント

全国市町村職員共済組合様が管理・運営するホテルのひとつですが、あまりそれっぽくない、どこかリゾートを感じさせるデザインがクライアントのご希望でした。

一番の売りである料理やお部屋を、弊社提携のプロカメラマンが撮影。高品質で高画質な写真をメインビジュアルで大きく使い、エンドユーザーへの訴求力を高めました。ホテルランチとは思えないお手頃価格で楽しめるタイムランチはトップページに専用エリアを設け、今日のメニューをひと目で確認できる仕様にしています。

毎日違った写真が楽しめるタイムランチエリア

プロジェクトに a-blog cms を採用した理由、採用してよかったこと

リニューアル前の既存サイトはMovable Typeで構築していました。ランチメニューに加えシェフのレシピなど、クライアントご自身で作っていくコンテンツを増やしたいとのご要望があり、それならばWeb制作の知識がない方でも見た目どおりに投稿できるようにしよう、とa-blog cmsを採用しました。投稿自体はフロントで行え、専門的なメニューが並ぶダッシュボードをわざわざ挟む必要がないところもよかったと思います。 クライアントはユニット、ブロックという概念は今まで持たれていないようでしたが、UIで組み替えられるのですぐに慣れられたようです。更新の容易さと慣れによる心理的なハードルの低さがあり、これまで外部SNSでのみ投稿していた日替わりメニューの更新をサイトで行うようになり、滞ることなく毎日1ページずつ、順調にコンテンツが増えていっています。

様々な新着情報に埋もれていたレストラン関係の情報は子ブログで独立化

サイトオーナー様の感想

やはり投稿画面のUIにとっつきやすさを感じられたそうです。今までは難しくてできなかった横並びのレイアウトもプルダウンで選択するだけという手軽さで、思い通りのレイアウトができると喜ばれました。ワード文書のような感覚で強調などのマークアップができますし、どうしても余計なタグが入って汚れやすかった表組みもテーブルユニットのおかげで正しいマークアップが保てています。作って終わりのサイトにしない強い思いをお持ちのクライアントなので、日々の更新にストレスがないことでさらに更新に注力できると意欲を持たれていました。

月間PVが20倍になったa-blog cms製ブログ

自分で制作に関わったものやそうでないものも含めて、企業・店舗・自治体や病院など、小規模から大規模までa-blog cmsによって構築されたウェブサイトはたくさんあり、そういったウェブサイトにおけるa-blog cmsの機能性の高さや利便性は文句なしだと実感しています。 しかし、個人的に強くオススメしたい、多くの人に知ってほしい利用方法はブログです。

私は、仕事でウェブ制作に携わるようになってからa-blog cmsに出会い、構築を学びました。 その後、自分のPRや情報発信のためにオリジナルサイト（ブログ）を持ちたいと考え、a-blog cmsで制作することにしました。 自分でデザイン〜実装（全構築期間は2週間程）を行って2017年10月に公開されたのが、今回のアワードに応募する『まなびや』です。

『まなびや』を公開後、半年以上のあいだは月間PVが約3,000程でした。 当時はまだまだコンテンツが少なく、自己紹介・イベントのレポート記事・問い合わせ程度しか閲覧する箇所がなかったので当然といえば当然です。 しかしその後、a-blog cmsのメリットを最大限に活かした運用によってPVが増えはじめ、現在では月間PVが約64,000程にまで上昇しました（いまでも伸び続けています）。

PVが増えることによって、仕事などの依頼や問い合わせが来るようにもなりました。

以下、月間PVを20倍以上に成長させたa-blog cmsの特徴と自ブログでこだわった点をご紹介します。

直近の月間データ（2019年3月）ではPVが約64,000ほどに

コンテンツ・イズ・キング：シンプルな構成とリッチなコンテンツで展開

コンテンツ・イズ・キングとは、日本語に直訳すると「コンテンツは王様（良いコンテンツ(内容)がもっとも重要）」という意味で、SEO（検索エンジン最適化）対策などで頻繁に使われる言葉です。 Googleはユーザーにとって役に立つサイトを上位表示することを目標に、「コンテンツの質が良いサイト」を上位表示させるように取り組んでいることが知られています。

『まなびや』が目指したのは、コンテンツ・イズ・キング。 シンプルなデザイン・構成だがコンテンツが充実している、というブログです。

どうせ公開するからには多くの人に見てほしい。 有益な情報やコンテンツを発信し、多くの人に役立ててほしい。 そのためにはGoogle（検索エンジン）に評価される必要がある。

デザインがシンプルでもコンテンツが充実していれば、ブログは評価され、多くの人が訪れるようになる、と考えました。

※ここではコンテンツ＝作成した記事・エントリーと定義します。

手軽にコンテンツをリッチにできる（= 面白い・見応えのあるブログを作れる）a-blog cms

a-blog cmsの特徴・メリットはたくさんありますが、なかでも私が非常に優秀だと感じているのはEasy to Make Contentsな点、すなわち『コンテンツを作りやすい・編集しやすい』という点です。 これこそが、今回、ブログ用にa-blog cmsをオススメする最大のポイントです。

【Easy to Make Contentsなポイント】 ・コンテンツを作成・編集しやすいブロックエディタ ・テキストだけでなく画像・地図・動画・音楽や他サイト埋め込みなど多彩なコンテンツ作成 ・多彩なレイアウト ・公開日時の設定や公開・非公開設定など、手軽なコンテンツの管理 ・作りたいコンテンツに応じたカスタマイズ ・コンテンツの複製による量産化 ーーーなど

SEO対策をはじめ、ウェブ上で多くの人の足を止めて情報を見てもらうには、コンテンツの強化・充実が必須です。

例えば、 『操作がややこしくてコンテンツが作りづらい（記事を書きづらい）、一度書いた文章や画像を編集しづらい、作成したコンテンツの管理も大変ーー』 となるとコンテンツは希薄で、SEOも弱く、検索で人は集まりづらい、誰の目にも止まらないサイトになってしまいます。

『コンテンツを作りやすい・編集しやすい』というa-blog cmsの特徴は、ブログを作成して運用するのにとても有効だと考えます。

『まなびや』のコンテンツを充実させるためのカスタマイズ

『まなびや』では、コンテンツを多彩に、かつ充実させるために、標準の機能に加えてa-blog cmsならではの独自カスタマイズをしています。 以下、『まなびや』で実装したa-blog cmsのカスタマイズを紹介します。

カスタマイズ1：目次ユニット

目次ユニット

目次ユニット（編集画面）

最近では、記事本文の前に『目次』が表示されるブログが多いですが、『まなびや』ではカスタムユニットで独自の『目次ユニット』を作成し利用しています。

自動的にh1、h2タグから目次を生成するものではなく、自分で項目を作成し、クリックで飛ぶ仕組みです。

【ポイント】 ・大量の見出しや文章がある場合、目次だけで尺が増えてしまう場合があるので任意作成に ・目次がいらないコンテンツもあるので、気軽に導入・非導入選択できるカスタムユニット形式に ・項目をあとで追加、順番の入れ替えも可能

カスタマイズ2：コンテンツの内容に応じたカスタムユニット

エントリーリンク（引用ユニットと違い、自分で好きな画像や導入文を入力できる）

CD紹介ユニット（↑これで1ユニット）

テキストや画像ユニット、レイアウトを駆使するのではなく、作成したいコンテンツに応じてカスタムユニットを作成して運用しています。

【例】 ・好きなアーティストのCDを紹介したいので『CDユニット』 ・おすすめのガジェットやアイテムを紹介するための『アイテムユニット』 ・他ページを紹介〜誘導できる『エントリーリンク』ユニット ーーーなど

カスタムユニットの生成でコンテンツの多彩さ、見やすさ、利便性が向上しました。

趣味で作成したデータの配布も

ジャズを演奏する人には有名なアプリ『iReal Pro』のデータ配布

iReal Proで作成したファイルを書き出してブログにアップロードするだけでシェアできる。

a-blog cmsはコンテンツ（エントリー）内にてファイルをアップすることもできるので、上記のカスタマイズの他に、趣味で作成した楽曲データをアップして配布しています。 エントリーの複製により、いちいち新規でコンテンツを作らなくとも同様のコンテンツを増産でき（エントリー複製〜データと一部テキストのみ差し替えでOK）、短期間で手軽にデータをアップすることができました。

a-blog cmsのブログユーザーが増えて欲しい

a-blog cmsは高機能ゆえに開発・制作者ユーザーが多く、一般的なユーザーが少ないと感じています。 手軽にブログを作れるサービスはたくさんありますが、やはりa-blog cms製のブログを利用した一般ユーザーが増えてほしい、との思いで自ブログを応募させていただきました。

a-blog cmsを使えば簡単にコンテンツが作れる、情報が発信できる、PVが増える、そこから仕事やレビューなどの依頼もくる。 という認知が広まればいいなと思います。

ヤマハナ様は、愛知県豊田市のリフォーム会社さんです。 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担当者からは「イベント・キャンペーンページの作成が簡単になり、タイムリーに情報発信ができるようになった。　店舗担当側でもブログの作成がやりやすくなった」などのお声をいただきました。