共により快適なウェブを実現する
Google では、すべてのユーザーにとって、美しく、アクセスしやすく、高速で、安全なウェブサイトを構築できるよう、クロスブラウザ対応のウェブサイトを作成したいと考えています。このサイトには、Chrome チームのメンバーや外部の専門家が作成した、移行を支援するコンテンツが揃っています。
最新のウェブ テクノロジーで成功を収める方法をご紹介します
革新的な新しいウェブ テクノロジーによって、利用がはるかに容易になったユースケースをご確認ください。
事例紹介
バックフォワード キャッシュが Yahoo!JAPAN ニュースはモバイルでの収益を 9% 増加。
改良点
Baseline の概要
Google I/O 2023 で、Google はベースラインを発表しました。このイニシアチブの詳細と、このイニシアチブが重要である理由をご確認ください。
10 月にウェブ プラットフォームが新しくなりました。
2023 年 9 月に安定版とベータ版のウェブブラウザで提供される、興味深い機能をいくつかご紹介します。
CSS ポッドキャスト
Google のデベロッパー アドボケイトの Una Kravets と Adam Argyle が、CSS の複雑な要素をポッドキャストのわかりやすいエピソードにわかりやすく解説しています。
CSS と UI のデザイン
CSS の詳細
web.dev では、仕事ですぐに活用できるヒントやテクニックを紹介しています。こちらから最新のコンテンツをご覧ください。
CSS を使用してユーザーの好みに合わせてタイポグラフィを調整する
ユーザーがコンテンツを最大限に読みやすくなるように、フォントをユーザーの好みに適応させる方法。
すべての主要エンジンで導入された新しい CSS 色空間と関数
すべての主要なエンジンで、新しい CSS の色空間と関数がサポートされるようになりました。デザインに彩りを与える方法をご覧ください。
ソースマップとは何ですか？
ソースマップによりウェブ デバッグ エクスペリエンスを向上させます。
CSS サブグリッド
Subgrid は、3 つの主要なエンジンすべてで相互運用できるようになりました。この記事では、その使用方法について説明します。
パフォーマンス
ウェブに関する主な指標
Core Web Vitals とその他の指標に関するコンテンツ。ウェブサイトやアプリの高速化を支援します。
Next Paint へのインタラクションを進める
Chrome チームは、INP が試験運用版ではなくなり、2024 年に FID に代わるウェブに関する主な指標となることを発表します。
INP を最適化する方法
Interaction to Next Paint 指標を最適化する方法について説明します。
2023 年の主なウェブに関する主な指標の最適化案
2023 年のウェブの状況に基づいて、ウェブサイトの Core Web Vitals のパフォーマンスを最適化するためのベスト プラクティスのコレクションです。
Core Web Vitals の問題をデバッグするには、Web Vitals 拡張機能を使用します。
Web Vitals 拡張機能で、ウェブに関する主な指標の問題の根本原因を特定できるように、詳細なデバッグ情報が表示されるようになりました。
ウェブアプリ
PWA
優れたウェブ エクスペリエンスを構築します。
PWA について
最新のプログレッシブ ウェブアプリ開発のあらゆる側面を網羅するコースです。
TransformStream がクロスブラウザでサポートされるようになりました。
変換ストリームが Safari、Firefox、Chrome でサポートされ、ついにゴールデン タイムに突入する準備が整いました。
優れたアプリの新しいパターン
クリップボード パターン、ファイル パターン、高度なアプリパターンなど、優れたアプリのための新しいパターンの豊富なコレクションをご確認ください。
Project Fugu API のショーケース
Chrome デベロッパー サイトで、Capabilities API をご覧ください。
ユーザー補助
すべて利用可能
すべてのユーザーがサイトにアクセスできるようにする方法について説明します。
ユーザー補助の詳細
新しいコースは、ユーザー補助に関するトピックの入り口とリファレンスとして最適です。
ウェブデザインのカラー コントラストのテスト
デザインのアクセシビリティの高い色のコントラストをテストおよび検証するための 3 つのツールと手法の概要。
ウェブサイトのメイン ナビゲーションを作成する
このチュートリアルでは、ウェブサイトのアクセス可能なメイン ナビゲーションを作成する方法について説明します。セマンティック HTML、ユーザー補助、ARIA 属性の使用がメリットよりデメリットとなる場合がある仕組みについて学習します。
コミュニティのハイライト - Elisa Bandy
Elisa Bandy は、ウェブ アクセシビリティと社内ツールのドキュメント作成に取り組んでいる Google 社員です。
お支払いと ID
ユーザーのログインと支払いの受け取り
支払いと、ユーザーがアプリに安全にログインできるようにするための最新の手法とベスト プラクティスをご覧ください。
パスワードなしでログインするためのパスキーを作成する
パスキーにより、ユーザー アカウントの安全性、シンプルさ、使いやすさが向上します。
パスキーでログインする
既存のパスワード ユーザーにも対応しながら、パスキーを使用するログイン エクスペリエンスを構築します。
ウェブ決済の概要
ウェブ決済とその仕組みの詳細をご覧ください。
支払いと住所フォームのベスト プラクティス
ユーザーが住所や支払いフォームをすばやく簡単に入力できるようにすることで、コンバージョン数を最大化できます。
デベロッパー向けニュースレター
最新のニュース、テクニック、情報をメールでお届けします。