週刊Webテク通信

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

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

ネットで見かけた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サイトの背景グラデーションを配布しているサービス

今週の気になるWebネタ

次世代iPhoneはワイヤレス充電の可能性―AppleはWPCに加入 | TechCrunch Japanhttp://jp.techcrunch.com/2017/02/14/20170213the-next-iphone-could-feature-wireless-charging/

iPhone 8の噂がいろいろ出てきていますが,Appleがワイヤレス充電の業界団体に加盟したことから,ワイヤレス充電が採用されるのではないかと言われています。

iPhoneに採用されれば一気に関連商品が増えそうです。よく電車の中でモバイルバッテリーとiPhoneをケーブルでつないだまま使っている人を見かけますが,ワイヤレスモバイルバッテリーならすっきりしますね。

ほかにも,虹彩認証や有機EL(OLED)ディスプレイの採用や,ホームボタンが廃止され全面ディスプレイになるといった予想が出ています。全面ディスプレイになった場合,ディスプレイの下部分にファンクションエリアが設けられるという噂もありました。MacBook Proのタッチバーのような感じのものになると,なかなか面白そうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入