私がおちゃのこカートにした10の理由！

最近ネットショップのお手伝いのお仕事が続いていまして、おちゃのこネット　についてかなり詳しく使いこなせるようになったので、その良いところを紹介します。

ちなみにいろんなネットショップASPサービスを使って来ましたが、コストパフォーマンス第一位で、私のイチオシです。

この価格でここまでカスタマイズをさせてもらえるASPはない！と言っても過言ではありません。

オススメな点をあげればきりがないのですが、順不同であげていってみます。

１）HTML5のテンプレートが使いやすい

今年になってから登場したHTML5のテンプレート。

いくつか同梱されていまして、どれでも無料で使えるんですが、どれもおしゃれでシンプルで使いやすいテンプレートです。

私はプロなのでｗかなりカスタマイズしますが、初心者の方でも、このテンプレートに、

素敵な画像やバナーを作って登録していくだけで、かなり今風のネットショップができること請け合い。

HTML5なので、つまりcss3との相性もよく、スタイルシートがわかる方でしたら、とてもおしゃれなデザインが可能です。

事例を紹介します

サンふじりんご専門　小西園

糸井川翡翠工房　こたき

霊芝とアガリクスのパワフルスマイル

寝具とまくらのもりたけ

２）ドラッグ＆ドロップの配置がとても楽

事例です

http://www.konishien.com/

３）手作りのナビゲーションOK

４）フッターメニュー部分も自由欄が多い

事例です

http://www.konishien.com/

５）カテゴリページに個別の説明文やバナーを入れることができる

カテゴリページの事例

http://www.konishien.com/product-list/7

事例です。このように自由に作れます

http://www.itoigawahisui.jp/product-list/1

６）カテゴリ分類のほかに、このような別のグループ設定ができます。

これで、値段別グループとか、

用途別グループとか、商品を複数パターンで抽出できます

グループ分類の事例

http://www.itoigawahisui.jp/product-group/14

７）フリーページがいくつでも作れます

フリーページは、会社概要とか、スタッフ紹介など、固定ページとしていくつでも作れます。

メニューへの表示非表示、XMLサイトマップへの出す出さない等、こまやかな設定が可能

フリーページの事例です

http://www.konishien.com/page/4

http://www.itoigawahisui.jp/page/4

８）その他、ネットショップに必要ないろんなコンテンツ作成OK

★ネットショップに当たり前に必要な機能

　人気ランキング

　新着商品

　おすすめ商品

★What's New（お知らせや更新情報などに使える）

★店長日記（ブログ）

★掲示板もついいてる

★メルマガ機能もあり

（事例）Whats Newをお客様の声掲載に利用しています

http://pawafurusmile.ocnk.net/news

事例　店長日記を「まくらとふとんの豆知識」という連載に変更

http://moritake.ocnk.net/diary

９）カート（カゴ周り）のカスタマイズ

カートのカスタマイズはあまり出来ないのですが、いろんなところに、HTML可能な自由記入欄が用意されているので、これを工夫することによって、

そのお店特有の注意書きや、お客様への提案、サンキューメッセージなどを入れることができます

カートやお問い合せに、アンケートをつけることも可能です

ポイントやクーポンもOK

事例です　会員登録してもらうことをすすめています

http://www.konishien.com/cart

10）スマホ向けサイトがきれいに、簡単に作れます

こちらはスマホプランを選択したときに使える、

スマホデザインの管理画面です。スマホプランを選択しただけでは、まったく味気ない写真になってしまうので、

こちらの各項目で、スマホ向けのバナーや、スタイルシートを設定しないといけません。

簡単に作れますというのは少し違うかもしれません。

簡単ではなく、スマホサイトは、PCサイトを作る以上の、ノウハウや技術が必要なので、スマホサイトを知り尽くしたプロの視点での配慮が必要なのですが、それはまた別の機会に書きますね。

スマホサイトの事例です

これは、タブレットサイズでみたときの画面

http://www.konishien.com/phone/

さらに幅を狭く、スマホサイズにしてみると・・・・

スマホで見た、商品ページ

http://www.konishien.com/phone/product-list/7

おちゃのこネットの登録はこちらから

アフィリエイトリンクになっており、webの森にわずかながら収入になります。この記事が役にたった！というあなたはこちらから登録していただけると嬉しいです。

