週刊Webテク通信

2021年8月第2週号1位は、Font AwesomeがデザインツールをFigmaに変えた理由、気になるネタは、Google Nestの新製品、ネットワークカメラとカメラ付きドアホンが2万円台で発売

ネットで見かけた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. コメント機能で簡単にフィードバックができる
図1 Font AwesomeがデザインツールをFigmaに変えた理由
図1 Font AwesomeがデザインツールをFigmaに変えた理由

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を使うと意外と簡単にできることがわかりました。

図2 CSS Shapesを使った画像に沿ったナビゲーション
図2 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で実現する方法と長所と短所などを丁寧に解説していました。

図3 CSSまたはSVGでの切り抜き効果のまとめ
図3 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で文字の太さを指定するための数値との類似性についても考察していました。

図4 フレームワークのカラーシステムの数字について
図4 フレームワークのカラーシステムの数字について

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位ですが、金額的にはあまり高くないと感じます。アメリカがダントツで高額でした。

図5 開発者に調査した人気の言語などを発表
図5 開発者に調査した人気の言語などを発表

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

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

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

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

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

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

図6 静的サイトを簡単に公開できるサービス
図6 静的サイトを簡単に公開できるサービス

おすすめ記事

記事・ニュース一覧