Adobe Creative SDK

Photoshopはもういらない?Adobe Creative SDKはすごい!

Adobe Creative SDK

Adobe Creative SDK

話題になっていて興味のあった Adobe Creative SDK 
忙しくていじれなかったのですが、やっと一段落したのでさわっってみましたが、すごいですね!

これがあれば、一般のかたはPhotoshopは必要ないって感じです。

ちょうど、お客様に画像処理ソフトを使えない方がいて、その方に「自分で色々と出来るようにしてあげたいなー」と思っていたので、このサイトにも設置してみました。

MY@web画像編集ツールhttp://www.myweb.jp.net/editortool/

設置の際に参考にさせていただいたサイトがこちら。
とても親切に解説していただいております。

わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!

Adobe Creative SDKで作るWebフォトエディタにHTML5のFile APIとDnD APIで画像を取得する機能を追加

とりあえず、登録して、組み込んで、日本語化して、ファイルを選択してアップロードできるようになています。

リサイズや切り抜きはもちろん、スタンプなども豊富で、簡単なバナーなんかも直感的に作れます。

簡単なバナーなんかも

簡単なバナーなんかも

これが無料で使い放題にできるって驚きですね!!

スマートフォンサイトUI図鑑

スマホサイトのデザインに悩んでいる方におすすめ「スマートフォンサイトUI図鑑」

スマートフォンサイトUI図鑑

CSS&jQueryで作るスマートフォンサイトUI図鑑

スマホサイトはECショップでも必携ですが、「より使いやすくデザインは?」「あのサイトのここはどうやってるの?」と悩む場合も多いと思います。

また、現在Googleの検索結果に表示さてている「スマホ対応(モバイルフレンドリー)」が、4/21からランキング要因に利用することを決定したことを発表して話題になっています。

 

Google、「スマホ対応」をランキング要因に利用することを決定。4/21から導入。
http://goo.gl/KMPfXa

 

タイムリーなことに、先日フラッと立ち寄った本屋で発見したのがこの本で、めずらしくAmazonではなく、実店舗で衝動買いしてしまいました。

こちらは、よく見かけるUIが実例をもとに紹介されており、眺めているだけでも自社のスマホサイトのイメージが広がってくると思います。

スマホサイトの実例

スマホサイトの実例

また、そのソースコードや応用例なども記載されており、とてもシンプルでわかりやすいです。

さらに、PDF版やサンプルコードまでダウンロードできますので、実際の画面を触りながら利用できますので、是非オススメです。

サンプルコードもダウンロードできます

CSS&jQueryで作るスマートフォンサイトUI図鑑 ↓↓ こちらです ↓↓

動画を見る

fancybox.jsでYoutube動画をLightboxで表示

LightBoxのように画像を表示できるfancybox.jsですが、Youtubeの動画やGoogle Map、Instagramなどもできます。
サンプルはこちら

 

今回はある案件で、「Youtubeの動画を、画像をクリックしたら見れるようにしたい」というのがあり、その覚書の意味もありまとめております。

たしかに、近年はECショップでも動画の活用が盛んになってきており、ページに埋め込んでいますが、1ページに縦に並んで動画がいくつもあると、お客様視点からも見にくくなっていると思います。

参考にしたのは、こちらのページ

fancybox
http://fancyapps.com/fancybox/

jQuery fancyBox v2 の使い方や設定
http://www.webdesignleaves.com/wp/jquery/1358/

 

動画の埋め込みコードの取得

まずは、おさらいとして、動画を自社HPに埋め込むには、Youtubeに動画をアップし、「共有」→「埋め込みコード」を選択。

次に、「もっと見る」を選択し、「動画サイズ」を選んだあと、
「動画が終わったら関連動画を表示する」のチェックを外します。

チェックを外す
このチェックを外しておかないと、動画完了後に、自社とは関係のない関連動画が表示された状態で終了します。

関連動画が表示される

動画をHPに埋め込む

Youtubeでの埋め込みコードはこのようになっており、通常はそのまま埋め込みます。

<iframe src="https://www.youtube.com/embed/PbC-Xe_n0pc?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

 

※ここではCANONさんの動画を使用させて頂いております。(すみません)
通常このままでよいのですが、fancybox.jsを使用してLightboxで表示させる場合、「jQuery fancyBox v2 の使い方や設定」では、

クラス属性に「fancybox.iframe」を追加するか、data-fancybox-type 属性に「iframe」を指定する。
必要に応じて autoplay=1(自動再生) または autoplay=0(自動再生なし)を指定。

 

と記載されており、そのソースがこちらです。

<a class="youtube fancybox.iframe" data-fancybox-group="group1" href="//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=0">And I Love Her </a>

 

「data-fancybox-group=”group1″」を削除して、テキストリンクの「And I Love Her」をわかりやすく、「クリックして動画を見る」に変更すると、このようになります。

<a class="youtube fancybox.iframe" href="//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=0">クリックして動画を見る </a>

 

ここで、最初のYoutubeでの埋め込みコードとを比べるとリンク先の最後が「?rel=0」「?autoplay=0」となっています。

 

埋め込みコード
しかし、普通にリンク先をYoutubeで取得した埋め込みコードのリンク先を指定すれば問題ありません。
href=”//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=0

href=”https://www.youtube.com/embed/PbC-Xe_n0pc?rel=0
Lightboxが立ち上がっても再生ボタンを押さないと再生しません。
完成したソースがこちらです。

 

<a class="youtube fancybox.iframe"  href="https://www.youtube.com/embed/PbC-Xe_n0pc?rel=0">クリックして動画を見る </a>
<script>
jQuery(function($){
 
    $(".youtube").fancybox({
        maxWidth : 800,
        maxHeight : 600,
        fitToView : false,
        width : '70%',
        height : '70%',
        autoSize : false,
        closeClick : false,
        openEffect : 'none',
        closeEffect : 'none',
        nextEffect : 'none', //グループ化した場合 //グループ化した場合
        prevEffect : 'none'
    });                 
});
</script>

ちなみに、

</head>

部分にこちらのcssとjqueryを読み込まないといけませんのでお忘れなく。

<link rel="stylesheet" href="../fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="../fancybox/source/jquery.fancybox.pack.js"></script>

サンプルはこちら

 

最後に、サンプルページで使用している、動画をそのまま埋め込んで、レスポンシブに対応しているのはこちらです。

 

YouTube動画の表示サイズをレスポンシブにする方法。
http://www.aiship.jp/knowhow/archives/7578

カート改善PC版

ECショップのカート改善ポイント(PC版)

ECショップを運営する上で、最重要項目は「売上の向上」ですが、そのためには買い物カゴの修正が一番の近道です。

専門用語では EFO(イー・エフ・オー Entry Form Optimization エントリーフォーム最適化)といい、入力フォームを改善して途中離脱をなくそうということで、買い物かごや資料請求、お問い合わせなどのフォームを改善していくことです。

下の表を見ていただければわかるように、集客数やランディングページの修正を行わず、例えば買い物カゴの放棄率が現状50%のサイトで、80%に改善すれば、客単価が5,000円、1日10件の売上のサイトであれば、1日の売上は3万円アップ。月(30日計算)で90万円アップ。年間ですと1,080万円アップが可能となります。

カゴ放棄率改善の数値例CVRの取得方法については、こちらの記事を参考にしてください。
http://www.myweb.jp.net/post-55/

では、具体的にどうすれば買い物カゴの放棄率を改善できるのか、こちらではPC版を中心に10個のポイントを挙げていきますが、これらのことはスマートフォンやタブレットにも共通することですので、必ずおさえておいてください。

1.突然のシステム感をなくす

お客様がお買い物をやめる一番のポイントは「不安」や「?」が生じた時です。楽天やYahoo!ショッピング、Amazonなどのサイトを利用している場合は、不安より安心が優っているとは思いますが、独自ドメインのサイトであれば、不安のほうが高くなることは否めません。

そのため、TOPページやランディングページでは、人気(ひとけ)を出したり、顔写真を掲載したりと不安感を取り除く努力をしているとは思いますが、買い物かごに入ると、急に機械的になる場合が多いです。

それまでは
「いらっしゃいませー。このような商品はいかがですか?こちらの商品もおすすめですよ。当店はこんなサービスも行っております。こんな表彰もいただいて安心してお買い物いただけますよ。」

といっていたものが、カートに入れた瞬間、
「ココカラ ニュウリョク シテクダサイ」
とコンピュータの応対になってしまったような感覚です。

一般的なカート
例えば、社員の画像を入れたり、キャタクターを作ったりして、入力案内をしていくようにするだけで、ずいぶんと印象が変わってきますし、その際一言添えることでシステム感が和らぎ安心感がでてきます。

また、電話番号を記載することで、入力不得手な方や、何らかのエラーにより入力できない場合などのお客様の離脱を防ぐことも大切です。

社員やキャラクターの掲載例

 

2.入力ステップを解りやすく

買い物カゴのステップは大きくわけて5つのステップに分かれます。

「カートの中身(カゴトップ)」
「お客様情報入力」
「お届先情報入力」
「入力内容確認画面」
「注文完了画面」

現在、お客様が、上記のどのステップにいるのかを表示することにより、不安を解消することができます。

また、最初に「ご注文は簡単です。3つのステップで完了いたします。」などのように記載することにより、「あっ。簡単なんだ。」と思っていただくこともポイントです。

ステップも明確に表示する

 

 

3.入力文字は大きく表示する

ご注文をいただいたあとに苦労するのはお客様の入力ミスがあった場合で、お急ぎの注文であった場合など、連絡がとれず間に合わなくなることや、事務作業の増加にもつながります。
極力入力ミスを減らしていただくには、文字を大きくすることが一番です。
また、40代後半にもなると老眼の影響で小さな字が見えにくくなってきたりもします。
文字の大きさはスタイルシートを使えば簡単に行えます。

text項目のところに
style=”font-size:15pt;font-weight:bold;letter-spacing:1px;”
といった感じで追加してあげれば大きくなります。


修正前
<input type=”text”  name=”name” >


修正後
<input type=”text”  name=”name” maxlength=”40″ style=”font-size:15pt;font-weight:bold;letter-spacing:1px;”/>


その他、下記のようなサイトを参照するか、利用中のシステムのヘルプなどをご参照ください。

フォーム部品の文字サイズを指定する
http://www.tagindex.com/stylesheet/form/font_size.html

大きさの目安としては、メールアドレスの「.(ドット)」と「,(コロン)」の違いがわかる大きさをお勧めいたします。

文字の大きさ例

 

4.入力項目は分けない

氏名、郵便番号、電話番号、住所などを2項目ないしは3項目にわけているカートが多いですが、パソコンに不慣れな方の場合ですと、非常にわずらわしく、面倒になります。

氏名が「姓」と「名」にわかれていると、会社などの場合は、

姓「かぶしきがいしゃ」→変換→「株式会社」→マウスで次の項目へ移動→クリック→名「にほんしょうじ」→変換「日本商事」

といったぐあいに、わざわざ変換やクリックをしなくてはなりません。
tabキーでサクサク移動しながら入力するお客様のほうが少ないです。

次に、郵便番号や電話番号は、「-(ハイフン)」あるなしどちらでも入力可能にします。

電話番号が「03-123-4567」あるいは「031234567」いすれかでないとエラーになるのは、お客様側からはわかりにくく、離脱するポイントとなってしまいます。

大抵の場合、データベースへの取り込みなどの会社都合により、わけている場合が多いとは思いますが、お客様視点に立てば、そのまま記入できるのが一番です。

また、郵便番号は覚えていない方も多いため思い切って郵便番号欄を削除するのもひとつの方法です。

入力項目はシンプルに

そして、入力補助として、WindowsのIEであれば、「郵便番号」「電話番号」「メールアドレス」などの欄は、自動的に「半角」モードに切り替えることも可能です。
IEがなくなるという話もありますが、ご参考までに。

【HTML】フォームの文字入力モードを自動的に切り替える方法
http://klutche.org/archives/1272/

 

 

5.今、どこを入力しているのか

パソコンを使い慣れていないと、入力中にどの項目のところにカーソルがあるのかわからなくなる場合があります。

それを解消するには、カーソルのある入力項目の背景色を変更することで防ぐことができます。

フォームの背景をフォーカスする

CSSで指定する方法
フォーカス時の背景色を指定する
http://www.tagindex.com/stylesheet/form/background_color2.html

jsで指定する方法
jQueryを使って入力フォームでフォーカス時に背景色を変えるスクリプトのサンプル
http://black-flag.net/jquery/20110223-2654.html

 

 

6.ふりがなや住所を自動入力

入力ミスを少なくするためにも、お客様に入力していただく手間を少なくしていくことも重要です。

「名前」を入力して、再度「ふりがな」の入力。
「郵便番号」を入力して、「県名」を選択し、「住所」を入力。

この部分を自動化することでお客様の手間もずいぶんと減ります。

「ふりがなの自動入力」や「郵便番号入力での住所の自動入力」はJava script や Ajax を使うことで簡単に導入できます。

ふりがなや住所の自動入力

フリガナを自動挿入する
http://mashimonator.weblike.jp/library/2012/09/javascript-3-5.html

AjaxZip 3.0 – Ajax郵便番号→住所自動入力フォーム
https://github.com/ajaxzip3/ajaxzip3.github.io

 

 

7.ポップアップでヒントを表示

入力例を記載は大切ですが、文字が多くなり、逆に見えずらくなったり、目に止まらないこともあります。

フォームにヒントを出す方法としてメジャーなものは、placeholderや Jqueryを使ってフォーム欄に薄く記載例などを表示する方法(下図②)ですが、この場合ですとクリックすると消えてしまいますし、住所の自動入力を使用していると、番地名まで入力してくれない場合もあります。

これらの様々な方法を試して、現状一番入力ミスを改善した方法が、記入例+ポップアップでヒントを出すことです。

クリックしたタイミングでポップアップを表示することにより、人の目が意識をし、確認いただけるようでおすすめです。

こちらでは、SmallipopというjQueryプラグインをご紹介させていただいてますが、ポップアップのプラグインはいくつもありますので、自身のサイトに合ったものを採用してみてください。

ポップアップでヒントを出す

HTML5 で入力欄に初期表示する内容を指定する
http://www.htmq.com/html5/input_placeholder.shtml

フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」
http://phpspot.org/blog/archives/2010/01/jquery_form_tip.html

実装方法が選べるツールチップ用プラグイン「Smallipop」
http://kwski.net/jquery/1085/

 

 

8.入力エラー表示をする

せっかく入力し、次のページや、確認画面に進もうとした時、入力エラーがある場合は、次ページに進めません。

一番良いのは、未入力で次項目に進んだ場合、即時にエラーを表示することですが、それができない場合でも、次のページに進もうとしてエラーがでたら、どの項目がエラーなのかをわかりやすく、表示したり、その項目のところに自動で戻る仕組みは必要です。

この事については、こちらのサイトも参考になります。

フォーム最大の関門<エラー表示>のストレスを軽減する基本施策
https://f-tra.jp/blog/column/1058

エラー表示

【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単
http://blog.shuffleee.com/1207/

jQuery(などの)プラグインを使ってフォームにバリデーションを楽々追加する
http://zxcvbnmnbvcxz.com/form-improvement-3-3/

どんなフォームにでも使える exValidation の使い方 基本編
http://blog.gti.jp/post-2586/

 

 

9.着日指定はカレンダーで

お届け希望日を指定できるECショップがほとんででしょうが、セレクトボタンで選択することが一般的です。

指定日のセレクトボタン
これを、ホテルの予約サイトなどで見かけるカレンダー形式にするだけで、格段に使いやすくなります。

指定日の選択をカレンダー形式に

こちらも、DatepickerというJqueryを使えば簡単に導入できます。
Datepickerはカスタマイズが豊富で、何日後から何日後までを選択可能にするとか、2ヶ月分のカレンダーを並べて表示するとか、色などの変更も比較的簡単にできます。

だたし、配達希望日欄がセレクトではなくテキストエリアの場合は、お客様が直接文字を入力してしまう場合がありますので、文字が入力できないようにjavascriptで制御しておきましょう。

テキストエリアは直接入力できないようにする

テキストボックスの操作
http://www.pori2.net/js/form/1.html

jQuery UI Datepicker(カレンダー)表示位置の変更 サンプル
http://www.northwind.mydns.jp/samples/datepicker_sample8.php

【JS】【jQuery】入力補助(日付編) ~ Datepicker & Masked Input の使用 ~
http://blogs.yahoo.co.jp/dk521123/27012701.html

jQueryのdatepickerプラグインでカレンダーを表示するサンプル集
http://akdiary.seesaa.net/article/114106237.html

[jQuery] jQuery UI の Datepicker でカレンダーからの日付入力
http://log.noiretaya.com/111

GoogleカレンダーからJSONPで日本の祝日一覧を取得
http://0-oo.net/sbox/javascript/google-calendar-holidays

 

 

10.注文完了画面も手抜きしない

注文完了ページは、とても簡素になってしまっているケースがほとんどです。

一般的な注文完了ページ
しかしお客様は、注文完了した直後に「失敗したかも」「本当に届くのだろうか」というマイナス感情が発生します。
また、購入後は不安対象が「商品」から「店舗(会社)」に移行します。
そこで注文完了画面で、最初にその要素を払しょくすることが大切です。

  1. メールが届かないなどのトラブルを防ぐための文言
  2. 失敗したと思わせないために、「当店はこう言うコンセプトでやってますよ」という会社概要や社会活動、お客様の声ページなどへのリンクページ
  3. いつどのような手順で届くかの案内
  4. お客様とのつながりをもつためにSNS(Facebook・Twitter・ブログ)などの案内
  5. 電話番号の記載
  6. 次回いつぐらいに新商品入荷

このような施策をすることにより、お客様に「ここで買ってよかったな」と思っていただけることが大切です。
ECショップであっても、実店舗と同じです。どのように接客することが一番良いのか、顔を合わせないWeb上のことだからこそ、実店舗以上にお客様の立場に立った、細心の心遣いが必要となってきます。
注文完了画面も重要
以上、重要な10点を記載しましたが、細かな修正点はまたまだあります。これらの修正を行うことにより、貴社のサイトの売上に貢献できれば幸いです。

最後に、こちらでも参考になることがたくさん記載されておりますので、ぜひ一度読んでおくことをおすすめします。

Ferret ショッピングカートのフォームを最適化する
https://ferret-plus.com/473

マミオン有限会社 こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由
http://goo.gl/WMu4lx