福岡県行橋市にある水産加工会社「株式会社元気水産様」より地元「行橋市箕島」でとれる鱧と牡蠣のブランディング、自社の広報のためにオウンドメディアマーケティングもできるホームページを作成したいとのご依頼がありました。 公開後はご担当者様での運用を行うとのことでしたので初心者でも使いやすいCMSであるa-blog cmsを導入させていただきました。

動画コンテンツを使ったブランディング

こだわりページ (抜粋)

ファーストビューでは、仕入れ（競り）から加工、製品の出荷、そしてお客様の食卓に製品が届けられるまでの動画を設置し、「食卓の笑顔が見られるように皆様へ元気をお届けする」という企業理念をユーザーに伝える工夫をしています。 また「こだわり」ページでは「仕入れ」「加工」「配送」「笑顔の食卓」と言う4つのセクションで区切り、動画とドキュメンタリー形式の文章で、各セクションのこだわりをユーザーに対して訴求しています。

スマートフォンから大型モニターまで対応させたレスポンシブデザイン

ビジュアルやコンテンツは意図した形で読み手に伝えなくてはいけません。 そのため「どの端末」ではなく「あらゆる表示サイズ」でビジュアルとコンテンツが読み手に最適な形で伝わるよう、サイト内では5つのブレイクポイントでデザインを調整し、デザインがシームレスに変動するようにしています。

レスポンシブデザインに対応した運用しやすい仕組みを目指して

カスタムユニットによるコンテンツの作成

カスタムユニットによるグラフィカルなコンテンツ（PC表示時）

（SP表示時）

運用担当者がHTMLやCSSの知識を必要とせず、どうやったらレスポンシブデザインに対応したコンテンツを作成できるだろう？と考えた時、ブロック型エディタを採用しているa-blog cmsの採用を決定しました。その結果、お客様に実際にコラム記事を作成して頂いたところ「Facebookを更新するぐらいの感覚で記事を作成できるので運用するのが楽しい！」「パソコンの操作に慣れていない人でも更新ができるのでありがたい」などと言った嬉しいお言葉をいただけました。

また予め決めていたデザインレイアウトを挿入できるカスタムユニットや余白を調整できるカスタムユニットを実装することにより、より一層グラフィカルなコンテンツを運用担当者でも簡単に作成できるような工夫もしています。

運用性や保守性を考慮したデザイン設計

Japan Web Production StandardsのXDファイル

Japan Web Production StandardsのXDファイルを元に作成したXDファイル

良いWebデザインは見た目だけではなく、運用性や保守性も考慮したデザインだと思っています。 そのような点を考慮していないデザインや設計では、公開後に修正やデザインパーツの新規追加などがあった際に不必要な工数が発生します。

そこで今回はWeb制作会社の（株）ワクグミさんとサムライデザインの小佐々さんが連携して制作した、CSS と JavaScript の UI コンポーネントを組み合わせた Web サイト用のフレームワーク（Japan Web）を使用して制作を行いました。

このフレームワークを使用したことにより、決められたルールに沿ってのデザインと構築を行うことができ、自身の行うべき作業に集中して制作を進めることができました。

質の高い建物の供給を通して、人びとの幸せに貢献する、株式会社ホームデザイン。生産直販の一貫体制でRC建築を設計・施工・販売する会社様で、「街を変える挑戦」というコンセプト・想いを、迫力のある写真や動画を駆使しインタラクティブにウェブサイトで表現しました。キーカラーはビビッドなオレンジを採用し「人を幸せにするチカラ」を感じさせる、シンプルながらも活力のあるデザイン設計にしました。

防音マンション「ラシクラス」の物件販売状況をa-blog cmsで管理

ホームデザイン様のウェブサイトでは、不動産投資を検討している方に向けた「販売物件」をa-blog cmsで運用・管理しています。物件購入希望者に向け、建物仕様や土地面積など、細かな情報掲載が要求されました。不動産情報のような項目の多いコンテンツは、カスタムフィールドのような独自の項目設定が複雑になりがちですが、a-blog cmsではHTMLベースでカスタムフィールドを作成でき、管理画面への反映、表示確認も、とてもスムーズです。

Google Maps API で地図を表示

