ペコマガは、株式会社ペコトが自社で企画運営する広島のタウン情報Webマガジンです。

4年前の立ち上げ時からa-blog cmsを導入しています。もともと弊社の技術では、CMSを導入するにはハードルが高く、様々なCMSをインストールして実装のしやすさを比べた結果、a-blog cmsにたどり着きました。

a-blog cmsは、動的なホームページにあまり手を付けたことのない経験の浅い制作会社でも、比較的ハードルが低く導入できました。その後、受託する制作案件でも積極的にCMSを導入したことにより、PHPのスキルも向上し、現在に至ります。当たり前のことかもしれませんが、PHPのスキルアップとともに、これまで以上に使いやすくなった実感があります。

他のCMSを導入し本格的に運用した経験がないので詳細な比較はできませんが、a-blog cmsを使っていて便利な点を3点ほどご紹介します。

１）自分流のユニット構造の記事構成

タウン情報を入力するスタッフは、もともとWeb制作に携わっていないため、HTMLやCSSに関する知識はゼロです。ユニット構造の記事制作は、そういったスタッフでも導入がとても楽でした。

エントリー編集画面のスクリーンショット

↑記事制作する時に設定している内容の一部です。ウェブマガジンの収入源は記事広告がメインとなるため、PRマークの表示やサイト内におすすめとして表示したい場合のために、チェックボックスを用意しています。

テキストユニットのスクリーンショット

↑記事制作する時に設定してるテキストユニットと、オリジナルユニット。タウン情報をあつかう上で必要なユニットを設定していくと、これほどの量になってしまいました…　これが多いのか少ないのか分かりませんが…　

ショップ情報ユニットのスクリーンショット

特徴的なのは「ショップ情報」かと思います。ショップ情報は記事一覧でも表示させたいので、カスタムユニットにすることで情報を引っ張ってこられるようにしました。

←左がインデックス時の表示　→がエントリーボディ時の表示

↑左側が、エントリー一覧を表示してるインデックスでの表示。右側は、エントリーボディに表示してる内容です。エントリーボディに表示する住所には、自動で Googleマップへのリンクを挿入。電話番号も、クリックするとそのまま電話をかけられるようにしています。

２）結果的にSEO対策に効果的だった

Webメディアを運営するポイントで、最も気になっていたのがSEO対策の部分です。結論から先に伝えると「広島 ランチ」という大きなキーワードで、食べログやホットペッパーなどの他媒体をおさえ１位をキープしています（※2019年7月時点）。「広島」というワードでドメインが強くなっていることを実感しています。どの仕組みが効いているのかは憶測でしかありませんが、SEO対策におけるメリットを少しご紹介します。　

【1】記事制作時に写真を入れた場合、書き出せる写真サイズが複数設定できるので、表示用途に応じて適切なサイズで使い分けることができる。メイン写真は、記事内では大きく使いますが、記事リスト時には小さく表示させています。PCとSPでも表示を変えています。　

【2】サイト内と検索時のタイトルを使い分けられる。サイト内でクリックされそうなタイトルと、SEO向きのタイトルと違うので、そのあたりの使い分けを簡単にできます。　

【3】ディスクリプションも簡単。記事制作時に、記事を書くようにディスクリプションを設定できるのが、簡単で良いです。

３）記事管理のしやすさや、オリジナリティの追加が楽しい

CMS全般に言えることかもしれませんが、今では色々とオリジナルにカスタマイズしてサイト運営を楽しんでいます。楽しむことって大事です。以下が、ちょっとしたカスタマイズの一例です。

エントリーリストのスクリーンショット

【カスタマイズ例】投稿した記事や下書きの記事へのアクセスを、上記のようにワンクリックで変更や非公開・公開できるボタンをカスタマイズしています。

ログイン画面のスクリーンショット

【カスタマイズ例】ログインページもカスタマイズしてオリジナルのデザインにしてみました。

以上です。　現在、こちらのサブドメイン運用として観光サイトの構築を進めておりマルチリンガルサイトを設計中なので、できあがり次第、またご紹介できればと思います。

