地元の方に愛され続ける美容室のウェブサイト

地元の方に長く愛されている美容室。ディンプル美容室のウェブサイトは、見る人の年齢幅も広いことから、シンプルで見やすいデザインにしました。また、スタッフの写真とメッセージでお店のほっこりした雰囲気が伝わるり様々なサービスがあることが伝わるようにしました。 ロゴマークも元気をもらえて活気のある美容室であることが一目でわかるよう、びっくり箱と笑顔をモチーフに新しくリニューアルし、ウェブサイトでデザインにとっても印象に残りやすいように工夫したポイントになっています。 当初、予約フォームなどの設置も考えましたが、メールをチェック・返信などのが負担になるかもしれないため、LINEにお問い合わせ・予約などを集中させ、簡単に返信などできるようにしました。

シンプルなデザインで見やすいデザイン

お店のカラーのグリーンを使い、やさしいイメージにし、写真・文字などのレイアウトもできるだけシンプルにして余白を広くし、見やすく読みやすいように工夫しました。 シンプルなデザインにすることで、様々な大きさのデバイスでも統一したデザインできるメリットもありました。

グローバルメニューも上部固定で操作しやすく

グローバルメニューは、上部に固定しスクロールしても操作しやすいUIになっています。レスポンシブデザインのため、スマートフォンの時はハンバーガーメニューにし、且つ電話もかけられるようにしています。フッターにも分かりやすいナビゲーションを設置して、操作性を高めています。

スタッフ紹介ページで親近感を

スタッフ紹介ページでスタッフの方を詳しく紹介することで、親近感をもってもらい来店につなげていけたらと思いました。はじめて美容室を利用したお客様でもウェブサイトのスタッフ紹介ページを見て、以前から知っている人に施術してもらっているような効果もねらっています。 地元密着型のお店にとっては、スタッフ紹介ページはとても重要など感じました。

施術メニューと料金を分かりやすく

どのようなサービスがあるのか、料金がいくらなのか、来店したことがないお客様にとっては一番気になることかもしれません。そこを正確に分かりやすく伝えることを心がけました。他のお店ではやっていない「無料送迎」や「訪問美容」もしっかりアピールし、サービスが豊富であることを伝えています。

継続してブログ記事を書いていただけるように

ネットリテラシーがあまり高くないオーナーさまでも、継続してブログの記事を書いていただけるようにブログの更新が簡単なa-blog cmsを選びました。 文字をたくさん入力するのが苦手な方でも、たくさんの写真を簡単にアップできるので継続してブログを更新していただけています。

「ナチュラル＆スローな家」がコンセプトの、自然素材の新築一戸建て住宅のブランドサイトです。 実際に住んでいるオーナー様をインタビュー形式で紹介した「オーナーインタビュー」、建築中の様子を振り返ることができる「建築日記」など、豊富な事例を複数のフォーマットで展開しつつ、同一の施工主を「関連エントリー」として紐づけています。 また、コンテンツの順番が柔軟・かつ自動的に切り替わる仕組みを導入し、パーソナライズ化のエッセンスを取り入れ、住宅の検討段階に応じ、ほしい情報にアクセスしやすくなっています。

SNSとの結びつき

住宅の販売にあたり、オープンハウスや様々なイベントを開催しているナチュリエ様。ウェブからの集客に力を入れており、記事ページにPinterestの登録ボタンや、SNSシェア用のボタンを配置し、サイト外のチャネルを積極的に作る仕組みを導入しています。

全国の加盟店が続々とイベント情報やブログ記事を投稿

加盟店が何店舗かあるため、アカウントをそれぞれ作り管理しています。編集権限を「投稿者」にすることで、エントリーの作成のみできるようにしました。 また、素敵な住宅の事例を多く公開するため、a-blog cmsのエントリーとして管理。 フォトギャラリーやオーナー様のインタビューなど、写真を中心としたコンテンツを数多くCMSとして管理できます。

スタッフの登録もCMSとして管理しており、スタッフ紹介やブログの投稿者に自動で反映させることが可能となっています。

スタッフ紹介ページ

スタッフブログページ

イベントの開催も盛んなので、スタッフブログや店舗紹介ページとイベントページを連動しコンバージョンにつながる動線を取り入れています。

スマートフォンでも使いやすい設計

スマートフォンの表示にも配慮しており、すぐにコンバージョンできるよう、下部に電話などのボタンも配置しています。電話番号はcookieを利用して、ユーザーがスムーズにアクションを起こせる環境を作りました。初期状態は「店舗紹介」ですが、店舗ページにアクセスすると「◯◯店に電話」へと切り替わり、手軽にお問い合わせができるようになります。

初期状態

店舗ページにアクセス後

タグとランキングを活用したコラム

コラムページは、家具の選び方や家づくりのヒントなど役立つ情報を発信しているコンテンツです。a-blog cmsのタグ機能を利用して、ユーザーがスムーズに見たい記事を絞り込めるようにしました。そして、人気の記事がひと目でわかる、a-blog cmsの機能である「Google Analyticsランキングモジュール」を導入しています。Google Analyticsと連携することで、1ヶ月間の閲覧数の多い記事をオートマチックに紹介できます。

ペコマガは、株式会社ペコトが自社で企画運営する広島のタウン情報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で実現できる大きなメリットです。