マクロビマートリニューアル

広尾にあるナチュラルマート様が運営する「マクロビマート」をリニューアルいたしました。いつも自由にデザインさせて頂いています。カラーミーショップを利用しているため、一定の制限はありますが、ともかく見やすく買いやすいショップサイトを目指しました。

マクロビオティック マクロビマート
販売する商品は、本格的にマクロビオティックを実践されている方にもご利用いただけるものですが、よく見ると誰もが食べ慣れた当り前の食品ばかりです。
有機農法で作られたものが多く、不要な添加物も使われていません。そのためむしろ食事法を意識していない方にこそ、普段使いとしてご使用頂きたいとマクロビマートは考えています。

以下、技術的なお話

トップページなどカラーミーショップ以外のページは今回WordPressではなく、PHPでCMSらしきものを自ら作りました。管理は長谷川が行うということもあってファイル操作で簡単に更新ができるようになっています。構造はWPのテンプレートに似せているので移行も比較的容易。

こんな意図でデザイン

カラーミーショップも必要十分な機能を持っています。これ以上複雑になっても使う側が迷うだけという気もするので、あとはいかに使う側の邪魔をしないかというところ。メニューが同じ場所にあること、読む場所とクリックする場所がわかること、写真や文字を大きく表示できるレイアウト、行きたい場所や戻りたい場所へのリンクがカーソルの近くにあること。まだまだ改善できるところはありそうですが、これらを意識してデザインし直しました。結果、よくあるショップサイトになりますが、それで良いと思います。

商品一覧はいつも悩みます。jQueryの処理量のバランスや、元画像が一定サイズでない場合の処理などお店の事情によっても変わってきます。今回はがっつりjQueryで操作。若干、画像の加工処理が遅れますが処理量も多いので隠す処理はやめました（処理の順番かも。今後の課題とします）。

携帯・スマホ対応

それから、カラーミーショップには携帯サイト機能があります。今はまだ携帯利用者も多いので、決済方法に問題がなければ有効にした方が良いと思います。とりあえずデフォルトのテンプレートで十分なんですが、今回マクロビマートサイトでも少し手を入れてみました（今は実機が一切ないので携帯サイトの制作は承っておりません）。

今回わかったのは、とても見えにくい制限があるということ。PC向けのデザインテンプレートも同様ですが、使える変数がテンプレート毎に偏っている点は特に注意が必要です。なぜかトップページにしか使えない変数がとてもたくさんあります。携帯サイトも必ずしもトップから入るとは限らないと思いますが、携帯にはトップを重くするという文化があるのかも。いずれ携帯サイトも限られた環境で特殊な使われ方をしていくと思うので、CSSなど使わずシンプルなHTMLデザインで十分だと思います。

代わりにこれからスマートフォン用のサイトデザインに着手します。iPadでは今のままで十分ですが、iPhoneからはまだ見づらいので。カラーミーショップにはスマートフォン用にもテンプレートが用意されていますが、デフォルトのままでとても無機質。リデザインしていこうと思います。