フォトスタジオ若葉さんでは、赤ちゃんの百日祝いや七五三、成人式などの記念写真撮影はもちろん、証明写真や家族写真、シニアまで幅広い撮影メニューを用意しています。かつ、それぞれの撮影メニューの中でコースやプランを設け、さらにオプションやお役立ち情報などを掲載しているているため、コンテンツの整理が課題でした。

この課題を解決し、コンテンツの管理をしやすくするためには、a-blog cmsと相性が良いと考えました。 また、ページ移動しやすく、必要な情報を見つけやすいデザイン・設計を心がけました。

ターゲット毎にブログを用意

赤ちゃんから高齢の方まで幅広い撮影メニューがありますが、顧客層はそれぞれで異なります。 そこで、ターゲット毎に撮影メニューを分類し、子ブログで構築していきました。

ただし、「赤ちゃん」「七五三」「入園・入学・卒園・卒業」「キッズ撮影」「二分の一成人・十三参り」については、ターゲットが保護者になること、かつそれぞれの撮影期間が短いことから、1つの子ブログにまとめ、カテゴリーで撮影メニューを管理しています。（近い将来に予定がある撮影メニューの情報を目に触れやすくするため。）

Root top.htmlの画面下寄りにある「撮影メニュー一覧」

各子ブログごとに専用のナビゲーションを用意

余計な情報を省き、撮影メニュー毎に必要な情報へたどり着けるように、各子ブログ毎にモジュールを用意し、それぞれに適したナビゲーションを用意しました。（以下画像は一部例です。）

子ブログ「赤ちゃん〜お子さま」のナビゲーション

子ブログ「ウエディング」のナビゲーション

撮影メニューに合わせたデザインとメインビジュアル

a-blog cmsは、テーマを継承できるためとても重宝しています。 フォトスタジオ若葉さんでは、撮影メニュー毎にターゲットも写真の雰囲気も変わるため、テーマの継承を利用して、それぞれの撮影メニューに合わせたテーマとメインビジュアルを用意しています。（以下画像は一部例です。）

子ブログ「赤ちゃん〜お子さま撮影」のtop.html

子ブログ「家族写真撮影」のtop.html

子ブログ「成人式撮影」のtop.html

子ブログ「マタニティフォト」のtop.html

カスタムフィールドで、キャンペーン等のチェック項目と、撮影内容を用意

カスタムフィールドを追加し、基本となる項目（料金や撮影内容など）を入力できるようにしました。 管理・運営をしやすく、かつ閲覧者にとっても視覚的にわかりやすくしています。

七五三撮影料金のカスタムフィールド

以下へ、カスタムフィールドについて記載いたします。

キャンペーン・イベント・コラムのカスタムフィールド

エントリーが「キャンペーン」「イベント」「コラム」に該当する場合は、チェックを入れると、それぞれの場所へエントリーが表示されます。

七五三撮影料金のカスタムフィールド：キャンペーン・イベント・コラムのチェック部分

キャンペーン・イベントに該当するエントリーの表示。

コラムに該当するエントリーの表示。（右側）

撮影内容のカスタムフィールド

基本的な情報「料金と内容について」「自由入力」「注意事項」をカスタムフィールドで用意することで、入力の漏れが少なくなり、閲覧者にとってもわかりやすいページとなります。 項目名が決まっている「料金と内容について」内の「内容」はチェックボックスで実装しています。

七五三撮影料金のカスタムフィールド：撮影内容入力。

七五三撮影の撮影内容表示。

ブログ毎にカスタムフィールドを用意

撮影メニューによって「料金と内容について」内「内容」の項目が変わります。 また、必要な入力欄も変わります。

そこで、ブログ単位でカスタムフィールドを作り分けています。

以下画像は、証明写真撮影のカスタムフィールドです。 七五三撮影のカスタムフィールドと違い、「料金」の下に「料金についての補足」を追加し、「内容」を証明写真の項目に合わせています。

証明写真撮影のカスタムフィールド。

証明写真撮影の「スタンダードプラン」の表示。

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

a-blog cmsを採用した理由

• 以前からa-blog cmsを使用していたため、サイトオーナー様が更新に慣れていること。
• コンテンツの管理がしやすくなること。
• テーマの継承で、効率的に作業を行えるため。
• 将来の運営も考えて構築できるため。（撮影メニューの増減や、子ブログ同士のエントリーの関連付けなど）

採用してよかったこと

コンテンツの管理、運営が楽になりました。 フォトスタジオ若葉さんのサイトで一番嬉しいところは「テーマ継承」です。撮影メニュー毎にイメージや掲載したい写真が違うため、それぞれにテーマの用意が必要ですが、基本となるテーマを継承することで、変更点のみの作業で構築できました。 カスタムフィールドをブログ毎に用できるので、撮影メニュー毎に増減可能な点がとても嬉しいです。

サイトオーナーの感想

ホームページをナチュラルなイメージにしていただいたことで、弊社のお客様（特に女性） から好評です。 リニューアルしてすぐに新規のお客様から続けてご予約が入ったので、動機やきっかけを お聞きしたところ、「ホームページが見やすく綺麗だったので」とか「毎朝通勤途中で見ていて 知っていましたが、写真やHPの雰囲気が良さそうだったので決めました」というお話でした。 写真館ということで、お客様はどんな写真を撮ってもらえるか、どんな雰囲気の写真館なのか 関心があるようです。写真をたくさん掲載するのももちろんですが、全体のイメージも女性の 心に響くよう柔らかい雰囲気を大事にしていければと思います。

北海道リース株式会社様は、「北海道に根ざした企業として、お客様とともに社会の発展に貢献する」という経営理念のもと、4つの行動指針（信頼・創造・尊重・公正）を掲げている、総合リース会社です。

ワークショップで会社全体を巻き込み、課題を共有。

リーグラフィでは、ウェブサイトの既知の問題点をただ単に改善するだけではなく「ユーザーにとって必要な情報をどのように発信し、何をゴールとするか」を明確にするため、北海道リース様のプロジェクトメンバーを中心とした社員の皆様と「ワークショップ」を開催し、課題解決に取り組みました。

ワークショップでは、ペルソナやカスタマージャーニーマップなどのUX手法を取り入れ、ウェブサイトの現状の課題と要件を整理・明確化しました。ワークショップの参加者は、クライアントのウェブ担当者やプロジェクトメンバーだけでなく、様々な部署の社員の皆様にご協力いただきました。ウェブサイトが果たすべき役割や、それに応じた課題を共有することができました。

更新箇所の多いコーポレートサイトでも管理しやすく。

ワークショップを経て、コンテンツの仕様を定める中で、「ここは頻繁に更新したい、年に一回だが、自社で管理したい」といった要望がでてきました。特に北海道リース様の場合、リースにかかる「補助金」の情報や、リース活用事例、企業の業績など、その種類や更新頻度の粒度もバラバラで、多岐にわたりました。さらに、担当者の運用負担を減らすことも同時に求められました。 そこで、a-blog cmsのコア機能である「タッチモジュール」を活用し、ページ上に「ログイン時のみ表示できる編集ボタン」を設置しました。特別なプログラミングの知識を必要とせず、短時間での実装が可能でした。 さらに、更新箇所を一つの領域におさめるため、ログイン後に表示される管理ボックス内に、横断的な「更新ボタン」を配置しました。

ログイン時のみ、画面上に編集ボタンを表示

ワンクリックで編集画面へ

管理ボックスで更新箇所を網羅するボタンを配置

クライアントサイドでスムーズに変更できるような配慮をすることで、運用しやすいウェブサイトが構築できました。

ビジネスカー「V-PLAN」の情報は、カスタムユニットで自由に増減可能に。

「V-PLAN」公開画面

「V-PLAN」編集画面

人気の車を低価格のリースで提供するビジネスパッケージ「V-PLAN」は、定期的に新しいパンフレットが刷新され、さらにウェブサイト上に直接表示する「人気車種」も更新が必要でした。人気車種は手軽に更新できるよう「カスタムユニット」を利用し、複数の情報が登録できるオリジナルのカスタムユニットで管理し、掲載順の変更も容易にしました。

リースのような、多種多様な商品（物件）を扱うようなウェブサイトであっても、様々なカスタマイズで対応可能であることが、a-blog cmsで実現できる大きなメリットです。

制作経緯・意図

以前のサイトは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が増える、そこから仕事やレビューなどの依頼もくる。 という認知が広まればいいなと思います。