概要

「販促イベント百貨店　イベデパ」は、株式会社フレアン様が運用する、携帯キャリア業界のイベントプロモーションをサポートする完全会員制の情報サイト。 イベント運営にかかわる知見の属人化や営業担当者のリソース不足、運営実績の認知度UPが課題となっており、自社の知見や商材・実績を詰め込んだサイトを構築しました。 気軽に情報を追加更新できるようa-blog cmsを導入し、これまで担当者がそれぞれ個別で完結さていた業務について周知・均質化が出来るようになると共に、取引先からの相談が自然と集まる環境を整えることができました。

イベント会場をイメージした明るいサイトデザイン

イベントプロモーションのための情報サイトのため、サイト自体をデパート・イベント会場のようなデザインに。豊富な商品を扱っているためカラフルに、また、たくさんの代理店から親しまれるように明るく楽しいイメージで制作しました。

商品カテゴリはデパートをイメージした楽しいデザインで表現

カテゴリ扉にはモチーフを更に具体化したイラストを配置

TOPページのみ、デザインをご覧いただけます！

本サイトは完全会員制のため実際のサイトを見ていただくことが出来ないので、TOPページのみスクリーンショットを用意しました。是非ご覧ください。

トップページ

完全会員制の情報サイト

新規営業時のサポートツールとしてや、既存取引先の満足度向上・ニーズ掘り起こし材料として活用するため、サイトは完全会員制に。BtoB向けのため1アカウントを取引先の複数人が共有することを想定し、読者ユーザーの作成及びパスワード変更はサイト管理者のみが行えるしくみにしています。

サイトは完全会員制

会員登録を申請後、管理者が読者ユーザーを作成

カテゴリ毎に探しやすい検索機能

カテゴリ毎に商品数がとても豊富なため、サイト全体ではなくカテゴリ内で検索できる機能を設けることで迷うことなく操作ができるようにしました。子カテゴリも表示できるようにし、商品分類を一目で把握しやすくなっています。 イベントスペースは全国地図からまずは地域を選べるようにする、検索結果が0件の場合はお問い合わせに誘導する、など、直感的に操作できるよう設計しました。

カテゴリ内の検索機能

イベントスペースは地図から検索

検索結果0件の場合はお問い合わせに誘導

制作経緯

富山のこだわり米農家から安全でおいしい有機米・無農薬米・特別栽培米を全国へお届けする農家直売サイトです。 約10年間ほど静的サイトで直売サイトを運用されてきましたが、利用していたカートサービスが終了となってしまうので、カートサービス変更の機会にレンタルサーバー契約、ドメイン取得、SSL化、CMS化、レスポンシブに対応したサイトへのリニューアルの話を制作パートナー様からいただきました。

アピールポイント

カートサービス終了期限の関係と予算が決まっていた事もあり、特に難しい機能は利用していませんので、ゆったりした雰囲気を味わいながら、光男の米栽培のこだわりポイントや活動内容を知っていただけるようにレスポンシブ対応ではありますが、なるべくデザインファイルに忠実にデザイン設定を行いました。 また、毎年の収穫の際に手早く簡単に新年度分の商品販売準備を行なえる更新方法を考えてみました。

デザインの再現性を高めるユニットの拡張

文字と画像のバランスや文章のニュアンス等によっては基本で設定されたユニットの余白サイズとは異なるサイズにしたい場合も多く、特定のデザインを手軽に適用させることも出来るように、よく利用するテキストユニットの[p]、[ul]、[ol]、[dl]タグにclassを適用できるようにしました。テキストユニットのセレクトに追加するケースもありますが、タグ別に何種も設定を追加するとセレクト選択時の操作性が悪くなるので、class入力欄を拡張する方法をとっています。 メディアユニットの画像下の余白の方は属性で数種類の余白をセレクタで選択できるようになっています。

テキストユニットのclass拡張

メディア画像の余白選択

毎年の商品案内メニューの更新を簡単に

トップページの商品案内メニューは変更があっても更新が簡単に出来るように、モジュールのカスタムフィールドグループで商品メニューを作成しました。

トップページの商品案内メニュー

商品案内のメニューの設定画面

カスタムユニットでカート設定とカートシステムへデータの引き渡し

[ カートの設定 ]

• 精米方法のセレクト設定は（玄米/5分/7分/白米）の中から最大4種類から選択することができます。（商品によってセレクト数や精米方法選択が異なるので、対応できるようにしました。）
• 在庫選択状態により[カートに入れる]ボタンのテキストを[準備中]や[販売終了]に変更させたり、ボタンが有効化/無効化されるようになっています。

[ 商品データの引き渡し ] 「カートに入れる」ボタンクリックでご注文された米の種類と重量のコード組み合わせ、精米方法（玄米/5分/7分/白米）セレクトの選択判定でカートシステムに注文商品データを引き渡します。

商品のご注文画面

商品説明設定

ご注文パーツと注文時のデータの設定

a-blog cms を採用した理由

利用していたカートサービスの終了で安価なネットショップサイトでの構築も制作パートナーさんの方で考えられたようですが、光男の米サイトはネットショップというより、活動案内的なサイトなのでネットショップのテンプレートが合わず、リニューアルでも従来の「ホームページ」＋「カートボタン埋め込み」という形にされたそうです。以前からa-blog cmsを採用したCMSサイトを数件一緒に制作させていただいており、更新のしやすさではやはりWordPressよりa-blog cmsに軍配があがるとa-blog cmsの採用が決定しました。 公開が新米販売開始時期に近かったので、商品メニュー設定や商品カート設定がほぼ整った状態で納品したのでオーナーさんの方では商品関連の大きな更新は今年の9月頃までないと思いますが、商品カートの在庫の設定やコメント欄、営業日カレンダー、お知らせ、ブログは頻繁に更新・活用いただけているようです。

決済についてはクレジットカード決済の必要ないとの事でしたのでa-blog cmsのカート機能を利用しては？とも思ったのですが、ご注文総重量とお届け地域による送料設定等が簡単に出来るのかという疑問があったのとカートの切替え時期が迫っていましたので、従来と同じようなカートサービスを利用することになりました。 前回のa-blog cms LIVEで秋頃にa-blog cmsのカート拡張アプリを用意されているとお聞きしました。カートの機能が強化が凄そうなので、楽しみにしています。

2023年に開催される「第22回国際⾃動制御連盟総会」（IFAC World Congress 2023）の公式Webサイトを a-blog cms で構築しました。

IFACは制御科学技術の理論と応用を研究テーマとし、工業分野のみならず、理学、医学、農学、環境学、社会、 経済学等幅広い学術分野について「自動制御」という視点で横断的な研究を行っています。3年毎に開催される世界大会期間中は約2,500名の参加者が集まり、議論を交わします。今回は1981年に京都で開催されて以来、42年ぶりの日本での開催となります。

国際会議のサイトであることから、論文の募集やタイムスケジュールなど高い更新性、セキュリティを求められるため、a-blog cms をコンテンツ管理システムに選定いたしました。また、世界各国から期待の寄せられる会議であることから、システムの制約にとらわれることなく、デザインの作り込みを行いやすいという点でもアドバンテージとなりました。

カスタムユニットによる自由なページのレイアウト

本サイトは下記のページに分かれます。

• 主催者挨拶、会議について
• 論文の募集要項、参加登録について
• タイムスケジュール
• 開催地・会場の情報
• スポンサー、出展者のリンク
• 過去のイベントへのリンク
• ロゴのダウンロード

それぞれのページがCMSで更新できるように、次のようなカスタムユニットを開発しました。

タイムスケジュール用のユニット

スポンサーバナー用のユニット（PNG形式とSVG形式を掲載できるように）

また、更新しやすいように画像の横並びは、ユニットの「グループ」で「2カラム」のように指定するのではなく、カスタムユニットで登録できるようにしました。

画像の横並びユニット

画像の横並びにカスタムユニットを使用することで、セクションごとの色分けを「グループ」で表現できました。

グループによりセクションの色分け

モジュールによるトップページの更新

トップページの「Important Dates」や「About Yokohama」のスライドショーはマウスオンで編集できるようにしました。マウスオンで編集画面がモーダルで立ち上がる、パーツごとに更新する箇所をまとめられるのは他の製品にない魅力です。

イベントの編集

スライドショーの編集

ナビゲーションを一元管理しメンテナンスしやすく

ヘッダーのドロップダウンメニュー、スマホのナビゲーション、フッターサイトマップは、ナビゲーションモジュールにより一括管理するようにしました。また、各ページのローカルナビゲーションについては、見出しユニットから自動的に生成することで、管理の工数が最小限になるようにしました。

英語版の管理画面も用意

a-blog cmsでは英語版の管理画面も用意されているので、日本以外のメンバーが増えたときにも更新できるようになっています。一部日本語のままの箇所もありますが、今回の国際会議の用途では導入の決め手の一つとなりました。

概要

タカハラコーポレーション様のオフィシャルサイトです。 自社開発されている超高品質のビバフィルムを活用したフィルム・テープといった製品から、建物のクリーニングなど環境の美化に関わるサービスを紹介しています。 今回サイトのリニューアルのお話をいただいた際のご要望として「集客を強化」し、リード獲得を目指したサイトにしたいとご要望をいただきました。 その上でマーケティングとブランディングの両輪を回すことを念頭に、企画から設計、デザイン、サイト構築まで一貫して制作しました。

CMS活用経緯

CMS活用の理由は、大きく2点あります。 一つは情報量の多いページを複数展開するためです。 旧サイトの課題として、魅力的な製品が1ページにまとめられており、商品の魅力を十分に伝えきれていない点がありました。さらに製品によってターゲットやニーズが様々であったため、各商品ページをLPとして機能させる必要がありました。 もう一つは、柔軟性の高いフォームが必要だった点です。 サイトコンバージョンの資料請求やお問い合わせには、もともと業界情報サイトへ依存率が高かったため、こちらも自社で完結することを目指し、カスタマイズ性の高い a-blog cms で実現することとなりました。

デザインのねらい

タカハラコーポレーション様の「建物の美観を維持する企業イメージ」に合わせ、サイト全体で清潔感とクリーンさを表現したトンマナに設定しています。 また、事業やサービス領域が広いため、様々な目的を持ったユーザの来訪が予想されていました。 訪れたユーザがスムーズに必要な情報に辿り着けるように、導線やユーザービリティに配慮して制作しています。

＞TOPページはこちら

TOPページのメインビジュアル1

TOPページのメインビジュアル2

カテゴリや用途によってサービスを検索できる

多様な製品・サービスがあるため、カテゴリーとは別に「製品の形状」や「用途」といった属性をもたせました。これにより製品知識が少ないお客様でも、ご希望に沿った製品を紹介できるようにしました。

＞一覧ページはこちら

製品検索ページ

大ボリュームのコンテンツもテンプレート化することで制作しやすく

各商品ごとに、情報量とターゲットキーワードを意識したコンテンツの制作をこころがけました。 製品の特徴やニーズ、利用シーンなど、製品に関わる情報を掲載することで、各商品ページがランディングページとなるよう制作しました。 このような大ボリュームな情報もテンプレート化してあるため、20点近くある製品ページも一気に制作することができました。 また今後製品が増えた場合でも簡単に集客力のあるページ作成が行なえます。

＞製品ページはこちら

製品詳細ページ

製品詳細ページの編集画面

フォームをカスタマイズして、資料のダウンロードを実装

製品カタログやチラシなどを選択して、必要情報を入れていただくと資料ダウンロードができます。 見た目も通常のチェックボックスにせず表紙のビジュアルを見せることで、押しやすくしています。 これにより、目当ての製品以外にも気になる製品を直感的に気軽にダウンロードしていただけることも狙っています。

資料ダウンロードフォーム

確認画面

CMSの特性を活かしたコンテンツを導入し、今後も成長するサイトを目指しています

今回CMSの活用により、今まで目立たなかった製品にもスポットが当たるようになりました。 さらに今後は制作して終了ではなく、コンテンツの追加や改善カスタマイズを行い、「成長するサイト」を視野に入れています。 具体的には、CMSの特性を活かした「導入実績」を実装し、そこで投稿された実績を各商品ページに表示させる想定です。これでより製品導入をイメージしやすくなると考えています。 また子ブログの機能を活用し、「ビバブロ」として企業オウンドメディアブログを開設します。工場・店舗の環境美化に関するプロ視点の情報を発信し、ブランディングや集客に活用する予定です。 （現在絶賛制作中！）

概要

本サイトはスターク株式会社様のオフィシャルサイトです。 スマート解体を掲げ、高い専門性を活かした解体コンシェルジュとして、ご依頼から完了まで徹底サポートするスターク株式会社の事業内容をご紹介しています。

デザインねらい

現場イメージの強い解体業界ですが、スターク様のビジネスでは、現場にITを導入し、よりスマートに安心にサービスをご提供できるといった特徴がありました。 そこで解体のイメージを伝えつつインテリジェンスな雰囲気も伝えるため、軽やかな色調や疾走感のあるデザイン表現で、シンプルかつ親切な表現でサービス内容を伝えています。 これにより、重機や建築物などを連想させる無骨なイメージのサイトが多い建設業の中で、イメージの差別化を図っています。

サイトオーナー様の感想

スタートアップ企業ということもあり、事業内容を具体化していくところからクライアント様と一緒になって考えました。 「スマート解体」というコンセプトに落とし込んだことで、お客様自身も自分たちの強みを考えやすくなったとともに、今後ブログ記事の内容に関してもテーマを持たせやすくなったと大変満足していただけました。

CMS導入経緯

ブログ、ニュース、解体実績など、更新性の高いサイトにしたいとのご要望があり、CMSを導入いたしました。

CMS活用箇所1

「ブログ」、「ニュース」、「解体実績」にてCMSを活用しております。

▲ブログ

▲ニュース

▲解体実績（投稿記事はすべてダミーです。）

▲解体実績　詳細（投稿記事はすべてダミーです。）

CMS活用箇所2

「TOP」と「業務領域」にもCMSを活用しました。