週刊Webテク通信

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

ネットで見かけた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で変更するサービス

おすすめ記事

記事・ニュース一覧