gihyo.jpサイトのロゴ

週刊Webテク通信

2016年2月第4週号1位は、すばらしいUXでユーザーを喜ばすテクニック、気になるネタは、世界最安 420円のスマホがインドで発売。スタバ1杯分、iPhone 6sの約0.5%の値段

2016-02-25

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

1. 7 Tips for Delighting Users With Great UX | Design Shackhttp://designshack.net/articles/ux-design/7-tips-for-delighting-users-with-great-ux/

すばらしいUX（ユーザーエクスペリエンス）でユーザーを喜ばすテクニックを紹介した記事です。

  1. ユーザーごとにカスタマイズする
  2. アニメーションはシンプルに
  3. 一般的なデザインパターンを使用する
  4. 個性を持たせる
  5. 画面サイズで考える
  6. インタラクティブなコンテンツを組み込む
  7. 簡単で整然としたものを作る
図1　すばらしいUXでユーザーを喜ばすテクニック7つ
図1　すばらしいUXでユーザーを喜ばすテクニック7つ

2. Is your website layout doing more damage than you think? – Design Schoolhttps://designschool.canva.com/blog/web-layouts/

Webサイトのレイアウトのパターンを7つまとめた記事です。いろいろなケースに合わせて適用できる実用的なレイアウトとして紹介されています。

  1. フリーフォームグリッド
  2. 固定サイドバー
  3. テキスト主体
  4. 2カラム
  5. 焦点を当てる部分を目立たせる
  6. 見出し＋画像ギャラリー
  7. モジュラー
図2　Webサイトのレイアウトパターン7つ
図2　Webサイトのレイアウトパターン7つ

3. Methods for Using Micro-Interactions on Your Sitehttp://speckyboy.com/2016/02/15/micro-interactions/

サイトにマイクロインタラクション（最小単位のインタラクション）をプラスする方法を解説しています。

マイクロインタラクションの4つの柱「トリガー」「⁠ルール」「⁠フィードバック」「⁠ループとモード」の説明や、デザインする上でのテクニックや実例などの紹介が掲載されています。

図3　サイトにマイクロインタラクションをプラスする方法
図3　サイトにマイクロインタラクションをプラスする方法

4. How to Use CSS3 Transitions & Animations to Highlight UI Changes - Hongkiathttp://www.hongkiat.com/blog/visualizing-change-css-transitions-animations/

CSS3のトランジション、アニメーションを、UIが変更されたことを強調するために使用する方法の紹介です。

通常は隠れているメニューが、ユーザーの操作によりアニメーションして現れる事例が2つ掲載されていました。

図4　CSS3トランジション／アニメーションをUIの変更時に使う方法
図4　CSS3トランジション／アニメーションをUIの変更時に使う方法

5. Free Carousels and Sliders Based on Bootstrap - Designmodohttp://designmodo.com/free-sliders-bootstrap/

Bootstrapをベースとした、カルーセル／スライドショーを多数紹介しています。

Bootstrapを利用しているので、もちろんレスポンシブになっています。

図5　Bootstrapベースのカルーセル／スライドショー
図5　Bootstrapベースのカルーセル／スライドショー

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

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

THE EMOJINI 3000 | powered by Curalatehttps://emojini.curalate.com/

THE EMOJINI 3000は、画像を元に関連する絵文字（Emoji）を表示するサービスです。形で見ているのではなく、画像の内容を解析してから意味的に関連する絵文字を出しているようです。

Instagramの自分のアカウントと接続すると、自分が投稿した写真を元に絵文字を表示できます。写真と絵文字がセットになった画像が生成されるので、それをダウンロードするかFacebookでシェアできます。Twitterの場合は、画像添付ではなく本文中に絵文字が入ったこのサービスの宣伝内容がツイートされます。

画像のURLを入力する、画像をアップロードするといった方法で、関連絵文字を出すことも可能です。また、あらかじめサンプル画像が多数用意されているので、すぐに試すことができます。実用性はともかく、なかなか面白いサービスです。

図6　画像を元に関連する絵文字を表示するサービス
図6　画像を元に関連する絵文字を表示するサービス
図7　画像から絵文字を表示した例
図7　画像から絵文字を表示した例

おすすめ記事

記事・ニュース一覧