今回ご紹介するのは、
HTML5のスライドアニメーションが作れるサイトです。
サインアップの必要なく作れますが、登録して、プランも色々あるようですが、
出来る事が増えて行く感じです。
&nbsp;
作る画面は、以下のような感じです。
<a href="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-5325" alt="HTML5 MAKER Editor html5maker.com" src="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-1024x582.jpg" width="643" height="365" srcset="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-1024x582.jpg 1024w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-300x170.jpg 300w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-228x129.jpg 228w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_.jpg 1249w" sizes="(max-width: 643px) 100vw, 643px" /></a>
直感的にできますね。
写真を追加して、アニメーションの設定を右側で好きなようにできます。
最後、右上の「PUBLISH」を押すと、html一式がダウンロードできます。
&nbsp;
こんなサービスがどんどんできてきてますね。
HTMLに詳しくない人でもwebサイトを作れてしまう環境がどんどん出来上がりつつありますね・・・
&nbsp;
&nbsp;
<a href="http://html5maker.com/" class="link">Create HTML5 Animation | Free Banner Maker </a>
&nbsp;

HTML5のスライドアニメーションを直感的に作れるサイト「HTML5 MAKER」

twigのテンプレートで設置したtwitterボタンが動かない場合の対処法

最近GoogleもＥＣ事業に力を入れてきているようです。
これまでGoogleショッピングという形で広告サービスを行ってきたGoogleですが、アメリカではモールとしてのサービスを始めているようです。
<h3>Google shopping express</h4>
ニューヨーク、ロサンゼルス、サンフランシスコなどの一部と展開している地域は限定されていますが、注文をした当日に商品が届くというサービスをGoogleが開始しました。
Googleと提携しているコストコやトイザラスなどの小売チェーンの商品がサイトで購入でき、19時までに注文すれば当日中に届くそうです。仕組みとしては、amazonのように倉庫に大量の在庫を持つのではなく、提携している店舗にGoogleが注文商品を受け取りに行き顧客まで届けるという形です。どちらかというと、買い物代行に近い感じもしますが、在庫もなく、もちろん倉庫も必要ないので流石Googleという感じです。
<a href="/uploads-archive/2014/07/costco.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5314" alt="costco" src="/uploads-archive/2014/07/costco-300x207.jpg" width="300" height="207" srcset="/uploads-archive/2014/07/costco-300x207.jpg 300w, /uploads-archive/2014/07/costco-228x157.jpg 228w, /uploads-archive/2014/07/costco.jpg 400w" sizes="(max-width: 300px) 100vw, 300px" /></a> <a href="/uploads-archive/2014/07/walgreens.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5315" alt="walgreens" src="/uploads-archive/2014/07/walgreens-300x207.jpg" width="300" height="207" srcset="/uploads-archive/2014/07/walgreens-300x207.jpg 300w, /uploads-archive/2014/07/walgreens-228x157.jpg 228w, /uploads-archive/2014/07/walgreens.jpg 400w" sizes="(max-width: 300px) 100vw, 300px" /></a>
https://www.google.com/shopping/express/#HomePlace:s=0&amp;c=24&amp;mall=SanFrancisco
送料は1店舗につき4.99ドルかかりますが、最低購入金額も設けられていないのでユーザー目線では、ちょっとした買い物もお願いできて便利だなという印象です。
当日に届くという点が欠如するとユーザー的にはAmazonで買い物をするの場合と変わりが無いので配達する距離が長くなる地方では成功するのか疑問がありますが、アメリカでこのサービスが広がれば日本での展開開始もありえそうです。Googleが展開するサービスだけにＥＣ業界が大きく変わってしまう可能性を秘めた動きなので、今後も注目していきたいと思います。
&nbsp;
&nbsp;
&nbsp;

当日に商品が届く！ＥＣ事業を強化するGoogle

リアルな店舗では天候によって売上が作用されると言われていますが、ＥＣにおいても同様に天候の影響を受けるのでしょうか。
リアル店舗においては商材にもよりますが、やはり張れている日の方が売り上げが伸びる傾向にあると言われています。理由は単純に晴れている日は外出する人の数が多くなるという事です。このロジックですとＥＣにおいては、その逆で外出しにくい天候の方が売り上げが伸びそうな気がします。
しかし、<a href="http://searchengineland.com/does-weather-affect-site-traffic-sem-performance-166851">search engine land</a>に掲載された調査では興味深い結果が出ています。アメリカの東海岸で家電用品などを扱う小売店３社のサイトで売上と気温の関係を調べたところ、気温が高い方が物が売れるという結果になったそうです。
<a href="/uploads-archive/2014/07/NewImage25.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5249" alt="NewImage25" src="/uploads-archive/2014/07/NewImage25-300x175.png" width="300" height="175" srcset="/uploads-archive/2014/07/NewImage25-300x175.png 300w, /uploads-archive/2014/07/NewImage25-228x133.png 228w, /uploads-archive/2014/07/NewImage25.png 600w" sizes="(max-width: 300px) 100vw, 300px" /></a>
注意すべきは天気ではなく気温と売上に関係があるという事です。
気温なので外出しやすいかどうかとは直接関係づけが行いにくいですが、もしかするとリアル店舗同様にＥＣにおいても天候が良い方が売上が高くなるという事なのかもしれません。
<h3>もしかしてＥＣも天気が良いと売れる！？</h4>
上の調査は海外での事例ですし、どんな商材を扱うかによっても天候・気温の影響は異なると思うので、私が担当するサイトではどうなのか調べてみました。
<a href="/uploads-archive/2014/07/e172e7ed7d26a218871aeba881d1c84c.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5256" alt="天気と売上" src="/uploads-archive/2014/07/e172e7ed7d26a218871aeba881d1c84c-300x300.jpg" width="300" height="300" srcset="/uploads-archive/2014/07/e172e7ed7d26a218871aeba881d1c84c-300x300.jpg 300w, /uploads-archive/2014/07/e172e7ed7d26a218871aeba881d1c84c-150x150.jpg 150w, /uploads-archive/2014/07/e172e7ed7d26a218871aeba881d1c84c-228x228.jpg 228w, /uploads-archive/2014/07/e172e7ed7d26a218871aeba881d1c84c.jpg 600w" sizes="(max-width: 300px) 100vw, 300px" /></a>
上の図は2014年6月の天候・気温と売上の関係です。
グラフは最高気温（東京）と売上額の散布図です。データの質が微妙ですが、やはり気温が高い方が売上が伸びる傾向にあるように見えます。その日の天気と売上に関して調べてみると、1日の平均売上に対して晴れている方が売上が伸びています。
これはきちんとした調査ではないので自分でも疑わしいのですが、今回の結果は正直予想外でした。今後、きちんと調べて広告を打つタイミングなどに活かせそうです。
ちなみにEC-CUBE向けですが天気と連動して、バナーを変更するようなプラグインも出ていました。
<a href="http://www.ec-cube.net/products/detail.php?product_id=731"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5261" alt="04081747_5343b798ae6ab" src="/uploads-archive/2014/07/04081747_5343b798ae6ab-300x223.png" width="300" height="223" srcset="/uploads-archive/2014/07/04081747_5343b798ae6ab-300x223.png 300w, /uploads-archive/2014/07/04081747_5343b798ae6ab-228x169.png 228w, /uploads-archive/2014/07/04081747_5343b798ae6ab.png 338w" sizes="(max-width: 300px) 100vw, 300px" /></a>
商材によっては逆の結果が出るものもあるかもしれませんが、天気の影響はあるはずです。うまく利用する手はないなと思いました。
&nbsp;
&nbsp;
&nbsp;
<a href="http://searchengineland.com/does-weather-affect-site-traffic-sem-performance-166851"> </a>
&nbsp;

ＥＣにおける天気と売上の関係は？

Bootstrapとは、以前流行った(?)twitter bootstrapのことで、 
前はそんな風に呼んでいたみたいですが、今は、「Bootstrap」という名称になっているようです。
そんなBootstrapのテーマを専門的に販売しているサイトが「BootstrapBay」です。 
管理画面用から、一般のサイトまで様々なカテゴリーがあります。 
E-Commerceのカテゴリもありますが、今現在はないようですね(2014年7月15日)。
<a href="http://bootstrapbay.com/" target="_blank">BootstrapBay &#8211; Bootstrap Themes &amp; Templates</a>
そもそも「Bootstrap」って？という人は以下のリンクをご覧下さい。
<a href="http://ascii.jp/elem/000/000/795/795948/" target="_blank">いまさら聞けない「Twitter Bootstrap」とは？ (1/2)｜Webサービス開発者のためのTwitter Bootstrap入門</a>
そしてさらに、こちらもご覧頂けると基本的な使い方はもうOKです。
<a href="http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html" target="_blank">Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) &#8211; ＠IT</a>
本家のサイトを見てみますと、確かにもう「Bootstrap」の表記になってますね。
<a href="http://getbootstrap.com/2.3.2/" target="_blank">Bootstrap</a>
今回初めて知ったのですが、bootstrapのカラーテーマの変更できるものが用意されているようです。
<a href="http://bootswatch.com/" target="_blank">Bootswatch: Free themes for Bootstrap</a>
これは最初にご紹介した物とは違い、カラーテーマのバリエーションしかないですね。
Bootstrapは、今後もいろいろと活躍しそうな感じですね〜
他にも、Bootstrapをベースにして、作成されたフレームワーク、テンプレートがありますので、 
最後にご紹介します。
<a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat UI &#8211; Free Bootstrap Framework and Themes</a>
<a href="http://www.flatstrap.org/" target="_blank">Flatstrap by Littlesparkvt.com</a>

Bootstrapのテーマを販売している「BootstrapBay」

【jQuery】デザインしたチェックボックスをラジオボタンのような動きにする

Google grass をさきがけに今後どんどんウェアラブル端末が出てきそうですが、バッテリーがネックになると色んなところで言われています。
ＥＣにとってもより手軽に商品を注文できるだろうし、感覚的にリアル店舗に近づく方向に進んでほしいと期待していますが、バッテリーがすぐ切れてしまうと、スマホが登場した直後同様、不便でしかたないだろうなと。
バッテリーをポケットに入れて、電波で電源供給するなんて技術も開発中との事ですが、何かカッコ悪いし最終的に目指す所ではない感じなので、他にウェアラブルデバイスを後押しするような技術は無いものか探してみました。
すると、意外にもすでに実用化されつつあるスゴイ技術を見つけました。それは体温発電！
<h3>体温で発電できるフィルムが開発された！</h4>
<a href="/uploads-archive/2014/07/kaist-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5216" alt="kaist-1" src="/uploads-archive/2014/07/kaist-1-300x192.jpg" width="300" height="192" srcset="/uploads-archive/2014/07/kaist-1-300x192.jpg 300w, /uploads-archive/2014/07/kaist-1-228x146.jpg 228w, /uploads-archive/2014/07/kaist-1.jpg 400w" sizes="(max-width: 300px) 100vw, 300px" /></a>
上のフィルムは韓国科学技術院（ＫＡＩＳＴ）の研究グループが開発した技術で、人の体温で発電ができるとの事。フィルム状のガラスファイバー繊維に熱発電装置を印刷する技術で、とても軽いそうです。
どうやって電気を起こすのかというと、外気温と体温との温度差によって発生する熱移動を利用して発電する仕組み。
サイズ的にウェアラブルにピッタリという感じですが問題は発電量です、そこの所どうなんでしょうか？
<a href="/uploads-archive/2014/07/kaist-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5217" alt="kaist-2" src="/uploads-archive/2014/07/kaist-2-300x172.jpg" width="300" height="172" srcset="/uploads-archive/2014/07/kaist-2-300x172.jpg 300w, /uploads-archive/2014/07/kaist-2-228x131.jpg 228w, /uploads-archive/2014/07/kaist-2.jpg 400w" sizes="(max-width: 300px) 100vw, 300px" /></a>
開発した研究グループは10cm四方の熱発電装置で、体温と外気温の温度差が約１７℃程度の状況で、約４０ mWの発電に成功したと実験結果を発表しています。アナログの腕時計くらいなら動かせそうですが、液晶などに電源を供給するには厳しい数字です。
デバイスの電源を全てまかなうのは難しそうですが、少なくともバッテリーを長持ちさせる為には役立ちそうです。ちょっと、期待が薄れてしまいましたが、もう少し調べてみると、この技術を応用して懐中電灯を光らせた天才少女を発見しました。
<h3>手のひらの体温でＬＥＤライトをつける天才少女</h4>
<iframe loading="lazy" width="425" height="350" src="http://www.youtube.com/embed/9CCGUMkcbjg" frameborder="0"></iframe>
上の女性はカナダの高校生でアン・マコシンスキーさん（１５）、Googleのサイエンスフェアに、体温発電でＬＥＤライトをつけるという研究を出展したそうです。上で紹介したＫＡＩＳＴが開発した技術を利用して発電をしているそうで、発電量を大きくする工夫をしたようです。 

発電量が外気温に左右されるので、温かい場所には向いていないですが、カナダなら寒いから発電量が大きいのかも。
フィルム自体の発電効率など改善の余地はあると思うので、今後期待できそうな技術です。
&nbsp;
&nbsp;

体温で発電！？ウェラブル端末に搭載されそうなスゴイ技術

googleが新たなデザインを提唱しているのが耳に入ったので、 
それを紹介します。
<a href="http://www.google.com/design/#resources" target="_blank">Google Design</a>
<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material Design &#8211; Google design guidelines</a>
Material Designという名称でガイドラインが用意されているのですが、 
まぁパッと見、フラットデザインに近しい印象があります。
Material というと、「素材,材料,物質」という意味があるように、 
かなりざっくりいうと、 
1.デザイン要素は現実の物のメタファーを用い、 
2.わかりやすく意図的な色使い、グラフィック、タイポグラフィ、 
3.意味のあるアニメーションを用いましょう 
という感じかと思います。
項目は以下のようになっています。
・アニメーション 
・スタイル 
・レイアウト 
・コンポーネント 
・パターン 
・ユーザビリティ 
・リソース
かなり事細かに説明があり、 
原則から始まり、レイアウト、スタイル、コンポーネント等には、 
これはOK,これはダメといった指示まであります。 
テンプレートも用意されています。
スタイルの項目には、カラーやフォントについての記述があるのですが、 
こちらも、リソースとして、カラーパレットやフォントデータを提供してくれています。
細かいことはやはりサイトを見て感じてもらう必要があるかと思います。 
今後のデザインを作用しうるものになるかもしれないので、一読の必要性ありかもしれません。
といってもあまりにも従いすぎると、均一したデザインになってしまいますね。 
それがGoogleの狙いなのかもしれませんが。
<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank" class="link">Introduction &#8211; Material Design &#8211; Google design guidelines</a>

Googleが新たに提唱しているMaterial Design

webサイトを作っていると、バナーを作成する機会というのは少なからず発生します。
私は、バナー作成が正直ちょっと苦手で、webのデザインからしかやってないせいか、グラフィックの領域のような気がしてしまい、いつも悩まされています。
そんな時は、やはり、他のバナーは一体どんな感じなのか？？
を知るのが大切だと思います。 
goole画像検索しても出てきますが、バナーを集めたサイトをご紹介させていただきます。
<h2>バナーデザイン・サンプルデータベース</h3>
<a href="http://aka-design.sub.jp/bd/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5180" alt="バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ）" src="/uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-1024x566.jpg 1024w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-300x165.jpg 300w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-228x126.jpg 228w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a> 
<a class="link" href="http://aka-design.sub.jp/bd/" target="_blank">バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ）</a>
&nbsp;
<h2>バナーデザインアーカイブ</h3>
<a href="http://banner.keizine.net/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5181" alt="バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！" src="/uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-1024x566.jpg 1024w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-300x165.jpg 300w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-228x126.jpg 228w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a> 
<a class="link" href="http://banner.keizine.net/" target="_blank">バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！</a>
&nbsp;
<h2>バナーデザインギャラリー</h3>
<a href="http://www.banner-design-gallery.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5182" alt="バナーデザインギャラリー Banner Design Gallery" src="/uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-1024x566.jpg 1024w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-300x165.jpg 300w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-228x126.jpg 228w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a> 
<a class="link" href="http://www.banner-design-gallery.com/" target="_blank">バナーデザインギャラリー | Banner Design Gallery</a>
&nbsp;
<h2>バナーデザイン専門ギャラリーサイト レトロバナー</h3>
<a href="http://retrobanner.net/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5183" alt="バナーデザイン専門ギャラリーサイト レトロバナー" src="/uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-1024x566.jpg 1024w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-300x165.jpg 300w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-228x126.jpg 228w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a> 
<a class="link" href="http://retrobanner.net/" target="_blank">バナーデザイン専門ギャラリーサイト | レトロバナー</a>
&nbsp;
他にも作るコツ等を説明してくれているブログも紹介します！
<a href="http://www.find-job.net/startup/tips-of-banner">有名企業の事例から学ぶ！高品質なバナー広告を作るための「コツ＆レイアウト」集 | Find Job ! Startup</a>
&nbsp;
<a href="http://nanapi.co.jp/blog/2013/10/02/make-banner-speedy/">新人必見！倍速かつ高品質なバナーを作るためのコツを全公開します | nanapi TechBlog</a>
&nbsp;
<a href="http://liskul.com/banner_layout-1143">勝てるバナーレイアウト20選！│レイアウトに悩んだ時の虎の巻</a>
&nbsp;
&nbsp;
ささってかっこよくバナー作れるようになりたいですね・・・

バナー作成に困った時に見たいサイト7選

CSS3でドミノ倒しみたいにテキストが倒れていくアニメーション

