週刊Webテク通信

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

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

ネットで見かけた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デザイン修正のやりとりに使えるサービスを各種紹介

今週の気になるWebネタ

Twitpic,買収により存続決定─⁠─コンテンツも無事に - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1409/19/news052.html

Twitterとの商標をめぐる問題を理由にサービスの終了を宣言していたTwitpicですが,ここに来てサービスを存続するという内容のツイートを行いました。

Twitterが手をさしのべたのかと思ったらそうではなく,買収されることが決まったとのこと。買収相手など詳しいことはまだ発表されていません。

これまで投稿した画像をサービス終了までにダウンロードしようとしていた人たちにとっては一安心とはいえ,お騒がせな話ですね。

Twitter自体でも画像投稿に対応した今となっては,Twitpicの必要性が薄れているのは否めませんが,買収によってより魅力的なサービスに成長することを期待したいと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入