週刊Webテク通信

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

Webテク, Webデザイン, Web広告, CSS, グラデーション, スクリーンショット, 3D, アバター

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

ネットで見かけた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　スクリーンショットなどの画像に背景を付けるサービス

今週の気になるWebネタ

「Vカツ」突然の終了発表 アバターは利用不可に 「体なくなる」ユーザー困惑 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2201/13/news134.html

3Dのアバター作成サービス「Vカツ」が6月30日に終了し，終了後は作ったアバターを使用できなくなると発表されました。VTuberやソーシャルVRで使用しているユーザーは困っているようです。

特にVTuberにとっては，これまで視聴者に親しまれてきた「身体」を失ってしまうということになってしまい死活問題なんですね。「⁠今後お客様にご満足いただけるサービスの提供が困難」が終了の理由とのことですが，どこかが買い取って提供継続という「アタック25」のような展開はないのでしょうか…。

以前，Facebookのアバターが突然デザイン変更して，ユーザーから批判されたことがありました。慣れ親しんだアバターはまさに自分の分身なので，企業の都合で分身が突然使えなくなったり見た目が変わることに批判が集まるのは当然なのでしょう。

Webテク, Webデザイン, Web広告, CSS, グラデーション, スクリーンショット, 3D, アバター

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote