週刊Webテク通信

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

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

ネットで見かけた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の解析内容をプレゼンスライドにするサービス

今週の気になるWebネタ

軽く薄くなってさらにテーブルらしく:Lenovo,テーブルトップPC「HORIZON 2s」「HORIZON 2e」を発表。 - ITmedia PC USERhttp://www.itmedia.co.jp/pcuser/articles/1409/05/news124.html

レノボの「ポータブルテーブルトップPC」の新製品「HORIZON 2s」は,19.5型で重さは2.5キロ,ボディの厚さは15ミリと薄くて軽いようです。わたしは,最初のiPadが出たときから,もっと大きいタブレットが出たらいいのにと思っていたんですが,これくらい大きければ新たな使い道も出てきそうです。

ひとつ思いつくのは,お笑い芸人の「フリップ芸」とか「めくり芸」といわれるネタに使うことですね。HORIZON 2sはWindowsマシンなので,フリップ芸をパワーポイントで行う時代の到来でしょうか…? でも売れない芸人が約10万円のマシンを買うのは厳しいのかも。

iPadやAndroidもこのくらいの大きいマシンが出て欲しいですね。スマホがどんどん大きくなってタブレット不要説も出てきていますが,まだまだタブレットの需要はあると思います。巨大化は一つの方向性としてアリじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入