週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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/

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

フォームをデザインするのは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個取り上げた記事

今週の気になるWebネタ

Google,iOS版 Photo Sphereカメラを提供開始。360度パノラマ写真を撮影・Googleマップに共有 - Engadget Japanesehttp://japanese.engadget.com/2014/08/19/google-ios-photo-sphere-360-google/

GoogleがPhoto Sphere CameraというiOSアプリをリリースし,iPhoneでもPhoto Sphere写真を撮れるようになりました。iPhoneのカメラアプリでもパノラマ画像は撮影できますが,こちらは360度,かつ上下を含む全天球パノラマです。

撮影したPhoto Sphere写真は,アプリ上でストリートビューのように動かして見ることが可能です。また,Googleマップに公開してシェアすることもできます。Googleマップのビューページで,共有されたPhoto Sphere写真を見て楽しめます。

全天球パノラマを誰でも簡単に作れるようになったこともすごいですし,放っておいても世界中の人たちがGoogleマップのためにコンテンツを作ってくれるという仕組みもさすがですね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入