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

1. 10 Usability Heuristics for UI Design - Prototypr | Prototypinghttps://prototypr.io/post/10-usability-heuristics-for-ui-design/

UIデザインのためのユーザビリティの経験則をまとめた記事です。

1. システムの現在の状態を可視化する
2. システム上で使う用語などを現実世界のものと合わせる
3. ユーザーが制御できる自由を与える
4. 一貫性と標準的な操作方法
5. エラーの防止
6. 想起させるより認識させる
7. 柔軟性があり効率的な使い方
8. 美的でミニマリストなデザイン
9. ユーザーがエラーを認識，診断，回復できるようにする
10. ヘルプとドキュメント

図1　UIデザインのためのユーザビリティの経験則10選

2. 34 Impressive Examples of Fullscreen Navigation Menus - Qode Interactivehttps://qodeinteractive.com/magazine/examples-of-fullscreen-navigation-menus/

フルスクリーンのナビゲーションメニューが印象的なサイトを多数紹介しています。

優れたフルスクリーンメニューの重要な要素がまとめられていました。

• シンプルさ
• 明快さ
• 利用者に目的や方向性を示す
• 一貫性

図2　フルスクリーンのナビゲーションメニューの事例集

3. Design Trend: Modern Tappable Targets (And How to Do It) | Design Shackhttps://designshack.net/articles/ux-design/tappable-targets/

モバイルアプリやWebサイトでの，タップ可能なターゲットのデザイン方法について解説した記事です。

タップしやすいサイズやタップ可能な領域だとわかりやすい色や形，テキストのデザインと内容について気をつけることなどがまとめてあります。

図3　タップ可能なターゲットのデザイン方法

4. Layoutit Grid: Learning CSS Grid Visually With a Generator | CSS-Trickshttps://css-tricks.com/layoutit-grid-learning-css-grid-visually-with-a-generator/

CSSグリッドをジェネレーターを使って学ぶことを推奨した記事です。Layoutit Gridというジェネレーターを使っていました。

CSSグリッドだけでなく，CSSのシャドウやグラデーションなども，遊びながら学ぶことを勧めています。

図4　CSSグリッドをジェネレーターを使って学ぶことのすすめ

5. Exciting New Tools for Designers, October 2020 | Webdesigner Depothttps://www.webdesignerdepot.com/2020/10/exciting-new-tools-for-designers-october-2020/

Webデザイナーのための新しいツールを多数まとめた記事です。

JSライブラリやデスクトップアプリ，便利なサイトやサービス，テンプレート，さらにフォントやアイコンなども紹介しています。

図5　Webデザイナーのための新しいツールいろいろ

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

• ソニーのカメラをウェブカム化する公式ソフトにMac版が登場 - CNET Japan
  これでソニーのVLOGCAMもMacでもウェブカメラとして使えるようになりました
• Square，無料のEC作成サービスを日本で提供開始--テイクアウトやPOSアプリ連携に対応 - CNET Japan
  一律3.6％の決済手数料以外，初期費用や月額利用料，振込手数料は一切なしで利用できるそうです
• Googleハングアウトユーザー全員が無料でChatへ移行可能に | TechCrunch Japan
  ビデオチャットサービスではなくグループチャットが基本機能のChatに移行を推進するようです

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

Echo – Instant voice messaging for remote teamshttps://eo.chat/

Echoはチームでボイスメッセージをやりとりするサービスです。簡単な操作でグループでのボイスチャットを実現します。

音声メッセージはメンバーの誰かに直接送ることも，グループに対して送ることもできます。英語だけだと思いますが，音声認識でテキストも表示されます。

無料プランではメンバーは5人までで，音声データが保存されるのはは24時間という制限があります。リモートワークでのテキストチャットとビデオ会議との間を埋めるサービスとして，ボイスチャットは注目される分野だと思っています。

図6　チーム向けのボイスメッセージサービス

今週の気になるWebネタ



グーグル検索，気になる曲をハミングすると曲名を教えてくれる新機能 - CNET Japanhttps://japan.cnet.com/article/35161044/

Googleが曲のメロディーをハミングすると曲名を検索してくれる機能を発表しました。記事によると音痴でも大丈夫とのことです。

さっそくiOSのGoogleアプリで試してみたんですが機能しませんでした。日本での対応は現状Android版のみとのことです。口笛でも認識するそうです。

同様のことができるShazamはAppleに買収されましたが，Googleはこの機能を独自開発したとのこと。調べてみるとハミングでの検索ができるアプリは結構いろいろあって「鼻歌検索」とも呼ばれていました。