週刊Webテク通信

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

Webテク, Webデザイン, Web広告, UI, UX, HTML5, CSS3, JavaScript, ライブ配信

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

ネットで見かけた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　サイト制作時の修正などのやりとりをコメントで行うサービス

今週の気になるWebネタ

Instagramのライブ配信に友人を招待--新機能が追加へ - CNET Japanhttps://japan.cnet.com/article/35105512/

Instagramのライブ配信に，ゲストを招待して2画面で配信できる機能が追加される予定です。記事タイトルには「友人を招待」とありますが，そのライブを見ているユーザーを招待できるようなので，フォロー／フォロワー関係の「友達」という意味ではないと思います。

対談企画とか，講師と生徒での公開講座など，いろいろな用途がありそうです。最近は有名人の「インスタライブ」が流行りつつあるようですが，そこにファンが出演できると盛り上がるんじゃないでしょうか。

Instagramといえば渾身の1枚のキラキラ写真をアップする場という印象が強いですが，ストーリー機能を使って近況を動画で配信している人も多いそうです。動画配信専用のサービスにとっても，Instagramの動画配信の成長は気になるところでしょう。

Webテク, Webデザイン, Web広告, UI, UX, HTML5, CSS3, JavaScript, ライブ配信

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote