週刊Webテク通信

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

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

ネットで見かけた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 テキストを元に人がしゃべっている動画を作れるサービス

今週の気になるWebネタ

月600円で容量無制限のクラウドバックアップが可能な「Dropbox Backup」がローンチ - 窓の杜https://forest.watch.impress.co.jp/docs/news/1403040.html

Dropboxからバックアップに特化した新サービス「Dropbox Backup」が発表され提供が開始されました。月600円(年間プランの場合/月額プランだと月750円)の安価で容量無制限なことが話題となっています。

Dropbox同様Dropbox Backupもローカルのフォルダをクラウドに同期し続ける仕組みなので,ローカルのファイルを消せばクラウドからも消えます(履歴機能で一定期間は復旧できるはずですが⁠⁠。外部のファイル置き場という扱いではないんですね。

複数端末での同期やクラウド上でのファイルの編集などができないなど,Dropboxから機能を限定した廉価版だとわたしは認識しているのですが,⁠容量無制限」に魅力を感じている人も多いようです。容量無制限なのはDropbox Backupプランの新規ユーザーで,既存プランのユーザーはBackup機能は使えるけど容量制限は従来通りなど,ややこしいことになっています。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote