「最新のCSSで作ります」を発注側が読み解く — State of CSS 2026 | GH Media
URLがコピーされました

「最新のCSSで作ります」を発注側が読み解く — State of CSS 2026

URLがコピーされました
「最新のCSSで作ります」を発注側が読み解く — State of CSS 2026

サイトリニューアルの提案書に「最新のCSS仕様を活用し、JavaScriptへの依存を減らした軽量な実装を行います」と書かれている。悪いことは何ひとつ書かれていないので、そのまま通ることになります。

しかし発注側から見ると、この一文からは何ひとつ判断できません。「最新」が、主要ブラウザで安定して動くものを指しているのか、まだ一部のブラウザにしか実装されていないものを指しているのか。書き手が同じ言葉を使っていても、意味する範囲がまったく違うからです。そして、この差が表面化するのは公開後です。「一部の環境で表示が崩れる」という報告が、リリースから数週間して上がってくる。

2026年の State of CSS 調査(CSS を書く開発者への年次アンケート)の結果は、この判断の材料になります。開発者が実際に何を使っていて、何を「使いたいが避けている」と答えたかが分かるからです。技術の善し悪しではなく、採用の実態が見える点で、発注側にとって読む価値があります。

「使われているもの」と「憧れられているもの」は別

調査結果でまず目を引くのは、この2つが一致していないことです。

最も使われ、かつ最も好まれている機能として挙がったのは :has()aspect-ratio、CSS ネストでした。どれも、登場から時間が経ち、主要ブラウザに行き渡ったものです。実務で使われるということは、そういうことです。

一方、「好きな新機能」を聞いた設問で1位になったのは Anchor Positioning でした。ブラウザ対応が限定的であるにもかかわらず1位、というのが調査側のコメントでした。そして別の設問——「ブラウザ対応を理由に使用を控えている機能」——でも、Anchor Positioning と View Transition API が上位に来ています。

同じ機能が、「いちばん好き」と「いちばん使えていない」の両方で上位に入る。これが開発者の正直な状態です。試したい気持ちと、案件で使えるかどうかは別物として扱われている。

使われていない機能として名前が挙がったのは Gap Decorations と if() で、理由はいずれもブラウザ対応でした。つまり、機能の良し悪しではなく、対応状況で採用が決まっているというのが調査全体を通した傾向です。

「Baseline のどの段階か」を聞けばいい

発注側が技術仕様を評価するのは現実的ではありません。ただ、ひとつだけ共通の物差しがあります。Baseline です。

Baseline は、主要ブラウザでの対応状況を段階で示す指標で、おおまかに次のように分かれます。

段階意味発注側から見た扱い
Widely available主要ブラウザで安定して使える通常の案件で問題なく使える
Newly available主要ブラウザに揃ったばかり使えるが、古い端末が残る環境では確認が要る
Limited availability一部ブラウザのみ使うなら、代替表示の設計とセットで説明されるべき

Anchor Positioning が Limited availability の段階にありながら開発者に人気、という調査結果は、「開発者が使いたいもの」と「今の案件で安全なもの」がずれ得ることの実例です。

この考え方をサイト全体の技術選定に広げた話はWeb Platform Baseline 2026とコーポレートサイトの実装基準にまとめています。Anchor Positioning そのものが何を解決する機能なのかはCSS Anchor PositioningでJavaScriptなしのUIを作るで扱っています。

Baselineの3段階と、発注時に確認すべき点の対応関係を示した図

提案書に対して投げる3つの問い

技術の中身を理解していなくても、次の3つを聞けば、提案の性質が見えます。

1. 「その実装は Baseline のどの段階ですか」

答えが返ってこない、あるいは「最新なので大丈夫です」で流される場合、提案側も段階を把握していない可能性があります。Widely available という答えなら、その時点で心配は減ります。Limited availability という答えが返ってきたら、次の問いに進みます。

2. 「対応していないブラウザでは、どう見えますか」

CSS には、対応していない指定を無視して動き続ける性質があります。そのため「崩れる」ではなく「装飾が付かないだけ」で済む設計が可能です。この差が説明できるかどうかが、実装者が対応状況を意識しているかの判定になります。「対応していない環境ではこの装飾が出ないだけで、内容は読めます」と即答できる相手は、ちゃんと考えています。

3. 「その実装は、他社でも引き継げますか」

これは調査結果から直接は出てこない論点ですが、発注側にとっては最も重い問いです。特殊な実装を積み上げたサイトは、次に別の会社へ移すときのコストが跳ね上がります。標準のCSSで書かれているほど、引き継ぎは楽になる。「最新のCSSを使う」提案は、実はこの引き継ぎやすさに有利に働くことが多く、そこを説明できる相手かどうかを見ます。

AI生成との付き合い方も出ている

調査には、CSS を書く際にどれくらいAI生成を使っているかの設問もありました。生成の利用が0〜50%と答えた層が3,031、50%超と答えた層が721。現時点では、AIに全面的に書かせている開発者は少数派です。

これは「AIを使っていないから信頼できる」という話ではありません。むしろ発注側が読み取るべきなのは、AIで書いたかどうかを気にするより、対応状況を検証しているかを気にしたほうが実質的だということです。手で書いてもブラウザ対応を確認していなければ同じ問題が起きますし、AIで書いても検証していれば問題は起きません。

なお、調査全体での CSS への満足度は平均4.0(5点満点)でした。実装の選択肢は増えていて、同じ見た目を作る方法が複数ある状態です。だからこそ、どれを選んだかの説明が提案の質を分けます。

次にやること

いま提案を受けている、あるいはこれから受ける段階であれば、上の3つの問いをそのまま投げてみてください。答えの内容そのものより、即答できるかどうかで、実装の見通しが立ちます。

既に公開済みのサイトについては、表示崩れの報告が特定のブラウザや端末に偏っていないかを確認するところからです。偏りがあれば、対応状況を確認せずに入れた実装が原因である可能性が高くなります。表示速度側の観点はCore Web Vitals の見方と合わせて確認すると、優先順位が付けやすくなります。

サイトの新規制作やリニューアルで、実装方針の妥当性を含めて相談したい場合は、グリームハブのHP制作・リニューアル相談で承っています。要件によって適切な構成は変わるため、個別にお見積りします。お問い合わせからご相談ください。

Sources

無料ダウンロード

Web制作 費用・発注・集客 完全ガイド【2026年版】

費用相場・制作会社の選び方・集客戦略まで、中小企業のWeb担当者が知っておくべき全知識をPDFにまとめました。

メルマガにも登録されます。いつでも解除可能です。

URLがコピーされました

グリームハブ株式会社は、変化の激しい時代において、アイデアを形にし、人がもっと自由に、もっと創造的に生きられる世界を目指しています。

記事を書いた人

鈴木 翔

鈴木 翔

技術の可能性に魅了され、学生時代からプログラミングとデジタルアートの分野に深い関心を持つ

関連記事

「WEB」の記事一覧を見る