週刊Webテク通信

2020年10月第4週号 1位は,UIデザインのためのユーザビリティの経験則10選,気になるネタは,グーグル検索,気になる曲をハミングすると曲名を教えてくれる新機能

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

ネットで見かけた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. ヘルプとドキュメント
  11. 図1 UIデザインのためのユーザビリティの経験則10選

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

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

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

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

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

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

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

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

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

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

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

    図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グリッドをジェネレーターを使って学ぶことのすすめ

    図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デザイナーのための新しいツールいろいろ

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

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

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

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

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

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

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

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

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

    今週の気になるWebネタ

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

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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