週刊Webテク通信

2021年2月第2週号 1位は，いまならCSSだけでできること，気になるネタは，Twitterの音声チャットルーム「Spaces」を日本でいち早く体験--Clubhouse対抗になりうるか

Webテク, Webデザイン, Web広告, CSS, z-index, Sketch, SVG, SNS, 音声チャット

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2021年2月1日～2月7日の間に見つけた記事のベスト5です。

1. Things You Can Do With CSS Today — Smashing Magazinehttps://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/

いまならCSSだけでできることをまとめた記事です。CSSの新しいプロパティと便利な利用法を紹介しています。

レンガ組みレイアウト，テキストのアンダーラインの太さや色，ページ内リンクでスクロールしたときの上マージンなど，CSSだけでこんなこともできるようになったんだという発見があります。

:isセレクタやclamp()関数の利用法も興味深いです。

図1　いまならCSSだけでできること

図1　いまならCSSだけでできること

2. 3 Essential Design Trends, February 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/02/3-essential-design-trends-february-2021/

Webデザインのトレンドを3つ紹介しています。

  • 伝統的ではないナビゲーション
  • 手書きのサインのようなマーク
  • 流体のような形状

図2　3つのデザイントレンド

図2　3つのデザイントレンド

3. z-index by examples | juliu.ishttps://juliu.is/z-index-by-examples/

z-indexの使い方について，段階を追って細かく解説した記事です。CSSの設定による上下関係の変化を図で確認できます。

意外と思ったとおりにならないことも多い，z-indexについての理解を深められるはずです。

図3　z-indexの使い方を細かく解説

図3　z-indexの使い方を細かく解説

4. Sketch App Sources - Free design resources and plugins - Icons, UI Kits, Wireframes, iOS, Android Templates for Sketchhttps://www.sketchappsources.com/

Sketch用の無料素材を配布しています。素材はユーザーの投稿によって集めているようです。素材を提供するユーザーにとっては自分のPRの場となり，このサイトは有料のコンテンツへの誘導などで利益を得ているようです。

UIキット，ワイヤーフレーム，モックアップ，アイコンなどカテゴリ別に大量の無料素材があります。Sketch形式のファイルしかありませんが，SketchファイルはFigma，Adboe XDでも開けるので，ほとんどの人が利用できるはずです。

図4　Sketch用の無料素材の配布サイト

図4　Sketch用の無料素材の配布サイト

5. Glassmorphism CSS Generatorhttps://glassmorphism.com/

グラスモーフィズムのジェネレーターです。くもりガラスをかぶせたような効果をつくり，CSSをコピーできます。

ぼかし，透明度，色をカスタマイズできます。

図5　グラスモーフィズムのジェネレーター

図5　グラスモーフィズムのジェネレーター

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

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

SVG Waves - Instantly generate waveshttps://www.svgwaves.io/

Webページ内のセクションを区切る曲線をSVGで作るジェネレーターです。一見シンプルなUIですが，カスタマイズ性はかなり高くて驚きました。

曲線の谷となる部分は直接ドラッグして位置を変えられます。谷，あるいは山となる頂点の部分はいくつでも増やせるので，だいたい思い通りの形が作れるはずです。横幅に合わせてレスポンシブに変化します。

曲線ではなく直線でギザギザな形も作れます。そのままdivの領域に適用したい場合には，生成されたCSSをコピーして使うだけです。反転や回転させるためのCSSの記述例も載っていました。

図6　SVGで作る曲線ジェネレーター

図6　SVGで作る曲線ジェネレーター

今週の気になるWebネタ

Twitterの音声チャットルーム「Spaces」を日本でいち早く体験--Clubhouse対抗になりうるか - CNET Japanhttps://japan.cnet.com/article/35166096/

Clubhouseがブームといえるような盛り上がりを見せていますが，Twitterの音声チャット機能「Spaces（スペース⁠）⁠」もベータテストが始まっています。基本的な作りと見た目はClubhouseと似ていますね。

Twitterに追加される機能なので，Clubhouseのように招待がいらないのはもちろん，すでにTwitterを使っていれば新規ユーザー登録も不要なハードルの低さが良いですね。しかも日本語化されている点がClubhouseより大きなアドバンテージになりそうです。

Clubhouseがネットのみならずテレビなどでも大きく取り上げられたので，音声SNSというものの認知がかなり広がったはずです。その上でのSpacesの登場は話題性もありますし，電話番号での招待と本名での登録に抵抗のあった人も手軽に始められそうで，利用者数はかなりの規模になることでしょう。

Webテク, Webデザイン, Web広告, CSS, z-index, Sketch, SVG, SNS, 音声チャット

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote