css3で立体的にくるっと回転させるメニュー

要素を小刻みに動かしたり、浮かしているようにするjQuery

よく使用している汎用的で簡単なjQueryのコード

<blockquote>この記事は2012年に交付された助成金に関する記事です。 
2016年7月から申請が始まった「中小企業越境ECマーケティング事業に係る補助金」につきましては、 
弊社で無料セミナーを行っていますので、ご興味のある方はご参加ください。 
<a href="http://launchcart.jp/seminar/20160713/">http://launchcart.jp/seminar/20160713/</a></blockquote>
&nbsp;
■越境EC 経産省による補助金事業スタート 
今月6日、経済産業省が越境ECに対する補助金事業を行う旨の発表があった。 
<a href="http://www.meti.go.jp/press/2012/04/20120406001/20120406001.html" target="_blank">http://www.meti.go.jp/press/2012/04/20120406001/20120406001.html</a>
とは言っても全国的又は大々的にというわけではなく、 
被災地支援という建前の元に採択された事業だ。
復興事業等一部を除き、土着の事業者にとっては被災地で 
従来の事業を行うのは難しい。 
確かに越境ECという考えに至るのは容易だ。
被災地活性化と中小企業の海外進出 
うまくいば両者を同時に実現できるとても良い事業だ。
支援の対象となる地域は 
青森県、秋田県、岩手県、山形県、 宮城県、福島県、群馬県、栃木県、茨城県、千葉県 
であり、ここに事業所がある事業者だけでなく、 
被災地関連商品を取り扱う事業者も補助が受けられる。
具体的な補助内容としては図1のようになっており、 
要は海外モールの出店料を立て替えてくれるシステムだ。
<img decoding="async" src="http://www.cbec.go.jp/ori/50035/etc_img/scheme1.JPG" alt="" /> 
(越境ECポータルより)
以下は補助の対象となるモールと補助内容の一覧。
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="25%">■eBay</th>
<th width="25%">Superior</th>
<th width="25%">Advance</th>
<th width="25%">Basic</th>
</tr>
<tr>
<td>登録可能商品数</td>
<td>150</td>
<td>150</td>
<td>150</td>
</tr>
<tr>
<td>初期費用（1）</td>
<td>70万円</td>
<td>30万円</td>
<td>18万円</td>
</tr>
<tr>
<td>月額費用（2）</td>
<td>5万円</td>
<td>5万円</td>
<td>5万円</td>
</tr>
<tr>
<td>補助対象総額 
(1 + 2 * 最大 6 ヶ月)</td>
<td>100万円</td>
<td>60万円</td>
<td>48万円</td>
</tr>
<tr>
<td>売上手数料(補助対象外)</td>
<td>約10%</td>
<td>約10%</td>
<td>約10%</td>
</tr>
<tr>
<td>初期システム構築費用に含まれる付加サービス</td>
<td>リスティング広告+プログマーケティング支援</td>
<td>ブログマーケティング支援</td>
<td>なし</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="25%">■淘宝網</th>
<th width="25%">Superior</th>
<th width="25%">Advance</th>
<th width="25%">Basic</th>
</tr>
<tr>
<td>登録可能商品数</td>
<td>150</td>
<td>150</td>
<td>150</td>
</tr>
<tr>
<td>初期費用（1）</td>
<td>70万円</td>
<td>30万円</td>
<td>27万円</td>
</tr>
<tr>
<td>月額費用（2）</td>
<td>5万円</td>
<td>5万円</td>
<td>3万円</td>
</tr>
<tr>
<td>補助対象総額 
(1 + 2 * 最大 6 ヶ月)</td>
<td>100万円</td>
<td>60万円</td>
<td>45万円</td>
</tr>
<tr>
<td>売上手数料(補助対象外)</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
<tr>
<td>初期システム構築費用に含まれる付加サービス</td>
<td>右記すべて+タオバオマイバー出稿</td>
<td>淘宝内リスティング広告+淘宝内インプレッションバナー</td>
<td>淘宝内リスティング広告+マイクロブログ投稿</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="25%">■J-shoppers</th>
<th width="25%">Superior</th>
<th width="25%">Advance</th>
<th width="25%">Basic</th>
</tr>
<tr>
<td>登録可能商品数</td>
<td>300</td>
<td>100</td>
<td>30</td>
</tr>
<tr>
<td>初期費用（1）</td>
<td>70万円</td>
<td>48万円</td>
<td>4万円</td>
</tr>
<tr>
<td>月額費用（2）</td>
<td>5万円</td>
<td>2万円</td>
<td>1万円</td>
</tr>
<tr>
<td>補助対象総額 
(1 + 2 * 最大 6 ヶ月)</td>
<td>100万円</td>
<td>60万円</td>
<td>10万円</td>
</tr>
<tr>
<td>売上手数料(補助対象外)</td>
<td>10%</td>
<td>10%</td>
<td>10%</td>
</tr>
<tr>
<td>初期システム構築費用に含まれる付加サービス</td>
<td>右記+個別特集ページ+マイクロブログ投稿</td>
<td>右記+リスティング広告</td>
<td>モールメルマガ内紹介+モール Facebookページでの紹介</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="25%">■佰宜杰</th>
<th width="25%">Superior</th>
<th width="25%">Advance</th>
<th width="25%">Basic</th>
</tr>
<tr>
<td>登録可能商品数</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>初期費用（1）</td>
<td>70万円</td>
<td>45万円</td>
<td>15万円</td>
</tr>
<tr>
<td>月額費用（2）</td>
<td>5万円</td>
<td>5万円</td>
<td>5万円</td>
</tr>
<tr>
<td>補助対象総額 
(1 + 2 * 最大 6 ヶ月)</td>
<td>100万円</td>
<td>75万円</td>
<td>45万円</td>
</tr>
<tr>
<td>売上手数料(補助対象外)</td>
<td>9%</td>
<td>9%</td>
<td>9%</td>
</tr>
<tr>
<td>マイクロブログ投稿+ターゲティング広告</td>
<td>右記+個別特集ページ+マイクロブログ投稿</td>
<td>マイクロブログ投稿</td>
<td>なし</td>
</tr>
</tbody>
</table>
■PCホーム 
サイト内に特設ページを設置。 
その中で各事業者の商品を販売する。 
補助内容は 
初期費用 10万円 (20万円のところ) 
運用費用 5千円 / 月 (1万円のところ) 
国政物量費用 3万円 
となる。
本事業は海外進出の補助だけが目的ではなく、 
「成功モデル等の普及啓発」ということも目的として明確に掲げられている。 
政府としても日本の中小企業の越境ECの支援について 
手探り状態の中、今回の事業を成功させ是非全国規模での事業となってほしい。
ソース 
<a href="http://www.cbec.go.jp/content_ja_JPY_32.html" target="_blank">http://www.cbec.go.jp/content_ja_JPY_32.html</a> 
<a href="http://ecaa.jp/news/2012/20120406_140.html" target="_blank">http://ecaa.jp/news/2012/20120406_140.html</a>

