週刊Webテク通信

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

ネットで見かけた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 画像に注釈を書き加えるサービス

おすすめ記事

記事・ニュース一覧