週刊Webテク通信

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

ネットで見かけた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ファイルとしてダウンロードできるサービス

おすすめ記事

記事・ニュース一覧