Google は、すべてのユーザーがあらゆるブラウザで利用できる、美しく、アクセスしやすく、高速で安全なウェブサイトを構築できるようサポートしています。このサイトには、Chrome チームのメンバーや、ウェブ開発のトピック(ユーザー補助、パフォーマンス、デザインなど)を専門とする外部のエキスパートが執筆した、その取り組みをサポートするコンテンツが掲載されています。
Web Platform Baseline では、ウェブ プラットフォームの機能に対するブラウザのサポートに関する情報を明確にし、現在プロジェクトで使用できるウェブ プラットフォームの機能について明確な情報を提供します。web.dev の記事で、使用されている機能がすべてベースラインの一部である場合、ブラウザの互換性レベルは信頼できます。
AI を活用した高パフォーマンスのウェブファースト エクスペリエンスの理解と構築に役立つリソースをご確認ください。
Interaction to Next Paint(INP)が Core Web Vitals の指標になりました。サイトの INP の測定と最適化を開始します。
本人確認と支払い処理に関する最新機能とベスト プラクティスをご確認ください。
ウェブ プラットフォームは、デベロッパーが使いやすく魅力的なウェブサイトを作成するために使用できる、ブラウザ機能と API の絶え間なく進化するエコシステムです。これらのページは、web.dev のウェブ プラットフォームの各部分を自分のペースで学習するためのパスウェイです。
HTML はウェブのドキュメント レイヤであり、ページの構造とセマンティクスを提供します。
CSS はウェブのプレゼンテーション レイヤであり、ウェブページの外観を思い通りに設定できます。
JavaScript はウェブページに豊富なインタラクティビティをもたらし、デベロッパーはユーザーがタスクを実行して目標を達成するのに役立つ、豊富なインタラクティビティを備えたウェブサイトを構築できます。
ウェブ プラットフォームを初めてご利用になる場合は、ご安心ください。HTML、CSS、JavaScript の初心者向けに厳選されたこれらのコースで、ウェブ プラットフォームの各部分を詳しく学びましょう。
コース
初心者からエキスパート レベルの HTML まで、デベロッパー向けの HTML の概要をしっかりと解説します。
コース
ユーザー補助から Z-Index まで、さまざまなモジュールを備えた CSS のガイドです。
コース
JavaScript の基礎について詳しく解説したコースです。
ウェブ開発に関する最新情報(ウェブ プラットフォームの新しい機能、ベースライン、AI、Core Web Vitals のアップデートなど)は、Google のウェブ開発ブログでご確認ください。最新情報については、ブログをご覧ください。

CSS と UI のデザイン

仕事に役立つ最新のヒントや手法を今すぐ学びましょう。
ユーザーの好みに合わせてフォントを調整して、ユーザーがコンテンツをできるだけ読みやすくします。
すべての主要なエンジンで、新しい CSS の色空間と関数がサポートされるようになりました。デザインに彩りを与える方法をご覧ください。
ソースマップによりウェブ デバッグ エクスペリエンスを向上させます。
Subgrid は、3 つの主要なエンジンすべてで相互運用できるようになりました。使用方法を確認しましょう。

Core Web Vitals

Core Web Vitals などの指標を把握することで、より高速なウェブサイトやアプリを作成できます。
3 月 12 日より、Interaction to Next Paint が Core Web Vitals として正式に採用され、First Input Delay に代わるものとなります。
Interaction to Next Paint 指標を最適化する方法について説明します。
ウェブの状態に基づいてウェブサイトの Core Web Vitals のパフォーマンスを最適化するためのおすすめの方法のまとめ
画像の最適化を超えて、Time to First Byte(TTFB)やリソースの読み込み遅延などの要素を考慮し、Largest Contentful Paint(LCP)の最適化に関する一般的な誤解を探ります。

プログレッシブ ウェブアプリ

優れたウェブ エクスペリエンスを構築します。
最新のプログレッシブ ウェブアプリ開発のあらゆる側面を網羅するコースです。
変換ストリームが Safari、Firefox、Chrome でサポートされ、ついにゴールデン タイムに突入する準備が整いました。
クリップボード パターン、ファイル パターン、高度なアプリパターンなど、優れたアプリのための新しいパターンの豊富なコレクションをご確認ください。
Chrome デベロッパー サイトで、Capabilities API をご覧ください。

誰でもアクセス可能

障がいのある方(恒久的、一時的、状況的など)がサイトをアクセスしやすくする方法をご確認ください。
新しいコースは、ユーザー補助に関するトピックの入り口とリファレンスとして最適です。
デザインのアクセシビリティの高い色のコントラストをテストおよび検証するための 3 つのツールと手法の概要。
このチュートリアルでは、ウェブサイトのアクセス可能なメイン ナビゲーションを作成する方法について説明します。セマンティック HTML、ユーザー補助、ARIA 属性の使用がメリットよりデメリットとなる場合がある仕組みについて学習します。
デジタル アクセシビリティを専門とするソフトウェア エンジニアである Melanie のインタビューをご覧ください。

お支払いと ID

支払いに関する最新の手法とベスト プラクティスを確認し、ユーザーがサイトやアプリに安全にログインできるようにしましょう。
パスキーにより、ユーザー アカウントの安全性、シンプルさ、使いやすさが向上します。
既存のパスワード ユーザーにも対応しながら、パスキーを使用するログイン エクスペリエンスを構築します。
ウェブ決済とその仕組みの詳細をご覧ください。
ユーザーが住所や支払いフォームをすばやく簡単に入力できるようにすることで、コンバージョン数を最大化できます。

デベロッパー向けニュースレター

最新のニュース、テクニック、情報をメールでお届けします。