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

1. 10 Reasons We Switched to Figma For Icon Designhttps://blog.fontawesome.com/figma-for-icon-design/

Font Awesomeがアイコンデザインに使うツールをFigmaに変えた理由を解説しています。

1. 図形を結合・合成（Illustratorのパスファインダー）したあと再編集できる
2. ベクトルパスは始点、終点、角ごとに別々の形状を設定できる
3. フレーム（アートボードと似たもの）にスタイルを設定できて、入れ子にもできる
4. コンポーネントでデザイン要素の再利用が簡単になる
5. バリアントによりコンポーネントの別バージョンが作れる
6. グリッドにスナップする機能が優れている（1/2ピクセル単位でスナップするなど）
7. 矢印キーでどれだけ移動するか（ナッジの量）をカスタマイズできる
8. ベクターネットワークは新しいスタンダード
9. プラグインが新たな機能を追加してくれる
10. コメント機能で簡単にフィードバックができる

2. Using CSS Shapes for Interesting User Controls and Navigation | CSS-Trickshttps://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/

CSS Shapesを使って、画像に沿ってテキストが並ぶレイアウトを実現する方法を紹介した記事です。shape-outsideプロパティに透過の画像を指定すれば、その画像の形に沿ってテキストを回り込ませることができます。

Wikipediaのトップページのような、円形の周りに沿ってメニューが並んでいるレイアウトも、CSS Shapesを使うと意外と簡単にできることがわかりました。

3. Thinking About The Cut-Out Effect: CSS or SVG? - Ahmad Shadeedhttps://ishadeed.com/article/thinking-about-the-cut-out-effect/

CSSまたはSVGでの切り抜き効果を研究した結果をまとめた記事です。ある図形の上に、別な図形を重ねてくり抜く方法について考察しています。

丸くトリミングしたアイコン画像に丸いインジケーターを重ねるときの処理など、いくつかの例をCSSやSVGで実現する方法と長所と短所などを丁寧に解説していました。

4. The numeric colour palettes in modern web frameworks explained | Stefan Bauer - N8Dhttps://n8d.at/the-numeric-colour-palettes-in-modern-web-frameworks-explained

フレームワークでの色に付いている数字はどこから来ているかを探った記事です。マテリアルデザイン、Bootstrap、Tailwind CSSのカラーシステムは、数値で色の明るさを指定するようになっています。

CSSで文字の太さを指定するための数値との類似性についても考察していました。

5. The State of Developer Ecosystem in 2021 Infographic | JetBrains: Developer Tools for Professionals and Teamshttps://www.jetbrains.com/lp/devecosystem-2021/

世界183カ国、31,743人の開発者が参加した調査の結果をまとめています。人気の言語と順位の推移、国ごとの人気の言語、開発者の男女比や国ごとの年俸などがわかります。

HTML／CSSはプログラミング言語ではないけれどと注意書きした上で各ランキングに登場していて、言語としてはJavaScriptに次ぐ2位になっていました。

なお、女性の開発者率は日本が最下位ですが、ほかも似たり寄ったりの数字でした。年俸（の中央値）で日本は5位ですが、金額的にはあまり高くないと感じます。アメリカがダントツで高額でした。

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

• Apple、児童保護目的でユーザーの「メッセージ」とiCloudの「写真」の画像検出を実施へ - ITmedia NEWS
  Appleが画像そのものを目視することはないそうです
• エンジニアに愛されているエディタ、第1位は？ | TECH+
  予想通りVisual Studio Codeが圧倒的な1位でした
• グリー、メタバース事業に参入--100億円規模の事業投資で数億ユーザーを目指す - CNET Japan
  Facebookが注力するメタバース事業にグリーも参入するようです

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

Static Website Hosting - Static.apphttps://static.app/

Staticは静的なWebサイトを簡単に公開できるサービスです。Netlifyと同様の操作感で、サイトのファイル一式をzip形式でアップロードするだけで公開できます。

無料版でもページ数の制限なく使えて、アップロードもページの表示も速いです。アップロードしたファイルは管理画面から複製や削除できますし、HTMLやCSSの編集がオンライン上で可能なのも便利です。

さらにフォーム機能もあって、フォームの送信内容はデータベースに保存されます。制作途中のWebサイトの表示確認用に重宝しそうですし、静的サイトのホスティングにも有力な候補になりそうです。