So-net無料ブログ作成

facebookにネットショップを作るには

ネットショップ、ショッピングカートの需要というのは、常にありますね。

中小規模のお店にとっては、ネットに1つ支店が出せるなら、
ありがたい収入源となるでしょう。

ただ、ネットショップをインターネット上の広大な野原にポンと作っただけでは、なかなか人は集まってきません。

ネット集客のノウハウというのは、けっこう複雑なんですよね。
で、SEOやらPPC(リスティング広告)やらで人を集めるわけです。

ショップの制作さえ制作会社に頼んでしまえば終わり、と思ってはダメです。

むしろそこからがプロの手による作業で大きな成果が出る部分ですから。。。


あ、今日はそういう小難しい話を書く日ではなかったです(笑)

集客……と考えたときに、ネットをよくやっている方ならまず思いつくのが、
facebookやTwitterではないでしょうか。

◆すでに人が集まっている場所で
◆口コミによる(安価な)拡散効果を狙える場所

という意味では、使わない手はないです。

facebookにもリスティング広告が出せますから、それで本家Webサイトへ人を誘導してもいいでしょう。
(もちろん広告は有料ですが)

ただ、広告っぽいものって、なかなかクリックしてもらえなかったり、そういうのもありますね。


ならば、いっそのことfacebook上にネットショップ(オンラインショップ)を開いちゃう?というのが、今日の本題であります。


ああ、ここまで長かったですね。すみません。。。。


facebook上にネットショップを開く。
つまりは
◆facebook上にショッピングカートがあって
◆facebookの画面でお買い物ができて
◆なんなら「いいね!」でお友達にダイレクトに拡散してもらえる

そんな仕組みがあったらいいなーなんて、、、

思っていたらありました。

facebook対応の簡単ネットショップ開業サービス「easy my Shop」です。



ちょうどお客さんがこんなシステムを探していたのでご紹介し、
今試験運用中です。

このサムネイル(公式サイトから拝借)を見ていただくのが一番イメージが分かりやすいかと。
023.jpg
まさに、
◆facebook上にショッピングカートがあって
◆facebookの画面でお買い物ができて
◆なんなら「いいね!」でお友達にダイレクトに拡散してもらえる

そんなサービスです。しかも安価に導入できるのがいいですね。
※カートのみの利用も可能なので、すでにあるサイトにカートだけつけることができますよ

公式サイトはこちら。
カートボタンを貼るだけでホームページやブログがネットショップに早変わり【easy myShop】

これからいろんなサービスが出てくると思いますが、
Shopアプリの導入なんかは、プロはいいですが中小規模であまりお金をかけたくない事業主さんには、なかなか導入は難しいのではないかと思います。

上記で設置したショップの運営は、また頃合いを見て実績報告します。

もちろんワタクシも商品に「いいね!」しまくりです(笑)






レスポンシブウェブデザインを作ってみる(簡単編)

だいぶ久しぶりの更新になりました。

今年は大雪で大変ですね。被害がありました地域の皆様にお見舞い申し上げます。
東京(都下)住まいの私も久しぶりに見る大雪。。。
家の玄関前は、未だにかまくらができるほどに雪が積みあがっております。

さて今日はレスポンシブウェブについてです。

レスポンシブウェブとは?
という部分はすっ飛ばして、基礎的な実装方法を書きたいと思います。

私が教えている生徒さんの卒業制作の1つとして、レスポンシブウェブを課題に出してみました。

考え方に苦労するかと思いきや、それが思いのほかすんなりと実装できたので、
練習としてはよかったかなと思っています。


まずは考え方。

◆HTMLは一つ。
◆CSS3のメディアクエリ(Media Queries)を使って、デバイス別(あるいは解像度別)に読み込むスタイルを切り替える

以上です。

メディアクエリというのは、従来のmediaの拡張です。
media="screen" ・・・表示するのがscreenの時は、の意味
meia="print"   ・・・印刷の時は、の意味

こんな記述を書いた&見たことがあるんじゃないかと思います。

その拡張型として、CSS3ではメディアクエリというのが登場しました。

メディアクエリを使うと、
「screenかつ769px以上の時はこのCSS」(一般的にPCの数値)
「screenかつ最大768pxまでの時はこのCSS」(一般的にiPadなどタブレットの数値)
「screenかつ最大640pxまでの時はこのCSS」(一般的にスマホの数値)
というCSSの切り分けができます。

サイズはあくまで代表的なものを書きました。
例えばシンプルなデザインのサイトであれば、641px以上(タブレット&PC)は同じデザインにしてCSSは2つ書くだけ、というようにアレンジしてもいいかと思います。


では解説が長くなりましたので、実際の書き方を。

まずはHTMLのmetaに以下を記入。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

デバイスの画面サイズに合わせてCSSを切り替えるために、viewportを記述しておきます。
ここにもいろんな設定が入るのですが、それはまた次回に……

続いて、CSSへのリンクを書きます。
今回は、pc.css、tablet.css、smart.cssの3つのcssを読み込むこととします。

<link rel="stylesheet" media="all" type="text/css" href="pc.css" />
<!-- PC用 -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- タブレット用 -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- スマホ用 -->


続いて、(説明略)IE8以下にHTML5(XHTMLでコーディングしている場合は不要)とCSS3を認識させます。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

HTML headの記述は以上です。


そして、pc.css、tablet.css、smart.css、3つのCSSを用意します。
/*===============================================
◆pc.css 画面幅 769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
---ここにPC用のスタイルを書く---
} /*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/




/*===============================================
◆tablet.css 画面幅 768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
---ここにTABLET用のスタイルを書く---
} /*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/




/*===============================================
◆smart.css  画面幅 640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
---ここにスマホ用のスタイルを書く---
} /*@media screenの開始かっこに対する閉じかっこ。忘れないようにする*/




こんな感じです。
imgに対する「max-width: 100%;」は、小さい画面で見たときにも「最大で100%の幅で表示せよ」という指示です。
スマホで見たときにも画像サイズが最適化されますので、これは記述必須になりますね。


以上、まずはざっくりとレスポンシブウェブデザインの実装方法でした。

まずはアイキャッチ画像(メインビジュアル)、h1、pぐらいで構成された簡単なHTMLを作成し、GoogleCromeなどで画面サイズを小さくしたりしてみてください。

初めて実装するときは、思わず「おぉっ」と感動します。たぶん。


自作ではなくレスポンシブなテンプレートを探している、というWeb担様にも、今は安くていいものがそろってます。

レスポンシブデザイン対応、SNS連動型WordPressテンプレート【黒船】

■ビジネス(企業)サイト向け
WordPressテーマ「Corporate (TCD011)」

■大型EC・ポータルサイト向け
WordPressテーマ「Dynamic (TCD009)」

■ブログなのにかっこよすぎるやつ
WordPressテーマ「InfoCustom (TCD006)


これらはいずれも有料のテンプレートになりますが、有料だけあって出来はいいです。

自作でコツコツもいいですが、時間をお金で買う必要がある場合には、導入を検討するのもいいと思います。




この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。