Frontend Weekly 2025-05-16

2025年5月16日

Safari 18.5のDeclarative Web Pushやバグ修正、Material 3 ExpressiveによるAndroid 16・Wear OS 6のパーソナライズ性・新UI・新コンポーネント・モーション強化、Figma Config 2025のFigma Make・Sites・Grid・Draw・Buzzなど新機能について。

Table of Contents

# Safari 18.5リリース
# Declarative Web Push on macOS
# Material 3 Expressive登場
# Figma Config 2025 新機能
# Figma Make
# Figma Sites
# Grid
# Figma Draw
# Figma Buzz

Safari 18.5リリース

日付：2025年5月12日

Safari 18.5がリリース。Declarative Web PushがmacOSで利用可能になった他、バグ修正やWeb Extensionsの改善も行われている。

出展：WebKit Features in Safari 18.5

Declarative Web Push on macOS

Declarative Web PushがmacOSで利用可能になった。Service Worker不要でWeb Push通知を実装できる。バッテリー効率とプライバシーが向上し、標準化されたJSON形式で通知を送信可能。従来のWeb Pushと異なり、通知表示の失敗による制限やペナルティが不要。未対応ブラウザにも後方互換性あり。

次のようにService Workerを使わずにWeb Push Subscriptionを管理できる。

const subscription = await window.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: arrayForPublicKey
});

通知は次のように標準化されたJSON形式が用いられる。これにより未対応ブラウザでは従来通りService Workerで処理される

{
   // RFC 8030に由来する識別子
  "web_push": 8030,
  "notification": { 
    "title": "Webkit.org — Meet Declarative Web Push",
    "lang": "en-US",
    "dir": "ltr",
    "body": "Send push notifications without JavaScript or service worker!",
     // 通知クリック時の遷移先URL
    "navigate": "https://webkit.org/blog/16535/meet-declarative-web-push/",
    "silent": false,
    "app_badge": "1"
  }
}

参考：

Material 3 Expressive登場

日付：2025年5月13日

Android 16とWear OS 6でMaterial 3 Expressiveが導入。端末のパーソナライズ性が大幅に向上し、ダイナミックカラーや強調されたタイポグラフィ、スムーズなアニメーションが特徴。通知やクイック設定のカスタマイズ性も強化され、Googleアプリ全体にビジュアルの一貫性が広がる。

Material 3 ExpressiveはMaterial Design 3の進化形であり、「M4」ではなく既存M3の拡張版。より感情に響くUXを目指し、色・形・動きが大胆に進化。ユーザーリサーチを重ね、主要UI要素の視認性や操作性も向上している。

次の変更が行われている。

TopAppBarがAppBarに変更。Search app bar追加、Medium/Large app bar廃止
ボタンやFABのサイズ・形状バリエーション拡充
新しいToolbarやFAB menu、Split buttons、Loading indicator、Button groupsなど新規コンポーネント追加
モーションは物理ベースのSpringアニメーションを導入し、より自然で滑らかな動きに
タイポグラフィやシェイプも強調・多様化

出展：Building with Material 3 Expressive

Figma Config 2025 新機能

日付：2025年5月7日

Figmaの年次カンファレンス「Config 2025」で、デザイン・プロトタイピング・Web制作・ブランド運用を大きく進化させる新機能が発表された。

出展：Config 2025

Figma Make

AIプロンプトでデザインやプロトタイプを自動生成・編集できる新機能。自然言語でUIやインタラクションを作成・検証でき、アイデア検証が高速化。

参考：Figma Make

Figma Sites

Figma上でレスポンシブなWebサイトをデザイン・プロトタイプ・公開まで一貫して行える。32個のテンプレートが利用でき、アニメーションにも対応。ノーコードCMSやブレークポイント、パララックスなどのインタラクション設定も可能。

ただし、カスタムドメイン設定やSEO・OGPなどの細かな設定は現状できず、複雑なページ構成やナビゲーションも困難。現状では本番利用には適していない。

参考： Figma Sites

Grid

1クリックでグリッド構造を適用できる新レイアウト機能。複雑なレイアウトやチャート、グラフも簡単に設計でき、要素のドラッグ＆ドロップやリアルタイムなサイズ変更に対応。

Figma Draw

本格的なベクター編集機能。ブラシ、塗り、エフェクト、強化されたパス編集、パターンやテクスチャ、テキストオンパスなど、イラストやアイコン制作もFigma内で完結。

参考：Figma Draw

Figma Buzz

ブランドテンプレートを用いたSNS投稿・広告バナー・ポスターなどの大量生成を可能にする機能。AIによる画像生成やデータ統合も備え、ブランドガイドラインを反映したテンプレート活用が可能。

参考：Figma Buzz