週刊Webテク通信

2021年3月第4週号 1位は,パンくずリストをデザインするヒント,気になるネタは,グーグル,「Chrome」にリアルタイムの自動字幕起こし機能

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

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

1. Web Usability: Breadcrumbs Design Tips and Practiceshttps://blog.tubikstudio.com/web-usability-breadcrumbs-design/

パンくずリストをデザインするヒントをまとめた記事です。パンくずリストの話題だけでこれだけのコンテンツになるんだと感心するほど充実しています。

パンくずリストのデザイン手法として,以下の項目で解説していました。

  • メインのナビゲーションにはしない
  • H1見出しの上に配置する
  • パンくずリストの経路をトップページへのリンクから始める
  • 現在位置をクリックできないように見せる(あるいは表示しない)
  • 要素を明確に区切る
  • 読みやすさと余白に気を配る
  • 操作の履歴ではなくサイトの階層構造を示す
  • 多すぎる要素で混乱させない
  • レイアウト上でパンくずリストを視覚的に強調しない
  • モバイル環境で複数行になるパンくずリストを使わない
  • 階層構造がないか単純なウェブサイトにパンくずリストを使わない

図1 パンくずリストをデザインするヒント

図1 パンくずリストをデザインするヒント

2. UI & UX Micro-Tips: Volume Three. | Marc Andrewhttps://marcandrew.me/ui-ux-micro-tips-volume-three/

UIとUXのちょっとしたヒントをまとめています。

  1. より非公式な口調にするには,すべての文字を小文字にする
  2. 文字の太さ,サイズ,色を使って階層構造を示す
  3. 暗い背景に明るい文字のときは読みやすくするためフォントを太くする
  4. 狙った通りの感情になってもらうためのフォント選び
  5. 複数のフォントを使う場合は最大2つのルールを守る
  6. すべて大文字+文字の間隔=読みやすさ

図2 UIとUXのちょっとしたヒント

図2 UIとUXのちょっとしたヒント

3. Basic Do's and Don'ts of Effective Website Design - Design4Usershttps://design4users.com/dos-and-donts-website-design/

効果的なウェブデザインのためにやるべきこととやってはいけないことを紹介した記事です。

レイアウト/タイポグラフィ/コンテンツ/ホワイトスペース/ナビゲーション/画像の最適化/背景のコントラスト/速度の最適化の項目ごとにやるべきこととやってはいけないことをまとめています。

図3 効果的なウェブデザインのためにやるべきこととやってはいけないこと

図3 効果的なウェブデザインのためにやるべきこととやってはいけないこと

4. Evergreen CSS Flex Layouts With Live Demos | webup.org/bloghttps://webup.org/blog/evergreen-css-flex-layouts-with-demos/

CSSフレックスボックスのデモ付きガイドです。CodePenのサンプルコードを埋め込んでいるので,その場で確認できます。

レイアウトのパターンを9種類掲載していますが,今後も追加していくそうです。

図4 CSSフレックスボックスのデモ付きガイド

図4 CSSフレックスボックスのデモ付きガイド

5. Printableshttps://printables.craftwork.design/

プリントアウトして使う,アプリの画面をスケッチするためのテンプレート集です。

iPhoneやGALAXY,PIXELなどのデバイス用の用紙をPNG,JPG,PDFでダウンロードできます。

図5 アプリの画面をスケッチするためのテンプレート集

図5 アプリの画面をスケッチするためのテンプレート集

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

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

Attract more listeners with personalized Clubhouse pages 🚀 | twisohttps://clubhouse.twiso.co/

TwisoはClubhouseのroomを紹介するページを作るためのサービスです。roomのリンクをもとに3種類のデザインのページを生成します。

類似のサービスとしてClubLinkがありますが,ClublinkがSNSでシェアするプレビュー画像を重視しているのに対し,Twisoは生成した単独ページのデザイン性をアピールポイントにしているようです。

残念ながらSNSでシェアするときのプレビュー画像は日本語が文字化けするのですが,実際のページは文字化けしませんでした。また,時刻が日本時間ではなくPST(アメリカ西海岸時間)表記になってしまいます。

図6 Clubhouseのroom紹介ページを作るサービス

図6 Clubhouseのroom紹介ページを作るサービス

今週の気になるWebネタ

グーグル,「Chrome」にリアルタイムの自動字幕起こし機能 - CNET Japanhttps://japan.cnet.com/article/35168074/

ChromeブラウザにLive Captionという新機能が追加されました。現在英語だけですが,音声を自動で字幕にしてくれます。

自動字幕起こし機能をオンにすると,動画や音声を再生中に字幕が表示されます。一度オンにすると常に再生時に字幕が出てしまうので,日本語の動画の時などは邪魔になってしまいます。でも,すぐに字幕のポップアップは消せるので問題ありません。

YouTube動画にも自動で字幕を出す機能はありますが,この機能を使うと動画の外に字幕を表示できるので,画面を邪魔しなくて便利かもしれません。将来的にはきっと,日本語に対応して,自動翻訳にも対応すると思うので楽しみです。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote