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

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

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

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

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

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

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

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

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

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

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

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

話題の音声SNS「Clubhouse⁠」⁠、仏プライバシー保護機関が調査 - CNET Japan
規制当局の介入を求めるオンラインの請願書には2万5000件以上の署名が寄せられているそうです
Zホールディングス、外部有識者による特別委員会を設置 LINEのデータ管理問題で - ITmedia NEWS
LINEのZホールディングスとの経営統合でいろいろ表沙汰になっているわけですが、きちんと対応してイメージを良くする対策を進めているわけですね
Facebook、iOS版とAndroid版でも物理セキュリティキーに対応 - CNET Japan
Facebookにログインするための二段階認証に、物理的なセキュリティキーを使えるようになります

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

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

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

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

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

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

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