週刊Webテク通信

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

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

ネットで見かけた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 静的サイトを簡単に公開できるサービス

今週の気になるWebネタ

Google Nestの新製品,ネットワークカメラとカメラ付きドアホンが2万円台で発売 - INTERNET Watchhttps://internet.watch.impress.co.jp/docs/news/1342911.html

Google Nestシリーズのドアベルとカメラの新製品が登場して,日本でも発売されるようになりました。スマートドアベル「Google Nest Doorbell」と,屋内外で使用できるスマートカメラ「Google Nest Cam」です。

どちらもWi-Fi/Bluetooth対応のバッテリー式で,配線不要で使用できます。Nest Doorbellはスマートフォンで対応できるので,外出中でも訪問者と対話できます。家で対応するときはGoogle Nest Hubを使うのが良さそうです。

Nest Camは直近3時間以内に発生したアクティビティの動画を保存します。Google Nest Awareという有料サービスを利用すると,最大60日間の動画履歴を保存可能になるとのことです。なお,ワイヤレスで設置が簡単な一方,ドアベルや外に置いたカメラを盗まれないのか心配になります。盗まれる様子の映像は保存されているんでしょうが…。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote