週刊Webテク通信

2021年3月第3週号1位は、新しいWebデザインのトレンド「オーロラUI」、気になるネタは、Appleが初代HomePodの販売を終了、好評のminiに注力

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

1. Aurora UI — new visual trend for 2021 | by Michal Malewicz | Mar, 2021 | UX Collectivehttps://uxdesign.cc/aurora-ui-new-visual-trend-for-2021-c763a7daa7e2

新しいWebデザインのトレンドとしてオーロラUIを紹介しています。ぼかしと自然なグラデーションがオーロラと似ているのでオーロラUIと呼ぶようです。

ボタンなど機能するものには最小限のデザインでわかりやすくして、背景にぼかしなどの装飾を与えることを提案しています。

図1 新しいWebデザインのトレンド「オーロラUI」の解説
図1 新しいWebデザインのトレンド「オーロラUI」の解説

2. Why I Don't Like Tailwind CSS | Aleksandr Hovhannisyanhttps://www.aleksandrhovhannisyan.com/blog/why-i-dont-like-tailwind-css/

Tailwind CSSをなぜ好きではないかを説明した記事です。1月に書いた記事に最近補足を加えています。補足部分にはTailwind CSSの擁護をするような内容も含まれていますね。

Tailwind CSSではなく何を使うべきかとして、この記事の作者がオススメするstyled-jsxというCSS-in JSライブラリを紹介していました。

最後に書かれている、Tailwind CSSはプロトタイプやデモを非常に迅速に作成するのには役立つけど、長期的なメンテナンスや新しい開発者に引き継ぐには向いてないという結論にはとても納得がいきます。

図2 Tailwind CSSをなぜ好きではないか
図2 Tailwind CSSをなぜ好きではないか

3. Why Does a Design Look Good?https://www.nngroup.com/articles/why-does-design-look-good/

なぜデザインが良く見えるのかを解説しています。

  1. タイポグラフィと余白
  2. 階層構造と色
  3. 一貫性
図3 なぜデザインが良く見えるのか
図3 なぜデザインが良く見えるのか

4. Clone Wars - Open source clones of popular siteshttps://gourav.io/clone-wars

GitHubで公開されている、有名サイトのクローンをまとめた記事です。

Amazon、Apple Music、Clubhouse、Facebook、Gmail、Instagram、NetflixなどをHTML+CSS+JSで再現したコードを入手できます。

図4 有名サイトのクローンいろいろ
図4 有名サイトのクローンいろいろ

5. Generate unique SVG design assets | Haikeihttps://haikei.app/

背景画像やパターン画像を作るジェネレーターで、SVGかPNGでダウンロードできます。

波のような形、泡のような形、円や星型などを配置して、色や大きさをカスタマイズできます。

図5 背景画像やパターン画像のSVGジェネレーター
図5 背景画像やパターン画像のSVGジェネレーター

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

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

Tally formshttps://tally.so/

TallyはNotionのようなインターフェイスでフォームを作れるサービスです。シンプルで見た目の洗練されたフォームを簡単に作ることができます。Notionと同様にヘッダ画像やアイコン/ロゴをページの先頭に入れられます。

Notionのようにブロック単位でテキストやフォームの要素を追加していき、あとからドラッグで順番を入れ替えるなど編集も簡単です。ファイルのアップロード、条件分岐、カスタムの完了ページなどもできて、Googleスプレッドシートなどとの連携機能もあります。

サービスのUIもそうですが、サイトにもNotionの影響が感じられます。作ったフォームは「WebサイトかNotionに埋め込める」と記述してあり、やはりNotionを意識しているんだと納得しました。

図6 Notionのようなインターフェイスでフォームを作れるサービス
図6 Notionのようなインターフェイスでフォームを作れるサービス

おすすめ記事

記事・ニュース一覧