物件の購入において、物件の「所在地」は非常に重要な要素です。a-blog cmsには、Google マップを挿入するユニットが標準で用意されていますが、今回は、物件毎にマップの挿入がほぼ必須であったため、カスタムフィールドとして提供しました。 a-blog cmsでは、公式ドキュメントでGoogle Maps APIの導入の流れが用意されています。API keyを設定することで、Google マップをページに挿入することができます。今回の物件情報のように「所在地」を地図で表示したい場合にとても便利です。 さらに、エントリーが持つGoogle マップの情報を集約し、物件の所在地を俯瞰して確認できる「全体マップ」も実現できました。

グループ会社の一部も、a-blog cmsでリニューアル

ホームデザイン様は、飲食事業や宿泊事業（ホテル・旅館）など、建築を軸とし、様々なジャンルのグループ会社を展開しています。a-blog cmsは設計思想が「企業のやりたいことが実現しやすい」というところが魅力的で、クライアント様からも好評を得られています。

整体事業を中心に多数の事業を運営している株式会社ベアハグ様では、これまで店舗ごとにブログはもっていませんでした。ですが、お客さまのご要望として店舗ごとにブログをやりたいというものがありました。各店舗間での運用方法の統一等を行い、より運用を活性化させるため、a-blog cmsを導入することになりました。

オフィシャルサイトのリニューアルは多店舗の検索機能を導入するために、基本機能で検索に優れているa-blog cmsはうってつけでした。ブログと同じく多数の店舗情報があるため、各店舗ごとのスタッフ情報などの更新をお客さまでも実施できるように構築することが必須条件でした。

リニューアル以前はオープンソースのcmsを使用しており、セキュリティ、メンテナンス、インフラ等も問題が多々起きていたこともあり、オフィシャルサイト・店舗ブログそれぞれにa-blog cmsを個別で導入し、問題解決を図りました。

整体事業へのユーザーの流れを意識

コーポレートサイトとしての役割の中にも、中心軸である整体事業へのユーザーの流れを考慮しファーストビューに需要の高い関連メニューを抜き出して配置しました。

ブランドカラーとキーワードの調和

クライアントのブランドカラーとキーワードである「愛情」を意識し、温もりと優しさを感じる白×白茶色で構成。男性客も多いことから、アクセントに黒を配置し引き締めました。 また事業毎にカラーを設定し色によるカテゴライズをしています。

豊富な店舗情報を整理して配置、レスポンスはしやすく

店舗の情報を網羅しやすいようタブによる切り替え、またどのタイミングでもアクションを起こせるようレスポンスエリアをスクロール追従にしています。

幅広いユーザー層を意識したスマホレイアウト

スマホデザインでは、メニューの位置を（全体の7割ほどを占める）右手ユーザーが親指でタップしやすい右上に。ボタンは、年齢が高いユーザーでもタップしやすいサイズを確保することを心掛けました。

店舗検索一覧ページでは、新規客・既存客にとって優先的に知りたい情報を選択し、「比較しやすさ」を意識してスクロール（移動）範囲が狭まり・かつ情報を取得しやすい余白やフォントサイズに配慮しました。

豊富な店舗情報をお客さまが更新

多くの店舗を運営されている企業様のサイトなので、それぞれの店舗の内観や営業時間、働いているスタッフ等の情報をカスタムフィールドやカスタムフィールドグループを使い、お客様側から簡単に内容が編集できるようにしています。

内観を見せるスライダーには、好きな枚数登録できるようになっていたり、店舗の特徴にチェックを入れることでそれぞれの項目に応じたアイコンが表示される様にしました。 また、働いているスタッフの部分も顔写真、名前、スタッフのランクまで設定できるようになっています。

さらに、各店舗ごとのブログの最新記事が表示できるようになっており、気になる店舗へのブログの動線も用意しました。 ネット予約ができる店舗では、ネット予約URLを入力いただくことでそれぞれの店舗へ予約することが可能になっています。

a-blog cmsで構築してよかった点

ベアハグ様のような各地に多くの店舗を持ちながらも、それぞれの店舗で独立したブログを運用したいといった要望があった場合に、a-blog cmsであれば1つのCMSだけで多くのブログを子ブログとして複製でき、管理できるという点が大きいと思います。

また、国産のCMSでライセンスを購入して使用するのものになるので、セキュリティの面で安心でき、技術サポートも受けやすいことが魅力です。

