週刊Webテク通信

2021年4月第1週号 1位は，ユーザーインターフェイスを読みやすくする方法，気になるネタは，歌うように話すロボット「チャーリー」，ヤマハが発売 ボカロ技術の活用で

Webテク, Webデザイン, Web広告, UI, UX, グラフィックス, Bootstrap 5, WordPress, RSS, 動画, ロボット

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

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

1. How to Make User Interface Readable: Tips and Practices - Design4Usershttps://design4users.com/how-to-make-user-interface-readable/

ユーザーインターフェイスを読みやすくする方法を解説した記事です。

読みやすくするためのヒントとして，以下の項目で解説しています。

  1. インターフェイスで使われるテキストは短くして一貫性を持たせる
  2. コンテンツをパーソナライズする
  3. 違うタイプのコンテンツのために分割画面を検討する
  4. 1つのテキストブロックに1つのアイデアを入れる
  5. 数字を使う
  6. リストを使うことを忘れない
  7. テキストの中のキーとなる情報が視覚的にわかるようにする
  8. コントラストを確認する
  9. 常識の範囲内でフォントで遊ぶ
  10. テキストに十分なスペースを与える
  11. コンテンツのブロックを区切る
  12. 文字をすべて大文字にすることの効果を利用する

図1　ユーザーインターフェイスを読みやすくする方法

図1　ユーザーインターフェイスを読みやすくする方法

2. Best 20 Graphic & UX Design Blogshttps://ux-lady.com/best-design-blogs/

グラフィックスやUXデザインに関するブログを20個まとめています。

Adobe，Canva，inVisionなど，デザインツールを提供している企業がオウンドメディアとして作っているブログが目立ちます。やはりその手のブログはクオリティが高いものが多いようです。

図2　グラフィックスやUXデザインに関するブログいろいろ

図2　グラフィックスやUXデザインに関するブログいろいろ

3. Understanding Bootstrap 5 Layout - Designmodohttps://designmodo.com/bootstrap-5-layout/

Bootstrap 5でのレイアウトについて解説した記事です。Bootstrap 5でのグリッドシステムを使ったレイアウト方法を詳細に説明しています。

このような解説記事や関連ツールの多さがBootstrapの良さと言えるでしょう。

図3　Bootstrap 5でのレイアウト方法を解説

図3　Bootstrap 5でのレイアウト方法を解説

4. 20 Beautiful Nature Inspired Websiteshttps://www.vandelaydesign.com/25-nature-inspired-websites/

美しい自然にインスパイアされたウェブデザインをまとめています。要素としては山が多いですね。

自然の写真やイラストの使用が増えているとしたら，新型コロナウィルスの影響で，人物が写っている写真をヒーローイメージに使わない傾向にあるのも影響しているかもしれません。

図4　美しい自然にインスパイアされたウェブサイトのギャラリー

図4　美しい自然にインスパイアされたウェブサイトのギャラリー

5. How to Build a Single-Page Content Aggregator Website - WP Mayorhttps://wpmayor.com/how-to-build-a-single-page-content-aggregator-website/

WordPressとRSSから情報を取得するプラグインを使って，情報を集約したページを作る方法を解説した記事です。

自動で更新される，1ページ完結のリンク集ページが作れます。

図5　1ページ完結のリンク集ページを作る方法

図5　1ページ完結のリンク集ページを作る方法

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

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

Automating Video Editing | Kamuahttps://kamua.com/

Kamuaは横長の動画を縦長か正方形に変更するためのサービスです。映像の中の重要な部分が映るように，AIが自動的にトリミングします。

YouTube用に作った横長動画を再利用して，TikTok，Instagram，YouTube Shorts用の動画を作れるので便利です。AIで自動で処理するだけでなく，表示される範囲を自分で決めて自由に動かすこともできます。

自動で字幕を入れる機能もあり，60の言語に対応しています。日本語も選べましたが，わたしが試した範囲ではあまり精度は高くなさそうです。無料のプランがあるのもうれしいところで，書き出す動画にこのサービスのロゴが入るなどの制限があります。

図6　横長動画を縦長か正方形にAIで変更するサービス

図6　横長動画を縦長か正方形にAIで変更するサービス

今週の気になるWebネタ

歌うように話すロボット「チャーリー」，ヤマハが発売 ボカロ技術の活用で - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2103/25/news157.html

ヤマハがボーカロイド技術や自動作曲技術を活用したコミュニケーションロボット「Charlie」（⁠チャーリー）の予約販売をスタートしました。本体価格は2万4800円で，サービス使用料が月額490円です。

言葉をメロディーにのせて会話するロボットと聞いただけではピンと来ませんでしたが，動画を見ると納得しました。完全に女性にターゲットを絞っていますが，動画を見ると欲しくなりますね。

日常での相談事や雑談等もメロディーにのせて返答してくれるそうですが，どの程度の会話能力があるのか気になるところです。Wi-Fiでネットに繋いで使うので，アップデートして賢くなっていくのは期待できると思います。

Webテク, Webデザイン, Web広告, UI, UX, グラフィックス, Bootstrap 5, WordPress, RSS, 動画, ロボット

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote