週刊Webテク通信

2022年1月第3週号1位は、扇形グラデーションと放射グラデーションを細かく解説、気になるネタは、「Vカツ」突然の終了発表 アバターは利用不可に 「体なくなる」ユーザー困惑

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

1. A Deep CSS Dive Into Radial And Conic Gradients — Smashing Magazinehttps://www.smashingmagazine.com/2022/01/css-radial-conic-gradient/

conic-gradient(扇形グラデーション)とradial-gradient(放射グラデーション)の2つのCSSグラデーションについて細かく解説した記事です。

どのように機能するか、相違点と類似点、どういうケースでどのように使用するかを解説しています。また、それぞれのグラデーションの使用例もいくつか紹介してあり参考になります。グラデーションだけでなくパターンとして使う方法やアニメーションさせる方法もありました。

この記事内で紹介されていたConic.cssというconic-gradientのライブラリも便利そうです。

図1 扇形グラデーションと放射グラデーションを細かく解説
図1 扇形グラデーションと放射グラデーションを細かく解説

2. The 10 biggest design trends you need to know in 2022 | Dribbble Design Bloghttps://dribbble.com/stories/2022/01/11/design-trends-2022

2022年に知っておく必要のあるデザイントレンドを10個まとめた記事です。

  1. ダークモード
  2. コーポレートメンフィス(フラットで幾何学的な形状を使ったイラスト)の進化
  3. タイポグラフィ中心のランディングページ
  4. メタバースへの準備
  5. より深いコラボレーション
  6. 遊び心とノスタルジー
  7. 物語に触発されたタイポグラフィ
  8. インタラクティブな教育
  9. デジタルのファッション体験
  10. インクルーシブ(包括的な/多様性を尊重した)なデザイン素材
図2 2022年に知っておく必要のあるデザイントレンド10個
図2 2022年に知っておく必要のあるデザイントレンド10個

3. 3 Essential Design Trends, January 2022 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/01/3-essential-design-trends-january-2022/

2022年1月のデザイントレンドを3つ紹介しています。

  1. NFTウェブサイト
  2. テキストベースのヒーローヘッダー
  3. 緻密なイラストレーション
図3 2022年1月のデザイントレンドを3つ
図3 2022年1月のデザイントレンドを3つ

4. 10 Best CSS Code Generators for 2022 | by Imia Hazel | Jan, 2022 | Bootcamphttps://bootcamp.uxdesign.cc/10-best-css-code-generators-for-2022-e9d0b8835e90

CSSをブラウザ上で生成するジェネレーターを10個紹介した記事です。

アニメーション、グラデーション、グリッド、シャドウなどのジェネレーターが紹介されています。見たことのあるジェネレーターが多く、厳選してお勧めのものを取り上げているのだと感じました。

図4 CSSのジェネレーター10選
図4 CSSのジェネレーター10選

5. Simple.csshttps://simplecss.org/

クラスレスのCSSフレームワークです。4KBと軽量でレスポンシブやダークモードにも対応しています。

そのまま使っても良いですし、これをベースにカスタマイズして利用するのも便利そうです。

図5 クラスレスのCSSフレームワークSimple.css
図5 クラスレスのCSSフレームワークSimple.css

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

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

Pika – Create beautiful screenshots quicklyhttps://pika.rishimohan.me/

Pikaはスクリーンショットなどの画像に背景を付けるサービスです。スクリーンショットをちょっとかっこよくSNSにアップするのに役立ちそうです。

背景はあらかじめ用意されたグラデーションなどから選べ、色はカスタマイズ可能です。画像にタイトルバーを付けてウィンドウっぽくしたり、角丸やシャドウの調整もできます。

アップロードした画像に合わせて余白(=背景が表示される部分)を調整できますし、正方形の画像にも仕上げられます。前回紹介した、背景画像の上にテキストを載せたグラフィックスを作れるGraaphicsとも似てますが、SNS用画像を簡単に作るサービスに需要があるということなのでしょう。

図6 スクリーンショットなどの画像に背景を付けるサービス
図6 スクリーンショットなどの画像に背景を付けるサービス

おすすめ記事

記事・ニュース一覧