週刊Webテク通信

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

ネットで見かけた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 アイコンのダミー画像を生成するサービス

おすすめ記事

記事・ニュース一覧