gihyo.jpサイトのロゴ

週刊Webテク通信

2014年9月第2週号1位は、オンラインショップの商品ページをデザインするためのヒント、気になるネタは、軽く薄くなってさらにテーブルらしく：Lenovo、テーブルトップPC「HORIZON 2s」「HORIZON 2e」を発表

2014-09-11

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

1. How To Design A Great Product Page For Your Online Shophttp://www.designyourway.net/blog/inspiration/how-to-design-a-great-product-page-for-your-online-shop/

オンラインショップの商品ページをデザインするためのヒントです。

以下の項目に分けて、気をつけるべきことをまとめています。

  • 訪問者の注目を集めるようにするが、やり過ぎない
  • ユーザーが質問する前に答えを提供する
  • 必要な全ての情報を提供する
  • 余白を使ってボタンのコンバージョンを上げる
  • 商品の良さをいろんな角度から伝える
  • 「お客様の声」を載せる
  • 無料で提供する商品や関連商品を紹介する

デザインのテクニックというよりも、必要なコンテンツや構成要素についてのヒントとなる内容でした。

図1　オンラインショップの商品ページをデザインするためのヒント
図1　ECサイトの検索機能の現状についてオンラインショップの商品ページをデザインするためのヒント

2. Centering in CSS: A Complete Guide | CSS-Trickshttp://css-tricks.com/centering-css-complete-guide/

CSSで要素をセンター揃えにする方法をまとめた記事です。水平方向、垂直方向、両方で、それぞれ数パターンのHTML＆CSSの記述方法が紹介されています。

垂直方向のセンター揃えは、やはりCSS3のflexboxを使った方法が簡単で便利ですね。

図2　CSSでセンター揃えにする方法
図2　CSSでセンター揃えにする方法

3. Virtualized Browser Testing ― Sifterhttps://sifterapp.com/blog/2014/09/virtualized-browser-testing/

BrowserStackを使ったブラウザチェックのワークフローやテクニックを紹介しています。BrowserStackは、複数ブラウザでの表示チェックを行えるサービスで、料金は月39ドル～となっております（機能を限定したもっと安いプランもあります⁠）⁠。

BrowserStackはただWebページのスクリーンキャプチャを撮るだけでなく、バーチャルマシンを遠隔操作してのブラウズが可能です。なので、バーチャルマシンのブラウザ上でデベロッパーツールを使ってのデバッグもできるわけです。

この記事でのブラウザチェックのワークフローは、以下のような感じでした。

  1. アクセス解析などからターゲットブラウザをある程度絞る
  2. 絞った範囲のブラウザでスクリーンキャプチャを撮る
  3. バーチャルマシン上の特定のブラウザで動作チェックする
図3　ブラウザチェックのワークフローやテクニック
図3　ブラウザチェックのワークフローやテクニック

4. Tab Styles Inspiration | Codropshttp://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/

様々なスタイルや効果を持ったタブのUI集です。タブナビゲーションを作る際のヒントとなるサンプルが揃っています。

シンプルですが、ちょっとしたアニメーション効果が付いているものもあります。全てがレスポンシブ対応です。

図4　様々なスタイルや効果のタブUI集
図4　様々なスタイルや効果のタブUI集

5. How to use circles in website design | Webdesigner Depothttp://www.webdesignerdepot.com/2014/09/how-to-use-circles-in-website-design/

円形の要素を使ったWebデザインのギャラリーです。円形はWeb上で扱いにくくあまり使われていなかったため、新鮮な印象を与えるとのことです。今ではCSSで画像を丸くトリミングできるので便利になりました。

以下のカテゴリに分けて実例を紹介しています。

  • ロゴ
  • ナビゲーション
  • アイコン
  • 画像プレビュー
  • ボタン類
図5　円形の要素を使ったWebデザインのギャラリー
図5　円形の要素を使ったWebデザインのギャラリー

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

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

qunb - Create and share beautiful data visualizations of your web analyticshttps://www.qunb.com/

qunbは、Google Analyticsの解析内容を元に、分かりやすいプレゼンテーションスライドを作ってくれるWebサービスです。Googleアカウントで認証して、Google Analyticsで管理しているサイトを選ぶだけで、あとは自動で資料を作ってくれます。

訪問者、ソーシャルメディア、SEOなど、違った切り口での解析結果をまとめたスライドが、それぞれ10ページずつくらいで生成されます。説明の英語を翻訳すれば、そのままアクセス解析レポートとして使えそうです。

スライドは、PDFとしてダウンロードするか、リンクURLをシェアすることで、人に見てもらうことが可能です。なお、ページタイトルや検索キーワードの日本語は、問題なく表示されていました。

図6　Google Analyticsの解析内容をプレゼンスライドにするサービス
図6　Google Analyticsの解析内容をプレゼンスライドにするサービス

おすすめ記事

記事・ニュース一覧