越境EC 経産省による補助金事業スタート

最近ちょくちょくみかける パララックス効果や、スクロールの効果のプラグインを紹介します。
&nbsp;
&nbsp;
<h2>jQuery Scroll Path</h3>
パスを設定し、そのパスに沿って動かせるというもの。
今までのスクロールとは奇想天外な動きをするので、ちょっとびっくりします。
ランディングページとかに利用するとインパクト与えられるかも。
&nbsp;
<a class="demo" href="http://joelb.me/scrollpath/" target="_blank">DEMO</a> 
<a class="demo" href="https://github.com/JoelBesada/scrollpath/downloads" target="_blank">DOWNLOAD</a>
&nbsp;
&nbsp;
<h2>Curtain.js</h3>
コンテンツがするすると切り替わるプラグイン。
紙芝居みたいですね。
&nbsp;
こちらは、以前実際に試したものがありますので、そちらをご覧下さい。
使用方法等も記載しています。
<a href="https://sterfield.co.jp/designer/jquery/%E3%82%AB%E3%83%BC%E3%83%86%E3%83%B3%E3%80%81%E3%81%A8%E3%81%84%E3%81%86%E3%81%8B%E3%82%B7%E3%83%A3%E3%83%83%E3%82%BF%E3%83%BC%EF%BC%9F%E3%81%BF%E3%81%9F%E3%81%84%E3%81%AB%E3%83%9A%E3%83%BC%E3%82%B8.html" target="_blank">カーテン、というかシャッター？みたいにページが切り替わるJS</a>
&nbsp;
<h2>jQuery-Parallax</h3>
背景画像とコンテンツのスクロールした時の速度をずらし、インパクトとユニークさを感じることができます。 Nikeのサイトでも使用されたみたいですね。
<a class="demo" href="http://johnpolacek.github.com/scrolldeck.js/decks/parallax/" target="_blank">DEMO</a> 
<a class="demo" href="https://github.com/IanLunn/jQuery-Parallax/downloads" target="_blank">DOWNLOAD</a>
&nbsp;
<h2>Sequence.js</h3>
このプラグインで3つの表現ができるプラグイン。
ちょっとオシャレなスライドと、パララックス効果のあるスライド、
そして、appleのようなスライド（？）とあります。
<a class="demo" href="http://www.sequencejs.com/" target="_blank">DEMO</a> 
<a class="demo" href="https://github.com/IanLunn/Sequence/downloads" target="_blank">DOWNLOAD</a>
&nbsp;
<h2>Parallax Content Slider with CSS3 and jQuery</h3>
上記のパララックス効果のあるスライドと同等のものですね。
メインビジュアルとかによさそうですね。
&nbsp;
<a class="demo" href="http://tympanus.net/Development/ParallaxContentSlider/" target="_blank">DEMO</a> 
<a class="demo" href="http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/" target="_blank">DOWNLOAD</a>
&nbsp;
<h2>Parallax Slider with jQuery</h3>
こちらもパララックス効果のスライドですが、サムネイル付にすることができます。
<a class="demo" href="http://tympanus.net/Tutorials/ParallaxSlider/" target="_blank">DEMO</a> 
<a class="demo" href="http://tympanus.net/codrops/2011/01/03/parallax-slider/" target="_blank">DOWNLOAD</a>
&nbsp;
メインビジュアルであったり、サイト自体に 比較的簡単にこのような動きをつけられるようになってきてますので、
今後そのような流れになっていくのでしょうか。
&nbsp;
新しい技術はどんどんでてきますねー。
最新の表現、技術に乗り遅れないようにして、
よいwebサイトを制作しつづけれらるよう精進します。
&nbsp;
近々上記のようなプラグインを使ってなにか試してみたいと思います。

