株式会社VIP「イベントコンシェルジュ」
やながわ里山農園は、福島県北部にある梁川町（やながわまち）の自然農・有機農の農園です。 今回は、この農園の情報発信や商品販売のためのサイトをa-blog cmsで制作しました。
クレジットカード決済サービス「Square」と連携できるECサイトテーマ
このサイトは、a-blog cmsの公式テーマの「UTSUWA」を利用しています。 主な機能やデザインはUTSUWAを利用し、カスタマイズが必要な部分を、UTSUWAを継承した子テーマで制作しています。
下の画像は、左がUTSUWAで、右がUTSUWAをカスタマイズした当サイトのテーマです。
記事やカテゴリー一覧を表示するモジュールも、UTSUWAが提供しているものを使いまわす事でトップページをカスタマイズしています。
例えば、トップページに表示している「栽培暦・日誌」のエントリー表示の箇所では、UTSUWAのトップページで利用されている「募集職種」のモジュールに少し手を加えて利用しています。
このモジュールはテンプレートファイルと、モジュールIDの設定を変更しています。
UTSUWAで用意されているモジュールIDの設定は、「採用情報」のカテゴリーのエントリーを表示させるようになっていますが、このテーマでは、任意のエントリーを指定して表示させるようにしています。
コードを書かないでも表示内容を管理画面から変更できるので、カスタマイズも容易でした。
また、サイトの色の変更も、CSS変数を変更することで簡単に対応できました。
UTSUWAテーマは、用途に応じたカスタマイズがしやすい構造になっているため、スピーディにコーポレートサイトを立ち上げるのに適したテーマだと実感できました。
今後は、決済サービスのSquareと連携できるECサイトテーマ「Square」を活用した商品販売機能や、カスタムフィールドや拡張アプリを活用した多言語化も行っていきたいと考えています。
あしかクッキーは通販と委託で販売している焼き菓子店です。 元々自社のホームページはあったのですが、ホームページに決済の仕組みはなく決済はBASEのショッピングサイトを利用していました。
今回、新商品の発売に伴い、BASEのショッピングサイトとは別に自社のホームページでも直接決済が導入できればと考えていました。要件として『頻繁に改修を行いたい、且つ気軽にカートを利用したい』と考えていたところ、良いタイミングでECサイトテーマがリリースされましたので導入を決意しました。
クレジットカード決済サービス「Square」と連携できるECサイトテーマ
また、マニュアルが丁寧で、簡単セットアップがあったのも採用した理由の一つです。 丁寧なマニュアルのおかげで比較的スムーズにクレジットカード決済まで構築を進めることができました。
豊富なマニュアルがあり安心
簡単セットアップですぐに導入可能
しかし、公式のECサイトテーマではクレジットカード決済を利用することが可能でしたが、『お気に入り』や『最近見た商品』、『購入履歴』などのマイページ機能は備わっていませんでした。
具体的なカスタマイズとして、『お気に入り』や『最近見た商品』については、 まず、閲覧したエントリーやお気に入りに登録したエントリーのEIDを閲覧順、お気に入りに登録した順でJavaScriptを利用して取得しています。 取得したEIDをもとに、ポストインクルードを利用して、商品データを表示するようにしました。
『お気に入り』ボタンを追加
お気に入りの商品を表示できるように
また、履歴関係はログイン時のみ取得するようにしており、ユーザー自身がデータを削除できるように「削除ボタン」も準備しています。
最近見た商品を閲覧順に表示できるように
『購入履歴』については、通常のカスタマイズとは少し異なるため、詳細については割愛させていただきますが、ビジネスパートナーが購入できる拡張アプリを使用することでカスタマイズが可能です。
購入履歴を残せるように
このように必要なものだけ追加したいなど、柔軟にカスタマイズできるのもa-blog cmsの魅力ですね。 こちらの機能はログイン時のみ動作するようになりますので、ぜひ会員登録してみてください。
また、次のようなサイト構成を想定し、ショッピングカーとは別に通常のページや特集ページなど用意したいと考えました。 また、特集のページ内にフォームを設置したい箇所がありましたので、こちらは動的フォームを利用して実現しました。 この点も、ショッピングカートを利用しつつ通常のサイト制作と同じ要領で制作することができた点が良かったです。
サイトマップ
特集からのお問い合わせには動的フォームを利用
このリニューアルで、ECサイトで、頻繁に改修を行いたいという要望と、気軽にカートを導入したいという要件を十分に満たすことができ、非常に満足のいくサイトとなりました。
お客様からの初めてのご相談は、a-blog cms2.0.1.1 php 5.3のウェブサイトをSSL化したいという内容でした。 a-blog cmsの2.6系からは常時SSL対応が可能ですが、2.11までバージョンアップしても、すぐにサポートが終了してしまいます。
そこで、『この機会に最新の3系にアップデートするのはどうでしょうか』と提案いたしました。 お客様は現状のWebサイトの機能には満足しておりましたので、今回は3系へのアップデートを目指すこととなりました。
今回、限られた制作期間と予算のなかで使い心地は変わらず安心して運用できるサイトを実現するため、元のサイトの雰囲気を保ちながらUTSUWAテーマに組み込むことにしました。
リニューアル以前のサイト
UTSUWAテーマを利用しつつテイストは残す
具体的なカスタマイズとしては、元のサイトのカテゴリー構造がやや複雑になってきていたため、ページを洗い出しリニューアル用のサイトマップを作り直しました。特にサービス案内の情報を整理することに重点を置いて取り組みました。
新たにサイトマップを作成
整理してみるとサービス案内では、『親カテゴリは2カラムで表示され、子カテゴリは4カラムで表示される』など、柔軟な変更が必要となりました。 そこで、全てのカテゴリーで個別にテンプレートを変更するのは手間がかかるため、管理画面からテンプレートを選択できるようにUTSUWAテーマのカスタマイズを行いました。
一覧のテンプレートを選択できるように修正
一覧の上に表示させたい場合
これにより、今後カテゴリーの表示を変更したい場合も、テンプレートを変更することなく表示を変更することが可能になりました。
また、ブログを含め1000件以上の記事がありましたが、こちらはa-blog cmsからの移行ということで特に問題もなく、スムーズに3系のUTSUWAテーマに移行することができました。
既存の記事も無理なく移行
ユニットも基本大きな崩れはなかった
a-blog cms の記事データはユニットで管理されているため、サイトの構造に依存せず新しいテーマに移行可能です。これまで書いてきた記事を無駄にせず、綺麗に再レイアウト出来たことも嬉しいですね。これで過去の資産を守りつつ最新の環境を使っていただくことが出来ました。
今回のリニューアルでは3系へのアップデートを目的としていましたが、アップデートによりメディア、テーブルユニットなど新しい機能も使えるようになりました。 お客様からリニューアル後は、使い勝手が上がり、更新がよりスムーズになったとの感想をいただきました。
古いユニットを残しつつ新しいユニットを取り入れることができた
モジュールフィールドを利用することでより直感的な更新が可能になった
さらに表示の速さに関しても、リニューアルによりページの読み込み時間が短縮されたことが実感できていただけたようです。 結果、お客様の満足のいくリニューアルとなり大変喜んでいただけました。
