2015年7月30日

参考にしたいカラーミーショップ 5

Blogger(ここで使っているGoogleのブログサービス)にいまさっき教えてもらいましたが、EUの法律では、Cookieを使用する場合にユーザーの承認が必要なのだそうな。
日本からEUに物を売る場合はどうなんでしょうね?

今回の「参考にしたいカラーミーショップ」は、カラム別にピックアップしました。サイトデザインのご参考にどうぞ。

1カラム

サイドメニューを使わずに、上メニューというパターンもよく見かけます。
商品点数が少ない場合などは、メニュー(カテゴリー)が不要の場合もあります。


FREECOM フリーコム公式オンラインストア【FreecomStyle】 三菱化学メディアグループ

トップページ・製品詳細ページにはサイドメニューがありませんが、商品一覧ページ・商品検索結果ページにはサイドメニューがというめずらしいデザイン。各ページで細かさが異なるので、別の役割が与えられているように感じます。
めずらしいですが、違和感は感じません。





毛髪花学研究所 オンラインショップ

トップページをシンプルに。商品を数多く並べるよりも、商品のイメージを優先して伝えようとしているのだと思います。




デザインTシャツのホリゾンブルー | Horizon Blue

大きいスライドショーを使うサイトデザイン&商品も並べるトップページ。レスポンシブ・デザインでいい感じです!





2カラム

サイドメニューの配置は左右どちらもあります。
2カラムは、使っているお店が一番多いと思います。


オンラインストア コトモノミチ at TOKYO

レスポンシブ・デザインです。『ご利用ガイド』が丁寧に作られていて、参考になります。
『ご利用ガイド』のリンク先にある『メルマガについて』のページが、ちょっと他には見かけません。
メールマガジンを登録するSSLページに移動する前に、1ページ余分に挟んであります。こんなメルマガですよ、っていう画像を貼っているのだと思います。そしてその下に登録ボタン。
メルマガ登録のために普通はそこまでやらないので、感心しました。




ポーランド陶器・食器専門店ツェラミカ

カラーミーショップでは、食器を取り扱うお店が数多く出店されていますが、デザインの綺麗なサイトが多いです。そして、商品の写真も良い! 大小の画像がメリハリとして効いています。
まとまったサイトデザインで、とても参考にしやすいと思います。




インテリア・キッチン雑貨・輸入雑貨・文具・動物雑貨・通販 セレクトショップ ディベルティーレ(Divertire)

メニューが面白いです。トップページはぱっと見、3カラムに見えますが。画像配置がユニークで、楽しげな商品を取り扱っているのだろうと伝わってきます。





3カラム

カテゴリーや商品点数が多い、バナーなどをたくさん貼るときはこれ。


ビザインショップ / BESIGN SHOP - ドイツ生まれのステンレス製モダンハウスウェア「ZACK」の正規輸入代理店ビザイン株式会社の直営ショップ

取り扱いがステンレス製品ということで、カリッとしたサイトデザインになっています。3カラムの場合、サイトの印象として、ぎっしり・細かくなりがちですが、こちらのお店は特にその傾向があります(個人的には、それが合っているように感じます)。




nagomi | キッチン雑貨専門店 キッチン用品 生活雑貨(通販・販売)

カラフルな商品に合わせて、明るめのサイトデザイン(そしてほどよい)。
個人的にはメニューが好きだなと感じました(わずかなグラデーションも含めて)。
似たようなデザインのひとつ上のサイトと比較しても面白いですね。




おしゃれなインテリア家具ショップCCmart7

左にカテゴリー、上にショッピングガイド的なメニュー、右に縦書きバナー。最近は、上メニューを採用しないサイトデザインも多いですね。

2015年7月23日

参考にしたいカラーミーショップ 4

Blogger(ここで使っているGoogleのブログサービス)は、ギャラリー向きじゃあないですね。
カラーミーショップ大賞2015」のノミネートショップから、参考になりそうなサイト画像を山盛り撮ってきたんですが、どう整理してご覧いただこうかと思案中。複数の項目で絞り込める機能があれば良いのですが。
アイデアがないか探していて、偶然みつけたのがこちら(ここの画像の枠はまんま借用)。

カラーミーショップデザインギャラリー | カラーミーショップで制作されたネットショップの事例集

ホント見やすいし、サイトデザインの参考になりますね!

さて、「参考にしたいカラーミーショップ」も4回目を迎えました。
あまり見かけない機能・使い方をしているショップの紹介は、今回がラスト。
カラーミーショップも、アイデア次第で、いろんな使い方ができますね。


1. 名入れ機能に名前以外を入力する


100サイズ既製カーテン通販専門店|びっくりカーテン

ギガプランの名入れ機能を使っているお店は結構多いです。フリーの入力欄なので使いやすいんですよね。名前以外にも、メッセージなどの入力欄として使われています。

ここでは、丈つめ・幅つめのサイズを入力するようになっています。
そばに、幅つめチケットを購入するようにリンクもあります。

似たような使い方では、メッセージカードの入力欄と、ギフトラッピングのリンクがあって、ラッピングを選んでカートに入れてもらうようになっているお店もありました。





3. トップページにテンプレ共通の枠を表示しない


北欧雑貨のハシュケ【hushykke】北欧雑貨や北欧食器,インテリアの専門店

以前の記事「テンプレート共通部分を表示させない方法」にもありますが、テンプレートの共通部分(ヘッダー・フッターやサイドバー)を表示させないことができます。
こちらのお店のように、トップページは1カラム、商品ページは2カラムと、デザインを大きく変えられます。

トップページをレンタルサーバー上で作って、商品ページをカラーミーショップで作る、というサイトは頻繁にみかけますので、トップページのデザインを自由にいじりたいという需要は結構あるのでしょうね。
このお店のように、カラーミーショップのみで完結しているサイトは、あまりみかけません。

スライドショーの角を丸くして、全体の雰囲気にあわせてあります。
価格帯・デザイナーのドロップダウンリストも絞り込みやすいです。
サイトデザインも秀逸で、細かなところまで作りこみがなされています。





4. これは良いカート画像だ!!!


カリフォルニアワインとピノノワールのワイン通販はしあわせワイン倶楽部

ワインをカートに入れると、右上のカート画像のワインの本数が増える!
これは目からうろこの良いアイデアでした。さっそく使ってみたい。



【追記】
「2. 名入れ機能の、何これ!?みたいな使い方」は、ご依頼がありましたので削除しました。

2015年7月20日

参考にしたいカラーミーショップ 3

ここのところ、Magento(オープンソースのEC用CMS)をいじっています。
細かい作りこみが可能で多機能ですので、 カラーミーショップとは好対照です。
そっちの仕事が終わりました頃に、カラーミーショップとの比較なんかもやってみたいと思います。

さて、「参考にしたいカラーミーショップ」も3回目を迎えました。
今回は、あまり見かけない機能・使い方をしているショップを紹介いたします。


1. 注文速報×2サイト


SNIDEL,FRAY ID,LILYBROWN,UNGRID 通販・正規取扱店 セレクトショップDIVA

たまーに見かける、注文速報/注文状況という枠。楽天ショップの機能です。ほかにも、これと似たようなレビュー機能の枠もあったりします。
楽天ショップは、出店料もろもろの費用が結構掛かるんですよね。

カラーミーショップでも、APIで作ることができそう(需要があるのかは微妙)。




カフェ食器通販のお店・プチスーベニア





2. 検索にチェックボックスを使う


レンタルドレスのMiel Miel(ミエルミエル)|東京青山

あらかじめ商品詳細ページに検索キーワード(例【XS】【ひざ上】etc.)を仕込んでおいて、商品一覧ページでチェックボックスを使って検索キーワードをセットしています。
複数の条件で絞込みができますので、こういう使い方をしたいお店は多いのではないでしょうか。

同じようパターンで、ドロップダウンリストを使っているサイトもありました(コンパクトに配置できますが、チェックボックスに比べると、使いやすくはないです)。




3枚目の商品詳細ページでは、レンタル希望日をセットすると、発送日、お届け予定日、ご利用日、ご返却日が表示されるようになっています。
レンタル希望日の入力枠は、ギガプランの名入れ機能を使っているようです。

カラーミーショップって、商品の販売だけじゃないんですよね。レンタルショップ、面白い。


3. カラーミーでサービスを売る


ビューティープロダクツセミナー

セミナーを参加者を募集するサイト。
見かけない使い方なので、とても新鮮です。


2015年7月12日

参考にしたいカラーミーショップ 2

カラーミーショップ大賞2015」でショップをたくさん拝見しましたが、比較的新しいテンプレートをそのまま使っているお店って、結構多いんですよね。
そういうショップを見ていると、シンプルなサイトデザインとよい写真とがあれば、手間少なく、目を惹くショップができるよう感じます(凝ってるのにイマイチってのは切ない)。

レスポンシブデザインのカラーミーキットあたりは使っているショップも多く、使いやすいんじゃないでしょうか(PCで閲覧すると妙に感じるデザインなので、PC閲覧用に手を加えたいところ)。

さて、「参考にしたいカラーミーショップ」も2回目を迎えました。
早くも書くべきことが減ってきましたが、昨今のウェブデザインにおける潮流(さすがに大げさすぎるか)、HTML5/CSS3+jQueryで選んでみました。


1. イメージを優先したデザイン


信級玄米珈琲 - NOBUSHINA GENMAI COFFEE -

トップページの動画と、商品一覧ページで構成されている。
商品詳細ページがないので、商品一覧ページに「カートに入れる」ボタンがついています。

どこでもカラーミー(カートJS機能)があれば、他のページはいらないということがよくあります(見ていても、実際そういうお店は多い)。
商品点数が少ないショップは、検索がいらない、カテゴリーがいらない、トップページ、商品詳細ページがいらない、などなど。

シンプルなサイトデザインには、よい写真があれば十分だなぁと思います。




2. 丸くてふにゃっとした遊びのあるお店


mon cifaka online store - 岡山市の雑貨・家具などのセレクトショップ

第一印象からして個性的なショップ。
商品の枠が丸い。これ自体が結構少ないです。多くのショップでは四角い枠を採用しています(それが当たり前と思いがちですが)。
そして、この丸い枠、動きますよ!(ツンツンできますゼ 笑) 遊んでるなぁ。

画面一番下のページナビゲーション部分がめずらしかったので、これもチェック。比較的手抜きしがちな場所ですが、全体にあわせて丸くしてあります。




3. カートに入れるが3つもあるよ!!!


琉Q – ルキュー

ここはトップページがカラーミーショップを使っていない形。
商品詳細ページ(カラーミーショップ)とその他ページ(トップ、About、FAQ)のドメイン的な配慮でこうしているようです。

商品点数が少ないので、商品一覧ページや検索窓がありません。
「カートに入れる」が3つ付いているところは必見(スクロール位置によって、残り2つは見えないようになっています。)。
上・下と、スクロール時に張り付くのが一つ。
ここ以上に付いているところは見たことがありません。

ページ遷移時のフェードインも印象的で、全体としてショップの雰囲気によく合っています。

2015年7月4日

参考にしたいカラーミーショップ 1

4月に「カラーミーショップ大賞2015」のノミネート一覧が発表(約1100店舗)され、5月に大賞が発表されました(2ヵ月ほどかけて、まめにチェックしました)。

あまりカスタマイズできないというイメージを持たれがちのカラーミーショップですが、手間とアイデアで次第でもっとやれるはず。多くのサイトを見て、そう感じました。
カラーミーいじりたおし的には、その中から「デザイン」と「カスタマイズのアイデア」の面白いものを選んで紹介させていただきます。

定番~めずらしいサイトデザイン、面白パーツなどを中心に、何回かに分けてご紹介いたします。ごゆっくりお楽しみください(次回以降、参考にしたいカラーミーショップ ラベルをつけます)。


1. ここまでやったカート画面は他にない


犬服・ドッグウェア・犬用雑貨の販売 WANKOショップ

ページ全体を通して、ボタン・配色と細部まできれい作りこんであります。

特筆すべきはカート画面。
CSSのみでここまでやっているところは、私が見たなかではありませんでした。
注文の流れ(#shipping_step)では、「text-indent: -9999px;」で元画像を外に飛ばして、背景に差し替える画像を表示していました。

そのうえレスポンシブデザインなんですよね、これ。







2. これ以外のページはちょっと思い浮かばない


キュレーション通販サイト - HATCH(ハッチ)

それくらいぴったりときました。
キュレーション通販サイトの意味がわかっていませんでしたが、各ページをみていると、たしかにこう作らなければいけないような気になってきます(錯覚だとは思うんですが、作りに納得してしまう)。

商品一覧ページ(アイテム一覧>暮らす)では、グループを細かく分けて「さらに絞り込む」ことをしたり。グループを階層化して使うところもあまり見かけません。

トップページで商品を見せないショップはちらほらありますが、ここも含めてほぼカラーミーショップのトップページは必要がないので使っていません。

一般向けではありませんが、ユニークなサイトです。
白基調のショップが多いなか、黒背景も貴重(蜂モチーフ)。