週刊Webテク通信

2021年9月第5週号 1位は,UXデザインのグローバル化についてのヒント,気になるネタは,米Slackが動画を簡単に作成・共有できる新機能などを発表

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

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

1. Globalizing Your UX Designs | by Nicole Assini | Indeed Designhttps://indeed.design/article/globalizing-your-ux-designs

UXデザインのグローバル化についてのヒントを紹介した記事です。英語をベースにローカライズするときに,ただ他の言語に翻訳するだけなく考慮すべき点をまとめています。

  • 文字数が多くなることを計画しておく(英語から他言語に翻訳するとテキスト量が長くなることが多い)
  • 言語によって文字サイズが変動することを考慮する
  • 単純明快な言葉を使う
  • 入力フィールドは調整可能にする(日本では姓・名の順番が米国と逆でふりがなも必要など)
  • 国によって固有のフィールドの並び順がある(住所の表記が米国では番地→市区町村→州なのに対し日本は逆など)
  • 通貨記号とその配置は国や言語によって違う
  • コンテンツとインタラクションを柔軟に
  • 情報の階層性を保つ
  • 語順が変更されることを計画しておく(文章中の穴埋めのようなフォームを作らないなど)
  • 右から左に書く言語のためにミラーリングすることを考慮する
  • 画像とシンボルは誤解される可能性がある
  • 色が持つ意味合いは国によって違う場合がある
  • テキスト入りの画像を作らない

図1 UXデザインのグローバル化についてのヒント

図1 UXデザインのグローバル化についてのヒント

2. The Pros and Cons of Tailwind CSS | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/09/the-pros-and-cons-of-tailwind-css/

Tailwind CSSの良い点,悪い点をまとめています。

良い点
  1. (デフォルトのデザインテーマなどがないので)スタイルを自由に制御できる
  2. 高速にCSSのスタイリングができる
  3. レスポンシブ対応に優れ,バグなども少なく安定している
  4. 追加機能で最終的に使われてないクラスを削除してCSSを小さくできる
悪い点
  1. スタイリングとHTMLが混在する
  2. 学ぶのに時間がかかる
  3. コンポーネントが用意されていない
  4. ドキュメント類がBootstrapなどの競合に比べると充実していない

図2 Tailwind CSSの良い点と悪い点

図2 Tailwind CSSの良い点と悪い点

3. Pattern #1 - Basic Pattern Repositoryhttps://patterns.helloyes.dev/pattern/1/

斜線やドットなどの基本的なパターンをまとめたサイトです。各パターンはSVGでダウンロードするかSVGのコードをコピーできます。

Figma用のライブラリも配布していてそちらも便利そうです。

図3 基本的なパターンをSVGで提供

図3 基本的なパターンをSVGで提供

4. cccreate → carefully curated collection of tools for web creatorshttps://cccreate.co/

Webクリエイターのための厳選したツールのコレクションです。

以下の項目に分けて探せるようになっています。

  • レイアウト
  • タイポグラフィ
  • アイコン
  • アニメーション
  • シェイプ
  • ドキュメント/リファレンス
  • その他

図4 Webクリエイターのための厳選ツール集

図4 Webクリエイターのための厳選ツール集

5. UI Interactions & Animations Roundup #19 | Codropshttps://tympanus.net/codrops/2021/09/27/ui-interactions-animations-roundup-19/

UIデザインにアニメーションをふんだんに使ったサンプルをまとめた記事です。

実際にサイトに落とし込むときにどうコーディングするかは置いておいて,アニメーションとして楽しめるものが多いですね。モーショングラフィックとしての参考にもなりそうでした。

図5 UIアニメーションの例いろいろ

図5 UIアニメーションの例いろいろ

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

先週の気になるツール/サービス

StreamYardhttps://streamyard.com/

StreamYardはライブ配信のためのツールで,複数人がリモートで参加しての配信に便利です。先日個人的にYouTubeライブに使って,とても使い勝手が良かったので紹介します。

主催者もゲストもアプリのインストールなど必要なく,ブラウザだけで配信できます。ゲストにはリンクを知らせるだけで,ビデオ会議に参加する感覚で配信に参加してもらえます。Zoomと違って複数人の画面のレイアウトが豊富で,1人だけ大きくしてほかの人たちを小さく表示することも可能です。

画面共有して,プレゼン画面と人物の映像を同時にレイアウトもできます。ロゴやタイトル映像に重ねられるなど,一通りの機能が揃っています。YouTubeでもらったコメントを配信画面に表示できるのも便利でした。

図6 数人がリモートで参加しての配信に便利なStreamYard

図6 数人がリモートで参加しての配信に便利なStreamYard

今週の気になるWebネタ

米Slackが動画を簡単に作成・共有できる新機能などを発表 | TECH+https://news.mynavi.jp/article/20210922-1979644/

Slack上で簡単に動画を撮影して共有できるようになりました。Webカメラの映像と画面共有との同時収録もできます。

パソコンの画面操作とWebカメラでの自撮り映像とを一緒に収録できるツールは最近増えています。Slackはどう差別化してきたのかと思い使ってみましたが,非常にシンプルで必要最低限のものでした。

なお,動画ではなく音声を録音して送れるようになっており,シンプルな機能ですがこちらの方が利用されそうです。音声の録音機能は今さら感はありますし,日本では住宅事情もありリモートワークでのボイスメッセージの活用は進まないようにも思えますね。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote