制作経緯
富山のこだわり米農家から安全でおいしい有機米・無農薬米・特別栽培米を全国へお届けする農家直売サイトです。 約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のカート拡張アプリを用意されているとお聞きしました。カートの機能が強化が凄そうなので、楽しみにしています。