週刊Webテク通信

2017年2月第4週号1位は、デザインの心理学によってユーザーを理解するためのヒント、気になるネタは、次世代iPhoneはワイヤレス充電の可能性―AppleはWPCに加入

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

1. Psychology In Design. Principles Helping To Understand Users. | Tubik Studiohttp://tubikstudio.com/psychology-in-design-principles-helping-to-understand-users/

心理学的なアプローチから、ユーザーを理解するためのデザインの原則を解説しています。

  1. 本能的反応
  2. 色の心理学
  3. 認識パターン
  4. 目を走らせるときのパターン
  5. ヒックの法則

ヒックの法則とは、ユーザーの選択肢が増えるほど、意思決定に時間がかかるという法則です。

同じく心理学の考え方からWebデザインの法則について語った、別の記事もありました。

図1 デザインの心理学によってユーザーを理解するためのヒント
図1 デザインの心理学によってユーザーを理解するためのヒント

2. 5 techniques for fine-tuning UX with color | Webdesigner Depothttp://www.webdesignerdepot.com/2017/02/5-techniques-for-fine-tuning-ux-with-color/

色によってUXを良くするためのテクニックを紹介しています。

  1. 色の比率によって焦点を当てる部分を作る
  2. 色のコントラストによって注意を引く
  3. 色を使うことでUXのパターンを作る
  4. 色によって優先順位を付ける
  5. 色の類似性を利用する
図2 色でUXを良くするためのテクニック5つ
図2 色でUXを良くするためのテクニック5つ

3. Creating Non-Rectangular Headers | CSS-Trickshttps://css-tricks.com/creating-non-rectangular-headers/

長方形になっていないヘッダの事例紹介と実装方法の解説です。斜めや曲線にヘッダを区切るためのCSSテクニックを紹介しています。

画像を使う、SVGを使う、Clip-pathを使うなど5つの方法が紹介されていて、それぞれの比較も参考になります。

図3 長方形になっていないヘッダの事例と実装方法
図3 長方形になっていないヘッダの事例と実装方法

4. 46 CSS Timelineshttp://freefrontend.com/css-timelines/

タイムライン表示の実例が多数紹介されており、デモとコードもすぐに参照できます。

年表のような見せ方を実現するための豊富なサンプルが用意されており、コードを流用してすぐに利用できる便利な記事です。

図4 タイムライン表示の実例いろいろ
図4 タイムライン表示の実例いろいろ

5. Free and popular blogging platforms to tryhttp://www.designyourway.net/blog/resources/free-and-popular-blogging-platforms/

無料で使えるメジャーなブログプラットホームを紹介しています。後半のいくつかは日本であまり知られていないものでした。

日本でも最近、LINEブログやg.o.a.t.など新たなブログプラットホームが登場していますが、この記事では海外で注目のものを知ることができて参考になります。

図5 無料で使えるブログプラットホームいろいろ
図5 無料で使えるブログプラットホームいろいろ

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

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

Fresh Background Gradients | WebGradients.comhttps://webgradients.com/

WebGradientsは、Webサイトの背景として利用できるグラデーションを入手できるサービスです。180種類のグラデーションを、CSSやPNG形式などで提供しています。

CSSのlinear-gradientで記述できるグラデーションなので、CSSのコードをコピーしてそのまま背景に使えて便利です。PNGファイルにもリンクしているほか、SketchとPhotoshopのファイルにまとめたものをダウンロードできるようにもなっています。

ページを開いたときのアニメーションや、アクションを起こしたときの効果がシャレているのも印象的です。CSSをコピーした後に表示されるメッセージが、選んだグラデーションによって違うなど遊び心もあって、UI/UXの参考にもなるはずです。

図6 Webサイトの背景グラデーションを配布しているサービス
図6 Webサイトの背景グラデーションを配布しているサービス

おすすめ記事

記事・ニュース一覧