Google chrome icons created by Pixel perfect – Flaticon
今回は、Web制作に携わるクリエイターの皆さんにとって、とっても大切な情報をお届けします。2025年6月24日にリリースされた「Chrome 138」！このアップデートには、Web制作の効率を上げたり、新しい表現にチャレンジしたりできるワクワクする機能がたくさん詰まっているんです。
特に注目してほしいのは、CSSの新機能やJavaScript APIの進化、そしてWebのセキュリティをより強固にするための重要な変更点です。私もこれらの新機能を見た時、思わず「おぉ！これは使える！」と声が出ちゃいました。クリエイティブな時間を最大限に活用するためにも、AIの進化と並行してブラウザの進化もキャッチアップしていきましょう！
Web制作の効率を爆上げ！CSSの新機能に胸アツ！
今回のChrome 138には、Webデザインの表現力を高めつつ、より効率的にコーディングできるCSSの新機能がいくつも追加されました。
CSSの数学関数：abs() と sign() で計算が楽に！
CSSに新しく追加されたabs()とsign()関数は、まるでプログラミング言語のようです。
abs(A): 入力値Aの絶対値を返します。例えば、要素の配置を柔軟に調整したい時や、特定の条件下でマイナスの値をプラスに変換したい時などに便利ですね。sign(A): 入力値Aが負なら-1、正なら+1、0なら0を返します。これを使えば、要素の増減や状態に応じてスタイルを動的に切り替えるといったことが、CSSだけでスマートにできるようになります。
これまでJavaScriptでゴリゴリ書いていたような表現が、CSSだけで完結するようになるなんて、本当に驚きですよね！コード量も減らせて、まさに時短に繋がります。
注目ポイント📌
📐 数値の計算がCSS内で完結
💡 JavaScriptとの連携がよりスムーズに
✍️ コードの記述量削減に貢献
progress()関数でアニメーションの進捗を操る！
progress()関数は、Webアニメーションをより直感的に、そして柔軟に制御できるようになる魔法のような機能です。2つの数値の間の進捗を返してくれるので、スクロール量に応じて要素が変化したり、時間の経過とともにアニメーションが段階的に進んだりするような表現が、より簡単に実装できるようになります。
注目ポイント📌
🚀 スクロールや時間ベースのアニメーションに最適
🎨 複雑なアニメーション表現の可能性を広げる
⏱️ スムーズなUI/UXの実現に貢献
sibling-index()とsibling-count()で兄弟要素をスタイリング！
個人的に「これは使える！」と強く感じたのが、sibling-index()とsibling-count()です。これらの関数を使えば、HTMLの構造を意識したスタイリングが格段に楽になります。
sibling-index(): 兄弟要素の中でその要素が何番目か（インデックス）を返します。sibling-count(): 兄弟要素の合計数を返します。
これらをcalc()と組み合わせることで、例えば「偶数番目のリストアイテムだけ背景色を変える」「全兄弟要素の数に応じて、各要素の幅を調整する」といったことが、よりシンプルに実現できます。JavaScriptでループを回してクラスを付与したり、CSSの複雑な疑似セレクタを駆使したりする必要がなくなるのは、クリエイターにとって大きな福音です！
注目ポイント📌
🗂️ 兄弟要素の順番や数でスタイルを制御
✨ レイアウトの柔軟性が向上
✂️ JavaScriptや複雑なCSSセレクタの削減に貢献
stretchキーワードで要素をマージンごと広げる！
CSSのサイジングプロパティ（widthやheightなど）に新しく追加されたstretchキーワードは、要素を親要素の利用可能なスペースにぴったりと広げつつ、マージンは保持してくれる優れものです。これまでは100%で広げてからマージンを調整する必要がありましたが、stretchを使えばその手間が省けます。デザインの意図をよりシンプルにCSSで表現できるようになりますね。
注目ポイント📌
📏 要素のサイズ調整がより直感的に
📐 マージンを保持したまま要素を拡張
🚀 レスポンシブデザインの効率化に貢献
OSレベルのフォントスケールをCSSで検出！
ユーザーがOSの設定でフォントサイズを変更した場合、Webページ側でそのスケールをCSSで検出できるようになる環境変数（env）が追加されました。これまでは、ユーザーのOS設定に合わせたフォントサイズの調整が難しかったのですが、この機能を使えば、よりアクセシブルでユーザーフレンドリーなWebサイトをデザインできるようになります。誰もが快適に利用できるWeb環境を作るために、私たちデザイナーが意識すべき重要なポイントですね。
注目ポイント📌
♿ アクセシビリティの向上に貢献
🖥️ OS設定に合わせたフォント調整が可能に
💖 ユーザーフレンドリーなWebサイト制作を支援
クリエイターの未来を変える！？AI関連APIの進化
ブラウザで翻訳！Translator API & Language Detector API
新しいJavaScript APIとして、Translator APIとLanguage Detector APIが追加されました。
- Language Detector API: テキストの言語を高い精度で検出します。
- Translator API: 言語翻訳機能を提供します。
これらがブラウザに組み込まれることで、Webサイト内で多言語対応がよりスムーズになったり、ユーザーが入力したテキストの言語を自動で検出し、適切な翻訳を提供したりすることが容易になります。私たちクリエイターが多言語対応のサイトを構築する際に、外部の翻訳サービスに頼る手間が省け、作業効率が格段に向上する可能性があります。海外のクライアントとのやり取りも、これでスムーズになるかも！？
注目ポイント📌
🌍 グローバルなWeb制作が容易に
⏱️ 翻訳作業の効率化
🤝 ユーザー体験の向上
テキスト要約もブラウザで！Summarizer API
さらに驚きなのが、Summarizer APIの登場です！これは、入力されたテキストの要約を生成するJavaScript APIで、AI言語モデルを基盤としています。ブラウザが言語モデルにアクセスできるようになることで、わざわざ重い言語モデルをダウンロードしたり、サードパーティのAPIにテキストを送信したりする必要がなくなります。
これにより、例えば長文のブログ記事やレポートを自動で要約して表示したり、ユーザーからのフィードバックを素早くまとめて分析したりといったことが、ブラウザ内で完結できるようになります。コンテンツの消費を助け、情報を効率的に伝える手助けをしてくれるでしょう。私たちクリエイターが情報整理やコンテンツ作成にかける時間を短縮し、より本質的なデザインや表現に集中できる、まさに夢のような機能です！
注目ポイント📌
📝 長文コンテンツの要約を自動化
🧠 情報整理の効率化
💡 新しいコンテンツ表現の可能性を拡大
AI関連APIの賢い活用術とクリエイターへの価値
これらのAI関連APIは、私たちクリエイターにとって「単純作業の自動化」という点で大きなメリットをもたらします。しかし、その価値は単なる効率化に留まりません。
1. 効率化による本質的創造活動への時間投資
- 多言語対応の効率化: 例えば、私がデザインしたポートフォリオサイトを多言語展開したい場合、これまで外部の翻訳ツールを使い、その結果をコピー＆ペーストする作業はかなりの手間でした。しかし、Translator APIやLanguage Detector APIを使えば、Webページ内で動的に翻訳・表示が可能になり、その手間が劇的に減ります。その浮いた時間で、私は新しいデザインのアイデアを練ったり、より質の高いビジュアルコンテンツの制作に集中できます。
- 情報収集・整理の加速: Summarizer APIは、大量の調査資料やトレンド記事から 핵심（核心）を素早く把握するのに役立ちます。クライアントからの長い要望書も、要約APIを使えば重要なポイントを即座に抽出できます。これにより、リサーチにかかる時間を短縮し、企画やデザインのコンセプトメイキングといった創造的なフェーズに、より深く時間を投入できるようになります。
2. 新しいユーザー体験とアクセシビリティの向上
- パーソナライズされた体験: Language Detector APIは、ユーザーの言語を自動判別し、最適な言語でコンテンツを表示するといったパーソナライズされた体験を簡単に提供できるようになります。これは、ユーザーエンゲージメントの向上に直結します。
- コンテンツアクセシビリティの向上: Summarizer APIは、情報を簡潔に伝えることで、情報過多の現代においてユーザーが求める情報にアクセスしやすくします。特に、識字障害を持つ方や、短時間で情報を得たいユーザーにとって大きな価値となるでしょう。
3. AIとの「協働」による創造性の拡張
これらのAPIは、AIが私たちの「秘書」のように機能することを示しています。翻訳の草案作成、長文の要約、言語の自動判別といった地味ながらも時間のかかるタスクをAIが肩代わりすることで、私たちはより「人間らしい」クリエイティブな思考に集中できます。
例えば、海外のデザイン事例をリサーチする際に、翻訳APIを使えば言語の壁を感じることなく、膨大な情報を効率的に吸収できます。Summarizer APIで要点を掴んだ上で、インスピレーションを得た部分を深く掘り下げるといった使い方も可能です。AIは、私たちの思考を阻害する「ノイズ」を取り除き、創造的な「本質」に到達するための道筋を照らしてくれる存在なのです。
なぜこれらのAI関連APIが選ばれるのか？：デザイナーの視点と客観的分析
私のデザイナーとしての視点と客観的な意見を交えて考察すると、これらのブラウザネイティブのAI関連APIが選ばれる理由は多岐にわたります。
- ブラウザネイティブの統合によるシームレスな体験:
最も大きな利点は、AI機能がブラウザに直接組み込まれることでしょう。これまでAIを活用しようとすると、外部のAPIサービスを利用したり、重いJavaScriptライブラリを読み込んだりする必要がありました。しかし、ブラウザネイティブのAPIであれば、そのような手間が省け、よりスムーズで高速な動作が期待できます。ユーザーは外部サービスへの遷移なしに翻訳や要約の恩恵を受けられ、開発者も煩雑なAPI連携の実装から解放されます。これは、Webサイト全体のパフォーマンス向上にも繋がり、ひいてはユーザー体験の質を高めます。 - プライバシーとセキュリティへの配慮:
AI処理がブラウザ内で完結するという点は、プライバシーとセキュリティの観点からも非常に重要です。ユーザーのデータが外部のサーバーに送信されるリスクが低減されるため、特に個人情報や機密性の高い情報を扱うWebアプリケーションにおいて、ユーザーからの信頼を得やすくなります。これは、GDPRやCCPAといったデータプライバシー規制が厳しくなる現代において、Webサービスを提供する上で欠かせない要素です。 - 開発の手軽さと普及の加速:
JavaScript APIとして提供されるため、Web開発者は既存のHTML、CSS、JavaScriptのスキルセットを活かしてこれらのAI機能をWebサイトに組み込むことができます。新しいプログラミング言語や複雑なフレームワーク、あるいは高額な外部APIの契約を学ぶ必要がないため、AI機能の導入に対する心理的・技術的ハードルが大幅に下がります。これにより、WebにおけるAI活用の普及が加速し、より多くのクリエイターがAIを自身のクリエイティブプロセスに取り入れるきっかけとなるでしょう。 - GoogleのWeb標準への貢献と影響力:
これらのAI関連APIは、Googleが開発・提供するChromeブラウザに実装されるものです。Googleは、世界最大級のテクノロジー企業であり、検索エンジン、Android、YouTubeなど、多岐にわたるサービスを展開しています。AI技術の研究開発にも多大な投資を行っており、その成果が今回のAPIにも表れています。彼らは、Web技術の標準化団体であるW3Cなどにも積極的に貢献しており、Chromeブラウザを通じて最先端のWeb技術を広く普及させる影響力を持っています。GoogleがこれらのAI機能をブラウザに搭載することは、Webプラットフォーム全体のAI活用を推進する強力なシグナルであり、将来的に他のブラウザにも同様の機能が実装される可能性を示唆しています。このことは、Webクリエイターにとって、AIが普遍的なツールとして定着していく未来を予感させます。
AI技術の進化は目覚ましく、その機能がブラウザの標準として提供される時代が到来しました。これは、私たちクリエイターがAIを「脅威」と捉えるのではなく、「協働のパートナー」として、いかに賢く活用していくかを真剣に考えるべき時期に来ていることを示唆しています。AIの進化に注目し、その可能性を最大限に引き出す方法を探求することが、これからのクリエイティブの鍵となるでしょう。
見落としがちだけど超重要！Webセキュリティ強化の変更点
Chrome 138では、Webのセキュリティをさらに強固にするための重要な変更も含まれています。特に「HTML 仕様の変更: 属性の < と > のエスケープ」は、クリエイターならぜひ知っておきたいポイントです。
属性値の < と > がエスケープされるように！
これまでHTMLの属性値内では、<や>といった文字はエスケープされていませんでした。しかし、Chrome 138からは、これらの文字がそれぞれ<と>にエスケープされるようになります。
例：data-content="<u>hello</u>"という属性値が…
- 変更前:
<div data-content="<u>hello</u>"></div> - 変更後:
<div data-content="<u>hello</u>"></div>
このように変化します。
なぜこの変更が必要なの？：ミューテーションXSS（mXSS）対策
この変更は、ミューテーションXSS（mXSS）というセキュリティ脆弱性を防ぐためです。mXSSとは、ブラウザがHTMLを一度解析した後、JavaScriptなどでDOMを操作し、その結果生成されたHTMLを再度解析する際に、元の意図と異なる解釈をされてしまうことで発生するXSS（クロスサイトスクリプティング）攻撃の一種です。
簡単に言うと、属性値の中に悪意のあるHTMLタグが紛れ込んでいた場合、それがブラウザに再解釈される際に本物のHTMLタグとして認識され、攻撃コードが実行されてしまうリスクがあった、ということです。今回のエスケープ処理によって、そのような意図しない解釈を防ぎ、セキュリティが向上するわけです。
クリエイターが知っておくべき影響
この変更は、主にinnerHTMLやouterHTMLプロパティ、またはgetHTML()メソッドを使用してHTMLフラグメントを文字列として取得する場合に影響が出ます。
- 影響を受けるケース:
innerHTMLやouterHTMLで属性値を取得し、それを正規表現などでパースしている場合。- CI/CDパイプラインなどで、HTMLを生成し、その属性値を含む静的な想定値と比較するテストを行っている場合。
- 影響を受けないケース:
getAttribute(),getAttributeNS(),dataset,attributesなどのDOM APIを使って属性値を取得する場合。これらは、これまで通りデコードされた値（例:<u>）を返します。
もし、上記の影響を受けるケースに該当する場合は、コードの修正が必要になる可能性があります。特に、正規表現でHTMLをパースするのは一般的に推奨されない手法なので、この機会にDOM APIを使ったより安全な方法への移行を検討しましょう。
注目ポイント📌
🔒 mXSS攻撃からWebサイトを保護
⚠️ innerHTML/outerHTML使用時の注意点
✅ DOM APIでの属性値取得を推奨
その他の注目機能とWeb制作への貢献
Chrome 138には、他にもWeb制作の可能性を広げる機能や、私たちのクリエイティブな時間を守るための機能が盛りだくさんです。
デバイス連携の強化：Web Serial over Bluetooth (Android) & Viewport Segments API
- Web Serial over Bluetooth (Android): AndroidデバイスでWebページやWebアプリがBluetooth経由でシリアルポートに接続できるようになります。これにより、Webアプリから直接、各種デバイス（IoT機器やセンサーなど）と連携できるようになるため、新しいインタラクティブな体験をデザインできるようになるかもしれません。
- Viewport Segments Enumeration API: 折りたたみ式デバイスに対応したWebレイアウトを可能にします。画面の折り目やヒンジによって分割されたビューポート領域を認識し、それぞれのセグメントに合わせてUIを最適化できるようになります。これは、多様なデバイスに対応したレスポンシブデザインの新たな地平を切り開くものです。
パフォーマンス改善：投機的ロードの強化
Webサイトのパフォーマンスは、ユーザー体験に直結する重要な要素です。Chrome 138では、投機的ロード（Speculation Rules Prefetch）がService Workerでサポートされるようになりました。これにより、Service Workerで制御されたURLへのプリフェッチ（先読み）が可能になり、ユーザーが次にアクセスする可能性のあるページを事前に読み込んでおくことで、体感速度が劇的に向上します。ページの表示速度は離脱率にも影響するため、SEOの観点からも非常に重要です。
信頼性向上：クラッシュレポートAPIの進化
Crash Reporting APIにis_top_levelとvisibility_stateという新しいフィールドが追加されました。これにより、Webサイトがクラッシュした際に、それがトップレベルのページで発生したのか、あるいは隠れたタブで発生したのかといった詳細な情報がレポートされるようになります。私たちクリエイターが提供するWebサービスが、より安定して動作するための改善に繋がります。
AI時代にWEBデザイナーが輝くために
Chrome 138のアップデートは、Web制作の未来を確実に進化させるものだと感じました。CSSの新機能はデザインの自由度とコーディングの効率を両立させ、AI関連APIは私たちのクリエイティブな時間を単純作業から解放してくれる強力なパートナーとなるでしょう。そして、セキュリティの強化は、私たちが安心してWebサービスを提供するための基盤となります。
AIが進化し、多くの作業が自動化されていく時代だからこそ、私たちクリエイターは「人間ならではの創造性」に、より深く、より多くの時間を割くことができます。新しいテクノロジーを恐れるのではなく、賢く活用し、自身のスキルと表現の幅を広げていくことが、これからの時代を生き抜くクリエイターにとって最も大切なことだと私は信じています。
今回の記事が、皆さんのWeb制作に少しでも役立つ情報となれば嬉しいです。これからも、クリエイターの皆さんが輝けるような情報を発信していきますので、どうぞお楽しみに！
コメント