週刊Webテク通信

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

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

ネットで見かけた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をまとめたギャラリーサイト

今週の気になるWebネタ

アプリで読み取ると商品ページに飛ぶ「Amazonスマイルコード」--雑誌などの出版物に - CNET Japanhttps://japan.cnet.com/article/35121879/

AmazonがQRコードのような独自のコード「Amazonスマイルコード」を発表しました。Amazonのモバイルアプリから読み取ることで,商品ページにアクセスできます。

LINEのQRコードを使った友達追加や,Facebook,Instagramのプロフィール画面にアクセスするための独自のコードなど,カメラでコードを読み込ませる仕組みはスマホ時代に合っていて便利ですよね。

ニュースリリースに「アソシエイト・プログラムの重要なパートナーである出版社には,Amazonでの新しいビジネスの機会をご提供」とあるので,アソシエイトのリンクでコードを作れるということだと思います。普及しそうな予感がしますね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入