CONVERSION

国内外のECの話題を中心にグロースハックに役立つUI改善やUXのプラクティス、様々な便利なツール、いまさら聞けないキーワードをこっそり紹介しています。

[ec-growing]

Embed.ly

Embed.lyって知ってますか？

結構古くからあるWebサービスなのですが、今から4年前の2010年に立ち上がりました。出始め、TechCrunchでもニュースになっていました。

このEmbed.ly、その言葉の通り「embed=埋める、埋め込む」コンテンツを埋め込むサービスです。Web制作をに携わる人は「embed」と聞くと、Flashの埋め込み時に使う　<embed>タグを想像するかもしれません。ほとんど同じことです。

もっとわかりやすく説明すると、Facebook上でシェアした時に投稿欄にURLを入力するタイトルと画像と簡単な紹介文を添えて表示されますが、このEmbed.lyはそれを生成し、ブログやサイトに貼り付ける事ができるサービスです。

通常ブログで他のサイトを紹介するときは、URLを掲載してそれにリンクを付けるというのが最もスタンダードなやり方ですが、Embed.lyを使うと以下のようになります。

Embedly makes your content more engaging and easier to share | Embedly

こちらのサイトにアクセスし、画面の中央の入力欄に埋め込みたいページのURLをコピーして、矢印をクリックすると埋め込み内容が表示されます。

そこで「コードをコピー」をクリックすれば、後は載せたいページにペーストするだけ。

ちなみに、先ほど上記で表示したものソースはこちら

<a class="embedly-card" href="http://embed.ly">Embedly makes your content more engaging and easier to share | Embedly</a> <script>(function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b;d.async=true;d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}})(document);</script>

また、いちいちサイトに行くのは面倒だという人のために、ブックマークが

Bookmarklet: instantly generate a Card for any web page. | Embedly // <![CDATA[ (function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b;d.async=true;d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}})(document); // ]]>

いいね！ボタンの用にシェアしてもらうためのボタンも提供されています。

The Embed Button allows your readers to easily share and embed your posts on their sites | Embedly // <![CDATA[ (function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b;d.async=true;d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}})(document); // ]]>

という具合に、リンク先を簡単に貼れます。

// <![CDATA[ (function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b;d.async=true;d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}})(document); // ]]>

[ec-growing]

ユーザインタフェース研究教（笑）

「ユーザインタフェース研究教」というものが実際にあるわけではありません。これは今現在ユーザインタフェースデザイン、UXデザインの界隈で起こっていることを揶揄した言葉。

いまだに変なユーザインタフェース研究が生き残っているというのは、どうなっているんでしょうか？

ー中略ー

つまり「システムの有用性」だけで生き残るのは不可能であると言うことになってしまったんです。では、どうするか？と言うと、互助会的な（むかしのフリーメーソンみたいな）組織を作って、架空の「権威」を作るしかない。ユーザインタフェース研究教を信じる秘密結社みたいなものですね。

まず、「使えないから流行らない」というのを逆手にとって、「使えないのではない。高度なので専門家にしか分からないのだ」という詭弁を繰り出す。そして、「一般の人には無理でしょうから、ユーザインタフェースの専門家が審査し評価します」という閉じられた世界を作ってしまい、その中で「学会」や「賞」をお互いにやり取りするわけです。それによって、ユーザインタフェース研究教に入信していれば、その世界で生きられるという構造を生み出したわけですね。

引用元：ユーザインタフェース研究者という仕事

ユーザインタフェースは、ユーザーと機械がやりとりをするための方法や仕組みにすぎませんから、対象ユーザーが使えないインタフェースは、例外なく優れていないユーザーインタフェースだというだけ。責めるべきは適切に操作出来ないユーザーではなく、ユーザーが操作出来ないインタフェースにあります。

こういう「閉じた世界」の存在は色々なところにあります。例えばファッションの分野にも似たような現象があるように思いますし、現代美術にも同じような面があるかもしれません。

ただ、僕らが扱っているのものは「コミュニケーション」であり、伝える側と受け取る側がいることで成り立っています。その間を取り持つ仲人である以上、アート的な側面を除いて、僕らは主張すべきでない。

そんなことを気づかせてくれる言葉「ユーザインタフェース研究教」を自戒の意味も込めて、覚えておきたいと思います。

あわせて読みたい記事

UXデザイン教からの脱却

作曲家という仕事

[ec-growing]

Shopifyから感じる、少し先の日本の未来

5投稿目にして、ようやくECらしい記事を書こうと思います。

Shopifyというアメリカのサービスを知っていますか？

Shopifyは、日本でいうところの「BASE」や「STORES.jp」のような、無料で開設できるネットショッピングサービスです。アメリカでは、Amazon、eBayに次ぐ第3位の流通総額があると言われています。日本では、まだまだ新しいサービスという印象ですが、これからますます盛り上がっていくことは間違いないでしょう。それに対して、このShopifyは今から8年前の2006年にサービスを開始されました。

その当時が紹介記事が2006年6月にGIGAZINEでも掲載されています。（当時は全くのノーマークでした。）

機能をプラグイン化して販売

Shopifyには、App Storeという機能をプラグイン形式にして無料もしくは有料（有料の場合は月額課金制）で機能追加出来るようになっています。

そのプラグインの一部には、クーポン発行などのマーケティング支援機能、ソーシャルメディア連携機能、配送伝票の自動出力などのロジティクス連携機能などなど、様々。

ECの運営で、サービス拡張は付きものです。またそのニーズは様々で商材や規模が異なれば求める機能・サービスは違います。そうしたものをプラグイン形式で組み合わせられるのは非常に便利です。

このプラグイン方式のAdd-on販売は、2013年にBASEでも「BASE Apps」として提供が開始されました。

人の販売も

Shopifyには、もう一つサービスがありますまして、それは「Shopify Expert」という人・企業の斡旋です。言ってしまえば、パートナー企業の紹介ですが、価格表示がされていているのがにくいところ。

デザインテーマやプラグインを自分で適応してカスタマイズすることも出来て、もう少し踏み込んで利用したいというユーザには、ショップ開設というゼロの段階から、デザインのフルカスタマイズや公開後のマーケティング支援まで用意されています。

これだけ選択肢が多いと、もはや汎用なプラットフォームでも十分に独自性を持ったお店をつくることが可能です。自分のような、ECサイトの運営をお手伝いしている企業にとっては、黒船並みの脅威なわけです。

少し先に確実に訪れる未来を見据えて、今から色々な準備が必要そうです。

[ec-growing]

自分で作る時代がだんだんキテる。

UTme!が5･19に発表されて、各方面で話題になっています。著作権の話を他の人にお任せするとして、ここでは、このサービス自体の話をしたいと思います。

このサービスに限らず、ここ最近多くの「自分で作る」サービスがたくさんリリースされています。私もつい先日、両親に子どもたちとの思い出の写真を「TOLOT」でカレンダーにして、プレゼントしました。一昨年辺りからこの流れはきていてこうしたフォトサービスや今回のUTme!のような自分だけの商品を「自分で作る」は、にわかにブームの様相を呈してきました。

最近CMで盛んにやっているDMM.MAKEも「自分で作る」サービスの一つと言えそうです。

ECサービスに日頃接する人間からしますと、これらのサービス自体への関心もさることながら、これをどうやって実現しているのか気になってしまうわけです。

例えば、UTme!では、brotherのプリンターをつかっているみたいです（きっとこの製品「GT-361」）こういうした機械がこうしたサービスを下支えしています。

先述のTOLOTやクックバッド社の子会社が提供する「レター」は、小ロットの印刷技術によって成立しており、従来は部数を刷らないと、元が取れなかった印刷がオンデマンド印刷等の発展などによって、小ロット印刷に応える環境が整ったことを示しています。

またこうした技術の革新が、あらたなサービスの広がりを生み、TOLOTでは、この一連のインフラ自体をOEMとして他社に提供する新サービスを立ち上げています。

・「OEM」（http://tolot.com/partners/）

こうしたサービスの誕生の背景を掘り下げると、色々なヒントに出会えそうです。

[ec-growing]

マテリアル・オネスティ

マテリアル・オネスティという言葉、学生時代にアフォーダンスの概念が中々腹に落ちず、悶々とすごした卒研時代を思い出す。

なので、この言葉を自分なりに腹に落とすため、色々調べて回ってみました。

AppleのiOS7やMicrosoftのWindows8がフラットデザインを採用して、その採用の背景には「マテリアル・オネスティ」があるのではないかと、語られている。

そのキッカケは、Kevin Goldman氏の記事にある。

Kevin氏はWebにおけるマテリアル・オネスティの例として、FlashサイトのURLはディスオネスティであり、文字を画像で作ることをディスオネスティであると説いている。

これは、検索エンジンのアルゴリズムに対しても、不親切であろうことは簡単に想像がつくし、つい最近話題のGoogleが今後は被リンクよりもオーサーランクだよという話も納得がいく。（このGoogleの話で、何よりも驚くべきは、それを実現する裏側の技術開発にあると思うけど）

フラットデザインをマテリアル・オネスティと直接結び付けるのは、少々乱暴ではあるが、フラットデザインの流れを取り巻く背景には、確実にマテリアル・オネスティの考え方がある。

たとえば、HTML5であったり、レスポンシブウェブデザインであったり、フラットデザイン、Webフォントの登場は、マテリアル・オネスティという考え方がその川上に存在すると考えれば、これらが単なる流行ではなくて、Webにとってとても本質的な流れの一部であることがよく分かる。

一方で、パララックスウェブデザインやロングシャドーは、そんな流れの中で生まれた”流行”であるとも解釈できるかもしれない。「とりあえず、これからはフラットデザイン」みたいな陳腐な考え方にならないように、Webデザイナーは日々勉強を怠らないようにしないといけない。

参考URL

A List Apart日本語訳「マテリアル・オネスティ」

【速報】Google「被リンクからオーサーランクに移行する」SEO業者全滅か！？

[ec-growing]

DribbbleとBehance

Webサイト・サービスやアプリケーションのUI、UXデザインを作る時、参考にしています。日々更新されるので、気に入ったデザイナーの更新をチェックするのは毎日の日課です。

Dribbbleとは

Dribbble(https://dribbble.com)デザインを中心としたSNS、気に入ったデザイナーをフォローしたり、作品にLikeしたり、コメントを残しコミュニケーションをすることが出来ます。このサイトにデザインを載せることが出来るのは、招待されたメンバーだけです。作品公開を許された選ばれたメンバーをDribbbleではプレイヤーと呼びます。

またDribbleには「Job」というコンテンツがあり、仕事を探したり、企業や団体がデザイナーを募集することも出来ます。

そんなDribbbleですが、作品公開をしてる日本人もまだまだ少ないですが、徐々に増えてきています。（私も頑張らないと・・・。）

おすすめのDribbbleタグ

UI（https://dribbble.com/tags/ui）

UX（https://dribbble.com/tags/ux）

E-commerce（https://dribbble.com/tags/ecommerce）

Form（https://dribbble.com/tags/form）

Behanceとは

Behance(https://www.behance.net)は、デザイン系のオンラインポートフォリオです。機能はほぼDribbleと同じです。BahanceはAdobe社に買収されて、現在のAdobe製品には、Bahanceへのログイン、作品公開ができたりするので、よくわからないけど、上のロゴマークを目にしたことがある人は多いもしれません。

Dribbleと比べると、作品はUIやUX、Webデザイン等より、アート作品が多い傾向があります。美しく編集された写真やとても細かく描かれたCGデザインは、デザインのインスピレーションに良い刺激になると思います。

こちらは誰でも作品を公開できるので、いつかDribbleでの作品公開を目指す人は、こちらで作品公開して、招待を待つのも良いかもしれません。

おまけ

両サイトを見ていると時々UXを紹介するためにGIFアニメーションが投稿されていたりします。これどうやって作る？と質問している人を時々見かけます。

たとえばこういうものです。

出典元：Fertiliser Mixture App

多くはAfter Effectsで作られています。そんな作り方を説明している記事を紹介します。

iOS7 UI Effects in Photoshop and After Effects

ちなみに、FlashでもGIF書き出しはできます。

[ec-growing]

次世代のWEBサイトのカタチを感じさせるシームレスなサイト

このサイト一体どうやってできているのだろう・・・。と気になったサイトを紹介します。

今日紹介したいのは「USA TODAY」（http://www.usatoday.com）です。ご存じの方もいると思いますが、アメリカで最も古い一般大衆紙でアメリカを代表する大手新聞紙の一つです。

USA トゥデイは、iPhoneやiPadが登場した当初からアプリ開発に積極的で、iPad発売当初を初めて手にした時、アプリを試しにダウンロードした人もいるのではないでしょうか。

さて、今日このサイトを紹介したい理由は、これまでのWEBサイトとは一味違うシームレスなページの遷移です。まずは実際にサイトに訪れて、体感してみてください。

読み込みを感じさせない自然な遷移

サイトを閲覧してみてまずびっくりするのは、クリックしてページが移動して画像やテキストが白い画面から徐々に読み込まれていくという従来の方式ではなく、簡単フェードインアニメーションと共にコンテンツが現れる。

これを実現しているのは、jQueyをベースに実装したモーダルウィンドウ（一昔前はポップアップと呼ばれていました。）です。これは自体はずいぶん前からある手法で、特別新しいものではありません。注目すべきは、それをこのような大きなニュースサイトが採用している事にあります。

ニュースサイト＝媒体にとって、SEO施策重要で、それがJavascriptを介したコンテンツを表示方法では、そこに書かれた内容が検索エンジンのデータベースに蓄積されなかったり、URLが更新されないために被リンクも得られない、結果ページとして評価出来ないつくりになってしまう問題がありました。技術はあっても積極的に使われませんでした。

それを実現できるようにしたのが「pushState」というものです。

pushStateとは

「pushState」は、HTML5で追加されたHistory APIの一つで、URLや閲覧履歴を操作するAPIです。

History APIにはまず基本的な以下のメソッドがあります。

history.back

一つ前のページ（履歴情報）に戻ります。

history.forward

一つ先のページに移動します。

history.go(n)

nで指定した位置までページを移動します。例えばhistory.go(-1)だと、一つ前なので、forwardと同じ結果になります。

history.state

今現在の状態「state」を取得できます。

history.length

履歴にスタックされたページの数が取得できます。 これらのメソッドは履歴情報を用いるためのものです。一方pushStateは履歴情報自体を操作することができます。そのような操作出来るメソッドは以下のとおり。

pushState()メソッド

3つのパラメーターを使用します。「stateオブジェクト」「タイトル※今のところ使われていません。」「URL（オプション）」です。

stateオブジェクト

JavaScriptオブジェクトで、履歴情報を格納する器になります。

タイトル

これは今のところ、使われていません。

URL

変更後のURL、絶対パスでも相対パスでも大丈夫です。

使い方のサンプルは以下のとおり

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html"); 出典元：Manipulating the browser history

replaceState()メソッド

replaceStateメソッドはpushStateメソッドとほぼ同じ動きをしますが、異なる点は、pushStateは新しく履歴情報の器を作成するのに対し、こちら現在の履歴情報を修正します。

popsatateイベント

アクティブな履歴情報が変更されるたびに発行されるイベントです。pushStateやreplaceStateの呼び出しによって、アクティベートされた履歴

window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; history.pushState({page: 1}, "title 1", "?page=1"); history.pushState({page: 2}, "title 2", "?page=2"); history.replaceState({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} 出典元：Window.onpopstate

残念なことに、このpushStateは、多くのブラウザが対応している一方で、IEの場合9以下は未対応です。それを回避するため対応するため「pjax」というJavascriptも作られています。

GoogleやBingもAjaxを使ったコンテンツにはpushStateの使用を推奨しています。

Googleに続いてBingもAjaxにはpushStateを推奨

参考URL

https://developer.mozilla.org/ja/docs/Web/API/window.history

http://s3pw.com/milestoner/2012/08/pushstate-popstate/

https://github.com/defunkt/jquery-pjax

[ec-growing]

ここ最近よく見かける「Growth Hack」って何？

Growth Hack、UX、DMP、EDI・・・。 ここ数年でウェブ業界で使われるようになってきたこれらのキーワード。皆さんはそれぞれをちゃんと説明出来ますか？

今回はその中で「Growth Hack（グロースハック）」をカンタンにまとめてみたいと思います。

Growth Hackとは

マーケティングの課題をエンジニアリングで解決し、ユーザー獲得やサービス成長を仮説検証から施策実行までを通じて実現する人材。コードを書いて課題を解決するマーケター、あるいはマーケティング課題を解決するエンジニア。

2010年7月にSean Ellisがブログで提唱。2012年4月にAndrew Chenがブログで取り上げたことで概念が広まりつつある。

出典：Growth Hackerとは - はてなキーワード

この業界においては、主にユーザー獲得のため施策を講じること、またそのグロースハックを実行する人のことをGrowth Hacker（グロースハッカー）といいます。

グロースハックは、ツールやスキルや知識でにすぎません。実際に行うことは、「計測・集計」「分析」「仮説立案」「実施・開発」「検証」を行うことです。グロースハッカーというのはそれらの一部や全部を請負、劇的に成長させる人のことを指します。

グロースハックの事例

グロースハックを一躍有名にしたのは、2012年の米大統領選だと言われています。その時、オバマ陣営の当選を脅かした存在ががロムニー陣営にいたグロースハッカーAaron Ginn氏でした。

彼は、ロムニー陣営で、個人献金集めると支持者の関与度の向上をWebやソーシャルメディアなど様々な支持者との接点でデータ分析を行い改善を繰り返し講じ、結果として1億8000万ドルの献金を集めることに成功しました。

また身近なところで、日本では、クックパッドやPixivなどで具体的な事例が紹介されており、とても参考になりますのでぜひお時間のあるときに一読ください。

クックパッドのグロースハックについて 20140218 ver1.1（更新版） from Kato Kyosuke

月間34億PV、新規会員登録1日1万人！　pixiv片桐代表が明かす、驚異のグロースハック術

関連する人物

Sean Ellis

Andrew Chen

Aaron Ginn

参考URL

http://164s.net/2699.html

http://jp.techcrunch.com/2012/11/05/20120902defining-a-growth-hacker-three-common-characteristics/

http://matome.naver.jp/odai/2135314572127365301

http://growthhack.vasily.jp/2013/07/growthhack-in-5-minutes/