いずれ使用してみたいパララックス及びスクロール効果プラグイン

リバースコマースとは、ネット上において売り手が商品やサービスを販売するのではなく、 
買い手がほしい物を提示し、1人以上の売り手がそれを作るeコマースの手段である。 
主に買い手のお題に対し、クリエイターやデザイナーに対し企画やデザインを募り 
マッチしたものを発注するという流れが多い。
TechDollでキュレーションサイトFancyの紹介記事に出現した言葉だ。 
<a href="http://www.techdoll.jp/2012/03/23/fancy_fancystory/" target="_blank">http://www.techdoll.jp/2012/03/23/fancy_fancystory/</a>
私が知る限りではこの分野にコマースという言葉を冠した呼び名は初めてだ。
要はネット上でのCtoCのビジネスモデルだ。
6年ほど前、私はインターネットの特性から、 
CtoCが伸びると予想し、クリエイターのマッチングサイトを作った。 
(リバースコマースの機能もオーダーメイドという言葉で実装していた)
当時はyahooオークションが全盛であり、 
CtoC=オークションというのが常識であり、yahooのオークション担当者も自負していた。
もう一つの動きとして、当時mixiが上場し、SNSという言葉が一般的になっていた。
個人利用におけるインターネットの変遷として当時私は 
1. 情報、2. ショッピング、ときて、3.コミュニケーションが浸透し、 
個人がインターネットを利用する上ではこの3つのいずれか1つ以上に強みがなくてはならないと思っていた。 
(それは今でも正しいと思っており、これに4.ゲームがさらに追加されていると思っている)
コミニュケーションは近況の報告や趣味の共有などから始まるが、 
1.情報は既に生活に密着しており無料であるために、 
自然とコミュニケーションの中に入り込んだ。 
= 1.情報と3.コミュニケーションのコラボレーションは自然に成立した。
次に考えられるのが2.ショッピングと3.コミュニケーションのコラボレーションだが、 
これは大きな成功事例=文化として未だ成立していない。
その前に成功したのが、4.ゲームと3.コミュニケーションだ。 
greeやdenaが大手だが、コミュニケーション+競争、団結、共有の要素を合わせ、 
従来のゲームにさらなる価値を創造し、成功した。
そうなると、唯一成功していないのが 
2.ショッピングと3.コミュニケーションのコラボレーションだ。
2.ショッピングは、1.情報、4.ゲームに比べ 
直接的な市場規模ははるかに大きい。 
これに気づき、この分野に手を出してみるサービスは時折見られる。 
このような動き、若しくはこれに近い動きは色々とあった。
・ジオメディア 
・共同クーポン 
・比較、口コミサイト
どれも真のEC、コミュニケーションは生まれていない。
話は戻るが、前述の私のクリエイターのマッチングサイトは結論として失敗した。
学生だった私のノウハウや資金力をのぞいたとして、 
私が考える失敗の理由は、
a. 個人の信用力 
b. コミュニケーションする理由
だと思っている。
aは当時分厚い壁があり特に日本では高い壁と言われていた。 
しかしFacebookが低くしてくれたお陰で、 
買い手の安心感はかなり担保されてきている。
問題はbだ。 
前述の例で言うと、
・ジオメディア 
コロカなど他のユーザーに対する優位性を示すという理由を定義している。 
しかし土台のジオメディア自体に前述1~4の特性が弱いため、 
文化として成立するまでには至っていない。
・共同クーポン 
非常に良くできたモデルだが、コミュニケーション制は弱い。 
ユーザー同士はクーポンが成立するためのパイでありそこにコミュニケーションは無い。 
(チケット販売などグルーピングされたコミュニティに対する商品であれば変わってくるかもしれない)
・比較、口コミサイト 
これらは1と2のコラボレーションであり、 
さらにコミュニケーションまで加われば大化けする可能がある。 
しかし現在は継続のメリットがない。 
コミュニケーションが生まれていない。
まとめると、 
CtoCでの成功 = 3.コミュニケーションと2. ショッピングをコラボレーションさせるには、
・買い物をコミュニケーションにつなげる 
・自分+買い物 = セルフブランディングという意味づけ 
・売り手とその商品の安全性の担保 
・継続するメリット 
・ここで買うメリット
の5つを満たすことが必要である。
クリエイター系のサービスは、商品のオリジナル性と汎用性から 
これらの項目を満たしやすい。 
さらにfancyではキュレーションやマイクロファンドといった付随サービスが充実しており、 
ユーザーに継続するメリットを与えている。 
売り手の安全性もソーシャルとの組み合わせである程度担保できる。
しかしクリエイター系サービスは決まった問題にぶち当たる。 
それは商品力だ。 
クリエイター商品は良いものも多いがブランディングが弱い。 
要は プレタポルテ &gt; オートクチュールなのだ。 
そのユーザーのマインドを少なくとも 
プレタポルテ &gt;= オートクチュール 
という状態に変えることが 
同類サイトが越えなければならない壁であり最重要課題だと私は思う。

リバースコマースからみるCtoCビジネスの変遷

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」

HTML5のCANVASで、円グラフジェネレーターを作ってみた。 
<a href="/demo/hoshino/02/">/demo/hoshino/02/</a>
<iframe loading="lazy" width="320" height="240" style="border: none; overflow: hidden; width: 560px; height: 400px;" src="/demo/hoshino/02/sf_pie_chart_201203191011.html" frameborder="0"></iframe>
1. ページ上部でキャンバスの大きさを設定 
※デフォルトは画面サイズ 
2. 左サイドで項目を編集 
3. ページ上部でフォントサイズや背景色を調整 
4. 左サイドパブリッシュボタンで設定を反映
その後、ソースをダウンロードするか、埋め込みタグを取得できます。 
よろしければ自由に使って下さい。
ソースを埋め込む場合、HTML5で構築されたページでないと表示されないのでご注意を。 
ちなみに上記の円グラフはソースをダウンロードしてiframeで読み込んでいます。

HTML5 CANVAS 円グラフジェネレーター

【symfony2】参考リンク集　＆　学習ノート

Active contents design(アクティブコンテンツデザイン) 
というデザインの概念を提唱したい。
これは、ページ単位でユーザーが見ているコンテンツ、 
見せたいコンテンツをページを見るフローの中で 
細分化、最適化してユーザーに提供するデザインである。
具体的には、ユーザーがその瞬間見ている場所において 
最適なコンテンツとインターフェイスを提供する。 
デザイナーは、ユーザーが今見ている位置を 
ブラウザのx軸、y軸から判別する。
例えば、1ページが長い場合、自分がページ全体のどの部分にいるかを示し、 
あるいはページが終盤であれば次のステップをサジェストするような情報を 
ユーザーに対しx軸、y軸によって動的にその時必要な情報だけを提供する。
レスポンシブwebデザインは、とても良い概念だが、 
これはサイトとしてデバイスや画面サイズの違いに合わせ 
コンテンツとインターフェイスを最適化する考え方だ。
一方でアクティブコンテンツデザインは、 
ユーザーが見ている場所によって、 
コンテンツとインターフェイスを最適化する概念だ。
技術的には、先にも述べたがブラウザのx軸、y軸のスクロール情報により 
ユーザーの今見ている場所を判断してその時の処理を定義する。 
これはjavascriptをメインとして行い、 
onScrollイベントにより座標を取得する。
要は、「どこを見ているときに、何をするか」 
を制御する必要がある。
実装については、これを実現するためのスクリプトを作成したので、 
詳しくは以下の記事を参考にしていただきたい。
■sf_scroll_trick.js 
<a href="/officer/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/100.html">/officer/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/100.html</a>

Active contents design(アクティブコンテンツデザイン)

スクロール位置によって任意のイベントを発生させる sf_scroll_trick.js

スクロールするとサイドメニューがついてくるjQuery

Symfony2、lithiumとZendのコンポーネントを使った簡単なフレームワーク

カーテン、というかシャッター？みたいにページが切り替わるJS

最近、いろいろなメディアでFacebookコマースから撤退という記事を目にした。
ブルームバーグが、報道した内容は<a href="http://ascii.jp/elem/000/000/672/672838/" target="_blank">こちら</a>
ゲーム小売大手のGameStopが開設わずか半年で閉鎖したという内容だが、実際の数字はどうだったのか？
これを分析考察している方の記事とその日本語に訳している記事をご紹介します。
・原文
<a title="F(ail)-Commerce: Data Driven Look into Why Retailers Are Shutting Facebook Stores" href="http://www.timchae.com/2012/02/fail-commerce-data-driven-look-into-why-gamestop-to-j-c-penney-shut-down-facebook-stores/" rel="bookmark">F(ail)-Commerce: Data Driven Look into Why Retailers Are Shutting Facebook Stores</a>
・日本語訳
<a title="Permanent Link: Fコマースから続々と撤退するブランドたち、Like数370万件でデイリー閲覧数1,500のとほほな現実" href="http://www.techdoll.jp/2012/02/24/fcommerce_realitybites/" rel="bookmark">Fコマースから続々と撤退するブランドたち、Like数370万件でデイリー閲覧数1,500のとほほな現実</a>
<h2>まとめ</h3>
タイトルからも分かるように、370万回「いいね!」されていてもコマース部分は1日1500PVという現実のようです。
まとめてみると厳しい数字ですね。
<ul>
<li> 本家サイトの8%しかトラフィックがない。</li>
<li>ファンの96%はLikeしたページに再び戻ることはない。</li>
<li>1日の平均訪問数はトータルファン数の0.7%（3,700,000×0.7%=26,000）</li>
<li>1日のユニーク訪問数は総ファン数の0.4%（3,700,000×0.4%=15,000）</li>
<li>さらに、ウェルカムページからコマースのタブを開かなければならずこのCTRが5%程度</li>
</ul>
確かに、Facebook内でコマースを展開するには、商品検索も難しいですし、そもそも「いいね!」
ボタンを押さなければ閲覧さえ出来なかったりと、コマースに適しているデザインとは言えないです。
ただ、Facebook内で展開するコマースは現状厳しいという内容で、本家サイトのマーケティングで
ソーシャルボタンやプラグイン（友達からのシェアや、いいね!ボタン）が厳しいという内容では
ないのでそこは、切り分けて考えなければいけないですね。
&nbsp;
それにしても、F(ail)-Commerce→失（敗）コマースというタイトルのパンチが効いてます（笑）
<div></div>

