2022年7月の、これだけは押さえておきたいWeb関連の動き

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。

デザイン・Figma

「Figma」日本語版が公開　デザインコラボツール大手　ヤフー、LINE、楽天などがすでに導入

7月の大きなニュースはFigmaの日本語化かと思います。
Figmaは世界で最も使われているUIデザインツールです。メニューなどのUIが英語のみであることが日本での普及を妨げていると思っていましたが、7月に日本語UIが選べるようになりました。

Figmaがついに日本語UIに対応しました！ https://t.co/r3YxL0NZpH にアクセスしてログイン後、右上のユーザーアイコンクリックして［Settings］から［Change languages］→［日本語］→［Save］で日本語UIに変わりました。
アプリは再起動が必要かもしれません。 pic.twitter.com/RUqsPD5cwT

— なつき@Webスクール動画開催 (@Stocker_jp) July 27, 2022

さらにヘルプやドキュメントも日本語化されており、FigmaとAdobe XDの比較 – Figmaはどこが違うのか? などの記事も日本語になっています。

コーディング・HTMLとCSS

2022年のモダンCSS改

CSS Gridを使用した中央揃えなどのやり方の解説。

最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ

Appleのヘッダー、ぼかしだけでなく彩度が高くなっている気はしてましたが、気のせいではなかったのですね。

Safari開発版がAVIF画像形式に対応: Release Notes for Safari Technology Preview 149

これは英文記事ですが、重要なのは「Safari開発版でAVIFとよばれる新しい画像形式がサポートされるようになった」ということです。
記事には次のように書かれています: Added support for AVIF images on macOS Ventura and iOS 16

最近はJPEG画像形式よりも圧縮効率の良いWebP画像形式への置き換えが進み始めていましたが、AVIF画像形式はWebPより圧縮効率が良いため、WebPを飛ばしてAVIFへの置き換えが一気に進むのでは？と気になりました。

ChromeやFirefoxは既にAVIFをサポートしており、Safariが対応すればほとんどのモダンブラウザーは対応完了することになります。
ただし、Microsoft EdgeはChromiumエンジンなのになぜかAVIFをサポートしておらず、Windows 10の場合Microsoft Storeから以下の拡張機能をインストールする必要があります。

リンク: AV1 Video Extension – Microsoft Store Apps

JPEGやPNGなどをAVIFに変換するには、以下のWebアプリに画像をドラッグで変換できます。

リンク: AVIF Converter – unlimited free conversions | avif.io ✨

Webブラウザーで表示するには、以下のHTMLを参考にしてください。
以下のHTMLでは、AVIFに非対応のWebブラウザーでは image.avif の代わりに image.jpg が表示されます。