NEW
Ver.3.2 すべての体験をアップデート

  1. トップ

ブランドサイト

ナチュリエリフォーム

概要

ナチュリエリフォームは札幌を中心とした、木のぬくもりや素材の風合いとともに家族とともに育てていく中古住宅+リノベーションの家をお届けしています。リノベーションのポイントである「暮らしがどう変わったか」を魅力的に伝える施工事例、検討段階で役立つ情報を得られるイベントやセミナー。ナチュリエリフォームのブランディングを、a-blog cms の複数の機能でサポートしています。

ブランドコンセプトに合わせてビジュアルを一新

2014年より弊社でウェブサイトの立ち上げから担当させていただいていたリフォーム・リノベーションブランド「ナチュリエリフォーム」。7年の時を経てウェブサイトをリニューアルしました。デザインはトレンドを取り入れつつも、色味やフォント、余白感でナチュリエリフォームらしい優しさや手作り感も表現しています。



施工ポイント毎に写真切り替え可能

リノベーションの施工事例を掲載するにあたって、一覧表示の時点で「部位ごと」に表示するアイキャッチ画像を切り替えられるように実装しました。1つの事例に対して複数の施工部位を写真付きで登録できるよう、カスタムフィールドグループを使い実現しています。



部位毎のBefore&Afterが掲載可能に

「リノベーション」という概念はここ数年で浸透しているので、もはや説明は不要ですが、まだ「リフォーム」と認識が混合している人もいらっしゃるかと思います。リノベーションでは「暮らしを総合的に豊かにする」ために、家の中の複数箇所を一度に施工します。複数の施工箇所に対して、施工前(Before)の写真も掲載可能にすることで、ナチュリエリフォームの良さを存分に引き立たせました。




手の行き届いた集客設計

「イベント」や「セミナー」といった集客にも関わるコンテンツは、トップページで積極的にPRしていく必要がありました。画面右下のフローティングバナー(スクロールしても着いてくるバナーリンク)は、クライアント様が好きなタイミングで自由に更新できるようバナーモジュールを活用しています。



社会医療法人柏葉会 柏葉脳神経外科病院

概要

北海道札幌市にある脳神経外科病院のウェブサイトを a-blog cms で構築しました。デザインにあたり、病院の患者さまが最も必要としている情報は何なのか、ペルソナを作りニーズを整理しました。その結果、緊急の性の高い患者さんのための情報をヘッダー部分に設置したり、連携する医療機関の医療担当者向けに入り口を用意しました。採用情報では、若手スタッフにインタビューを行い、リアルな声を発信しています。ほぼ全てのページを編集可能領域とし、デザイン性を担保しながら、クライアントが自由に管理可能になっています。

緊急時にも安心して連絡できる導線設計

「転倒して意識がない」「家族が脳の病気かもしれない」。そういった緊急性の高い症状であっても、患者様のご家族が安心して連絡できるよう、グローバルナビゲーションに「緊急の方」のポップアップボタンを配置しました。



柔軟性のあるバナーの更新

トップページにおける更新性を高めるため、メディアバナーモジュールを採用しました。クライアントが任意のタイミングで、旬のトピックを掲載することが可能になっています。



動的フォームを活用した採用エントリー

柏葉脳神経外科病院様では、採用情報をサイトに掲載しています、募集要項の更新だけでなく、採用のエントリーをフォームで受け付けています。職種別に、人事担当者が異なっていたり、受付したい項目も変える必要があったため、フォームは「動的フォーム」の機能で実装しました。採用の窓口拡大の一助となりました。



企業・個人で脳ドック申込みが可能

脳神経外科ならではのコンテンツとして、脳ドック申込みを行っています、最新・最先端の医療機器を使用し、重要疾患の早期発見・早期治療はもちろん、万が一何らかの疾患が見つかった時にも、脳神経外科・脳神経内科の各専門医が協力してサポートしています。ウェブサイトでは、脳ドックの4つのコースの紹介だけでなく、申込みの入り口としてフォームを設置しました。



彫刻家 佐々倉文

サイトの概要とCMS採用の経緯

本サイトは彫刻家 佐々倉文 様 の個展や作品の紹介、活動状況を掲載するための、日本語、英語の二言語サイトです。




既存サイトを日本語と英語の二言語サイトへリニューアルするという要件を実現すべく、多言語サイトの管理がしやすく、また通常の運用にあたってもウェブに詳しくない方でも作業しやすい実装が可能なa-blog cmsを採用しました。

日本語・英語の多言語管理




構築したブログは1つですが、エイリアス機能やルール機能を利用する事と、各カスタムフィールドやユニットを「共通情報」「日本語の情報」「英語の情報」に分ける事で、同一の管理画面ページ内で二言語分の情報を分かりやすく登録する事ができるようになりました。

以前、WordPressサイトで多言語サイトのリニューアルを行うにあたり、いくつかのプラグインを試した事があったのですが、各言語毎の情報がどうしても同一画面で管理できず、煩雑な運用になりがちでした。

a-blog cmsによる多言語サイトは管理しやすく情報の記入漏れがない運用が可能であると感じました。

多言語化において気を付けた点はエントリーのSEO設定です。 通常、SEO設定を入力しなくても、エントリーのタイトルがSEO設定に適用されますが、英語の場合はそのようにはできなかったため、入力された英語のエントリータイトルが英語版のSEO設定のカスタムフィールドに反映されるようJavaScriptで対応しました。

出力側では、同一のOGPモジュールの設定をルールで分けて運用するようにしています。


作品展のエントリーに、展示作品のエントリーを表示

「作品」と、「作品展」のページはそれぞれエントリーで管理しています。 作品展のエントリーでは、展示の情報や展示風景の写真を登録できるようにしていますが、エントリーの下部に、そこで展示された作品をポストインクルード機能で表示できるようにしています。

例えば「個展A」のエントリーに、「作品A」のエントリーを表示させる場合は、「作品A」のエントリーに用意したカスタムフィールドに「個展A」と入力する事で表示できるように実装しました。

以下の画像は「作品展」のエントリーですが、ページ下部に、「展示された作品」のエントリー一覧が表示されるようになっています。



管理画面側では、「作品」のエントリーに用意したカスタムフィールドに、表示させたい「作品展」のエントリー名を入力して頂く事で、表示が可能になるようにしています。



作品と作品展をデザインに関して

制作をご依頼を下さった佐々倉様は、高知県出身で、現在茨城県の笠間市を拠点に制作活動を行っている彫刻家です。

今回の制作においては、主役である作品が際立つように、白を基調に、無駄な装飾を省き、要素の余白やアニメーションのタイミングなどの「間」をゆったりと持たせました。

また、ウェブでもギャラリーの雰囲気を再現できるように努めました。

例えば、作品展のエントリーでは、実際の個展のように、個展に掲示する導入文や作品展の風景を登録できるようにし、最後に個々の作品をじっくりと閲覧できる作品一覧セクションを設けました。 ファーストビューには、物語の始まりを表現するために少しゆったり目のアニメーションを採用しています。



また、同じ作品でも角度によって表情が異なるため、作品のエントリー一覧では、別カットの写真重ねてチラ見せできるようにしています。



この正方形の写真は、作品エントリーに登録されるスライドショー画像をCMSでリサイズさせて表示しています。 CMSで手軽にリサイズさせる事ができるため、運用的に省エネが計れました。

手間の少ない運用が可能に

他にも、カスタムフィールドを活用することで、運用者がどこに何を書いたら良いのかを迷わないようにしたり、トップページに表示させる直近の展示情報を最新のエントリーから読み込んだりと、a-blog cms によって運用者の手間を極力減らす事が可能になりました。 管理画面のメニューをカスタマイズしやすい点も、気に入っています。

サイトを構築する側は、やりたい事が実現できて構築しやすい、運用する側は、手間を減らして管理しやすい。当たり前と言えば当たり前の事なのですが、a-blog cms はそんなサイトが構築しやすいCMSであると感じています。


美濃クラフト コーポレートサイト

制作経緯

1,000を超える個性豊かな商品ラインナップを誇る、岐阜県で表札・看板企画製作・卸をされている美濃クラフト様。販売形態はBtoBですがエンドユーザーとなる消費者のサイト閲覧も多く、様々なユーザーに対して会社や商品の魅力を見やすく分かりやすく伝えられるサイトへリニューアルを行いました。 毎年多くの新商品を発表され、商品の入れ替えも多いことから内製時の更新業務の負担に懸念があり、効率よく運用を行うためのツールとして a-blog cms を導入しました。

商品情報はCSV一括投入、各コンテンツで活用


新商品発表時などはCSVで一括登録、運用時は随時管理画面から調整可能

年2回の100件規模での大幅な商品入れ替えにはCSVでの一括投入機能を採用。一方で日常的な情報更新についてはCSVだけでなく画面を見ながら直接管理画面に遷移しての調整もできるため、作業規模に応じて最適な更新方法を選べるようになりました。 また、豊富なコンテンツを用意しているため商品情報は一元管理。登録された商品情報をもとに商品詳細ページだけでなく検索や廃番品一覧、取扱説明書ダウンロード等の各コンテンツを生成出来るようにし、運用やチェックの負荷を大幅に軽減しました。


情報をもとに商品詳細ページを生成

情報をもとに商品検索結果に反映


廃番フラグをもとに一覧ページを生成

説明書PDFがある商品の一覧ページを生成


関連エントリーで回遊性を、テンプレート書き出し機能で機能性をアップ

関連エントリー機能で回遊性アップ

表札や看板商品を実際に使用している施工実例が充実していたため、施工実例のエントリーと商品詳細のエントリーを関連エントリー機能を活用して紐付け。 サイト内の回遊性を高めるとともに、購入後の具体イメージがわかりやすい構成にしました。


施工実例のエントリーと商品詳細のエントリーを関連エントリー機能で紐付け


テンプレート書き出し機能で機能性をアップ

テンプレート書き出し機能とブラウザのlocalStorageを組み合わせ、ログイン無しで気軽に気になる商品を保存できる「マイリスト」機能を実装。 商品数が豊富なので、比較検討フェーズのユーザーに役立つコンテンツになっています。


マイリスト機能で気になっている商品を一覧で確認可能に


新潟MICEプロモーション

制作経緯

新潟県からの依頼で、新潟県内のMICE施設情報を掲載したホームページを制作しました。 このサイトは学会や各種イベントを企画予定の方に向けて、新潟の各種施設の情報をはじめ、補助金情報や新潟の魅力を発信し、国内だけでなく世界からもコンベンション誘致を図っています。

動画で新潟の魅力をPR



制作にあたり、協力パートナーさんと共同で動画を作成しました。新潟の魅力が存分に詰まった動画となり、訴求力を高めるコンテンツとなっています。 トップページのファーストビューにはダイジェスト版を設置してあります。

また、一部の施設紹介ページではストリートビュー撮影を行い、会場を360°見渡すことができるようにしました。実際に会場を見てみたいという検討中のユーザーが、現場に足を運ぶ前に規模感の確認ができるようになっています。



検索機能で、絞り込み検索を可能に




先方からの要望で、施設や体験プログラムなどをユーザーが絞りこんで検索できる機能を付けてほしいとのことでした。そこで検索機能を活用し、施設情報と体験プログラムそれぞれに検索ボックスを設置しました。 会場のタイプや面積、季節などで細かく絞り込むことができるようになっています。

カスタムフィールドで施設情報のフォーマットを統一




施設紹介ページのフォーマットが統一されるよう、カスタムフィールドを設置しました。Webの知識があまりない運用ご担当者様でも、項目に沿って内容を入力するだけで簡単に入力・更新できるようになっています。

施設の収容人数の部分もテーブルユニットではなく、1項目ずつ入力フォームを設置しました。




施設の機能的情報も、エントリー編集画面でチェックを入れるだけで、アイコン表示されるようになっています。



a-blog cmsで制作して

検索機能が欲しいという先方のご要望に応えるのにぴったりなCMSでした。
施設情報ページにおいては、必要な情報を各施設に差が無いように掲載する必要があり、すべてカスタムフィールド化することで平等性を保つことができました。行政が運営管理するサイトにおいて大事な点を守ることができています。
Webの知識がない、県の職員の方でも簡単に更新できるため喜んでいただけました。


お試し環境の用意はおまかせ!
a-blog cms のテスト環境を30日間無料でお試しいただけます