ＥＣやテレビショッピング等で買い物をする場合と、いわゆるリアル店舗の場合では根本的に商品の感覚的な情報が違う。
リアル店舗であれば当然お客に『視覚・嗅覚・触覚・味覚』を感じてもらえるが、その全てを通販で伝える事は現段階で不可能だ。視覚に関しては画像・映像で伝える事ができるが、嗅覚・触覚・味覚は他人の感想をお客に伝えて、そこから想像してもらうしかない。
しかし、オーフォン・デュオ(oPhone DUO)という新しいガジェットが通販を１段階リアル店舗に近づけてくれそうだ。
<h3>香りを送れるオーフォン・デュオ(oPhone DUO)</h4>
<a href="/uploads-archive/2014/07/20140616073047-artisan-studio-ophone-7.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5164" alt="20140616073047-artisan-studio-ophone-7" src="/uploads-archive/2014/07/20140616073047-artisan-studio-ophone-7-199x300.jpg" width="199" height="300" srcset="/uploads-archive/2014/07/20140616073047-artisan-studio-ophone-7-199x300.jpg 199w, /uploads-archive/2014/07/20140616073047-artisan-studio-ophone-7-682x1024.jpg 682w, /uploads-archive/2014/07/20140616073047-artisan-studio-ophone-7-228x342.jpg 228w, /uploads-archive/2014/07/20140616073047-artisan-studio-ophone-7.jpg 1365w" sizes="(max-width: 199px) 100vw, 199px" /></a>
箱に2本の円柱がささったようなユニークな形のガジェットは、なんと香りを送る事ができるというオーフォン・デュオ(oPhone DUO)。パリの<a href="https://www.indiegogo.com/projects/ophone-duo">ヴェイパーコミュニケーションズ</a>が発表した次世代感たっぷりの代物だ。CEOのディビッド・エドワーズ氏はハーバード大の教授でもあるそうで、左上の写真がエドワード氏。
どんな仕組みかというと、oPhone DUOは名前のとおり香の電話機のようなガジェットで、一度に約１０秒のあいだ香りを送る。もちろんだが実際に香りを送るのではなく、送信側から香りに関するデータを送り、受信側がそのデータを元にガジェット内で香りを構成する。電波を音に変換す電話同様、電波を香りに変えるのである。
2本の円柱はシリンダーになっていて、４つの香りが入ったチップが８つ入っている。プリンターのインクカートリッジに似ていて合計３２の香が入っている。組合せ次第では30万通りを超える香りが作れるとの事。
<a href="/uploads-archive/2014/07/20140616073833-oPhone_website.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5167" alt="20140616073833-oPhone_website" src="/uploads-archive/2014/07/20140616073833-oPhone_website-300x148.jpg" width="300" height="148" srcset="/uploads-archive/2014/07/20140616073833-oPhone_website-300x148.jpg 300w, /uploads-archive/2014/07/20140616073833-oPhone_website-228x112.jpg 228w, /uploads-archive/2014/07/20140616073833-oPhone_website.jpg 1016w" sizes="(max-width: 300px) 100vw, 300px" /></a>
oPhoneで香りを送るには無料の<a href="https://itunes.apple.com/us/app/osnap-scent-based-mobile-messaging/id883187890?mt=8">oSnap</a>というアプリケーションをダウンロードする。
現時点では香りを送る側が、どんな香りにするか操作する必要があるが、将来的には写真を撮っただけで、その香りを送れるようにしたいとの事。
<a href="/uploads-archive/2014/07/screen568x568-1.jpeg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5169" alt="screen568x568 (1)" src="/uploads-archive/2014/07/screen568x568-1-169x300.jpeg" width="169" height="300" srcset="/uploads-archive/2014/07/screen568x568-1-169x300.jpeg 169w, /uploads-archive/2014/07/screen568x568-1-228x404.jpeg 228w, /uploads-archive/2014/07/screen568x568-1.jpeg 320w" sizes="(max-width: 169px) 100vw, 169px" /></a><a href="/uploads-archive/2014/07/screen568x568.jpeg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5170" alt="screen568x568" src="/uploads-archive/2014/07/screen568x568-169x300.jpeg" width="169" height="300" srcset="/uploads-archive/2014/07/screen568x568-169x300.jpeg 169w, /uploads-archive/2014/07/screen568x568-228x404.jpeg 228w, /uploads-archive/2014/07/screen568x568.jpeg 320w" sizes="(max-width: 169px) 100vw, 169px" /></a>
oPhoneは２０１５年から販売を開始する予定で、価格は１９９ドル。キャンペーン中で今なら１４９ドルとの事。以外に安い気がするが、プリンター同様、香りが入ったカートリッジが高くなりそうな気配がする。
とはいえ香りを伝えられるデバイスがまもなく実用化されるという事は、大きな１歩だと思う。この技術がさらに進めば、スイーツを販売するサイトでは甘い香りが広がり、高級和牛のお取り寄せサイトでは焼肉の匂いが食欲をそそり販売数を伸ばす。さらにお香やアロマなど今まで通販には向かなかった商品も販売できるかもしれない。
<iframe loading="lazy" width="425" height="350" src="http://player.vimeo.com/video/98316615" frameborder="0"></iframe>
&nbsp;
&nbsp;

通販を新しい次元に連れて行くかも！？香りを伝えるガジェット

