週刊Webテク通信

2014年8月第4週号1位は、ECサイトの検索機能の現状、気になるネタは、Google、iOS版 Photo Sphereカメラを提供開始。360度パノラマ写真を撮影・Googleマップに共有

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2014年8月18日~8月24日の間に見つけた記事のベスト5です。

1. The Current State Of E-Commerce Search | Smashing Magazinehttp://www.smashingmagazine.com/2014/08/18/the-current-state-of-e-commerce-search/

ECサイトの検索機能の現状について、ユーザビリティ調査の結果を元にまとめた記事です。先週紹介した記事もそうだったのですが、Top 50 E-Commerce Sites Ranked by Search Usability - Baymard Instituteというレポートを元にしています。

  1. ECサイトの34%で、製品名による検索をサポートしていない
  2. ECサイトの70%で、検索時にWebでの専門用語を必要とする
  3. ECサイトの60%が、記号や略語での検索に対応していない
  4. ECサイトの84%が、検索ワード入力時に自動補完で候補を表示している
  5. ECサイトの34%しか、検索結果画面の検索窓にユーザーの入れた検索ワードを表示していない
  6. ECサイトの40%しか、ファセット検索を持っていない
  7. ECサイトの92%は、パンくずリストが全くないか1つだけ持っている

1は、製品名や型番で検索したときに製品がヒットしないケースがあるとのことで、原因は完全一致でしか検索できないことや、⁠製品名、製品概要などの)データベース上の全ての項目が検索対象にはなっていないことなどが推測されるそうです。

6のファセット検索とは、サイト側がユーザーに検索のための切り口を提示するもので、カテゴリや価格帯などを選ぶだけでユーザーが商品を絞り込めるような検索のことです。

図1 ECサイトの検索機能の現状について
図1 ECサイトの検索機能の現状について

2. スマホサイトのEFO(フォーム最適化)で爆発的成果を出すための5原則 | LPO研究所http://lpo.gaprise.com/blog/smartphone-efo-2137/(2020年3月現在ページが削除されています)

スマートフォン向けのフォームを作る場合に、気をつけることを解説しています。

フォームをデザインするのはPC向けサイトでも面倒な作業ですが、スマートフォン向けにこそちゃんとデザインしないといけない時代なのですね。

図2 スマホサイトのフォーム最適化5つの原則
図2 スマホサイトのフォーム最適化5つの原則

3. CSS Effects Libraries for Cool Web Designhttp://dizyne.net/css-effects-libraries-cool-web-design/

CSSを利用したアニメーションなどのエフェクトを加えるライブラリを、8つ紹介した記事です。

いろいろな効果から、好みのものを選んで設定できるライブラリを集めています。

図3 CSSによるエフェクトを加えるライブラリ
図3 CSSによるエフェクトを加えるライブラリ

4. 14 Free Frontend jQuery Plugins | SmashingApps.comhttp://www.smashingapps.com/2014/08/20/14-free-frontend-jquery-plugins.html

デザインやUIに関するjQueryプラグインを多数紹介しています。

要素の高さを揃えるmatchHeightは、レスポンシブにも対応しており、この手のプラグインの中でも決定版となりそうです。

図4 jQueryプラグインいろいろ
図4 jQueryプラグインいろいろ

5. Transactional HTML Email Templateshttp://blog.mailgun.com/transactional-html-email-templates/

オープンソースのレスポンシブなHTMLメールのテンプレートを配布しています。非常にシンプルな1カラムのレイアウトですが、スマートフォン対応を考えるとこれが最適解なのでしょう。

このテンプレートではCSSが外部ファイルになっているので、最終的にHTMLメールとして使う際にはCSSをインラインにする必要があります。そのためのツールとして紹介されているPremailerが便利そうです。

図5 レスポンシブなHTMLメールのテンプレート
図5 レスポンシブなHTMLメールのテンプレート

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

10 Collaboration Apps For Project Managershttp://www.hongkiat.com/blog/online-collaboration-apps-project-managers/

今回は、オンラインコラボレーションツールを10個取り上げた記事を紹介します。

PodioやGlipはグループチャットやタスク管理ができるツールで、日本のChatWorkと同じジャンルのものです。PR用のムービーを見ただけですが、Glipはデザイン性も高く使い勝手もよさそうに感じました。

Conceptboardは共有ホワイトボードといったツールで、画像を貼ってそこに注釈を加えたりできるので、デザイン修正のやり取りにも使えそうです。

Basecampは海外ではとてもメジャーなプロジェクト管理ツールで、実は日本語化もされているのですが、日本ではいまひとつ流行ってないようですね。

図6 オンラインコラボレーションツールを10個取り上げた記事
図6 オンラインコラボレーションツールを10個取り上げた記事

おすすめ記事

記事・ニュース一覧