共により快適なウェブを実現する
Google では、すべてのユーザーにとって、美しく、アクセスしやすく、高速で、安全なウェブサイトを構築できるよう、クロスブラウザ対応のウェブサイトを作成したいと考えています。このサイトには、Chrome チームのメンバーや外部の専門����作成した���������を������するコンテンツが揃っています。
Google I/O にご参加いただきありがとうございました
オンデマンド セッションと学習コンテンツをチェックして、作業の効率化、迅速なリリース、インスピレーションの源として Google と Chrome が行っていることをご確認ください。
インタラクションの応答性を測定する新しい方法
サイトの Interaction to Next Paint(INP)のパフォーマンスの測定と最適化を始めましょう。3 月 12 日に Core Web Vitals 指標として正式に採用されました。
改良点
Baseline の概要
Google I/O 2023 で、Google はベースラインを発表しました。このイニシアチブの詳細と、このイニシアチブが重要である理由をご確認ください。
4 月にウェブ プラットフォームを初めて導入しました。
2024 年 4 月に安定版およびベータ版のウェブブラウザでリリースされた興味深い機能をいくつかご紹介します。
CSS ポッドキャスト
Google のデベロッパー アドボケイトである Una Kravets と Adam Argyle は、CSS の複雑な側面を、このポッドキャストのわかりやすいエピソードに喜んで語っています。
CSS と UI のデザイン
仕事に役立つ最新のヒントや手法を今すぐ学びましょう。
CSS を使用してユーザーの好みに合わせてタイポグラフィを調整する
ユーザーの好みに合わせてフォントを調整して、ユーザーがコンテンツをできるだけ読みやすくします。
すべての主要エンジンで導入された新しい CSS 色空間と関数
すべての主要なエンジンで、新しい CSS の色空間と関数がサポートされるようになりました。デザインに彩りを与える方法をご覧ください。
ソースマップとは何ですか?
ソースマップによりウェブ デバッグ エクスペリエンスを向上させます。
CSS サブグリッド
Subgrid は、3 つの主要なエンジンすべてで相互運用できるようになりました。使用方法を確認しましょう。
Core Web Vitals
Core Web Vitals などの指標を把握することで、より高速なウェブサイトやアプリを作成できます。
3 月 12 日に「Interaction to Next Paint」がウェブに関する主な指標に
3 月 12 日より、Interaction to Next Paint が Core Web Vitals として正式に採用され、First Input Delay に代わるものとなります。
INP を最適化する方法
Interaction to Next Paint 指標を最適化する方法について説明します。
2023 年の主なウェブに関する主な指標の最適化案
2023 年のウェブの状況に基づいて、ウェブサイトの Core Web Vitals のパフォーマンスを最適化するためのベスト プラクティスのコレクションです。
Core Web Vitals の問題をデバッグするには、Web Vitals 拡張機能を使用します。
Web Vitals 拡張機能で、ウェブに関する主な指標の問題の根本原因を特定できるように、詳細なデバッグ情報が表示されるようになりました。
プログレッシブ ウェブアプリ
優れたウェブ エクスペリエンスを構築します。
PWA について
最新のプログレッシブ ウェブアプリ開発のあらゆる側面を網羅するコースです。
TransformStream がクロスブラウザでサポートされるようになりました。
変換ストリームが Safari、Firefox、Chrome でサポートされ、ついにゴールデン タイムに突入する準備が整いました。
優れたアプリの新しいパターン
クリップボード パターン、ファイル パターン、高度なアプリパターンなど、優れたアプリのための新しいパターンの豊富なコレクションをご確認ください。
Project Fugu API のショーケース
Chrome デベロッパー サイトで、Capabilities API をご覧ください。
誰でもアクセス可能
障がいのある方(恒久的、一時的、状況的など)がサイトをアクセスしやすくする方法をご確認ください。
ユーザー補助の詳細
新しいコースは、ユーザー補助に関するトピックの入り口とリファレンスとして最適です。
ウェブデザインのカラー コントラストのテスト
デザインのアクセシビリティの高い色のコントラストをテストおよび検証するための 3 つのツールと手法の概要。
ウェブサイトのメイン ナビゲーションを作成する
このチュートリアルでは、ウェブサイトのアクセス可能なメイン ナビゲーションを作成する方法について説明します。セマンティック HTML、ユーザー補助、ARIA 属性の���用がメリットよりデメリットとなる場合がある仕組みについて学習します。
コミュニティのハイライト: Melanie Sumner 氏
デジタル アクセシビリティを専門とするソフトウェア エンジニアである Melanie のインタビューをご覧ください。
お支払いと ID
支払いに関する最新の手法とベスト プラクティスを確認し、ユーザーがサイトやアプリに安全にログインできるようにしましょう。
パスワードレスのログイン用のパスキーを作成する
パスキーにより、ユーザー アカウントの安全性、シンプルさ、使いやすさが向上します。
パスキーでログインする
既存のパスワード ユーザーにも対応しながら、パスキーを使用するログイン エクスペリエンスを構築します。
ウェブ決済の概要
ウェブ決済とその仕組みの詳細をご覧ください。
支払いと住所フォームのベスト プラクティス
ユーザーが住所や支払いフォームをすばやく簡単に入力できるようにすることで、コンバージョン数を最大化できます。
デベロッパー向けニュースレター
最新のニュース、テクニック、情報をメールでお届けします。