週刊Webテク通信

2019年8月第4週号 1位は， スタイルガイド，デザインシステム，コンポーネントライブラリのガイド，気になるネタは，アップルのスマートスピーカー「HomePod」が8月23日に日本発売へ

Webテク, Webデザイン, Web広告, UXデザイン, アニメーション, 約物半角専用, mp3, スマートスピーカー

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

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

1. Everything I Know About Style Guides, Design Systems, and Component Libraries - Lee Robinsonhttps://leerob.io/blog/style-guides-component-libraries-design-systems

スタイルガイド，デザインシステム，コンポーネントライブラリに関するガイドです。

それぞれの言葉の意味，どこからスタートすべきか，構築方法などについて解説しています。

スタイルガイドを作るためのツール，アイコンライブラリ，デザインシステムをドキュメント化するプラットフォーム，デザインシステムの実例の紹介も参考になります。

図1　スタイルガイド，デザインシステム，コンポーネントライブラリのガイド

図1　スタイルガイド，デザインシステム，コンポーネントライブラリのガイド

2. Top Web Design Trends of 2019 You Shouldn’t Miss - Codica Bloghttps://www.codica.com/blog/top-web-design-trends-2019/

2019年のWebデザインのトレンドをまとめています。

  1. 効率的なタイポグラフィ
  2. グラデーション
  3. より自然で本物の写真
  4. パーソナライズされたイラスト
  5. 3Dイラストレーション
  6. モバイルファーストデザイン
  7. マイクロインタラクション
  8. ユニークなアニメーション
  9. グリッドに合わせない重なったエレメント
  10. 動画コンテンツを統合

図2　2019年のWebデザインのトレンド

図2　2019年のWebデザインのトレンド

3. 4 Rules for Intuitive UX – Learn UI Designhttps://learnui.design/blog/4-rules-intuitive-ux.html

直感的なUXデザインのための4つのルールを紹介しています。

  1. ローカルルールに従う
  2. ドロップダウン以外を使う
  3. 目を細めて見るテストに合格する
  4. 例を使って教える

ルールの数は少ないですが，各項目で具体的な例を挙げて丁寧に解説した充実した内容です。

図3　直感的なUXデザインのための4つのルール

図3　直感的なUXデザインのための4つのルール

4. CSS { In Real Life } | Variable Font Animation with CSS and Splitting JShttps://css-irl.info/variable-font-animation-with-css-and-splitting-js/

バリアブルフォントのウェイトを変えることによるアニメーションの作り方を解説した記事です。

1文字ずつ処理できるようにタグを追加するのにJavaScriptを使い，アニメーションはCSSで適用しています。

図4　バリアブルフォントによるアニメーション

図4　バリアブルフォントによるアニメーション

5. Yaku Han JPhttps://yakuhanjp.qranoko.jp/

「Yaku Han JP」は，「⁠」や【】などが幅を取りすぎて見栄えが悪くなることを防ぐため，半角にした記号類だけが含まれる約物半角専用のWebフォントです。

Notoフォントをベースにゴシック，明朝，丸ゴシックが用意されています。

図5　約物半角専用の日本語Webフォント

図5　約物半角専用の日本語Webフォント

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

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

Verby TTS Online | Free Text to Speech Converter with SSML Editorhttps://www.verby.co/

Verbyは，テキストを喋らせてmp3ファイルとしてダウンロードできるサービスです。英語では，この手のテキストを喋らせるのを「Text to Speech（TTS⁠）⁠」⁠，音声認識を「Speech to Text（STT⁠）⁠」と呼ぶのが一般的なようです。

英語3種類のほかに3言語しか選べませんが，日本語が入っていました。男性の声，女性の声の2種類選べます。ログイン不要でも使えますが，アカウントを作ると読み上げられる文字数が増え，SSMLエディターと高品質の音声が使えるようになります。

SSMLエディターを使うと，部分的に強調したり，一呼吸置くなどの設定が可能です。mp3ファイルのダウンロードは1000文字まで無料で，5万文字で9ドルなど文字数に合わせて追加で料金を払う仕組みになっています。

図6　テキストを喋らせてmp3ファイルとしてダウンロードできるサービス

図6　テキストを喋らせてmp3ファイルとしてダウンロードできるサービス

今週の気になるWebネタ

アップルのスマートスピーカー「HomePod」が8月23日に日本発売へ - CNET Japanhttps://japan.cnet.com/article/35141350/

「HomePod」の日本発売がついにはじまります。音楽を楽しむ，特にApple Musicを楽しむためのものという意味合いが強いスマートスピーカーです。

日本でのスマートスピーカーは，「⁠AIスピーカー」と呼ばれたせいで過度に期待されてしまったところもあると思います。話題がひと段落してからの発売となったのは，Appleとしては良かったのかもしれません。

実際に試用したレビュー記事によると，シンプルな使用感と音の良さが好評のようです。スピーカーとしての性能が違うので，ほかのスマートスピーカーと値段が違うのはわかりますが，2台買ってステレオにするんだったらAirPlay対応のほかのスピーカーを買ったほうがいい気もしてきます。

Webテク, Webデザイン, Web広告, UXデザイン, アニメーション, 約物半角専用, mp3, スマートスピーカー

著者プロフィール

芦之由（あしのよし）

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

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

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