今回お客様からいただいたご要望はデザイン性が高く、管理しやすいホームページを作成することでしたので、a-blog cms を導入することで満足していただけました。

１. お問い合わせフォームのカスタマイズ

以下の赤い枠の部分は商品を発売する前に興味がある方がメールアドレスを入力し、ワンクリックだけで送信したいというご要望がありました。通常のフォームですと、確認画面が出たりしてカスタマイズしにくいところもありますが、a-blog cms のフォーム機能でスムーズに対応できました。

２. CMSを使って代理店登録

代理店のページが頻繁に更新されるので、使いやすいCMSが必要でした。a-blog cms の管理画面がわかりやすく、満足していただけました。

３.端末に合わせたメインビジュアルの表示

PCとスマホでそれぞれ違う見せ方を実現したいので、a-blog cms のシステムが静的HTMLのHPとうまく融合できるため、問題なく解決しました。

①以下はPCのメインビジュアルです。

②以下はスマホのメインビジュアルです。

以上の三つが今回PRポイントです。 よろしくお願いします。

概要

ホテル万長様は新潟県佐渡島にある老舗ホテルです。「佐渡の歴史と文化に出会う宿」として、相川まちあるきやオリジナル海洋体験といったサービスの提供や、佐渡ゆかりの書画・美術品を館内で公開されているなど、佐渡の歴史と文化を訪れた方に伝えたいという想いがとても強いお客様です。 万長様の熱い思いをWebサイトで表現するべく、a-blog cms の複数の機能を使いながらボリュームあるコンテンツを見やすく、またコンテンツを追加しやすい構成で作成しました。

デザイン性

和テイストを出すためにグループ機能を活用して装飾を施せるようにしたりと、情報量が多い中でも雰囲気を崩さない工夫をしました。またテンプレート感が出ないように、画像の位置・サイズや見出しサイズの調整、ギャラリー追加が可能な汎用性の高いユニットを開発し、複数ページで使用しています。

汎用性の高いユニットの使用例：お部屋ページ

右下の白い四角部分はお部屋ページ専用のパーツで、部屋の仕様がぱっと見てわかるようになっています。

汎用性の高いユニットの編集画面：お部屋ページ

お料理ページでも同様のユニットを使っていますが、必要なパーツのみを使うことで、外観が同じにならないよう、画像位置・サイズ、見出しの種類などで調整しています。

汎用性の高いユニットの使用例：お料理ページ

さらに旅館様はイラスト図での説明も入りやすいので、スマートフォンでの閲覧時にストレスがないよう、デバイスごとに画像を出し分けられるようにしています。このようにユニットとグループを工夫することで、各ページをそれぞれに印象的に仕上げることができました。

PC／表示画面

スマートフォン／表示画面

画像入れ替え／編集画面

操作性：まちあるきコースの追加が簡単にできるよう、専用ユニットを作成。

ホテル万長様が力を入れている「相川まちあるき」で新しいコースを追加される際、編集しやすいようにユニットのカスタマイズを行いました。まちあるきの目的地を順に入力すると、自動的に見出し番号が振られます。また上部にページ内リンクを設定するためのパーツを用意。簡単にページ内リンクを設置できるようにしました。

相川まちあるき／表示画面

相川まちあるき／編集画面

宿泊予約システムとの連携

これから実装予定ではありますが、サーバー上で予約システムと連携させるプログラムを稼働させています。プログラム自体はa-blog cmsのシステム外に置いていますが、共通パーツの表示管理はa-blog cms内でできるように組み上げています。

サイトの概要

dx-tohoku.jpは、東北におけるDX推進を目的に設立された団体一般社団法人DX NEXT TOHOKU様の公式サイトです。

本サイトは、コーポレートサイト、イベント等の告知サイト、DXに関する情報を提供するメディアサイトという複数の目的を実現するために制作致しました。

イベント・セミナーの管理機能

DX NEXT TOHOKUでは、DXにまつわるイベントやセミナーを精力的に実施しています。 このイベント情報を集約するために、専用のイベントブログを作成しました。

イベントに関する定型的な情報はカスタムフィールドを用意し、誰がページを作成しても構成が統一されるようにしています。 定型情報以外は、ユニットで追加できます。

また、入力された情報を利用し、「Googleカレンダーに登録」するボタンや、Googleマップへのリンクが自動的に表示されるようにし、運用者と訪問者の利便性を高めました。

エントリーページの例。Googleカレンダーに登録ボタンは、入力された情報を利用して自動的に表示されるように実装。

一覧ページ。GoogleマップのリンクやGoogleカレンダーに登録するリンクは入力された情報を元に生成されるよう実装。

執筆者の表示と管理機能

記事に信頼性を持たせるために執筆者情報を掲載できるようにしています。

記事ページの例。ページ上下に執筆者情報が表示されます。

執筆者は、専用のブログで管理しています。 これにより、ユーザ数に制限のあるプランでも制限なく執筆者を登録できます。

特定の情報を目立たせるPick Upセクション

メインビジュアルの下には、一時的に訴求したい情報を表示できるPick Upセクションを用意しました。 これは、モジュールIDの設定で、表示・非表示が切り替えられます。

Cookieで表示を管理できる追従バナー

訴求したい情報は、追従バナーとしても表示できるように実装しました。 このバナーは、常時表示させておくとユーザーの利便性を損なうため、一定の回数閉じられたら再表示しないようにCookieを利用して実装していますが、その設定を管理画面から行えるようにしています。

ランディングページ作成用のブログ

イベント等のランディングページを作成できるように、専用のブログを作成しています。 各セクションで、背景のデザインを変更できるように、このブログでは「ユニットグループ」の機能を利用しています。

構造データのマークアップ

このサイトでは、パンくずリストに加えて、通常の記事はArticleとして、イベントのページはEventとして、マークアップしています。 この条件の振り分けは、表示されているページの情報を教えてくれるグローバル変数を利用することで実現できました。

お客様の声

今回、a-blog cms の利用は初めてのお客様でしたが、操作性においてご好評を頂けました。

運用ご担当 O.H.様

運用ご担当 O.Y.様

制作を通して

標準機能で多くの事が実現でき、またお客様のニーズに合わせて柔軟に機能追加などが行えるがa-blog cmsの強みだと改めて感じられた制作となりました。

概要

子育てのお役立ち記事はもちろん、話題のグッズを試したり、子どもとイベントに参加したり… キッズアライズは、パパママが情報を学ぶだけではなく子どもと一緒に体験・経験できる、子どもの未来や子育てを応援するプロジェクト。 「もっといっしょに、もっと楽しく」をモットーに企画する様々なコンテンツ・しくみを、a-blog cmsの豊富な機能とオリジナル開発を組み合わせて実現しています。

会員機能の拡充

キッズアライズは、各記事は誰でも閲覧でき、プレゼント応募など特定のコンテンツは会員限定としているセミクローズドサイト。ログイン画面やマイページはデザインをカスタマイズし、サイトイメージを統一しています。 また、忙しいパパママのためのログイン簡略化も重要なポイントだったため、LINEログインを導入し、会員サイト特有のID・パスワード入力の煩わしさを払拭しました。

会員画面のデザインを可愛くカスタマイズ

LINEログインで利便性UP

プレゼント応募機能

会員限定のプレゼント応募フォームを実装。 カスタムフィールドで入力したプレゼント名をフォームに引き継ぎ、どのプレゼントへの応募なのかを管理側も読者側も分かるようにしています。

情報を引き継ぐことで様々なプレゼント応募をひとつのフォームで対応可能

ポイントプログラム

CMSの会員情報とオリジナル開発を組み合わせ、新規登録や1日1回のログインアクセスなどサイトを利用する様々な場面でポイントがもらえるしくみを構築。 マイページの表示も工夫し、10pt毎にアイコンをたまごからニワトリに成長させることでポイントを貯めていく楽しさを演出。サイトへの再訪や利用を促す施策として活用しています。

サイト閲覧でポイントがたまる

ポイント履歴も閲覧可能

アイコンの変化と目標までのカウントダウンで、ポイントをためる楽しさを演出

エントリーのカスタマイズ

子育てのスキマ時間での閲覧が想定されるため、記事の概要把握や読みたいセクションへの移動に役立つ目次を用意。見出し指定したテキストユニットを目次として自動表示することで、運用の手間はかけずに利便性を向上させています。 また、イベント・プレゼント情報には専用のカスタムフィールドを用意すると共に、JavaScriptで期間終了時には自動で終了表示に。管理しやすく読者も混乱しない仕組みを作りました。

目次を自動表示

期間終了時には自動で終了表示に

特集ページ

タグ付け・関連エントリー機能を活用し、テーマ毎に記事を取り上げる特集機能を実装。コンテンツ企画の自由度が増すと同時に、公開の時系列に関係なくニーズに応える情報提供をしやすくなりました。 各特集ページは、メイン画像だけでなく装飾画像や背景色・柄・パンくずリストの色に至るまで管理画面で自由に設定可能。CMS更新の利便性は残しつつ、特集としての特別感あるデザインを維持できるようにしています。

デザインにかかわる複数項目を管理画面で設定可能

▼実際の特集ページ

サイト内検索機能

年齢別でも探せる検索機能

毎月5～10記事をコンスタントに公開しているため、見たい記事を探しやすくする検索機能も用意。「体験・経験する」「読む・見る」といった主要カテゴリだけでなく、子どもの年齢・イベントあり・プレゼントあり等のキーワードでも絞り込みができ、自分の子育てに合った情報、いま知りたい情報を探しやすくなっています。

積極的な情報発信

エントリーをメルマガとして配信

広く情報発信するLINE公式アカウントやTwitter・Instagramに加え、メールマガジン機能により会員のみを対象にした積極的なアプローチが出来るようになりました。 プロフィール情報として登録するメルマガ受信可・不可の設定に基づいた配信ができるため、運用時の配信先設定等の手間なく情報発信が出来ています。

UTSUWAを使ったサイト構築への挑戦

求人サイトをメインターゲットにしたUTSUWAテーマの理解を進めながら、この美しく機能的なテーマを「採用サイト以外にも利用する」ことを一つのチャレンジとして、本サイトを制作しました。

元々「株式会社データファームは何をやっているかが分かりずらい」「どんなお願いをして良いのかわからない」と言われることが多くなっていました。

• 株式会社データファームにお願いできることは何か
• それをお願いすると、どのようによく変わるのか

この2点を達成することがリニューアルのゴールです。 そのために

• PC、スマートフォンの両方で、ストレスなく快適に閲覧ができること
• 公開後も、柔軟にサイトの増改築ができること

以上をサイトリニューアルの技術的なテーマとしています。

「単なるスマートフォン対応ではなく、スマートフォンに最適化した快適さを実現すること」 コンテンツ理解のためにはこれが必要だと感じました。

また、初期のコンテンツ計画が十分な成果に至らない場合には設計を変更する必要があります。設計が大きく変わった場合でも柔軟に対応できることも必要でした。

見ている人が気軽に「サイトにアクションできる」ための「いいねボタン」

株式会社データファームのサイトを閲覧した方に親しんでもらうには。サイトにアクションができること。つまり「いいね」機能が必要だと感じました。ただし多くのいいねボタンはアカウントのログインを求めるものが多く「誰でも気軽に」いいねできるものではありませんでした。

サイトに必要なものを、サイトの機能で構築する。降って沸いたこのチャレンジに、a-blog cmsのモジュールと「Form2Entry」の組み合わせで実現しました。いいねのデータを専用の子ブログ内にストックすることで、そのデータをさらに活用して、いいねの推移グラフなどを実装することができました。

a-blog cmsにあった「目次」の機能も利用することで、ブログのエントリーを俯瞰しやすく、わかりやすいデザインにすることができました。

全国への導入を、誰にでも分かりやすく

当社の事例をサイトに掲載することも「株式会社データファームに頼めること」を見える化する大事な作業です。今回タブレットレジの導入については、導入店舗情報を一目でわかりやすくするために、Googleマップを導入しました。

当社は静岡の企業ですが、この地図をみることで「全国どこからでも頼むことができる」ということが伝わりやすくなりました。「九州から、静岡まで」言葉にすれば誰でも理解はできると思います。ですがそれがどこまで広範囲であるのか、地図で見るような実感を得ることができません。

このページを見ていただくだけで、多くのお客様に安心していただけるようになりました。またリニューアル後、大阪をはじめ、いろんな地域でのお問合せをいただくようにもなしました。

今後の課題

事業案内の整備がほとんど進んでおらず、最低限の状態でしかありません。こちらのコンテンツの整備が次の課題になります。また、異業種のサービスサイトを見るにつけ「FAQもあった方がいいな」など「初めて見る方でも、十分に必要な情報をが分かるウェブサイト」のためにやるべきことを日々考えています。

サイトにコンテンツを追加するたび、新たなアイディアを追加するたび、更なる設計の変更やコンテンツや動線の追加が必要になります。そのあたりをコツコツじっくりと、最後までa-blog cmsとやりきれるようにと思っております。

またメールベースだったお客様のサポートについても「顧客専用ページ」を用意することで、お客様の担当者が今後変わってもサポートを参照できるようにできれば良いなと思っております。