このリモコンみたいな物は「dash」、amazonが２０１４年４月に発表したガジェット。
基本的には日用品を購入するためのガジェットで製品のバーコードを読み取ったり、音声入力で商品の購入リストが作れるという事です。買いたい物のリストは自分の「amazon　fresh」アカウントに追加され、後は発送日などを決定して注文を完了するだけ。
ちなみにamazon freshはアメリカ・シアトルで展開されている通販サイトで野菜や肉類などの生鮮食品、加工食品、日曜雑貨などがそろっている、いわばネットスーパーです。「dash」の料金自体は無料ですが、「amazon　fresh」でしか使えません。
<a href="https://fresh.amazon.com/"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5149" alt="Tools_GW_banner._V383740777_" src="/uploads-archive/2014/06/Tools_GW_banner._V383740777_-300x177.jpg" width="300" height="177" srcset="/uploads-archive/2014/06/Tools_GW_banner._V383740777_-300x177.jpg 300w, /uploads-archive/2014/06/Tools_GW_banner._V383740777_-228x135.jpg 228w, /uploads-archive/2014/06/Tools_GW_banner._V383740777_.jpg 312w" sizes="(max-width: 300px) 100vw, 300px" /></a>(amazon fresh)
「dash」を使ったサービスでよりネットでの買い物がよりシンプルになる感じです。物理的に作業がシンプル且つ楽で、購入までの手順がシンプルなほどユーザーはそちらへ流れると思います。　「dash」のようなガジェットを使ったＥＣが主流になるパラダイム変化が起きる可能性すらあります。家にすでにある物のバーコードを読み取る為、一度購入した物をリピートする確率が高くなると考えられるので、amazon freshでオリジナルブランドの日曜品を作って販売すればスゴイ事になりそうです。
ウィークポイントは服や雑貨のように、ショッピングを楽しむという商品には向かないので、日用品に限定されると思います。
<h3>amazon dash的サービスは伸びシロがすごいかも</h4>
現在は限定された地域だけのサービスですが、個人的には中長期的にみて、かなり伸びシロがあると感じます。
ここ数年アメリカの田舎では超大型ショッピングセンター進出の影響などで、地域のスーパーがどんどん潰れています。スーパーが残っている所でも品揃えがかなり悪く加工品ばかりで値段も高いのだそうです。
食料品に関して言えば田舎なのでスーパーなどに行かなくても農産物が豊富にあるような気がしますが、国や州からの補助金の影響や穀物メジャーが幅を利かせている為、作っているのはほとんどが穀物のみ。
野菜に関しても企業農業が進んでいるアメリカでは合理性や効率を優先するので輸送コストがかかる野菜は、田舎向けには作らず都会に住む人向けに作られています。田舎に住むアメリカ人の中には偏った食事から栄養失調になっている人も少なくないのだとか。
いわゆる「買い物難民」がアメリカには蔓延しているのです。加えて高齢化が進む状態で、amazon　dashのようなガジェットとのようなサービスはニーズが高くなるのは容易に推測できます。しかし、アメリカの国土の広さゆえに輸送コストからは逃げられない側面は無視できません。
<h3>日本の「買い物難民」にウケるんじゃないの</h4>
個人的にはむしろ日本でamazon dashとamazon freshを組み合わせたようなサービスが受けると思います。地方の過疎地はもちろんのこと、都内でも高齢化と買い物難民は大きな問題になっています。
よく取沙汰されるのは多摩ニュータウンなどですが、都会といわれる場所でも、実際買い物をする店も限られていて遠出が難しい高齢者には日用品を買いに行くこと自体が一苦労です。
ＥＣにおいて商品を購入するまでの作業をよりシンプルにできれば高齢者をユーザーとして獲得しやすくなるでしょうし、５年後、１０年後に高齢者となっている世代には、amazon dashのようなガジェットを使ったり、ネットで商品を購入する事への抵抗はほとんど無くなっていると思います。
<iframe loading="lazy" width="425" height="350" src="http://www.youtube.com/embed/aFYs9zqYpdM" frameborder="0" allowfullscreen=""></iframe>
&nbsp;
&nbsp;
&nbsp;

amazonの新しいガジェットで生活が変わるかも

FacebookのLikeボタンの読み込みが遅いときにチェックするべき項目

jQueryで金額をカウントアップする方法

前回は写真の撮り方をまとめてみましたが、実際写真を撮っている時間がない方や少しくらいお金を出してもいいからプロに撮ってもらいたいというクオリティー重視の方もいるかと思います。そこで今回はＥＣ向けに画像・映像の撮影サービスを行っている業者をまとめてみました。
<a href="http://www.ec-revo.biz/e-fulfillment/management/photo/">ＥＣ－ＲＥＶＯ</a>
<a href="http://www.ec-revo.biz/e-fulfillment/management/photo/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5074" alt="head_logo" src="/uploads-archive/2014/06/head_logo.png" width="275" height="62" srcset="/uploads-archive/2014/06/head_logo.png 275w, /uploads-archive/2014/06/head_logo-228x51.png 228w" sizes="(max-width: 275px) 100vw, 275px" /></a>
１カット８２．５円～で業界最安値を売りにしているみたいです。
主にアパレル関係が得意なのか、料金プランの例としてアップされている写真は服や帽子などが多いです。
カタログっぽい写真であればリーズナブルな感じです、４００円くらいから１カット撮れるとの事。アパレルの場合、マネキンを使っての撮影なら安いプランで１２カット９９０円。（３商品×４カット）。モデルさんを使っての写真も１０００円～という事で安いのでないでしょうか。
<a href="/uploads-archive/2014/06/img_price01_1.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5077" alt="img_price01_1" src="/uploads-archive/2014/06/img_price01_1-300x62.jpg" width="300" height="62" srcset="/uploads-archive/2014/06/img_price01_1-300x62.jpg 300w, /uploads-archive/2014/06/img_price01_1-228x47.jpg 228w, /uploads-archive/2014/06/img_price01_1.jpg 679w" sizes="(max-width: 300px) 100vw, 300px" /></a>
イメージカットは１カットという事で、ちゃんとしたカメラマンを連れてきて撮ってもらうよりは良さそう。
<a href="/uploads-archive/2014/06/img_price04_13.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5078" alt="img_price04_13" src="/uploads-archive/2014/06/img_price04_13.jpg" width="165" height="166" srcset="/uploads-archive/2014/06/img_price04_13.jpg 165w, /uploads-archive/2014/06/img_price04_13-150x150.jpg 150w" sizes="(max-width: 165px) 100vw, 165px" /></a>
１カットの値段は安いですが、カット単位で料金がかかる場合は撮影内容をできるだけフィックスしておいた方がいいと思います。特にイメージ写真なんかは正解がないので、あれもこれもとならない様に気をつけたほうが良いです。
&nbsp;
&nbsp;
<a href="http://sasageya.co.jp/loca/">ささげ屋</a>
<a href="http://sasageya.co.jp/loca/"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5079" alt="logo" src="/uploads-archive/2014/06/logo-300x44.png" width="300" height="44" srcset="/uploads-archive/2014/06/logo-300x44.png 300w, /uploads-archive/2014/06/logo-228x34.png 228w, /uploads-archive/2014/06/logo.png 520w" sizes="(max-width: 300px) 100vw, 300px" /></a>
こちらの業者はカット単位でなく１日いくらというスタイルで撮影してくれるようです。
カメラマン+アシスタント+モデルの３名体制・１日８時間で７９０００円～という価格設定です。こちらも主にアパレルのストアをターゲットにしているようです。
３人体制で出張してくれるようですが、関東に限られるそうです。１日で７９０００円～となると小規模で行っているストアには少しハードルが高いかもしれませんが、ロケが可能なので季節感を出したい場合には、やはりロケ撮影がいいかもしれません。
<a href="/uploads-archive/2014/06/Model.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5080" alt="Model" src="/uploads-archive/2014/06/Model.jpg" width="295" height="193" srcset="/uploads-archive/2014/06/Model.jpg 295w, /uploads-archive/2014/06/Model-228x149.jpg 228w" sizes="(max-width: 295px) 100vw, 295px" /></a>
それに撮影するカット数が多い場合は逆に安くなるかもいれません。ちなみにＨＰで「時間内のカット数は無制限」となっています。
ただ、モデル有りの撮影だと全て同じモデルさんになるのもちょっと微妙かもしれませんね。
小物など物撮りだけで、カット数が多い場合は良いと思います。物撮りだけの場合でも食べ物の場合は時間がかかると思うのでおすすめできません。（値段だけで言うと）
&nbsp;
<a href="http://www.mind-st.com/">マインドスタジオ</a>
<a href="http://www.mind-st.com/"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5081" alt="131008top" src="/uploads-archive/2014/06/131008top-300x75.jpg" width="300" height="75" srcset="/uploads-archive/2014/06/131008top-300x75.jpg 300w, /uploads-archive/2014/06/131008top-228x57.jpg 228w, /uploads-archive/2014/06/131008top.jpg 968w" sizes="(max-width: 300px) 100vw, 300px" /></a>
こちらは特にＥＣ向けというわけではなさそうですが、汎用性が高そうなので加えました。飲食店向けにメニューの撮影なども行ってきた業者のようです。
上の２つに比べると老舗という感じ。特に食べ物を撮るのは色々と難しいので食品を扱うストアには良いかも。
料金も１時間６０００円、以降は３０分毎に３０００円という事なので、小規模で展開しているストアにはいいかもしれません。ただ、出張料で１００００円発生します。
こちらの業者も「撮影内容、ｶｯﾄ数は問いません。時間内であれば何点撮影しても料金は変わりません。」とのことなので、撮影前にきちんと撮影する商品を準備しておけば安く済ませるかもしれません。
<a href="/uploads-archive/2014/06/131008.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5082" alt="131008" src="/uploads-archive/2014/06/131008-300x173.jpg" width="300" height="173" srcset="/uploads-archive/2014/06/131008-300x173.jpg 300w, /uploads-archive/2014/06/131008-228x132.jpg 228w, /uploads-archive/2014/06/131008.jpg 518w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
&nbsp;
調べてみるとＥＣ向けの撮影サービスを行っている業者は以外に多いなという印象です。事業のメインが撮影というよりは、ＥＣのコンサルを行っている会社がサービスの一部として行っている所が多い印象です。
小規模にカタログ的な撮影をするのであれば、最近は照明機材なども安い物があるので自分で撮影するというのもアリかと思います。カメラに照明機材、バックの抜けを作る為の布などを揃えても１０万円くらいあれば十分かもしれません。
ただ、食品やモデル有りの場合はやはり業者に頼んだ方が時間もお金も節約できると思います。
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;

ＥＣ向け撮影サービスまとめ

前回css3のアニメーションの記事を書きましたが、
<a href="/designer/css3%e3%81%aeanimation%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%82%89%e4%ba%88%e6%83%b3%e4%bb%a5%e4%b8%8a%e3%81%ab%e7%b0%a1%e5%8d%98%e3%81%a0%e3%81%a3%e3%81%9f%ef%bc%81.html">css3のanimationを使ってみたら予想以上に簡単だった！ | スターフィールド株式会社</a>
タイトルのようなwebサービスがあるようです。
その名も、<a href="http://bouncejs.com/" target="_blank">Bounce.js</a>
四角いボックスのアニメーションを、
様々な項目から設定でき、css3でエクスポートできます。
エクスポートのソースかなり長いですね笑
&nbsp;
アニメーションのパターンも用意されています。
<a href="http://bouncejs.com/" target="_blank" class="link">Bounce.js</a>
&nbsp;

css3アニメーションをwebブラウザ上で作成できるサービス

前回に引き続き食品の撮り方をまとめてみたいと思います。
構図・シーンによって見る人に与える印象はかなり変わってきます。どんな印象を与えたいのかによって、それぞれ工夫が必要ですが、ちょっとした事で狙い通りの印象を演出できます。
<h3>サイズは狭い方が美味しそうにみえる</h4>
撮影する時にどういう構図をとるかによって、観る人が画像・映像から想像する味は変わります。
どちらが美味しそうに見えるでしょうか？
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5038" style="line-height: 1.5em;" alt="a0002_011883" src="/uploads-archive/2014/06/a0002_011883-300x199.jpg" width="300" height="199" srcset="/uploads-archive/2014/06/a0002_011883-300x199.jpg 300w, /uploads-archive/2014/06/a0002_011883-228x151.jpg 228w, /uploads-archive/2014/06/a0002_011883.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /><a href="/uploads-archive/2014/06/a0002_011881.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5037" alt="a0002_011881" src="/uploads-archive/2014/06/a0002_011881-300x199.jpg" width="300" height="199" srcset="/uploads-archive/2014/06/a0002_011881-300x199.jpg 300w, /uploads-archive/2014/06/a0002_011881-228x151.jpg 228w, /uploads-archive/2014/06/a0002_011881.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /></a>
感覚の問題なので万人に共通するとは言い切れませんが、左の写真の方が美味しそうに見えると感じる人が多いと思います。
器に入った食べ物を撮る時に最初陥りがちなのは、「被写体の全体を画像の中に納めないといけない」と考えてしまう事です。見て頂くとわかりますが左のように全体を入れなくても何の違和感もありません。右の写真は全体を入れようとしているのでカタログ感がでてしまいます。
そして大切なのは、不思議と食べ物はサイズを狭く、近めの構図の方が美味しそうに見えます。
<a href="/uploads-archive/2014/06/a0002_011723.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5035" alt="a0002_011723" src="/uploads-archive/2014/06/a0002_011723-300x199.jpg" width="300" height="199" srcset="/uploads-archive/2014/06/a0002_011723-300x199.jpg 300w, /uploads-archive/2014/06/a0002_011723-228x151.jpg 228w, /uploads-archive/2014/06/a0002_011723.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /></a><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5039" alt="a0002_011887" src="/uploads-archive/2014/06/a0002_011887-199x300.jpg" width="199" height="300" srcset="/uploads-archive/2014/06/a0002_011887-199x300.jpg 199w, /uploads-archive/2014/06/a0002_011887-228x342.jpg 228w, /uploads-archive/2014/06/a0002_011887.jpg 320w" sizes="(max-width: 199px) 100vw, 199px" />
&nbsp;
こちらの写真ではどちらも全体が入っていませんが、被写体に寄って撮っている左の方が美味しそうに感じるはずです。
<h3>出来るだけ食べる状況に近づける</h4>
食べ物の画像を見た時に、人は無意識に味や香りを思い浮かべて、その食べ物を口にした状態を想像してしまいます。
なので出来るだけ想像しやすい状況で撮影する事が大切です。つまり、その被写体を食べる状況に近づけるということです。
<a href="/uploads-archive/2014/06/a1180_010293.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5041" alt="a1180_010293" src="/uploads-archive/2014/06/a1180_010293-300x198.jpg" width="300" height="198" srcset="/uploads-archive/2014/06/a1180_010293-300x198.jpg 300w, /uploads-archive/2014/06/a1180_010293-228x150.jpg 228w, /uploads-archive/2014/06/a1180_010293.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /></a><a href="/uploads-archive/2014/06/a1180_010292.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5040" alt="a1180_010292" src="/uploads-archive/2014/06/a1180_010292-300x198.jpg" width="300" height="198" srcset="/uploads-archive/2014/06/a1180_010292-300x198.jpg 300w, /uploads-archive/2014/06/a1180_010292-228x150.jpg 228w, /uploads-archive/2014/06/a1180_010292.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
上の写真はとてもわかりやすい例ですが、左のようにチーズに切れ目が入っているだけで印象が変わってきます。
右の写真は無機質な感じがしますが、左のように切れ目を入れただけで味や香りを想像しやすくなります。
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5043" style="line-height: 1.5em;" alt="e0b2d921dd6755eaa7701c0c5433f44b_s" src="/uploads-archive/2014/06/e0b2d921dd6755eaa7701c0c5433f44b_s-300x200.jpg" width="300" height="200" srcset="/uploads-archive/2014/06/e0b2d921dd6755eaa7701c0c5433f44b_s-300x200.jpg 300w, /uploads-archive/2014/06/e0b2d921dd6755eaa7701c0c5433f44b_s-228x152.jpg 228w, /uploads-archive/2014/06/e0b2d921dd6755eaa7701c0c5433f44b_s.jpg 640w" sizes="(max-width: 300px) 100vw, 300px" /><a href="/uploads-archive/2014/06/a0002_011812.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5036" alt="a0002_011812" src="/uploads-archive/2014/06/a0002_011812-300x224.jpg" width="300" height="224" srcset="/uploads-archive/2014/06/a0002_011812-300x224.jpg 300w, /uploads-archive/2014/06/a0002_011812-228x170.jpg 228w, /uploads-archive/2014/06/a0002_011812.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
続いて野菜の画像です。
これも陥りやすいのですが、右の写真は新鮮さや活きの良さを表現しようと、収穫前というシーンを選択しています。サイズも悪いので一概には言えませんが、右の写真はあまり美味しそうには見えません。
左の写真は野菜を手に取ってかじってみるといった状況を想像しやすいので、美味しそうに感じます。水滴を足しているので、むしろ左の方が新鮮に感じるかもしれません、
<h3>ボリュームを出す撮り方</h4>
食べ物を購入する人の心理としては、できるだけ安く量の多い商品を選ぶはずです。できるだけボリューム感のある画像・映像の取り方というのも必要不可欠だと思います。
ボリュームを出す撮り方はいくつかあります。
１つは「撮り切る」という構図の作り方です。
<a href="/uploads-archive/2014/06/a1180_014371.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5034" alt="a1180_014371" src="/uploads-archive/2014/06/a1180_014371-300x198.jpg" width="300" height="198" srcset="/uploads-archive/2014/06/a1180_014371-300x198.jpg 300w, /uploads-archive/2014/06/a1180_014371-228x150.jpg 228w, /uploads-archive/2014/06/a1180_014371.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /></a><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5033" alt="a1180_014366" src="/uploads-archive/2014/06/a1180_014366-300x197.jpg" width="300" height="197" srcset="/uploads-archive/2014/06/a1180_014366-300x197.jpg 300w, /uploads-archive/2014/06/a1180_014366-228x150.jpg 228w, /uploads-archive/2014/06/a1180_014366.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" />
&nbsp;
左の写真が撮り切った構図になります。
画像の外側を見ている人に想像させる事で、量を多く感じさせます。大抵は自分に都合がいいように人は想像するので、ボリュームのある商品と感じるはずです。
そしてもう一つは「あおる」撮り方です。
<a href="/uploads-archive/2014/06/b1180_010304.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5042" alt="b1180_010304" src="/uploads-archive/2014/06/b1180_010304-300x198.jpg" width="300" height="198" srcset="/uploads-archive/2014/06/b1180_010304-300x198.jpg 300w, /uploads-archive/2014/06/b1180_010304-228x150.jpg 228w, /uploads-archive/2014/06/b1180_010304.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /></a><a href="/uploads-archive/2014/06/a1180_010303.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5050" alt="a1180_010303" src="/uploads-archive/2014/06/a1180_010303-300x220.jpg" width="300" height="220" srcset="/uploads-archive/2014/06/a1180_010303-300x220.jpg 300w, /uploads-archive/2014/06/a1180_010303-228x167.jpg 228w, /uploads-archive/2014/06/a1180_010303.jpg 481w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
低い位置からあおって撮ると厚みを表現できるので、ボリューム感がでます。左の写真はきちんあおれていないのですが、比較の例としてはわかりやすいと思います。
本来はもっと低い位置からレンズを上に向ける感じでとると「ド～ン」という印象が出ます。肉など厚みが必要になる商品には是非お勧めな撮り方です。右のように上から撮影すると高さを表現できないのでボリュームが伝わりません。
商品がお酒などでブランド感を出したい時にも、あおって撮ると「力強さ」「格式の高さ」が表現できます。
<a href="/uploads-archive/2014/06/8f4dfb8710be1a0376a4da8685bedd6c.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5044" alt="酒あおりDSC00215" src="/uploads-archive/2014/06/8f4dfb8710be1a0376a4da8685bedd6c-199x300.jpg" width="199" height="300" srcset="/uploads-archive/2014/06/8f4dfb8710be1a0376a4da8685bedd6c-199x300.jpg 199w, /uploads-archive/2014/06/8f4dfb8710be1a0376a4da8685bedd6c-228x343.jpg 228w, /uploads-archive/2014/06/8f4dfb8710be1a0376a4da8685bedd6c.jpg 600w" sizes="(max-width: 199px) 100vw, 199px" /></a><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5045" alt="酒正面DSC00213" src="/uploads-archive/2014/06/86d3d1bdeaaefce98462b00f47dfcaeb-199x300.jpg" width="199" height="300" srcset="/uploads-archive/2014/06/86d3d1bdeaaefce98462b00f47dfcaeb-199x300.jpg 199w, /uploads-archive/2014/06/86d3d1bdeaaefce98462b00f47dfcaeb-228x342.jpg 228w, /uploads-archive/2014/06/86d3d1bdeaaefce98462b00f47dfcaeb.jpg 399w" sizes="(max-width: 199px) 100vw, 199px" />
&nbsp;
&nbsp;