実装後の状況・反響（ベアハグ様よりの声）

店舗ブログについて

投稿の一覧が見やすくなったと感じています。 各店舗でブログが投稿でき、管理がしやすくなりました。

オフィシャルのリニューアルについて

「見たいものが見つけやすくなった」 「明るく、見やすい」 といった言葉をお客さまから頂いています。

株式会社サン・レッツ様のサンライズビルサイトリニューアル制作を、セキュリティの高い国産CMS『a-blog cms』を使用して構築を行いました。

サンライズビルサイトでは、東京と大阪でイベントホールの貸出サービス提供をしています。 サイトは大きく分けて「総合サイト」「大阪ホールサイト」「東京ホールサイト」の3つで構成されています。 『a-blog cms』は1つのCMS内で別々のサイトを制作し、それぞれにデザインを当てることが容易に可能なので、今回のサイト構築する上で最適のCMSでした。

また、サイトリニューアル後の運用はお客様が主体で行うことになっていたので、更新頻度の高いページはコーディングの知識のない方でも簡単にページの編集が行えるCMS。という観点からも『a-blog cms』を導入することになりました。

リニューアル前はお客様が更新できる部分がトピックス記事の投稿のみでしたが、 会場活用事例、フォトギャラリー、レンタル備品料金表、よくある質問など更新頻度の高いページを、お客様側で作業が可能となり、サイトの運用面を向上させることに貢献できました。

トップページの構成について

大阪ホールの「緑」、東京ホールの「青」、そしてそれぞれに馴染む「ゴールド」を共通カラーとし構成しました。 ホールの雰囲気が伝わりやすいよう写真を多用しています。 上質さをデザインからも届けられるよう、テクスチャやリンクのhoverアクション、グラデーションなど繊細な表現を意識しました。また訴求は催事従事者の「求める」もしくは「メリットに感じる」情報を目立たせています。

大阪ホールの「緑」、東京ホールの「青」、共通カラーを「ゴールド」とし構成

3つのユーザーにとってわかりやすいサイト構築

「新規客（催事従事者）」「既存客（催事従事者）」「訪問者（イベント参加者）」という3つのユーザーがおり、トップページは主に「1.新規客が魅力を感じる構成にすること」に焦点を当て作成しました。 また訪問者（イベント参加者）が不要なコンテンツ（催事従事者のための情報）を避け、目的の情報（アクセス）にたどり着きやすいよう、PCもSPもアクセスページへの導線は差別化しています。

トップページは主に「1.新規客が魅力を感じる構成にすること」

アクセスページの強化

アクセスページのユーザーは「新規客（催事従事者）」も含まれますが、メインは「訪問者（イベント参加者）」です。訪問者のネットリテラシーは開催イベントにより異なり判別できないため、多角的で十分なコンテンツ量を確保しました。

具体的には、地図や路線図の印刷・ダウンロードボタンの配置や地下鉄出口から会場までの順路図、また遠方から参加し東京・大阪の土地勘の無い訪問者のために広域路線図や主要駅から最寄駅までのおよその所用時間の表記、同じ参加者に情報をシェアできるようSNSボタンの配置などです。

アクセスページの強化

「既存顧客」「新規顧客」「エンドユーザー（会場を利用する方）」を意識したスマホレイアウト

タップエリアは年齢の高い方でも押しやすいよう高さや幅をある程度確保しました。また横スクロールが発生する場所はスワイプの動作が必要であることを補足で入れています。

またページの情報量が多く、縦に長くなり長距離スクロールしないと目的のコンテンツにたどり着けないようなページは上部にページ内リンクを配置しています。

どの端末からも共通して同じ状態が映るWEBフォントの採用は行わず、訪問者のスマホアクセス数も考慮し、デバイスフォントを使いページの読み込み速度の方を優先させました。

スマホレイアウト

「活用事例」「フォトギャラリー」「レンタル料金一覧表」「よくある質問」「トピックス」をお客様側で更新可能に

活用事例

複数の画像を投稿してスライダーで閲覧できるようにしています。 イベントの概要説明、開催種別、使用ホール、収容人数なども簡易的に表示できるように実装しました。また、カテゴリーごとに投稿を絞り込むことも可能です。

フォトギャラリー

「施設内」「外観・車路・搬出入EV」「活用事例」など、大カテゴリーごとにタブ切り替えを設けて写真を掲載しています。 さらにその中に子カテゴリーを設けて、数多くの写真を種類別に見やすく表示させることができます。 画像の掲載、削除作業はもちろん、カテゴリー部分もお客様側で編集可能となっています。

フォトギャラリー一覧ページ

フォトギャラリー 作業画面

レンタル料金一覧表

料金表の編集、追加、削除ができるようにすることはもちろん、合わせて掲載している画像の差し替えも簡単にできるように制作しました。

レンタル備品料金表ページ

レンタル備品料金表 作業画面

よくある質問・トピックス

QAの編集、追加、削除ができるように設定しました。 トピックスでは記事の投稿ができるようにように設定しました。また、お客様側で簡単に画像のモーダル表示ができるよう、専用のユニットも実装しました。

よくある質問ページ

よくある質問 作業画面

a-blog cmsで構築してよかった点

今回は大きく分けて「総合サイト」「大阪サイト」「東京サイト」の3つに分かれます。 a-blog cmsでは、マルチブログの運用に適しているのでその強みを活かせたものになったと思います。

お客様から、更新頻度の高いページに関しては簡単に項目や記事の編集、追加が行えるようにという要望があったため、豊富なカスタマイズ機能により実装することができました。

実装後の状況・反響（サン・レッツ様よりの声）

今回のリニューアルで管理等の面で変わったところ

リニューアル前は更新できる部分がトピックス記事の投稿しかできませんでしたが、活用事例、フォトギャラリー、レンタル備品料金表、よくある質問など更新頻度の高いページの編集作業が可能となり、自分たちで運用できる範囲が広がりました。

リニューアル後のお客様（サンライズビル様のお客様）の反応

イベントホールの活用事例は実際にホールをどのように利用しているのかをイメージしやすいようになっている。とコメントをいただいています。

株式会社 菅組様のコーポレートサイトを制作させていただきました。

菅組様は、同じ香川県の建築会社で、三豊市仁尾町を拠点に数々の建造物を手がけられています。

今回のサイト制作にあたって、建築会社のコーポレートサイトとしての役割はもちろんですが、 地域に密着した活動や、自然を保護し、自然と寄り添う企業としての思いなどもあり、 それらもサイト上で表現しています。

今回制作させていただいた、菅組様のサイトの強みはコンテンツの充実度です。 菅組様の理念や歴史・伝統を反映した濃いコンテンツと、積極的に更新・追加いただいている ブログや竣工作品などの大量のコンテンツがあります。

a-blog cmsを導入したことによるメリット

今回、a-blog cmsを採用することでブログや竣工作品、自社で発行する季刊誌のWeb版など、 お客様自身でもコンテンツを追加いただきやすくなり、積極的にコンテンツを作成いただいています。

せっかく素敵なコーポレートサイトができあがっても、 コンテンツの更新ができず、サイトの時が止まっている というのはありがちな話ですが、CMSの活用に関する密なコミュニケーションや 担当の方の熱心な更新で存分にサイトをご活用いただくことができています。

特に竣工作品ページは、以前のサイトではすべて表現しきれていなかった、 数々の実績が目に見えるようになり、建築会社としての信頼性の高さや 医療福祉施設からリノベーション、古民家改修まで手がける菅組さんの幅の広さなどを 表現できるいいコンテンツになったと思っております。

竣工作品の一覧ページ

濃い内容のコンテンツたち

また、CSRコンテンツとして作成した「自然と寄り添う」では、 菅組様の自然の恵みを利用した家造りや、環境や地域に対する強い思いを 素敵な写真と文章で表現しています。

ここまで、内容が充実していて、かつ読み応えあるCSRコンテンツは 他にはなかなか無いかと思います。

自然と寄り添う（CSRコンテンツ）

またデザイン面においても、デザイナー自身も何度も足を運び、 社長から直接サイトにかける思いやご要望をお聞きしました。

サイトの印象を決める写真についても、お客様自身で撮影された 素敵な写真を存分に使用しています。

お客様とのタッグでサイトが完成し、公開後もCMS機能を存分に活用されて どんどんとコンテンツが充実していく、生きたサイトとして、 菅組様のサイトを紹介させていただきました。