東港タイヤサービス様のサイトをリニューアルさせていただきました。
東港タイヤサービス様は産業車両用タイヤを販売・取り付けされており、大型トラックやトレーラー、フォークリフト、クレーン車などのタイヤを取り扱われています。
トップページは、サービスの特徴などをアピール、３店舗ある店舗案内もしています。 賑やかな感じのトップページは、お客様から大きな反響が有り、スタッフの皆さんからも好評です。
リニューアル公開後に、社長の方からブログで情報発信していきたいと言われ、社長ブログを追加しました。
ブログは多忙な社長自ら更新され、「移動中でもスマートフォンから更新できて便利」と好評です。
その後、さらにスタッフブログも追加しました。 あとから機能を自由に追加できるのも a-blog cms の構築のしやすさのおかげです。
アイウェアブランド「FACTORY900」の公式サイトです。
リニューアルするにあたり、一番重要視したのは更新のしやすさ。 これまで静的HTMLで組まれたサイトを Dreamweaver で更新していましたが、担当者がWeb専属ではなかったのもあり、更新が滞りがちでした。
「専門知識がなくてもブログ感覚で更新できること」
それが、a-blog cms を導入したきっかけでした。
既存のサイトにはすでに日本語と英語サイトがあり、更新の煩わしさが少しでも減るようにサイトを設計しました。
一部のカテゴリーに 多言語ユニット を導入することで、更新作業の簡略化を図りました。 例えば：商品紹介ページでは画像は共通で使用できるため、テキストユニットのみを多言語化。
サイズ等の共通の情報は、カスタムユニットで英語タブの入力欄が空のときは日本語の情報を表示するようにカスタマイズ。英語タブに入力があった場合のみ日本語の情報を上書きします。
「お知らせ」は日本語と英語で完全に別の情報だったため、それぞれを個別の子ブログにしました。 ここで問題となったのが 子ブログで同一のブログコードを使用できないということでした。 ですが、日本語も英語もお知らせは「news」にしたいのです。そこで、ブログコードを以下のように設定しました。
エイリアスを使った多言語化 をすると、設定したコードが自動でURLに含まれます。
このままでは、英語のお知らせのURLが en/en/news と en が重複してしまうため、校正オプションの拡張 を使って出力する文字列を修正しています。
これまで外部のフリーブログを利用していましたが、HTTPS対応が未定ということもあり、サブドメイン拡張ライセンスを使用してブログを a-blog cms 内に移行しました。 もとのブログからMovable Type形式のテキストデータを書き出すことができたので、インポートも問題なくできました。
ひとつの a-blog cms 内で情報を管理できるようになり、ブログ記事と商品ページの関連付けも容易になりました。今後、より情報が探しやすくなるように改善していく予定です。
子ブログとして個別のデザインのサイトをどんどん追加できるのも嬉しい機能です。
テーマを継承したり、親ブログで設定済みのモジュールを子ブログで流用したりと、メンテナンス性が高いのも助かっています。今後増えるであろう特設サイトも管理しやすくなるはずです。
カスタマイズの多様性は目を見張るものがあり、クライアントがやりたいことはカスタマイズで大概できてしまうのも a-blog cms の魅力です。 導入から2年半近く経ちますが、更新の頻度は劇的に上がり、公式サイトとして最新の情報を随時お届けしています。少しずつ機能を追加しているのも良い方向に作用していると思います。
福岡県行橋市にある水産加工会社「株式会社元気水産様」より地元「行橋市箕島」でとれる鱧と牡蠣のブランディング、自社の広報のためにオウンドメディアマーケティングもできるホームページを作成したいとのご依頼がありました。 公開後はご担当者様での運用を行うとのことでしたので初心者でも使いやすい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ではHTMLベースでカスタムフィールドを作成でき、管理画面への反映、表示確認も、とてもスムーズです。
物件の購入において、物件の「所在地」は非常に重要な要素です。a-blog cmsには、Google マップを挿入するユニットが標準で用意されていますが、今回は、物件毎にマップの挿入がほぼ必須であったため、カスタムフィールドとして提供しました。 a-blog cmsでは、公式ドキュメントでGoogle Maps APIの導入の流れが用意されています。API keyを設定することで、Google マップをページに挿入することができます。今回の物件情報のように「所在地」を地図で表示したい場合にとても便利です。 さらに、エントリーが持つGoogle マップの情報を集約し、物件の所在地を俯瞰して確認できる「全体マップ」も実現できました。
ホームデザイン様は、飲食事業や宿泊事業（ホテル・旅館）など、建築を軸とし、様々なジャンルのグループ会社を展開しています。a-blog cmsは設計思想が「企業のやりたいことが実現しやすい」というところが魅力的で、クライアント様からも好評を得られています。
整体事業を中心に多数の事業を運営している株式会社ベアハグ様では、これまで店舗ごとにブログはもっていませんでした。ですが、お客さまのご要望として店舗ごとにブログをやりたいというものがありました。各店舗間での運用方法の統一等を行い、より運用を活性化させるため、a-blog cmsを導入することになりました。
オフィシャルサイトのリニューアルは多店舗の検索機能を導入するために、基本機能で検索に優れているa-blog cmsはうってつけでした。ブログと同じく多数の店舗情報があるため、各店舗ごとのスタッフ情報などの更新をお客さまでも実施できるように構築することが必須条件でした。
リニューアル以前はオープンソースのcmsを使用しており、セキュリティ、メンテナンス、インフラ等も問題が多々起きていたこともあり、オフィシャルサイト・店舗ブログそれぞれにa-blog cmsを個別で導入し、問題解決を図りました。
コーポレートサイトとしての役割の中にも、中心軸である整体事業へのユーザーの流れを考慮しファーストビューに需要の高い関連メニューを抜き出して配置しました。
クライアントのブランドカラーとキーワードである「愛情」を意識し、温もりと優しさを感じる白×白茶色で構成。男性客も多いことから、アクセントに黒を配置し引き締めました。 また事業毎にカラーを設定し色によるカテゴライズをしています。
店舗の情報を網羅しやすいようタブによる切り替え、またどのタイミングでもアクションを起こせるようレスポンスエリアをスクロール追従にしています。
スマホデザインでは、メニューの位置を（全体の7割ほどを占める）右手ユーザーが親指でタップしやすい右上に。ボタンは、年齢が高いユーザーでもタップしやすいサイズを確保することを心掛けました。
店舗検索一覧ページでは、新規客・既存客にとって優先的に知りたい情報を選択し、「比較しやすさ」を意識してスクロール（移動）範囲が狭まり・かつ情報を取得しやすい余白やフォントサイズに配慮しました。
多くの店舗を運営されている企業様のサイトなので、それぞれの店舗の内観や営業時間、働いているスタッフ等の情報をカスタムフィールドやカスタムフィールドグループを使い、お客様側から簡単に内容が編集できるようにしています。
内観を見せるスライダーには、好きな枚数登録できるようになっていたり、店舗の特徴にチェックを入れることでそれぞれの項目に応じたアイコンが表示される様にしました。 また、働いているスタッフの部分も顔写真、名前、スタッフのランクまで設定できるようになっています。
さらに、各店舗ごとのブログの最新記事が表示できるようになっており、気になる店舗へのブログの動線も用意しました。 ネット予約ができる店舗では、ネット予約URLを入力いただくことでそれぞれの店舗へ予約することが可能になっています。
ベアハグ様のような各地に多くの店舗を持ちながらも、それぞれの店舗で独立したブログを運用したいといった要望があった場合に、a-blog cmsであれば1つのCMSだけで多くのブログを子ブログとして複製でき、管理できるという点が大きいと思います。
また、国産のCMSでライセンスを購入して使用するのものになるので、セキュリティの面で安心でき、技術サポートも受けやすいことが魅力です。
投稿の一覧が見やすくなったと感じています。 各店舗でブログが投稿でき、管理がしやすくなりました。
「見たいものが見つけやすくなった」 「明るく、見やすい」 といった言葉をお客さまから頂いています。
