週刊Webテク通信

2018年7月第2週号1位は、モバイルECサイトで上部にナビゲーションバーを追加することのススメ、気になるネタは、アプリで読み取ると商品ページに飛ぶ「Amazonスマイルコード」--雑誌などの出版物に

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

1. Growth Rock » The Link Bar, an Ecommerce Mobile Homepage Navigation Alternative (to the Hamburger Menu)http://growthrock.co/ecommerce-mobile-home-page-navigation/

多くのECサイトで、ハンバーガーメニューだけに頼らずナビゲーションバーを上部に追加することで、コンバージョン率が向上するA/Bテストの事例があるそうです。

この上部のナビゲーションバーを「Top Nav Link Bar」または「Link Bar」と呼ぶとのこと。

Link Barによってコンバージョンが上がったアパレルと健康食品のECサイトの事例と、ハンバーガーメニューに頼らず上部にわかりやすいリンクを入れているモバイルECサイトの実例とを紹介しています。

図1 モバイルECサイトで上部にナビゲーションバーを追加することのススメ
図1 モバイルECサイトで上部にナビゲーションバーを追加することのススメ

2. 6 Amazing Tips to Improve M-Commerce UX - Anadeahttps://anadea.info/blog/6-amazing-tips-to-improve-m-commerce-ux

モバイルECサイトのUXを向上するヒントを6つまとめています。

  1. 使いやすい + アクセスが簡単 = トラフィックと売り上げ増加
  2. ユーザーはすばらしく整理された情報を好む
  3. 1つの画像は1000の宣伝文句より価値がある
  4. きちんとしてよく整備された商品ページを用意する
  5. ユーザーに行動を促すボタンを大きく分かりやすく配置する
  6. 支払い方法を簡単にする
図2 モバイルECサイトのUXを向上する6つのヒント
図2 モバイルECサイトのUXを向上する6つのヒント

3. 3 practical cheat sheets for designing attention grabbing UIshttps://uxdesign.cc/3-practical-cheat-sheets-for-designing-attention-grabbing-uis-318e588bd864

注意を引くUIをデザインするための、3つの実用的なテクニックを紹介しています。

  1. ファーストビューは今でも重要
  2. 見切れている要素があると続きを見たくなる心理学を用いる
  3. フォントによって情報に階層を持たせる
図3 注意を引くUIデザインの3つの実用的なテクニック
図3 注意を引くUIデザインの3つの実用的なテクニック

4. The Most Hated UI & UX Pattern of 2018https://icons8.com/articles/most-hated-ui-ux-design-pattern/

嫌われているるUI/UXパターンを5つまとめた記事です。

  1. ハンバーガーアイコン
  2. 無限スクロール
  3. Comic Sansフォント
  4. Norman’s Door(デザイン的には格好いいが開け方がわからないドア)
  5. ニセモノのプリローダー
図4 5つの嫌われているるUI/UXパターン
図4 5つの嫌われているるUI/UXパターン

5. How to use Chrome DevTools like a Pro | The JotForm Bloghttps://www.jotform.com/blog/how-to-use-chrome-devtools-like-a-pro/

Chromeのデベロッパーツールの使い方を初歩から細かく解説した記事です。

20項目に分けて、デベロッパーツールでできることを簡単にまとめています。なお、ChromeのCanaryバージョンを元に紹介しているので、一部通常版では使えない機能もあります。

ちなみに、このブログを提供しているフォーム作成&管理サービスのJotformが、デザインニュースサイトのNoupeを買収したことも最近話題になりました。

図5 Chromeのデベロッパーツールの使い方
図5 Chromeのデベロッパーツールの使い方

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

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

UI Sources | Mobile Design Patterns and Interactionshttps://www.uisources.com/

UI SourcesはモバイルアプリのUIをまとめたギャラリーサイトです。有名アプリのUI画面を動画で確認できます。

アプリ別だけでなく、インタラクションの種類別に見ていく方法もあります。たとえば、検索画面、作成画面、購入画面、プロフィール画面などで絞り込んで閲覧することが可能です。

まだ登録されているアプリはそれほど多くありませんが、毎週追加してメールでも教えてくれるとのことです。動画でUIを見られるのは便利で、モバイルサイトのUIを作るときにも参考になるはずです。

図6 モバイルアプリのUIをまとめたギャラリーサイト
図6 モバイルアプリのUIをまとめたギャラリーサイト

おすすめ記事

記事・ニュース一覧