でも、オススメですよ！というのはウソ偽りなく、本当にコスパ良いので、お試し期間だけでも使って見てください。

お試し期間は毎月20日に終了し、21日から課金が始まるので、１ヶ月まるっとお試ししてみたい方は、21日にお試し登録すると良いと思います。

おちゃのこネットのテンプレートカスタム（裏技） ヘッダーにナビを置く方法

おちゃのこネットのテンプレートはかなり面倒・・・好きにいじれない場所が大杉です。

なんといってもHTMLを修正できないのが不便で。

cssと、ブロックごとのレイアウトを変更することでしか、改変ができません。

せめて、ヘッダーの中にHTMLを書かせてほしいです。




ということで、ヘッダーにナビがないのを、つらいなぁと諦めていたんですが、発見しました！ヘッダーナビのつくりかた。

これ発見しちゃった時はすごいぜ自分って自分を褒めたくなりました(･∀･)

2014年8月追記：おちゃのこネットでは、今年になってからHTML5のテンプレートの配布が始まり、ずいぶんと使いやすくなりました。ヘッダーのグローバルナビが標準装備されているので自由にメニュー項目を入れることができます。おちゃのこネットは、私が一番オススメしている使いやすいショッピングカートです！
このブログは、旧タイプのテンプレートを使っている方に役に立つと思います。

１）基本設定のメタタグ設定のPC番キャッチフレーズの中にHTMLを書く

＞今回の事例サイトはこちら　果物でつくったワインとジュース直売農園「果物の恵み」






最初はここの位置にナビが出ます

２）cssで、ヘッダーの高さを伸ばしておいて、一番外側のテーブルにポジションrelativeを指定

table#container{
position:relative;
}

３）PC版キャッチフレーズに入れたパーツ（ナビゲーション）にスタイルをつけます

PC版キャッチフレーズは、#copyがつくので


#copy{
top:170px;
left:0;
position:absolute;　　→ポジションはabsolute　外側の#containerからの位置に固定する
width:1050px;
height:24px;
}


４）フリーページは別の所にキャッチフレーズを入れる場所があります

事例にさせていただいたネットショップ「果物の恵み」さんの紹介






フルーツ王国、長野県の中でもさらにくだものの里として有名な松川町にある、老舗の農園さんです。

秋になると、りんご狩りのお客さんで渋滞が出来るほど人気の果樹園。

三代目のオーナーが運営しているネットショップでは、この農園でとれたリンゴで作ったオリジナルアップルワインが好評。

りんごやブルーベリーを使った特製ジャムやジュースなどを取り扱っています。

他では手に入らないここだけの逸品、収穫時期になったらネットショップに並びます。季節外にはほとんど売り切れてしまうので、気になる方は逃さないようにGetしてくださいね！

 果物の恵み｜果物でつくったワインとジュース直売農園　Fruit&Forestゆざわ


＞おちゃのこネットを試用してみたい方はこちらからどうぞ

参考になったよ！って方はwebの森のfacebookページへイイネをしてね(v^ー゜)

長野県でシロアリに困ったら！（スマホに最適化されたランディングページの作り方）

今回はシロアリ駆除についてのランディングページの紹介です。

参考サイト＞長野県でシロアリ駆除なら、40年の実績！株式会社ランバーテック

こちらはテキスト広告をしたときにクリックすると表示されるページ、いわゆる「ランディングページ」になっています。

このサイトの作り方は、スマホでもPCでも平等に読めるページを目指して作っています。

スマホでもPCでもタブレットでも、音声ブラウザでも誰もが平等に読めるページ、これを「レスポンシブ・ウェブデザイン」といいます。

レスポンシブ・ウェブデザインについて簡単におさらいすると、こういうことです。

ウェブサイトのスマホ対応、スマホ最適化にはいくつか方法があって、それぞれメリットデメリットあるのですが、大きく分けると二つです。

1. PCサイトと、スマートフォン専用ページと別々に作る
2. PCでもスマホでも問題なく見られるようなサイトを作る

今回は２番、「PCでもスマホでも問題なく見られるようなサイトを作る」で制作しています。
どちらが良いかは制作費のことや、メリットデメリットがあるので一概に言えませんが、２番を選んだ場合のメリットとして、今後更新があった場合１つのページを修正するだけで良いということがあります。

