週刊Webテク通信

2020年7月第5週号1位は、2020年のUIデザインのトレンド、気になるネタは、テレビ会議でのプレゼン映像をかっこよくする仮想カメラアプリ「mmhmm」登場

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2020年7月20日~7月26日の間に見つけた記事のベスト5です。

1. 8 Popular Trends in UI Design on Dribbble in 2020 - Icons8 Bloghttps://icons8.com/articles/dribbble-ui-design-trends/

2020年のUIデザインのトレンドを8つまとめた記事です。Dribbbleに投稿された豊富な作品例を見ながらビジュアルで理解できます。

  1. ニューモーフィズム
  2. 3Dのヒーローイラスト
  3. モノクロのカラーパレット
  4. タイポグラフィの多様性
  5. スクロールアニメーションを使った重なりの効果
  6. モバイル向けUIイラスト
  7. 双方向性のあるページ
  8. 不規則なグリッド
図1 2020年のUIデザインのトレンド
図1 2020年のUIデザインのトレンド

2, UI vs UX Design: 4 Key Differenceshttps://designwoop.com/ui-vs-ux-design-4-key-differences

UIデザインとUXデザインの重要な違いを4つ紹介しています。

  1. UIはデザインに関するもので、UXは問題解決に関するもの
  2. UIデザイナーは見た目に取り組み、UXデザイナーはユーザーフローに取り組む
  3. UIは製品を顧客に提供し、UXは顧客に製品を提供する
  4. UIは見栄えを良くし、UXは機能するようにする
図2 UIデザインとUXデザインの重要な違い
図2 UIデザインとUXデザインの重要な違い

3. How To Create a Responsive Timeline with Image Thumbnails - 1WDhttps://1stwebdesigner.com/how-to-create-a-responsive-timeline-with-image-thumbnails/

レスポンシブなタイムライン表示のコーディング方法を解説しています。年表などに使われる、縦方向を時系列として、特定の年(年月、年月日)に写真やテキストで出来事などの説明が入るものです。

デスクトップ/タブレット/モバイルの3段階で表示が変わり、大画面では左右に表示されるフキダシが、小さな画面では全て右側に表示されるようになります。写真とフキダシの配置も、モバイルサイズでは横並びではなく縦並びになるなど、凝った作りになっています。

図3 レスポンシブなタイムライン表示のコーディング方法
図3 レスポンシブなタイムライン表示のコーディング方法

4. Teenyicons — Tiny minimal 1px iconshttps://teenyicons.com/

1ピクセルの太さの線で描かれたアイコンセットです。SVGとしてコピーでき、Figma用ファイルも用意しています。

このページ上でサイズの変更が可能で、アウトライン版と塗りつぶし版とを選べるようになっていました。

図4 1ピクセルの太さの線で描かれたアイコンセット
図4 1ピクセルの太さの線で描かれたアイコンセット

5. Using Flexbox and text ellipsis together · Leonardo Farihttps://leonardofaria.net/2020/07/18/using-flexbox-and-text-ellipsis-together/

FlexboxとCSSの「text-overflow: ellipsis」によるテキストの省略を同時に使う場合のテクニックを解説しています。

ファイル名を想定した例で、テキストが横幅いっぱいまで表示されるように省略されるけれど、拡張子はちゃんと表示されるコーディング方法が学べます。

図5 Flexboxとテキストの省略の併用方法
図5 Flexboxとテキストの省略の併用方法

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

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

FabDev | Bar chart race generatorhttps://fabdevgit.github.io/barchartrace/

「Bar chart race」を作るサービスを紹介します。Bar chart raceとは、棒グラフのレース、つまり棒グラフが時系列で変化していく様子をレースのようにアニメーションで見せることです。

CSVファイルを読み込ませるだけで、簡単にアニメーションを再生させられます。設定できるのは、アニメーションの長さ、棒グラフを表示させる個数、タイトルです。

アニメーションとして保存する機能はありませんが、動画として画面キャプチャーすれば、サイトに貼ったりSNSに投稿したりできるでしょう。この手の動画がTwitterでバズってるのをたまに見かけますので、作る方法のひとつとして覚えておくと役立つときが来るかもしれません。

図6 棒グラフがレースするアニメーションを作るサービス
図6 棒グラフがレースするアニメーションを作るサービス

おすすめ記事

記事・ニュース一覧