2021年2月第1週号 1位は、Clubhouseのアイコンにも使われている「スーパー楕円」のボタンの作り方、気になるネタは、いらすとや、2月より毎日更新を一時停止‐「ここ数年、ほとんど休みがなかった」

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

ラメ曲線を使ったスーパー楕円によるボタンの作り方を解説しています。ラメ曲線やスーパー楕円という言葉にはなじみがない人が多いと思いますが、今話題のClubhouseのユーザーアイコンの形といえばピンと来るかもしれません。

この記事でのCSSによるスーパー楕円ボタンの作り方は、角丸を作った上で::beforeと::afterを使って塗り足しています。

スーパー楕円についてはこんな記事もありました。

Flexboxの各プロパティの値を変えることで表示がどうなるかを確認できるページです。できたコードをコピーできます。

下の方にある「flex items」からアイテム数を増減させたりアイテムの高さを変更できます。アイテムの幅も変更したいところですが、それはできません。

SVGアイコンをコーディングする方法を詳しく解説した記事です。

以下の形状を描く方法をレクチャーしています。

デザインチームの使用ツールをFigmaに乗り換えた話です。Figmaはカバーする範囲が広いので、今まで使っていたいくつかのツールをキャンセルし、Figma、Principal、Miroに絞ることでコストダウンになったとのことでした。

乗り換え前、後のツールそれぞれについてコストやFigmaで代替可能かどうかがまとめてあり、参考になります。

Figma用のベクターベースのモックアップのライブラリです。Figma Communityに素材としてアップされています。

iPhone、Galaxy、Apple Watch、iMac、MacBookなどのデバイスと、Safari、Chromeのブラウザウィンドウがありました。

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

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

Numbrはブラウザ上で使える計算機です。文章や式で計算させることができるのば便利なんですが、英語にしか対応していないはずです。

「1+2-3/4*5」のように式を書いて計算できますし、%や^（累乗）なども使えます。通貨計算もできて「$100 in JPY」と書けば100ドルが円でいくらかの結果を表示します。計算機能もあるドキュメント作成ツールでもあり、作ったドキュン面とを共有できます。

文章で計算できるアプリはいくつかあって個人的に気になっていたのですが、有料のものばかりで二の足を踏んでいました。Numbrは機能的にはそれらのアプリに足りてない部分もありますが、無料でブラウザ上で使えるところがありがたいです。

フリーの素材イラストを圧倒的なボリュームで提供している「いらすとや」が1月いっぱいで毎日更新を一時停止し、今後は不定期更新になるそうです。9年間毎日更新して、2万5000点以上のイラストが掲載されているとのことでした。

印刷物、プレゼンデータ、テレビ番組でのテロップ、店頭POPなど、日本中に浸透しているいらすとやですが、今回の更新一時停止のニュースでその存在を知った人も多そうです。更新停止は残念な気もしますが、もう十分素材は揃っているので利用者にはあまり影響はなさそうです。

誰でも描けるようで描けないあのイラストは、とてもクオリティが高いとわたしは思っています。キーワードを連想させるイラスト素材という意味でも、とてもよくできたものが多く感心させられます。これまで更新お疲れ様でした。