週刊Webテク通信

2014年9月第4週号1位は、フラットデザインがコンバージョンレートをアップさせた事例、気になるネタは、Twitpic、買収により存続決定─⁠─コンテンツも無事に

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

1. How Flat Design Increases Conversion Rates - Speckyboyhttp://speckyboy.com/2014/09/17/flat-design-increases-conversion-rates/

フラットデザインがコンバージョンレート(サイト訪問者が購入や資料請求、会員登録などに至る割合)をアップさせた事例を紹介した記事です。

以下、各項の見出しです。

  • ミニマリズムがコンバージョンを261%増加させた例
  • コンテンツファーストとモバイルファースト
  • フラットなボタンがコンバージョンを35.81%増加させた例
  • 悪いフラットデザインは見つけられやすさを失う
  • 読みやすさが(購入や資料請求などの)作業完了まで行き着くユーザーを増やす
  • なぜフラットデザインは難しいのか
図1 フラットデザインがコンバージョンレートをアップさせた事例
図1 フラットデザインがコンバージョンレートをアップさせた事例

2. 8 Misconceptions About Website Redesign Reasonshttp://www.motocms.com/blog/project-news/misconceptions-website-redesign/

Webサイトをリデザインする間違った理由を8つ挙げています。

以下のような理由だけでリデザインをすると、失敗するリスクが高いようです。

  1. 競合のWebサイトの方が優れているように見える
  2. 見た目が悪く感じる
  3. 1年以上デザインリニューアルをしていない
  4. 競合がデザインリニューアルをした
  5. 売上が落ちている
  6. ソーシャルメディアとの連携がない
  7. SEOがうまくいっていない
  8. 評判を取り戻したい
図2 Webサイトをリデザインする間違った理由
図2 Webサイトをリデザインする間違った理由

3. How to design for thumbs in the era of huge screens - Quartzhttp://qz.com/268433/how-to-design-for-thumbs-in-the-era-of-huge-screens/

大きなスクリーン時代に「親指のため」にどうデザインすべきかという記事です。iPhone 6 / 6 Plusで画面が大型化したことにより、片手操作の人のThumb Zone(親指の届く範囲)を考え直す必要があります。

Appleが採用した、画面全体が下にスライドするReachability機能は、これを見ると非常に有効というのがわかりますね。

図3 大きなスクリーン時代の親指操作のためのデザインについて
図3 大きなスクリーン時代の親指操作のためのデザインについて

4. Off-Canvas Menu Effects | Codropshttp://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/

普段は隠れているメニューが、ボタン(多くの場合ハンバーガーと呼ばれる三本線のボタン)を押すとコンテンツを押しのけるように出現するものを「オフキャンバス」と呼びます。

このオフキャンバスメニューを、エフェクト付きで実現するサンプルが各種紹介されています。

図4 オフキャンパスメニューのエフェクトいろいろ
図4 オフキャンパスメニューのエフェクトいろいろ

5. Free PSD Files: 26 New PSD Graphics for Designers | Freebies | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/09/free-psd-files-26-new-psd-graphics-for-designers/

テンプレートやモックアップとして用意されたフリーのPSD素材へのリンク集です。

iOS 8のアイコンテンプレートやUIキット、Apple Watchのモックアップなども掲載されていました。

図5 フリーのPSD素材集
図5 フリーのPSD素材集

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

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

Essential Visual Feedback Tools For Web Designers | Smashing Magazinehttp://www.smashingmagazine.com/2014/09/16/essential-visual-feedback-tools-for-web-designers/

Webサイト制作時のデザイン修正のやりとりに使える、画像を使った校正サービスのまとめ記事を紹介します。Webページのキャプチャを撮り、特定の場所にコメントを付けてやり取りするためのツールで、ここに紹介されている以外にもかなりの数が存在していると思います。

この記事では、以下の5つのサービスが紹介されていました。

  • LiveCapture
  • TrackDuck
  • BugMuncher
  • BugHerd
  • Notable

この記事の作者は、BugHerdを勧められて使ったあと、TrackDuckに乗り換えたとのことです。乗り換えた理由は、Webの最新技術に対応するなど新しいツールだという点と、プロジェクトマネジメントに使っているツール・Basecampとの連携が優れている点だと説明してありました。

図6 Webデザイン修正のやりとりに使えるサービスを各種紹介
図6 Webデザイン修正のやりとりに使えるサービスを各種紹介

おすすめ記事

記事・ニュース一覧