Web界隈の動向を５年ぶりくらいにキャッチアップするメモ 9/29 update!

geek扱いされていたのも早5年以上前になるだろうか。
最近のWeb界隈の動向をキャッチアップするメモ。

デザイン／UI／フロントエンド／ブラウザ

　デザインシステム

2014年にGoogleのMaterial Designというデザインシステムが登場し、
2017年以降に「デザインシステム」という言葉が国内でも使われるようになってきたようだ。デザイン体系や成果物を整理するのに使えそう。
Figma Communityで企業やブランドのデザインシステム資料が公開されている。更にFigma Communityで公開されているデザインシステム資料を見やすくまとめてくれているサイトも。

デザインシステムとは何か

デザインシステムとは？

Design Systems For Figma

個人的UIデザインの情報源まとめ

　プロトタイピングツール：Figma

以前はSketchとAdobe XDの名前をよく目にしていたけど、最近はFigmaの名前を目にする機会が増えている。チームでデザインを進める時にはFigmaがよく使われていそう。コンポーネント管理など、デザインシステムのメンテナンスに使える機能は便利そうだ。

Figmaとは？｜サクッと始めるウェブデザイン【Figma】

Figma vs XD

　アクセシビリティ／WCAG2.2勧告、WCAG3.0草案

一時期仲良くしていたWCAG2.0は2008年勧告
WCAG2.1は2018年勧告、そしてWCAG2.2は2021年勧告。
WCAG3.0草案も登場。

2021年のWebアクセシビリティ

W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス

　Webサイトパフォーマンス計測：Page SpeedとLighthouse

昔はWebサイトパフォーマンス計測ツールといえば、YSlowとPage Speedだったけど、今はLighthouseがよく使われているのかな。Lighthouseは、PWAのパフォーマンス計測用に生まれて、Chromeに統合されたのか。PageSpeed InsightsにもLighthouseが使われているらしい。

ページ表示速度の最適化【超基礎】 ～ブラウザの動き、調査ツール、指標、そして改善方法 | Moz - SEOとインバウンドマーケティングの実践情報

Google、LighthouseをChromeに統合。デベロッパーツールでPWAを検証可能に | 海外SEO情報ブログ

Google製スピード測定ツールのPageSpeed Insightsが分析エンジンにLighthouseを組み込む | 海外SEO情報ブログ

　モバイルブラウザのHTMLレンダリングエンジン

ここは引き続き、iOS SafariがWebKitで、Android ChromeがBlinkか。
昔、利用者の多いサービスのスマホウェブ版を担当していた時に、iOSアップデートでレイアウト崩れやコンバージョン影響が出ることがあったので、特にWebKitのバージョンアップは注意して見ていたっけ。WebKitのWikipediaページにお世話になりつつ、情報更新もしていたなぁ。

　Google サードパーティーCookie廃止を延期

2022年1月に廃止予定だったけど、2023年後半まで延期になったのか。
そしてこちらもヨーロッパの影響が…。

Google 「Cookie廃止」の延期、わかっていることすべて：要点まとめ | DIGIDAY［日本版］

バックエンド／データ

　BaaS(Backend as a Service)：Firebase

2014年のGoogleによるFirebase買収、2016年のFirebaseへのFirebase Analytics導入、2017年にはGoogleがFabricとCrashlyticsを買収してFirebaseに追加。これらを通してモバイルアプリケーションへのFirebase導入が進む。
アプリの分析だと、Google Analytics for Firebaseがよく使われているんだろうか。

Google アナリティクス for Firebaseレポートの見方と10種類のレポートを解説 | はじめての「Google アナリティクス for Firebase」入門

　Google Analytics GA4

2013年くらいにUA(Universal Analytics)が登場して、
2020年には次世代になるGA4(Google Analytics 4)が登場。
GA4とUAでは計測方式が異なり、まだ機能はUAの方が充実しているため、GA4とUAを併用している人が多いだろうか。
GA4は、Cookie廃止への対応や、GDPR(EU一般データ保護規則)やCCPA(カリフォルニア州 消費者プライバシー法)のデータ規則にも対応。ヨーロッパの影響が…。
ひとつびっくりしたのがGA4は無料でBigQuery連携をサポートしていること。無料で生のアクセスログデータを操作できるのは素敵。有料版であるGA360(130万円/月くらい)じゃないと使えなかった機能で、GA360の導入を検討したけど投資対効果に合わなくて導入断念した人には嬉しい機能か。いい時代。

UAとGA4の違い比較まとめと両方併用する方法を詳しく解説！併用のメリットや分析のポイントまで幅広くカバー

　HTTP/2からHTTP/3へ

2015年にHTTP/2が規格化されて、2021年はHTTP/3が規格化へ。

HTTP/3 とは？

ジョブ

　技術系職種の変化：PdM、VPoE、VPoP

身の回りで増えるPdM（Product Manager）とVPoE（Vice President of Engineering）。VPoP（Vice President of Product）ってのもあるのか。
最近だと以下の３つで、技術系職種が構成されているようだ。
技術責任：テックリード→CTO
技術人事責任：エンジニアマネージャー→VPoE
プロダクト責任：PdM→VPoP
CTOは、VPoEとVPoPの上だけでなく、横に位置されることもあるのか。
セールス／マーケティング／カスタマーサクセスの上に位置する
PMM（Product Marketing Manager）ってのも登場。

　UXライティングとテクニカルライティングへの注目の高まり

2020年あたりから目にする機会が増えている「UXライティング」と「テクニカルライティング」。
HCD-Netの「HCD（Human Centered Design）の考え方と基礎知識体系」でも、基本知識の中で「テクニカルライティング」が扱われている。
UXライティングチャレンジ講座はあとで試そう。

UXライティングとは何か

noteの「あつ森」UXライティング解説が大反響！ naoさんに聞く、UXライティング力の鍛え方 | キャリアハック（CAREER HACK）

みんなでUXライティングを改善してみた | 株式会社ヌーラボ(Nulab inc.)

Google社のテクニカルライティングの基礎教育資料がとても良かったので紹介したい - Qiita

LINE社内テクニカルライティング講座第2弾！1文では説明が終わらない文章を書くコツ

HCD-Net「人間中心デザイン（HCD）に関する基礎知識体系を構築」 | HCD認定ニュース | HCD-Net

KOTOBA UX | UXライティングメディア - UXライティング&マイクロコピーで世界をもっと楽しくする。

UXライティングチャレンジ with SPEAKEE | KOTOBA UX オンライン講座

　SRE（サイト信頼性エンジニアリング）に続き、CRE（顧客信頼性エンジニアリング）も増加

Googleが提唱するSite Reliability Engineering（SRE : サイト信頼性エンジニアリング）とCustomer Reliability Engineering（CRE : 顧客信頼性エンジニアリング）。SRE職を見かける機会は増えてきたが、最近はCRE職を設ける企業も出てきているようだ。

Google の新しい専門職 : CRE が必要な理由Google の新しい専門職 : CRE が必要な理由

プライバシー

　GDPR(EU一般データ保護規則)

GDPR違反の罰金
2019/01 Google 約62億円
2021/07 Amazon 約970億円
2021/09 WhatsApp(Facebook) 約290億円
スタートアップのEU離れも進む。

GoogleやAmazonといったデベロッパー向けプラットフォームを提供する企業がGDPR対応を進める中で、プラットフォーム上のサービス仕様もGDPR対応で変わっていく。

キャッチアップはつづく・・・