Facebookコマースは失敗だった？

今年も電通から「日本の広告費」が発表された。 
<a href="http://www.dentsu.co.jp/news/release/2012/pdf/2012017-0223.pdf">http://www.dentsu.co.jp/news/release/2012/pdf/2012017-0223.pdf</a>
自分が注目したのは、今年からスマホ広告費が明示されるようになったこと。 
2010年発表のものには動向が記されているにとどまり、 
具体的な額の記載はなかった。
ちなみにモバイル広告について同紙で発表が始まったのは 
2003年分をまとめた2004年発表のものから。 
iモードがサービスインした1999年から5年後。 
iPhone発売が2007年。 
1つの概念が「市場」として認識されるまで、 
少なくとも4年はかかるということか。
いずれにせよ、媒体として、市場として定着したスマホだが、 
この広告費の動きを追うのは特に我々の業界であれば必須だ。
同社の発表によれば、 
モバイル広告費の推移は以下のようになっている。
2003年 100億円 
2004年 180億円 
2005年 288億円 
2006年 390億円 
2007年 621億円 
2008年 913億円 
2009年 1031億円 
2010年 1201億円 
2011年 1168億円
スマートフォンは、2011年 337億円。 
モバイルの2006年に匹敵する。 
今後に注目だが、上記の内208億円が検索連動型広告だという。 
単純に多すぎる。 
要するに、ユーザーは急激に増えているが、 
サービスやプラットフォームが確立していない。
電子書籍、位置情報、リアルタイムなど 
可能性のある分野はいくつかあるが、 
まだ広告モデルとしては確固としたポジションは持てていないようだ。
いずれにせよ、個人的な認識としては 
ユーザの数に対しサービスが追いついていない 
と判断したため、スマホならではのサービスに注目していきたい

日本の広告費

今回は、米国に関する記事を見つけたので、紹介します。
リリース内容は<a href="http://www.itochu.co.jp/ja/business/economic_monitor/pdf/2012/20120220_2012-039_U_E-Commerce.pdf" target="_blank">こちら</a>
<h2> まとめ</h3>
<ul>
<li>2011 年の年末商戦（全小売）は、低調との予想を覆して前年比4.1%増</li>
<li>ECの売上高は 2011 年 10～12 月期に前期比年率 25.3%増</li>
<li>2011年通年では 16.1%増</li>
<li>小売売上高全体に占める比率も 4.6%</li>
<li>シェア拡大は今後も続いていくと見込まれる</li>
</ul>
肌感覚で感じてはいるものの、数字を見ると納得できますね。
ECの割合は００年計測の0.9%から同じペースで右肩上がり。
2年で1%程度で考えると分かりやすいと思います。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2012年

2012/05/10

2012/05/03

2012/04/26

2012/04/19

2012/04/05

2012/03/29

2012/03/22

2012/03/20

2012/03/15

2012/03/11

2012/03/11

2012/03/08

2012/03/08

2012/03/01

2012/02/29

2012/02/25

2012/02/23

2012/02/22