週刊Webテク通信

2017年8月第3週号1位は、手痛いミスから学ぶユーザーインターフェイス10の法則、気になるネタは、Instagramのライブ配信に友人を招待--新機能が追加へ

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

1. User Interface Design: 10 Principles Learned from Painful Mistakeshttps://boagworld.com/design/user-interface-design/

手痛いミスから学ぶユーザーインターフェイスの法則をまとめています。

  1. ユーザーに手間を取らせない
  2. システム上の都合などをユーザーの負担にしない
  3. ユーザーインターフェイスを細部までとことん考える
  4. 巧妙さよりも明快さ
  5. 人として考え続ける
  6. すべての人のためにデザインする
  7. 慣例となっているユーザーインターフェイスデザインに敬意を払う
  8. ウェブのルールを壊さない
  9. わかりやすく失敗する
  10. ユーザーのニーズを最初に把握する
図1 ミスから学ぶユーザーインターフェイスの10の法則
図1 ミスから学ぶユーザーインターフェイスの10の法則

2. Dangerous Design trends 2017 – Muzli -Design Inspirationhttps://medium.muz.li/dangerous-design-trends-2017-c388ce9e735a

ユーザーエクスペリエンスを損なうことにつながりかねない、危険なデザイントレンドについてまとめています。

  • 明るい色
  • 実験的なレイアウト
  • 細部の装飾
  • 小さなタイポグラフィ
  • 実験的なナビゲーション
  • アニメーション

見映えを良くするためや現代的にするために、ユーザーエクスペリエンスを犠牲にすべきではないという結論でした。

図2 UXを損なうかもしれない危険なデザイントレンド
図2 UXを損なうかもしれない危険なデザイントレンド

3. White space in UI design – UX Planethttps://uxplanet.org/white-space-in-ui-design-8647d4f685a7

UIデザインのホワイトスペースの使い方について解説しています。

  1. ユーザーの注意を集める箇所を1ページにつき15個以下にする
  2. 読みやすさと可読性に優先順位を付ける
  3. 空白を加える
  4. ホワイトスペースが目的を果たすか検証する
図3 UIデザインのホワイトスペースの使い方
図3 UIデザインのホワイトスペースの使い方

4. Hover-Buttonshttps://varin6.github.io/Hover-Buttons/

ボタンにカーソルを合わせたときのいろいろな効果のサンプルです。CSS/SCSSを入手できます。

ボタンの背景色や枠がアニメーションする効果の、様々なバリエーションが揃っています。オプションで、角丸に変更/アイコンを付ける/ページの背景を変える/ボーダーの太さを変更/パディングを変更できます。

図4 ホバーボタンのコレクション
図4 ホバーボタンのコレクション

5. 25 Interactive HTML Websites That Look Like Flashhttps://line25.com/articles/25-interactive-html-websites-that-look-like-flash

インタラクティブなウェブサイトのギャラリーです。もちろんFlashではなくHTML5+CSS3+JavaScriptで作られています。

「Flashのような」という言い方もいい加減古い気もしますが、Flashで作ったサイトを思い出させるようなサイトとして紹介しています。

図5 インタラクティブなウェブサイトのギャラリー
図5 インタラクティブなウェブサイトのギャラリー

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

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

Pastelhttps://usepastel.com/

Pastelは、Webページ上に付箋を貼っていくようなイメージで、コメントを書き込み共有できるサービスです。サイト制作時の修正などのやりとりをスピーディーに行えます。

コメントを書き込むときは、デベロッパーツールを使っているときのように要素を選択できます。たとえば、見出し要素についてのコメントか、見出しを含むブロック全体のコメントかがわかるように枠が付くので便利です。

コメントは番号が振られ、コメント内容は左カラムでまとめて見られます。コメントにはもちろん返信できます。

似たようなサービスはいろいろありますが、機能がシンプルな分、操作が分かりやすくて軽快に使えるように感じました。

図6 サイト制作時の修正などのやりとりをコメントで行うサービス
図6 サイト制作時の修正などのやりとりをコメントで行うサービス

おすすめ記事

記事・ニュース一覧