週刊Webテク通信

2020年12月第4週号1位は、2020年版のデザインツール投票の結果発表、気になるネタは、TwitterのRT仕様、元に戻した理由は「“思慮深い拡散”つながらなかった」から

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

1. 2020 Tools Survey Results - Uxtools.cohttps://uxtools.co/survey-2020/

毎年恒例のUxtools.coによるデザインツール投票の2020年版が発表されました。今年は世界から4000人以上が回答しています。

今回、ほとんどのジャンルでFigmaが1位になるという変化の年になりました。Sketchより幅広い分野で使えるFigmaに主役が移ったことで、しばらくは天下が続きそうな予感がします。

以下、わたしの注目したポイントをまとめました。

  • プラットフォームとしてWindowsが昨年の18%から25%に上昇している
  • ブレーンストーミング、ユーザーフロー/サイトマップの初期段階のツールとしてMiroが存在感を示している
  • Figmaが急成長した理由のひとつはリモートワークが増えてライブコラボレーションの需要が高まったかららしい
  • Affinity DesignerはUIデザインにのみランクインだけどユーザーの評価は高い
  • プロトタイピングにWebサイトビルダーのWebflowを使っている人がそこそこいて評価も高い
  • ハンドオフツールとしてZeplinはSketchとの組み合わせで多く使われているが、Figmaはハンドオフまで使用する人が多く、利用者が増えたことでFigmaがZeplinを上回った
  • Adobe XDはいろんなジャンルの3番手4番手くらいの位置につけてそれなりに健闘している
  • ユーザーテストツールとしてZoomが1位になったのも今年ならではだなと感じた
図1 2020年版のデザインツール投票の結果発表
図1 2020年版のデザインツール投票の結果発表

2. CSSLab - Web Design Catalysthttps://csslab.app/

CSSのコンポーネントのHTML&CSSコードを入手できます。ボタンやアニメーションなどカテゴリにわけて用意してあり、色やサイズなどをカスタマイズできます。

今後コンポーネントの数が増えていくことに期待したいです。

図2 CSSのコンポーネントを多数提供
図2 CSSのコンポーネントを多数提供

3. Handling Short And Long Content In CSShttps://ishadeed.com/article/css-short-long-content/

メニューの文字数など、コンテンツが長かったり短かったりした場合のCSS側での対応に関するノウハウをまとめた記事です。

長い単語を改行させる方法、長い文章を途中で切り捨てて「…」を入れる方法、水平スクロールさせる方法などを解説しています。

図3 コンテンツが長い場合・短い場合のCSSでの対応について
図3 コンテンツが長い場合・短い場合のCSSでの対応について

4. Centering in CSShttps://web.dev/centering-in-css/

CSSでセンタリングする5つの方法を紹介しています。

それぞれの方法について、以下の5つの視点で評価をして、最終的なおすすめの方法も決定していました。

  1. 幅を狭くした場合
  2. 高さを狭くした場合
  3. アイテムを複製した場合
  4. コンテンツの長さや言語が変わった場合
  5. 文書の向きと書き込みモード
図4 CSSでセンタリングする方法
図4 CSSでセンタリングする方法

5. Design Trend: Imagery Without People | Design Shackhttps://designshack.net/articles/trends/imagery-without-people/

人の写っていない写真をデザイントレンドとして取り上げています。このトレンドは新型コロナウィルスによるパンデミックが影響しているそうです。

人のいない画像は人の顔に注目が集まらない分、ユーザーをビジュアル要素からテキスト要素に早く移動させやすいメリットもあるとのことでした。

図5 デザイントレンドとしての人の写っていない写真
図5 デザイントレンドとしての人の写っていない写真

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

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

JotForm Tables | Free Spreadsheet Powered Database Platformhttps://www.jotform.com/products/tables/

JotForm Tablesはオンラインで使えるスプレッドシートです。フォームの作成/管理アービスのJotFormが提供しています。しかも無料です。

Googleスプレッドシートのようなものと思ってもいいんですが、Airtableと競合するものという見方が正しいと思います。表計算よりデータベース的な意味合いが強く、レコードごとにカード型に表示できたりします。

GoogleフォームもGoogleスプレッドシートと連動していますし、フォームのサービスが集めたデータをより便利に扱えるサービスを提供するのは理にかなってますね。JotFormのフォームで予約を受け付けて、Tablesで自動でカレンダーに割り振るなど、便利な連携がいろいろできそうです。

図6 JotFormが提供するオンラインで使えるスプレッドシート
図6 JotFormが提供するオンラインで使えるスプレッドシート

おすすめ記事

記事・ニュース一覧