そして、もうひとつ、この２番の作り方は、Googleさんが推奨している方法だから・・ということもあります。

Googleが推奨するレスポンシブ・ウェブデザイン

「PCでもスマホでも問題なく見られる」作り方のことを「レスポンシブ・ウェブデザイン」と言います。

ここでは、Googleがウェブマスター向けに公開しているノウハウページ

スマートフォンに最適化されたサイト構築の推奨方法

これにのっとって制作してみました。

ここにきちんと書いてあります。

「レスポンシブ・ウェブデザインを使用しているサイト、こちらがGoogleの推奨する設定方法となります」

レスポンシブ・ウェブデザインの作り方はこちらに書いてあります。

スマートフォン向けウェブサイトの構築 - Webmasters — Google Developers

シロアリ相談web（事例）の紹介

ランバーテックさんは、本社が、関東でシロアリ防除施工で40年の歴史と実績がナンバーワンの「シロアリ駆除.com」を運営している関東白蟻防除株式会社さんです。

社名は違いますが、関東白蟻防除株式会社の実績とノウハウをそのまま受け継いでいるので、膨大な量の経験・ノウハウ・実績がある会社です。

この告知ページを作るのに一番知っていただきたいのが、この「信頼感」でした。

住宅の修理やリフォーム、害虫駆除業関連で一番心配なのが、怪しい業者の言葉にのせられて、騙されているのではないか？

床下などの見えないところなので本当にこれだけの費用がかかっているのか、本当に必要な工事をしてもらえるのか、最悪の場合、施工したように見せかけて逃げてしまう詐欺の場合もあります。

シロアリ担当の倉谷さんと一緒に、どうすれば長野県のユーザーさんに信頼を持っていただけるかを何度も話し合って一緒に原稿を考えました。

そのあたりを、こんな文章で表現してみました。

リキッドデザイン

スマホは回転できる端末なので、リキッドでデザインする必要があります。

なので、タテにした場合と、横にした場合にどう表示されるのかを考えないといけません。

このように小さい写真やアイコンが横並びになる場合は、フロートで、画面のはしにきたら自動的に折り返される形が良いでしょう。

横幅いっぱいに置く画像の場合は、タグにwidthを100％にして、heightを削除すれば、このように伸縮してくれます。

ただし、かなり解像度の高い大きなモニターで見たときに、リキッドデザインだからといって、幅を指定しないでいると、情報が横に広がりすぎるのはNGです。

（リキッドデザインですが、最大幅を指定している例）

タップで電話、タップでメーラーが立ち上がる

スマホの基本、タップで電話がかけられる・・・・これはボタンを押しやすいように、大きなボタンにしておくことが大事です。

あとは、問い合わせフォームですが、予算的に可能ならスマホでも入力しやすい問い合わせフォームを作るのも一案ですが、今回はタップでメールが立ち上がるようにしました。

（電話がかけられるタグと、メールが立ち上がるタグ）

問い合わせフォームの場合は、できるだけ文章を入力しないで、プルダウン選んだり、チェックボックスからチェックを入れるだけで、最低限の情報を入れて送信するように計画すると良いと思います。

スマホでのフォームメールの取り扱いが面倒だからです。

その点メーラーなら敷居が低くなります。（サイト上にメールアドレスを置いておくことでスパムメールが増えるというデメリットはありますが、このアドレスはすでに何年もサイト上へ）

メリット、デメリットよく考えた上でどんな方法で、ユーザーを最終目的地へ誘導するか考えてみましょう。

デバイスの幅によって、スタイルシートを切り替える方法

これは、CSS3のMedia Queries（メディアクエリ）という方法で切り替えます。

例えば、横幅サイズが600pxより小さい場合は、背景画像はこれ・・・

900pxより大きい場合は、背景画像はこれ・・・というように、スタイルシートに記述することで切り替えることができます

