gihyo.jpサイトのロゴ

週刊Webテク通信

2022年4月第3週号1位は、カルーセルのUXをより良くデザインする方法、気になるネタは、月600円で容量無制限のクラウドバックアップが可能な「Dropbox Backup」がローンチ

2022-04-21

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

1. Designing A Better Carousel UX — Smashing Magazinehttps://www.smashingmagazine.com/2022/04/designing-better-carousel-ux/

カルーセル（スライドショー）のUXをより良くデザインする方法を解説した記事です。多くの事例を紹介していますが、悪い例として取り上げられているものもあります。

プロモーションや新着情報を知らせるためにカルーセルが役立つことはほとんどなく、ユーザーはスクロールしてカルーセルが表示されなくするなど無視する傾向にあるとのこと。たしかに自分もカルーセルを複数スライドにわたってちゃんと見ることは少ないよなと思いました。

オプションを検討しているときや料金プランを確認するときなど、特定のコンテキストにおいて追加コンテンツを見てもらうときにはカルーセルは機能するとのことでした。

図1　カルーセルのUXをより良くデザインする方法
図1　カルーセルのUXをより良くデザインする方法

2. Basic Types of Buttons in Web and Mobile User Interfaces - Design4Usershttps://design4users.com/buttons-in-user-interfaces/

ボタンの定義と種類、効果的なボタンデザインなど、Web／モバイルのUIにおけるボタンに関する基本をまとめています。

  • CTA（コールトゥアクション）ボタン
  • テキストボタン
  • ドロップダウンボタン
  • ハンバーガーボタン
  • プラスボタン
  • 拡張するボタン（押すとサブメニューが出てくるなど）
  • 共有ボタン
  • ゴーストボタン
  • フローティングアクションボタン
図2　ボタンに関する基本のまとめ
図2　ボタンに関する基本のまとめ

3. What is 'bad design'? 10 examples & how to avoid them | Dribbble Design Bloghttps://dribbble.com/stories/2022/04/12/what-is-bad-design-examples

悪いデザインの例と、それを防ぐ方法を解説しています。

  1. デザインがごちゃごちゃし過ぎている
  2. 一貫性のないUI
  3. 文字の階層分け（見出しと本文の区別など）が不十分
  4. 紛らわしいアイコン
  5. フォームのデザインが悪い
  6. 要素の配置が悪い
  7. 無関係な画像
  8. コントラストの欠如
  9. ユーザー調査ができてない
  10. アクセシビリティの欠如
図3　悪いデザインの例とそれを防ぐ方法
図3　悪いデザインの例とそれを防ぐ方法

4. How to implement glassmorphism with CSS - LogRocket Bloghttps://blog.logrocket.com/implement-glassmorphism-css/

CSSを使用してグラスモーフィズムを実現するための理想的なアプローチを説明しています。FigmaでのグラスモーフィズムUIの作り方、Tailwind CSSでのコーディング例などもあり参考になります。

図4　CSSでグラスモーフィズムを実現する理想的アプローチ
図4　CSSでグラスモーフィズムを実現する理想的アプローチ

5. 32217 Free Icons | Iconerhttps://iconer.app/

カスタマイズできるフリーのSVGアイコンセット集です。編集ツールで開き、サイズ、線幅、色などを変更できます。

アイコンはまとめてSVGファイルでダウンロードするか、1つのアイコンのSVGコードをコピーして利用できます。

図5　カスタマイズできるフリーのSVGアイコンセット集
図5　カスタマイズできるフリーのSVGアイコンセット集

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

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

Elai.io - create AI videos from texthttps://elai.io/

Elai.ioはテキストを元に人がしゃべっている動画を作れるサービスです。デジタルアバターを使ってプレゼンテーションやチュートリアルの動画を作成できます。

テキストから生成した音声に合わせてアバターをしゃべらせるだけでなく、画像やテキストを追加することもできます。画像をフェードインさせるなど簡単なアニメーションも作れますし、Lottieのアニメーションファイルのインポートもできるようです。

65以上の言語に対応していて日本語もOKでしたが、日本語で選べる声の種類は女性の声1つだけです。有料プランには音声ファイルをアップロードする機能があり、自分の声に合わせてアバターがしゃべってるような動画が作れるということなのでしょう。

図6　テキストを元に人がしゃべっている動画を作れるサービス
図6　テキストを元に人がしゃべっている動画を作れるサービス

おすすめ記事

記事・ニュース一覧