• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

開発部の岡本です。最近宗派をコーヒーから紅茶・緑茶派に乗り換えました。

2014年も残り僅か。今年起こったことを振り返るのも大事ですが、ここは敢えて「来年以降のこと」に注目してみようと思います。

今回は「今はできないけども、いずれ実現するECを面白くしそうな技術」について、HTML5から3つピックアップしてみました。

  • 「これから通販ビジネスを始めよう」
  • 「新しいECサービスを構築したい」
  • 「EC系の制作でこの先生きのこるには・・・?」

というキーワードが琴線に触れた方は是非ご一読ください。

仕様その1:ドラッグ&ドロップでより直感的な買い物カゴを

photo credit: swirlspice via photopin cc

photo credit: swirlspice via photopin cc

ECサイトを使っていて、「商品をカートに出し入れする操作が面倒くさい」と感じたことはありませんか?

今のECサイトは「カートに入れる」ボタンをクリックしてカートに追加し、「カートページ」で商品の個数や配送先の追加変更削除を行うというフローが主流です。

しかしこれが「実店舗の買い物カゴのように気軽に出し入れできるようになる」とどうでしょうか?

HTML5には要素のドロップ&ドロップが可能になる仕様も存在します。

この機能を使えば、気になった商品を「とりあえずカゴに入れておこう」という操作をWEB上でできるようになります。

つまりこの仕様が実装されれば

今まで :「カートに入れるボタン」をクリック、カートページで個数・配送先・削除を操作する必要がある

これから:ページのどこかにある「カートエリア」にドラッグ&ドロップでページ遷移無しに買い物が可能になる

というシフトが起こるかもしれません。商品を実際の店舗と同様にかごに出し入れしやすくなるので、「ついで買い」や「まとめ買い」で単価アップも望めます。

HTML5Rockで「ネイティブ HTML5 ドラッグ&ドロップ」についてもっと知る

仕様その2:HTML5フォームでよりリッチで最適化されたフォームを作る

More Rich Entry Form
スマートフォンで操作する際に最適なキーボードを表示させることや

カレンダーや色を直感的に選択できるUIを表示させることが可能になります。

今までいちいちテキストフォームに入れる必要があった入力欄やEFOのために削られた入力欄が、HTML5でよりリッチに使いやすくなるかもしれません。

HTML5Rockで「HTML5 で優れたフォームを作成する – HTML5 Rocks」についてもっと知る

仕様その3:オリジナルタグで「誰でも簡単に」リッチなコンテンツ作り

OrginTemplate via Polymer

HTML5には「WebComponents」という仕様が存在します。

これはHTMLで扱える「テンプレートエンジン」のようなもので、ざっくりまとめると「独自のHTMLタグが作れる」仕様といえます。

今までは複雑なマークアップが必要なコンテンツを扱うには、相応の技術力を持ったエンジニアが必要でした。

しかしWebComponentsで事前にテンプレートが作られているコンテンツであれば、設定された「独自のHTMLタグ」を用いることで誰でも簡単にそのコンテンツを扱うことができるようになります。

また「テンプレート毎にCSSを設定できる」ため、気兼ねなくCSSを変更することができます。

探そう「新しいECのカタチ」

いかがでしたでしょうか?

かなり個人的に「こうなったら良いな」と妄想しながら考えてみましたが、いずれも実際に仕様として策定中のものばかりです。

「今の技術」を追いかけることも大事ですが、「今できないことを、実現させる方法はあるのか」を模索することもこれからのECを考える上では重要ではないかと思います。