共により快適なウェブを実現する
Google は、すべてのユーザーがあらゆるブラウザで利用できる、美しく、アクセスしやすく、高速で安全なウェブサイトを構築できるようサポートしています。このサイトには、Chrome チームのメンバーや、ウェブ開発のトピック(ユーザー補助、パフォーマンス、デザインなど)を専門とする外部のエキスパートが執筆した、その取り組みをサポートするコンテンツが掲載されています。
ベースライン
Web Platform Baseline では、ウェブ プラットフォームの機能に対するブラウザのサポートに関する情報を明確にし、現在プロジェクトで使用できるウェブ プラットフォームの機能について明確な情報を提供します。web.dev の記事で、使用されている機能がすべてベースラインの一部である場合、ブラウザの互換性レベルは信頼できます。
AI とウェブ
AI を活用した高パフォーマンスのウェブファースト エクスペリエンスの理解と構築に役立つリソースをご確認ください。
INP を最適化する
Interaction to Next Paint(INP)が Core Web Vitals の指標になりました。サイトの INP の測定と最適化を開始します。
お支払いと ID
本人確認と支払い処理に関する最新機能と����ト ���ラ�������ス���ご確認ください。
ウェブ プラットフォームを確認する
ウェブ プラットフォームは、デベロッパーが使いやすく魅力的なウェブサイトを作成するために使用できる、ブラウザ機能と API の絶え間なく進化するエコシステムです。これらのページは、web.dev のウェブ プラットフォームの各部分を自分のペースで学習するためのパスウェイです。
HTML
HTML はウェブのドキュメント レイヤであり、ページの構造とセマンティクスを提供します。
CSS
CSS はウェブのプレゼンテーション レイヤであり、ウェブページの外観を思い通りに設定できます。
JavaScript
JavaScript はウェブページに豊富なインタラクティビティをもたらし、デベロッパーはユーザーがタスクを実行して目標を達成するのに役立つ、豊富なインタラクティビティを備えたウェブサイトを構築できます。
ウェブ プラットフォームについて学習する
ウェブ プラットフォームを初めてご利用になる場合は、ご安心ください。HTML、CSS、JavaScript の初心者向けに厳��されたこれらのコースで、ウェブ プラットフォームの各部分を詳しく学びましょう。
ウェブ開発の最新情報をチェックする
ウェブ開発に関する最新情報(ウェブ プラットフォームの新しい機能、ベースライン、AI、Core Web Vitals のアップデートなど)は、Google のウェブ開発ブログでご確認ください。最新情報については、ブログをご覧ください。
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 指標を最適化する方法について説明します。
Core Web Vitals に関する主な推奨事項
ウェブの状態に基づいてウェブサイトの Core Web Vitals のパフォーマンス���最適化するためのおすすめの方法のまとめ
LCP の最適化方法に関するよくある誤解
画像の最適化を超えて、Time to First Byte(TTFB)やリソースの読み込み遅延などの要素を考慮し、Largest Contentful Paint(LCP)の最適化に関する一般的な誤解を探ります。
プログレッシブ ウェブアプリ
優れたウェブ エクスペリエンスを構築します。
PWA について
最新のプログレッシブ ウェブアプリ開発のあらゆる側面を網羅するコースです。
TransformStream がクロスブラウザでサポートされるようになりました。
変換ストリームが Safari、Firefox、Chrome でサポートされ、ついにゴールデン タイムに突入する準備が整いました���
優れたアプリの新しいパターン
クリップボード パターン、ファイル パターン、高度なアプリパターンなど、優れたアプリのための新しいパターンの豊富なコレクションをご確認ください。
Project Fugu API のショーケース
Chrome デベロッパー サイトで、Capabilities API をご覧ください。
誰でもアクセス可能
障がいのある方(恒久的、一時的、状況的など)がサイトをアクセスしやすくする方法をご確認ください。
ユーザー補助の詳細
新しいコースは、ユーザー補助に関するトピックの入り口とリファレンスとして最適です。
ウェブデザインのカラー コントラストのテスト
デザインのアクセシビリティの高い色のコントラストをテストおよび検証するための 3 つのツールと手法の概要。
ウェブサイトのメイン ナビゲーションを作成する
このチュートリアルでは、ウェブサイトのアクセス可能なメイン ナビゲーションを作成する方法について説明します。セマンティック HTML、ユーザー補助、ARIA 属性の使用がメリットよりデメリットとなる場合がある仕組みについて学習します。
コミュニティのハイライト: Melanie Sumner 氏
デジタル アクセシビリティを専門とするソフトウェア エンジニアである Melanie のインタビューをご覧ください。
お支払いと ID
支払いに関する最新の手法とベスト プラクティスを確認し、ユーザーがサイトやアプリに安全にログインできるようにしましょう。
パスワードレスのログイン用のパスキーを作成する
パスキーにより、ユーザー アカウントの安全性、シンプルさ、使いやすさが向上します。
パスキーでログインする
既存のパスワード ユーザーにも対応しながら、パスキーを使用するログイン エクスペリエンスを構築します。
ウェブ決済の概要
ウェブ決済とその仕組みの詳細をご覧ください。
支払いと住所フォームのベスト プラクティス
ユーザーが住所や支払いフォームをすばやく簡単に入力できるようにすることで、コンバージョン数を最大化できます。
デベロッパー向けニュースレター
最新のニュース、テクニック、情報をメールでお届けします。