参考サイト　＞[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例 | コリス

その他デザインする上で考えることをランダムに・・・・

1. スマホ用のレイアウトを作るときは画像は横幅640pxで作っておく（実際の表示イメージは半分の320pxになります）
2. 画像やボタンのサイズは偶数pxサイズの方が１／２に縮小された時にきれい。
3. フォントサイズも偶数値の大きさの方がきれい。大きさは12ピクセル以上にする
4. ボタンなど指でタップすることを考慮する場合、幅を44ピクセル以上にする（アップルのガイドラインより）
5. デバイスフォント（スマホなどに元から入っているフォント）は、Androidは機種毎にちがいますが、iPhoneがヒラギノ角ゴなので、ヒラギノでデザインすればOK
6. テキストはできるだけデバイスフォントで組む
7. 枠の角丸処理や、背景色のグラデーションなどはcss3で表現したほうが、画像で作るよりも表示速度が速いのでGood
8. スマホサイトはあまり深い階層にしない。ページが長い分には上下にスライドで読めるので良いのですが、タップしつつ多くのページを移動していくのはスマホの場合は大変です。

思いつくまま書いていったので、ランダムですみませんが・・・また思いついたら付け足しておきます。

実はこのページはまだ一次工事の段階で、このデザインを元にいずれはPCサイトを作るので今後変更していく予定がありますが・・・・・現段階では、PCでもスマホでもストレスなく読めるページの作成方法として事例で取り上げさせていただきました。

事例でとりあげたランバーテックさんの紹介

長野県での住宅関連工事では縁の下の力持ちの会社として有名な「ランバーテック様」を紹介します。
松本市にある施工業者さんなのですが、木についての技術、木を活かす技術としては日本で右に出るものはいないという知る人ぞ知る会社です。
普段わたしたちは家を建てるときや、家のリフォームするときは、☆☆ホームさんとか◎◎工務店さんなどに依頼するので、このような業者さんが縁の下の力持ちとして、工事の技術を支えていることに気がつかないかもしれません。
実は長野県では大変多くの工務店や住宅メーカーさんとの取引があり、「腐らない木材」を加工して納入していることで有名な会社です。
元（東京の本社）はシロアリ駆除やシロアリ防除のプロ、そしてシロアリ防除から培った技術を土台にして、腐らない木材の開発と、断熱壁の技術で、建物の省エネや、健康診断を得意としている会社なのです。
木を愛する人々、木の家にこだわる皆さんにとって「お家のお医者さん」のような存在です。
そんなランバーテックさんの信頼ある技術で、
「家を末永く持たせたい」と思われる方は、家の健康診断を依頼してみてはいかがでしょうか？

参考事例のサイトはこちら　http://www.lumbertech.jp/siroari/sp/

【特典いまだけ】水上浩一さんの最新刊、おすすめです。「差別化革命」

 webの森が事務局をしているEC実践会。

ここで勉強をし、全国で成果をあげているネットショップさんが続々誕生しています。

正確にはネットショップに限らず、実店舗や、会社でも実績をあげられているところが多いですが、まずはこちらを読んでみてください。

↓水上浩一先生の会社のサイトへジャンプします。

http://www.dreamenergie.com/curation/

Amazonで購入して、購入番号を入れると、今だけもらえる特典があります。

「セミナーの音声データ」

「セミナーのレジュメ」

これは絶対GETしておいたほうがいいです。

さてさて・・・EC実践会って何？　水上浩一さんって？という方に、webの森でEC実践会のことを紹介したページを作ってありますのでこちらをご覧下さい。

>>水上浩一EC実践会長野支部「ずくだせ南信」のご案内

キュレーションって何？っていう方も多いかもしれませんが、webの森が事務局をしている、ずくだせ南信EC実践会の水上師匠の講義は、
このキュレーション（差別化）にかなりの時間を割いて、教えてもらいます。
つまり・・高額のコンサルティングに匹敵するほどの濃い内容やノウハウ、事例がぎゅっとわかりやすい詰まった一冊・・・

「利益を生み出す視点の変え方」

興味がある方はぜひ読んで見てください。

鹿肉キーマカレー作りました

肉のスズキヤさんで鹿ミンチの販売が始まったのがきっかけで、鹿挽肉料理にはまってる我が家です。

定番のキーマカレーを作りました。

カレーの大原屋さんの「カレーな小瓶」を使っています。

ブログとfacebookとが鹿でつながった・・・

実はこの話、めぐりめぐっていろんなところでつながっていまして、最初に宮崎学が書いたブロ

グ「塩化カルシウムが野生動物を増やす」を読んで、大原屋さんがブログで、

鹿の増加で困っている長野県・・もっと鹿肉を美味しく食べられるようになったら、いろんな立場の人が助かって、しかも山国の人も元気になれるのにねぇ・・という話題を書いていただいたのが発端でした。＞ブログはこちら

そしたらfacebookでそれを読んだ、肉のスズキヤの奥様が「ちょうどうちでも鹿ミンチの販売始めました！」とコメントされ、同時に肉のスズキヤさんから「モモンガさん、鹿ミンチ始めたから、鹿肉でいろんな料理作ってみてくれない？」と言われ、ここのところ、鹿挽肉でいろんなお料理を作って楽しんでいます。

そんなわけで、カレーな小瓶で作るとめっちゃ簡単にしかも本格的な洋食屋さんの味（しかも我が家風にアレンジ可能）でカレーができますよ！って記事を書こうと思ったわけです。

実は鹿肉は誤解されています

実は鹿肉は一般には「ぱさぱさしてる」「匂いがきつい」「堅い」等、食べにくいと思われているお肉なのです。

（料亭や旅館などで出される鹿刺身は、鹿肉のほんの一部の高級食材の部分で、この場合は別ですが）

長野県じゃない都会の方などは「鹿肉なんて食べたことがない、どんな味？」って不思議に思われるかもしれませんが、

長野県は意外と、近所の猟師さんにいただいた、みたいな事例があって、鹿肉を食べたことがある人が割と多い県です。

でも、冒頭のぱさぱさ・・とか、匂いが嫌い・・というのは、猟師さんが鹿を仕留めるときの方法や、すぐに良い処理をしているかどうか・・とか、

美味しい時期とだめな時期がある・・・とか、美味しい場所・・・とか、カットの方法・・とか、

いろんな要因があって、そこはプロのお肉屋さんは、本当に腕の良い信用のおける猟師さんから、その場で獲物をみて、良い上質の鹿しか仕入れないので、

鹿肉＝食べにくい　と一概に決めつけるのは勿体ない話で、せっかくの鹿肉が美味しく消費されないのは気の毒です。

鹿の被害と山村の実態

鹿は可愛いです、私が見てもかわいいし、野生動物がたくさんいる県なんて、信州は素晴らしいなぁって思いますが、人間が自然に関与したことで生態系を崩してしまい、必要以上に増えすぎた鹿はちゃんとコントロールしないと、
自然界全体や、山の人の暮らしや、高山植物などの貴重な遺伝子などを守るためにはどうしても仕方ないことだと思います。

でもその鹿が美味しくないと思われるために敬遠されてるとしたらやっぱり残念です。

私か住んでいる場所は、天竜川を挟んで、中央アルプスのふもとにあって、以前野生の鹿は、天竜川を挟んで対岸の南アルプスばかりに増えているというのが常識でした。

それが、５年ほど前にはじめて夜の道路で、運転中に親子の鹿を見かけて「こんな場所に鹿がいるなんて・・・」とかなりびっくりしたんですが、それがあれよあれよという間に増えてきて

今では近所の人がみんな「今日も鹿を見た」「先日鹿が・・・」と話題にするようになっています。

鹿は天竜川を渡ってどんどん反対側にも進出中です。

詳しくは宮崎学のブログで読んでみてください

遠山郷にあるお肉屋さんが全国に発信

肉のスズキヤさんは、人口たったの2000人という山里「遠山郷」にあるお肉屋さんです。

ホームページでは、こんなメッセージを発信しながら、全国の皆さんに信州の山のお肉美味しく食べて貰いたい・・・・とお肉を加工販売しています。

山里に住む人は、自然の厳しさや獣たちとの戦いの中で負けないように元気に暮らしています。山肉を美味しくいただくことは、そんな山里に住むむらびとたちへの応援になります。
人が上手に自然や動物と共存していけるように、日本のふるさとの味を美味しく楽しんでください。

もみじ肉まつりはこちら

カレーな小瓶とカリーマサラはこちらで買えます

人間を観察しながらしたたかに生きる動物たちを撮影した写真ルポ
宮崎学の「イマドキの野生動物」