ＥＣ・ネットショップ運営に役立つ写真・映像の撮り方　食べ物編 その３

スマホのサイトで広告などに用いられている、
スクロール中に特定の要素を非表示にするjQueryのコードを組んでみました。
スマホでよく使われるので、スマホにも対応いたしました。
&nbsp;
↓こちらがデモ
<a class="demo" title="DEMO" href="/demo/ninomiya/46/" target="_blank">DEMO</a>
&nbsp;
<h2>方法</h3>
たとえばfooterをfixedにして、スクロール中非表示にする場合。
<h4>JavaScript</h6>


		<div id="crayon-6495401577ba8948102246" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	$(window).on("scroll touchmove", function(){ //スクロール中に判断する
			$("footer").stop(); //アニメーションしている場合、アニメーションを強制停止
			$("footer").css('display', 'none').delay(500).fadeIn('fast');
			//スクロール中は非表示にして、500ミリ秒遅らせて再び表示
	});
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495401577ba8948102246-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577ba8948102246-2">2</div><div class="crayon-num" data-line="crayon-6495401577ba8948102246-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577ba8948102246-4">4</div><div class="crayon-num" data-line="crayon-6495401577ba8948102246-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401577ba8948102246-6">6</div><div class="crayon-num" data-line="crayon-6495401577ba8948102246-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495401577ba8948102246-1">$(function(){</div><div class="crayon-line crayon-striped-line" id="crayon-6495401577ba8948102246-2">	$(window).on("scroll touchmove", function(){ //スクロール中に判断する</div><div class="crayon-line" id="crayon-6495401577ba8948102246-3">			$("footer").stop(); //アニメーションしている場合、アニメーションを強制停止</div><div class="crayon-line crayon-striped-line" id="crayon-6495401577ba8948102246-4">			$("footer").css('display', 'none').delay(500).fadeIn('fast');</div><div class="crayon-line" id="crayon-6495401577ba8948102246-5">			//スクロール中は非表示にして、500ミリ秒遅らせて再び表示</div><div class="crayon-line crayon-striped-line" id="crayon-6495401577ba8948102246-6">	});</div><div class="crayon-line" id="crayon-6495401577ba8948102246-7">});</div></div></td>
					</tr>
				</table>
			</div>
		</div>

判断するタイミングは、PCの場合scrollだけで問題ありませんが、
スマホの場合、スクロールが完全に終わるまでイベントが発生しないようですので、touchmoveを用いました。
&nbsp;
イベントが発生したら、対象の要素を、一度.css()でdisplay:noneにして非表示にし、
.delay()でタイミングを遅らせた後に、.fadeIn()で再び表示します。
スクロール中はずっと表示させないため、はじめに.stop()でアニメーションを停止しています。
&nbsp;
<h3>参考サイト</h4>
<a class="link" href="http://alphasis.info/2011/08/jquery-api-scroll-fn/" target="_blank">scroll( fn ) &#8211; jQuery API 日本語リファレンス</a>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2014/07/23

2014/07/23

2014/07/23

2014/07/16

2014/07/16

2014/07/16

2014/07/09

2014/07/09

2014/07/02

2014/07/02

2014/07/02

2014/06/25

2014/06/24

2014/06/20

2014/06/18

2014/06/17

2014/06/12

2014/06/12