週刊Webテク通信

2014年8月第3週号 1位は,ECサイトの検索機能に必要な5つの役割,気になるネタは,Googleが支援するロボットコンセルジュはチップとしてツイートを受け取る

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

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

1. E-Commerce Sites Need Multiple of These 5 'Search Scope' Features - Articles - Baymard Institutehttp://baymard.com/blog/search-scope

ECサイトの検索機能に必要な5つの役割を解説した記事です。

以下の5つが紹介されています。括弧内の数字はアメリカ売上トップ50のECサイトの何パーセントに実装されているかを示したものです。

  1. 自動補完による検索キーワードの提案(32%)
  2. 検索範囲(カテゴリなど)を選択できる(100%)
  3. 検索結果ページで類似商品を提案する(46%)
  4. 検索ワードによりマッチするページに自動で移動する(46%)
  5. 並べ替えの際に範囲を提案する(10%)

4は,たとえばユーザーが入力したキーワードとマッチするカテゴリがあれば,カテゴリページに移動するといった,よりユーザーの求める結果を表示する工夫です。

5は,検索結果を値段別などでソートした場合に,ユーザーが求めている商品カテゴリと違うものばかりが表示される可能性もあるので,もっと候補を絞り込ませる必要があるということです。Amazonの検索では,カテゴリを指定しないと並べ替えができなくなっていますが,これはそういったことを考えての機能制限とのことです。

図1 ECサイトの検索機能に必要な5つの役割

図1 ECサイトの検索機能に必要な5つの役割

2. What’s new for designers, August 2014 | Webdesigner Depothttp://www.webdesignerdepot.com/2014/08/whats-new-for-designers-august-2014/

Webデザインに役立つツールや素材などをまとめた記事です。

Webアプリ,フレームワーク,ソフトウェア,アイコン,CMS,JavaScript,フォントなどが掲載されています。

図2 Webデザインに役立つツールや素材

図2 Webデザインに役立つツールや素材

3. CSS And Javascript Animation Libraries To Create Awesome Effectshttp://www.designyourway.net/blog/resources/css-and-javascript-animation-libraries-to-create-awesome-effects/

アニメーションライブラリを,CSSライブラリーとJavaScriptライブラリーとに分けて紹介しています。

CSSライブラリの方がシンプルに簡単に実装できます。しかし,トリガーによって動かしたり複数のアニメーションを独立して動かすにはJavaScriptライブラリを使う必要があるとのことです。

図3 アニメーションのためのCSSライブラリーとJavaScriptライブラリーいろいろ

図3 アニメーションのためのCSSライブラリーとJavaScriptライブラリーいろいろ

4. 20+ Killer WordPress Form Plugins Just For You! ? 1stwebdesignerhttp://www.1stwebdesigner.com/wordpress/wordpress-form-plugins/

WordPressサイトにフォームを追加するためのプラグインをまとめた記事です。問合せフォームなどを簡単に実装できるWordPressプラグインが大量に紹介されています。

日本語化されていないものも多そうですが,ともかく選択肢が豊富です。それぞれのプラグインの特徴を簡単に解説してあるので参考になりそうです。

図4 フォームを追加するためのWordPressプラグインを多数紹介

図4 フォームを追加するためのWordPressプラグインを多数紹介

5. Low Poly Trend: Six Free Generators for Backgrounds and Images - noupehttp://www.noupe.com/design/low-poly-trend-six-free-generators-for-backgrounds-and-images-84108.html

フラットデザインとの相性もいい,ローポリゴンのイメージを作るためのツールを紹介した記事です。

写真を元にローポリゴン風画像を作るジェネレーターもあり,手軽に面白い効果の画像が作れることでしょう。

図5 ローポリゴン画像のジェネレーターいろいろ

図5 ローポリゴン画像のジェネレーターいろいろ

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

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

LOREM ICON a FREE icons placeholder for your Websites!http://loremicon.com/

アイコンのダミー画像を生成するWebサービスです。写真画像のためのダミー画像生成サービスは数多くありますが,アイコンという発想が新しいですね。ダミーといいつつ普通に実サイトで使えそうなデザインのアイコンが揃っています。

あらかじめ用意してあるアイコンから,どのアイコンを使うかを選んでコードを生成できます。そのまま実サイトのアイコンとして使えてしまえそうですが,⁠FREE icons placeholder」と書いてありますし,ダミー段階の使用にとどめておいた方がいいのかもしれません。

生成されるのはPNG画像です。サイズはアイコンファミリーによってまちまちで,複数サイズ用意されているものもあります。今のところ5種類のアイコンファミリーしかありませんが,フラットなもの2つ,ラインアイコン2つと最近の流行は押さえてありました。

図6 アイコンのダミー画像を生成するサービス

図6 アイコンのダミー画像を生成するサービス

今週の気になるWebネタ

Google-Backed Robot Concierge Accepts Tweets as Tipshttp://mashable.com/2014/08/12/robot-concierge-tweets-tips/

カリフォルニア・クパチーノのホテルで,ロボットコンセルジュの試験運用が始まるそうです。この記事を直訳すると「Googleが支援するロボットコンセルジュはチップとしてツイートを受け取る」といった感じですね。⁠Googleが支援する」とあるのは,Google Ventureの出資を受けているからです。

ルームサービスで物を届けるときに使われるそうですが,ロボットなのでチップを渡さなくていいことが大きなポイントなのですね。日本にはない習慣なので見逃しそうですが,お客さんにとっての利点となりそうです。そして,チップの代わりに「#meetbotlr」というハッシュタグでお礼の言葉をツイートしようということなんですね。

実際のロボットのかわいらしさや動きは,元記事にあるムービーを見てください。エレベーターを使って移動していますが,エレベータ制御装置と通信することで階数の指定やドアの開閉を行うそうです。

このロボットのデザインをパクった感じで,スマホを顔の部分に取り付けるロボットおもちゃとか出てきそうですね。iPhoneを顔の部分にはめる犬のロボットのおもちゃが以前ありましたが,あれの発展形でどうでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入