週刊Webテク通信

2017年2月第1週号 1位は，UIデザインの短期集中コース，気になるネタは，Twitter，新機能「もっと探す」タブを追加--トレンド・モーメント・検索機能を集約

Webテク, Webデザイン, Web広告, UI, UX, Twitter, アプリ

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2017年1月23日～1月29日の間に見つけた記事のベスト5です。

1. Crash Course: UI Design – HH Design – Mediumhttps://medium.com/hh-design/crash-course-ui-design-25d13ff60962#.yyzpv84lk

UIデザインの短期集中コースと題し，UIデザインの基礎を解説した記事です。

UIデザインの法則として，以下の5つの項目について説明しています。

  1. 明快さを第一にする
  2. 明確で意味のあるフィードバックを提供する
  3. 一貫性を持たせる
  4. 迷ったときには，確立されているデザインパターンを用いる
  5. 階層付けをする

図1　UIデザインの短期集中コース

図1　UIデザインの短期集中コース

2. 5 Above the Fold Elements that Get Your Audience’s Attention - SpyreStudioshttp://spyrestudios.com/5-fold-elements-get-audiences-attention/

ファーストビューで興味を引くための要素を紹介しています。

  1. 行動への強い呼びかけ
  2. サービス
  3. 検索窓
  4. 簡潔な価値の提案
  5. 背景動画

2のサービスは，そのサイトが提供するサービスの機能がファーストビューですぐに使えるようにするということです。

図2　ファーストビューで興味を引くための要素

図2　ファーストビューで興味を引くための要素

3. Searching for the best UX: search forms and boxes in web designhttps://envato.com/blog/searching-best-ux-search-forms-boxes-web-design/

検索窓（検索フォーム，検索ボックス）のUXデザインについて考察した記事です。

  • モーダルウィンドウ
  • 表示／非表示を切り替える
  • サジェスト機能
  • 明瞭なフォームデザイン

図3　検索窓のUXデザインについて

図3　検索窓のUXデザインについて

4. How to use colors in UI Designhttps://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753#.qytz88jdb

UIデザインで色をどう扱うかについてのテクニックやツールをまとめた記事です。

それぞれの色から連想される意味や，「⁠ただのグレースケールではなく彩度を少し加えるといい」といったテクニックなどを紹介しています。

図4　UIデザインでの色の扱い方

図4　UIデザインでの色の扱い方

5. A Bundle of Abstract Shapes is a New Way to Decorate the Homepagehttp://www.onextrapixel.com/2017/01/26/a-bundle-of-abstract-shapes-is-a-new-way-to-decorate-the-homepage/

Webデザインの新たなトレンドとして，抽象的な形の組み合わせを使ったサイトの実例を多数紹介しています。

図形がアニメーションしたり，インタラクティブ性をもっているものが多く，いきなりテトリスのように図形が出てくるサイトもありました。

図5　抽象的な形の組み合わせを使ったWebデザインいろいろ

図5　抽象的な形の組み合わせを使ったWebデザインいろいろ

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

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

15 Fundamental Tools for Testing Your Website's Usabilityhttp://designwoop.com/2017/01/tools-testing-websites-usability/

今回は，Webサイトのユーザビリティをテストするためのツールをまとめた記事を紹介します。ヒートマップ，ウェブサイトの読み込み速度，安全性のレベル，エラーなどを知ることができるサービスを15個掲載しています。

最初に紹介されている「Clicktale」がオススメのようで，ユーザーのサイト上での行動を再生したり，クリックヒートマップ，フォーム解析，ユーザーの行動に関する詳細レポートなどの機能もあるそうです。

ほかにもA/Bテストができるサービスや，リモートユーザーテストツール，各種ブラウザでの表示チェックツールなど，サイトをより良くするために役立ちそうなサービスが揃っています。

図6　Webサイトのユーザビリティテストツールいろいろ

図6　Webサイトのユーザビリティテストツールいろいろ

今週の気になるWebネタ

Twitter，新機能「もっと探す」タブを追加--トレンド・モーメント・検索機能を集約 - CNET Japanhttp://japan.cnet.com/news/service/35095677/

TwitterのiOSアプリのタブバーの項目がまた変わり，「⁠もっと探す」タブが登場しました。「⁠トレンド」「⁠モーメント」とキーワード検索がそこから利用できます。

右上の特等席にあった虫眼鏡アイコンがタブバーに移動した感じですが，下にあったほうが片手操作で押しやすいというメリットもありそうです。なお，Instagramアプリも同じ位置に虫眼鏡アイコンがあります。

また，iOSアプリでは「もっと探す」に入ったモーメント機能が，ブラウザ版では1つのメニューとして左上に表示されるようになり目立っています。これまでその存在自体があまり知られていなかったモーメントが，より使われるきっかけになりそうです。

Webテク, Webデザイン, Web広告, UI, UX, Twitter, アプリ

著者プロフィール

芦之由（あしのよし）

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

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

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