週刊Webテク通信

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

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

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

1. How to create a super-ellipse CSS button based on Lamé curve | by Cohan Carpentier-Larivière | codebursthttps://codeburst.io/how-to-create-a-super-ellipse-css-button-based-on-lamé-curve-1b5c246506c3

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

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

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

図1 スーパー楕円によるボタンの作り方

図1 スーパー楕円によるボタンの作り方

2. Flexbox-Guidehttps://flexbox-guide.vercel.app/

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

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

図2 Flexboxの表示を確認できるガイドページ

図2 Flexboxの表示を確認できるガイドページ

3. SVG Tutorial: How to Code SVG Icons by Hand | Aleksandr Hovhannisyanhttps://www.aleksandrhovhannisyan.com/blog/svg-tutorial-how-to-code-svg-icons-by-hand/

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

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

  • Lines(線)
  • Polylines(ポリライン)
  • Circles(円)
  • Polygons(多角形)
  • Curved paths(曲がったパス)

図3 SVGアイコンをコーディングする方法

図3 SVGアイコンをコーディングする方法

4. How we migrated our design team to Figma | by Alexander Fandén | Jan, 2021 | UX Collectivehttps://uxdesign.cc/how-we-migrated-our-design-team-to-figma-42f7c15892ff

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

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

図4 デザインチームの使用ツールをFigmaに乗り換えた話

図4 デザインチームの使用ツールをFigmaに乗り換えた話

5. Vector Mockups Library 3.0 – Figmahttps://www.figma.com/community/file/932988441106466941

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

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

図5 Figma用のベクターベースのモックアップのライブラリ

図5 Figma用のベクターベースのモックアップのライブラリ

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

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

Numbr https://numbr.dev/

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

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

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

図6 式や文章から計算するブラウザ上で使える計算機

図6 式や文章から計算するブラウザ上で使える計算機

今週の気になるWebネタ

いらすとや,2月より毎日更新を一時停止‐「ここ数年,ほとんど休みがなかった」 | TECH+https://news.mynavi.jp/article/20210125-1671887/

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

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

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

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote