2026年4月15日

2026年のWebデザイントレンド解説セミナー（3月12日開催）

2026年3月12日、当社エクゼクティブ・フェローの木達とアートディレクターの遠藤が登壇し、企業のWeb担当者やWebサイトの構築・リニューアルを検討する方を対象に、『2026年のWebデザイントレンド解説セミナー』をオンラインで開催しました。本セミナーは2015年以来継続して開催している定番企画で、エンジニア編とデザイナー編の2部構成で実施しました。それぞれの視点から直近の動向を踏まえ、注目すべきWebトレンドについて解説しました。

木達と遠藤の講演の様子

セミナー前半エンジニア編

はじめに、2026年度に向けたWebを取り巻く動向として、WCAGやJIS規格を中心としたアクセシビリティのトレンドを紹介しました。2025年9月にWCAG 2.2がISO規格化されたことを受け、国内のウェブアクセシビリティ規格であるJIS X 8341-3の改正が進められています。そのため、今後はWCAG 2.2を意識した取り組みが求められる点を強調しました。また、2025年12月に全面施行されたスマホソフトウェア競争促進法による変化として、チョイススクリーンの登場を紹介。ブラウザ選択の自由が広がる可能性や、今後の競争の行方について説明しました。

次に、Webプラットフォームの進化とフロントエンド設計の考え方について解説しました。これまでJavaScriptに依存しなければ実現できなかった表現や機能のうち、HTMLとCSSだけで実現できるものが増えつつあります。Webページの表示に必要なファイル容量を減らし、表示パフォーマンスを改善するためにも、Webプラットフォームの進化に足並みを揃えるかたちでフロントエンド設計を見直す必要性を解説しました。最後に、生成AIやAI検索の普及により、オープンなWebが衰退する可能性にも言及。AIベンダーによるコンテンツ利用に対し、Web運営者が選択肢を持てる仕組みづくりの重要性を示しました。

セミナー後半デザイナー編

はじめに、近年のWebデザインの傾向として、フラットデザインが流行していた時代から大きく変化し、多様でエモーショナルな表現が増えていることを紹介しました。Windows、Google、Appleといった主要OSのデザインはそれぞれ異なる個性を持ちながらも、感情に訴えかける表現を重視している点が共通しています。その背景には、フラットデザインへの反動やアフターコロナによる影響、豊かな表現を支える技術や閲覧環境の進化、そして「ブランドらしさ」を伝えたいという意識の高まりがあると紹介しました。

次に、生成AIの浸透により、ユーザーがWebサイトを直接閲覧する機会の減少とともに、企業の「らしさ」を込めたデザインに触れる機会も少なくなっていると強調しました。その一方で、AIは誤った情報を提供する可能性もあるため、正確性や信頼性を担保する公式Webサイトの価値はむしろ高まっていると考えを示しました。企業サイトを限られた機会の中で印象付けるために、感情に訴えかける表現や、公式ならではの体験を通して「らしさ」を伝えることが重要だと述べました。

最後に、エモーショナルな表現は負荷が重くなる点にも触れ、体験向上に寄与する場合に限って装飾やアニメーションを用い、必要性を明確にしたうえで運用していく重要性を示しました。そして、公式Webサイトならではの「らしさ」をサステナブルに届けていく姿勢が求められるとまとめ、セミナーを締めくくりました。

講師コメント

エクゼクティブ・フェロー（CBO）木達からのコメント

セミナーへのご参加、誠にありがとうございました。
今回、エンジニア編のなかでお話した5つのトピックのうち、最後の「危機に瀕する？オープンWeb」については、やや悲観的すぎる内容だったかもしれません。しかし、アンケートを通じ「AIとどう向き合っていくべきか、それに対したデザイントレンドは何かという、今一番気になるポイントを押さえていただいたセミナーだった」とのお言葉をいただき、大変ありがたく思っております。オープンWebが今後どうなるか、明確に予想できる人など私はいないと思います。それぐらいAIのもたらす影響は大きく、またそうであるがゆえに、誰もが「正解」を求めていらっしゃるように感じます。直近の動向に翻弄されすぎることなく、皆様とご一緒に「正解」を創造する側でありたいと、私個人は願っております。

アートディレクター遠藤からのコメント

このたびはセミナーにご参加いただきありがとうございました。
本セミナーはオンライン形式での再演となりましたが、「AIの浸透に伴って環境が大きく変わる中で、Webデザイントレンドをどのように捉えていくか」をあらためて整理してお伝えする機会となりました。今回の内容が、みなさまの日々の業務に何か1つでもヒントとして持ち帰っていただけるものであればうれしく思います。アンケートや質疑応答を通じてお寄せいただいた声を参考に、今後もさまざまなテーマでセミナーを企画してまいります。ご興味に合うものがありましたら、ぜひご参加ください。

ご質問への回答

Web サステナビリティは国際規格となる予定はあるのでしょうか。

ISOなどが定める、いわゆる公的な国際規格とは異なりますが、W3CのSustainable Web Interest Groupでは、Web Sustainability Guidelines（WSG）の策定を進めています。残念ながら、策定は当初予定していたより遅延しているものの、作業は着々と進行中です（当社スタッフも策定に関わっています）。当社ではコラムやWeb品質Blogなどで、WSGにまつわる情報を発信していますので、ご興味があればぜひご覧ください。

スマホ特化にしているサイトでは、カード型の見せ方が主流であったり、Apple OSのUIに似せたつくりになっているページもありますが、他にもトレンドはあるのでしょうか。

スマートフォン（以下、スマホ）での閲覧を意識したWebサイトのトレンドを考える際に、ポイントとなる背景のひとつが「指で直接操作すること」です。人とUIの接点がマウスではなく指になるため、タップなどの動きに対して適切な反応が返ってくることが重要になります。例えば、ボタンやリアクションアイコンなどを押した際のわずかな動き（マイクロインタラクション）や振動（触覚フィードバック）は、操作が正しく行われたことを直感的に伝え、手応えや心地よさにつながる表現として用いられています。
また、こうした環境では縦方向へのスクロールが中心になり、スクロール量に応じて要素が滑らかに出現・変化するアニメーションとも相性がよく、情報を連続的に見せる考え方がよく採用されています。これらは、スマホでの閲覧体験を意識しながら工夫が重ねられてきた表現だと言えそうです。ご質問にあったカード型のUIも、この環境でよく見かける表現のひとつです。
Bento UIもその一例で、情報をカード単位で整理し、視線の流れや情報の強弱をつけやすい表現になっています。また、スワイプ操作と組み合わせて、複数の重なったカードを切り替えて見せるカルーセル型のUI（※1）も、閲覧時に特に相性のよい見せ方だと感じます。
最後に個人的な所感になりますが、スマホ向けのトレンド全体を俯瞰して見ると「これは明確にスマホに特化したトレンドである」と言い切れる要素は、実はそれほど多くないようにも感じています。多くのトレンドはデバイスを問わず共通して見られるものであり、スマホが広く使われる中で、トレンドの定着や進化を後押ししてきた存在と捉えるほうが実態に近いかもしれません。
※1：アクセシビリティの観点から、スワイプ操作のみではなくクリックやタップ操作で機能するUIの併用が望ましいです。

PC版・スマホ版それぞれにおけるヘッダーメニューのトレンドについて教えてください。

まずPC版では、グローバルナビゲーション内に「ブランドコンテンツ」などの注力コンテンツを目立たせて配置するケースが増えています。また、ヘッダーが画面上部に固定され、スクロールに追従する仕様も一般的です。ナビゲーションの展開方法としては、クリック時に下層メニューが表示される設計が多く見られます。メニューの表示形式は、画面幅いっぱいに広がるものと、必要最小限の領域にコンパクトに収めるものがあり、サイト構造やコンテンツ量に応じて使い分けられています。
なお、カーソルを合わせるだけでメニューが自動的に開くホバー型のナビゲーションは、一見便利ではあるものの、意図しない操作で展開されてしまう可能性があるため、ユーザビリティの観点ではクリック操作で開く設計が望ましいとされています。
一方、スマートフォン版では、ロゴ以外のメニューをハンバーガーメニュー内に格納し、ヘッダーを画面上部に固定する構成が主流です。ただし、「お問い合わせ」や「アクセス」など、重要度の高い導線については、ハンバーガーメニュー内に格納せず、ヘッダー上に直接配置するケースも多く見られます。
また、ヘッダー以外の工夫として、画面下部にショートカットメニューを固定表示し、主要な導線へ素早くアクセスできるようにする設計も増えています。

流れる文字やスケルトン背景といった表現において、どのようにアクセシビリティ配慮とデザインのバランスを取るべきでしょうか。

ご質問の点については、一律に良し悪しを判断することは難しく、実際のコンテンツや文脈に応じて個別に判断する必要があると考えています。そのうえで、コンテンツにおける機能的価値は損なってはならないという前提があります。例えば、アニメーションなどの表現が装飾として割り切れる、情緒的価値に分類されるものであっても、機能的価値を阻害する場合には控えるべきです。
一方で、そのアニメーション表現がブランドを伝えるうえで必要不可欠である場合には、配慮を行いつつも敢えて採用することも考えられます。アクセシビリティのガイドラインに従うことは大前提ではあるものの、従うことですべてのユーザーに対し完全なアクセシビリティを実現できるわけではありません。最終的には何を伝えたいのか、どこまで機能的価値を担保すべきかを踏まえたうえで判断することが重要だと考えています。

記事系メディアページのデザインのトレンドを教えてください。

この点については、共通して挙げられる明確なトレンドを一つに絞って説明するのは難しいものの、メディアの特性によって見せ方が変わる点があると考えています。特に、スマートフォンでの閲覧が中心のメディアと、PCでの閲覧が多いメディアとでは、デザインの傾向にも違いが見られます。また、傾向の一つとして、広告の見せ方に関する変化が挙げられます。特に、広告収益を前提としたメディアでは、画面全体を覆うタイプの広告が増えているほか、広告を閉じるためのボタンやリンクの位置が分かりにくくなっているケースも増えているように思われます。
こうした動きは、ビジネス上のやむを得ない事情が推察されるものの、ユーザー体験の観点では課題となり得ます。近年では、いわゆるダークパターンやエシカルデザインといった考え方への関心も高まっており、今後の動向が注目される領域の一つといえます。

アンケートにお寄せいただいたコメント（一部）

技術視点のトレンドが体系的にまとまっていてよかったです。またテクノロジー視点がビジュアルデザインと密接に関連していることが分かりました。ビジュアル視点では、短い時間に多数の事例サイト紹介が参考になりました。
AIとどう向き合っていくべきか、それに対したデザイントレンドは何かという、今一番気になるポイントを押さえていただいたセミナーだったと思います。
コーポレートサイトの事例をいくつか拝見し、ストーリーで伝えることの大切さがわかりました。サイトをリニューアルする際の参考にしたいと思います。

前の記事 AI時代の発信力：microCMS紹介セミナー（3月5日開催）

2026年の記事一覧に戻る