週刊Webテク通信

2020年6月第2週号 1位は,UIを改善する8つのヒント,気になるネタは,Zoomのエンドツーエンド暗号化,有料ユーザーのみに提供へ

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

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

1. 8 (more) tips to quickly improve your UIs - UX Collectivehttps://uxdesign.cc/8-more-tips-to-quickly-improve-your-ui-designs-368fb3bea5ba

UIを改善する8つのヒントをまとめています。

  1. テキストがちょっと重たく見える場合は明るい色にする
  2. 文字のサイズを小さくするほど行間は大きくする
  3. ベースカラーを決めたら色合いと濃淡で均一性を追加する
  4. 最も重要な要素を際立たせる
  5. 一貫性のために同じビジュアルスタイルのアイコンを使っているか確認する
  6. 「行動への呼びかけ」を常に画面上で最も目立つ項目にする
  7. フォームのエラーに特別な表示を追加する
  8. メニューの中で最も頻繁に使用されるアクションを目立たせる

図1 UIを改善する8つのヒント

図1 UIを改善する8つのヒント

2. How to Add Text to a Video Online: 7 Tips & Tricks | Design Shackhttps://designshack.net/articles/graphics/how-to-add-text-to-a-video/

ウェブページのヒーローイメージに使われる動画に,文字を被せるときのヒントをまとめた記事です。

  1. コントラストを考える
  2. 大きなテキストを使う
  3. 動画の再生速度を調整する
  4. 半透明のカラーレイヤーを重ねることを検討する
  5. テキストをボックスにいれる
  6. テキストが入ることを念頭において動画を編集する
  7. レイヤーを使ったデザイン

図2 動画に文字を重ねる場合のヒント

図2 動画に文字を重ねる場合のヒント

3. How to Use Motion Graphics in Your Website Design | Fireart Studiohttps://fireart.studio/blog/how-to-use-motion-graphics-in-your-website-design/

モーショングラフィックスをウェブデザインにどう使うかを解説しています。

以下の項目に分けて紹介していました。

  • Webデザインにおけるモーショングラフィックスの主な役割
  • すばらしいウェブサイトアニメーションの3つの種類
  • ウェブサイトのデザインにモーショングラフィックスを取り入れてUXに魔法をかける

図3 モーショングラフィックスをウェブデザインにどう使うか

図3 モーショングラフィックスをウェブデザインにどう使うか

4. 10 Best Design Systems and How to Learn (and Steal) From Themhttps://designerup.co/blog/10-best-design-systems-and-how-to-learn-and-steal-from-them/

ネットに公開されているデザインシステムを10個(実際はおまけの1個含めて11個)紹介し,それらから何を学べるかのヒントを案内した記事です。

それぞれのデザインシステムについて,⁠作成した会社・組織の紹介/デザイン哲学/デザインシステムの機能/あなたの仕事にどう適用できるか」を解説しています。

図4 すばらしいデザインシステムの例とそれらから何を学べるかのヒント

図4 すばらしいデザインシステムの例とそれらから何を学べるかのヒント

5. RoughNotationhttps://roughnotation.com/

テキストにラフな手描き風の注釈をつけるJavaScriptライブラリです。ラフな描画にはRoughJSというライブラリを使っています。

下線やボックス,丸,蛍光マーカーのようなハイライト,×印などを,アニメーションとともに表示します。

図5 ラフな手描き風の注釈をつけるJSライブラリ

図5 ラフな手描き風の注釈をつけるJSライブラリ

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

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

Image Annotation Made Simple: A Free Online Toolhttps://www.goodannotations.com/

画像に注釈を書き加えるためのサービスです。四角形や丸で囲ったり,矢印や文字を追加できます。

ブラウザ上でお手軽に注釈を入れられて,デザイン的にも洗練されています。ただし,まだベータ版なので挙動がおかしくなることもありました。レイヤーの上下関係をあとで変更できないのが残念です。

アップロードした画像には,ウィンドウのバーと背景色とが追加されます。背景色はもちろん変更可能です。今後も機能強化を進めるようで,その予定がプロジェクト管理サービスTrelloの埋め込みで掲載してありました。

図6 画像に注釈を書き加えるサービス

図6 画像に注釈を書き加えるサービス

今週の気になるWebネタ

Zoomのエンドツーエンド暗号化,有料ユーザーのみに提供へ - CNET Japanhttps://japan.cnet.com/article/35154769/

Zoomがエンドツーエンドの暗号化は有料ユーザーのみに提供すると発表しました。理由として,悪用された場合に「米連邦捜査局(FBI)や現地の警察当局と協力したいから」とCEOが発言したそうです。

いやがらせ行為などをするのは身元を偽る無料ユーザーによるものだからという説明はたしかに理にかなっていますね。批判もあるようですが,エンドツーエンドの暗号化問題は,こだわるんだったら有料版を使いましょうということで解決なのでしょう。

Zoomはコロナ禍で売り上げが急増していますが,無料ユーザーが増えたこともあり設備投資にもかなりのコストがかかっているようです。これを機に有料ユーザーがもっと増えるといいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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