Webデザインの最新技術はどこに使う？2026年の選び方と確認手順

設備点検会社の架空例で考えます。工場の担当者が「自分の設備の点検を頼めるか」を知りたくて、サービス一覧を開きました。項目が「点検A」「点検B」だけなら、どちらを選ぶか判断できません。この場合は、設備の種類と点検の目的を説明することが先の候補です。

一方、一覧から詳細へ移ったときに選んだ設備を見失うなら、前後のつながりを示す表現を検討できます。押した後に反応が見えないなら、操作への反応を測って原因を調べます。同じ「使いにくい」でも、説明の不足・切替の分かりにくさ・反応の遅さでは直し方が変わります。

2026年のGoogleの公式紹介では、端末の設定への対応や、画面切替、操作を分かりやすくする技術が扱われています。またInterop 2026では、主要ブラウザ間の違いを減らす取り組みが進められています。紹介された機能や重点対象は、自社で使えるかを調べる入口になります。全機能がすべての端末で同じように動くという意味ではありません。

自社ページを1つ開き、「訪問者は何をしたいか」「どこで止まるか」「できるようにしたいこと」を1行ずつ書いてください。その3行があれば、制作担当は、原稿を直す案と技術を使う案を比べられます。改修案は、同じ情報・同じ用事で見比べます。

この章の根拠：出典1出典8

「点検A」「点検B」という名前だけなら、「設備の定期点検」「契約前の設備確認」のように用事が分かる名前へ直す案があります。さらに、どの設備が対象か、何を確認するのかを短く添えます。どの名前が正しいかは、自社のサービス資料と担当者へ確認してください。

写真は対象設備の姿、図は確認する場所や工程を示すために使います。サービスの写真を見て、別の設備も頼めると思わせないかを確かめます。説明に必要な対象がスマホで切れないこと、写真の読み込みを待つ間も見出しを読めることも確認します。

文字を大きくしたときや、長いサービス名を入れたときも試します。条件が重なる、ボタンが押せない、項目が1文字ずつ縦に並ぶ場合は、文字を無理に小さくする前に、列数や区切りを変える案を制作担当へ頼みます。

画像の代替テキストは、画像が伝える情報や機能に合わせます。設備を識別する写真なら必要な対象の説明を、工程図なら図が答える関係を本文にも残します。飾りだけの画像には空のaltが適切な場合があります。情報を選ぶ順序が分かれば、余白も読みやすさにつながります。

この章の根拠：出典5

スクロール連動のアニメーションは、ページを読む位置に合わせて表示を変える仕組みです。長い点検手順で読む場所を見失うなら、今の工程を示す目印が候補になります。見出しだけで場所が分かる短いページでは、追加する理由を先に考えます。制作会社へは「長い手順の今読んでいる工程に目印を付けたいです。動かない環境でも全工程を読める案を、通常の文章だけの案と比べてください」と頼めます。

View Transitionsは、画面の切替を動きでつなぐ仕組みです。設備一覧で選んだポンプを詳細で見失うなら、同じ対象の前後をつなぐ案が候補になります。毎回の移動で演出を待たせる案は、急いで条件を読みたい用事に向きません。制作会社へは「選んだポンプと詳細のポンプが同じだと分かる切替を、普通のリンクと比べたいです。同じページ内か別ページ間かも示してください」と伝えます。

Popoverは、ボタンなどから補足を開く仕組みです。用語の意味を知るために別ページへ離れてしまうなら、その場で短い説明を開く案が候補になります。対象外や料金の重要な条件を、開かないと読めない場所だけへ隠す使い方は避けます。制作会社へは「専門用語の補足をその場で開き、キーボードでも閉じられる案をください。受付条件は本文にも残してください」と頼めます。開いていても周囲を操作できるため、重要な確認まで他の操作を止める画面とは役割を分けます。

下表は2026年10月16日に確認した目安です。Baselineの「Newly available」は、主要ブラウザの新しい版で共通して使える段階を示します。「Widely available」は、その段階から30か月後です。利用者の古い端末や、追加機能まで含めた動作確認が済んだ意味ではありません。実装前に個別の対応表を開き直し、自社の対象端末と版で試してください。

対応表示は実装前に各出典の「Browser compatibility」で再確認します。スクロール連動、ページ内切替、別ページ間切替、補足の開閉を同じ対応状況として扱いません。Baselineの説明は出典7へ。

この章の根拠：出典9出典10出典11出典12出典13

操作によって始まる不要な動きを無効にできることは、WCAG 2.2のAAA基準で扱われています。自動で始まる動きを止める条件とは別です。この教材だけで基準全体への適合を証明することはできませんが、動きを選ぶときの大切な確認です。

以下は、制作担当向けの練習例です。index.htmlとstyle.cssを同じ練習フォルダーに保存し、index.htmlをブラウザで開きます。受付条件へのリンクは通常のHTMLとして使え、動きを減らす希望がない場合だけ、ポインターやフォーカスで少し位置が変わります。3つの新しい仕組みを実装する教材ではなく、通常表示に必要な動きを加える考え方の最小例です。

リンクを押して受付条件へ移動し、Tabキーでリンクに移れるかを試します。動きを減らす設定でも、リンクの文字、選んでいる位置の枠、移動先の条件が残ることを確かめます。経営者・Web担当者はコードを編集せず、この確認を制作担当へ依頼できます。

動きが残る場合は、別のCSSが同じ要素へ適用されていないかを制作担当が調べます。WordPressへ使う場合はテーマのCSSと干渉し得るため、変更前のCSSを保管し、作業環境の限定した要素で試してから適用します。配布ZIPにはREADME.txt、index.html、style.cssを収録しています。サーバーの起動やJavaScript・画像の追加は、この教材には不要です。

この章の根拠：出典3出典4

Webの使い心地を調べる主な指標に、Core Web Vitalsがあります。LCPは主な内容が表示されるまで、INPはクリックやタップなどの操作から次の表示までの反応、CLSは表示中のずれを調べます。制作担当は、困っている動きに合う指標を選んで原因を調べます。

PageSpeed Insightsなどでは、実際の利用から得たデータと、試験環境の測定結果を分けて見ます。実利用のデータが表示されないサイトもあり、データがないことを「問題なし」とは判断できません。試験環境の数値を、すべての顧客端末の結果へ置き換えないようにします。

設備点検の架空例では、「サービスの詳細を見る」を押した後に画面が反応したと分かるかを制作担当が調べます。Web担当者は、「自分の設備が対象か」「相談前に何を用意するか」を同じページで確かめます。改修の前後で同じ用事を試し、反応の計測と説明の確認を分けて残します。この例は測定結果や問い合わせ増加を示すものではありません。

確認する端末・ブラウザと版、文字を大きくした表示、動き軽減、キーボード操作を決めます。制作担当が実施することと、Web担当者が説明を読んで確認することを分け、未実施の条件をメモへ残してください。全条件を試せていない試作を、そのまま採用済みの状態にしません。

この章の根拠：出典2出典6

設備の対象が分からないなら、対象と目的の説明を先に整えます。切替で迷うなら、前後のつながりを示す表現を試します。押した後の反応が見えないなら、反応を測って原因を調べます。どの案でも、動きがない通常の表示と、必要な情報・操作を残します。

相談には、自社ページの場所、訪問者の用事、困る場面、サービス対象や受付条件の資料を用意します。候補の対応表は確認日を付け、使う端末と版、文字拡大・動き軽減・キーボードなどの試す条件を制作担当へ伝えます。試せていない条件は「未確認」として残します。

下のメモは、検討内容と確認先を持ち運ぶための準備です。記入や保存の後に、担当者が試作を確認し、その結果を見て採用を決めます。「この画面で迷わせたくない」という1場面が、伝わる改修依頼の出発点になります。

この章の根拠：出典8出典9出典3