Web制作業界は日々進化を遂げています。
この記事では、プロが厳選した2025年5月のWeb制作業界トレンドニュースを3つまとめました。
どれもWeb制作者にとって目が離せない内容ですので、ぜひ最後までご覧ください。
※本記事の内容は2025年5月30日時点のものです。本記事で紹介したツール・機能を利用する際には、必ず最新情報をご確認ください。
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。
VS Codeが進化！Alt属性の自動補完機能が登場
VS Codeでは、最新のアップデートにより、画像の内容をAIが理解して自動で適切な説明文（alt）を提案してくれる機能が追加されました。
画像の内容をAIが読み取ってAltタグを自動生成
この新機能は、GitHub Copilotが裏側で動作し、<img>タグのalt属性部分にカーソルを合わせると、AIが画像を解析して適切なテキストを自動的に入力してくれます。
最初は英語で表示されますが、「日本語でお願いします」と入力するだけで、日本語のaltテキストにも対応可能です。
自分で画像の内容を言語化する必要がなくなるうえ、精度もかなり高いため、実用性は非常に高いと感じられるでしょう。
Altタグの役割とSEO・アクセシビリティへの影響
AltタグはWeb制作において、検索エンジン最適化（SEO）やアクセシビリティ対応の面で非常に重要です。
・アクセシビリティ対応：視覚障がいを持つユーザーが音声読み上げでサイトを閲覧する際、Altテキストが「この画像には何が映っているか」を伝えます。
これまではaltテキストをすべて人間の手で一つ一つ入力する必要がありました。
特に画像が多いプロジェクトでは大きな負担になっていた作業ですが、今回のAI自動補完によって品質と効率を両立することが可能になります。
Figma Gridでデザイン設計がより柔軟に
Figmaに新たに追加された「Grid（グリッド）」機能は、従来のオートレイアウトを拡張し、縦・横の制御を直感的に行えるようになりました。
従来のオートレイアウトを拡張する新機能
Figmaに追加されたグリッドレイアウト機能は、従来のオートレイアウトを拡張した強力なアップデートです。
これまでのオートレイアウトでは、要素を「縦方向に並べる」「横方向に並べる」「横に並べて折り返す」といった基本的な配置しかできませんでした。
しかし、グリッド機能では縦・横それぞれの行数・列数をあらかじめ定義し、その中に自由にオブジェクトを配置できるようになっています。
割合も設定しやすいので、レイアウトの設計が直感的にできます。
従来は「どのくらいの比率で幅を分けるか」を言語化して伝える必要がありましたが、このグリッド機能を活用すれば、実際の見た目そのままで構成を共有・調整できるという点でも大きな進化です。
コーディングとの親和性が高いレイアウト設計
Figmaのグリッド機能は、見た目の整えやすさだけでなく、コーディングとの相性の良さでも大きなメリットがあります。
そもそもグリッドという考え方は、デザインだけでなくHTML/CSSにも存在する共通の概念であり、CSSにおけるgridプロパティとしても活用されています。
今回のアップデートによって、Figma上で作成したレイアウトをそのままコーディングの「グリッド構造」に落とし込めるような設計がしやすくなりました。
Figma Sitesが登場！ノーコードでWebサイトを公開可能に
Figmaから、Web制作の常識を覆す新機能「Figma Sites」が登場しました。
これまでFigmaで作成したデザインは、別途コーディングして実装する必要がありましたが、今回のアップデートによりFigma上で作成したデザインをそのままWebサイトとして公開できるようになりました。
イメージとしては、STUDIOやWIXのようなノーコードWeb制作ツールに近く、「ボタン一つで公開」できる仕組みがFigma内に組み込まれた形です。
Figma Sitesの仕組みと制限
Figma Sitesは、使い勝手がよい一方で、下記のような技術的な制限も多くあります。
- 出力されるコードは基本的に<div>タグで構成されており、機械が読み取りやすいHTML構造にはなっていない
- h1やpなどの明示的なタグ付けは現状不可
- CMSやWordPressへのエクスポート、HTMLファイルとしてのダウンロードも不可
- サーバー処理、アニメーション、複雑なUIには非対応
タグの構造を変えるには現時点では限界がありますが、ヘッダーやフッターといった基本的な領域指定は手動で可能です。
さらに、metaタグの設定やJavaScript・タグマネージャーの埋め込みといったカスタムコードもサポートされています。
Figma Sitesは誰におすすめ？導入判断のポイント
Figma Sitesは魅力的な新機能ではありますが、どんなプロジェクトでも導入できるわけではありません。
その特性を理解した上で、向いているケースとそうでないケースを見極めることが重要です。
現状のFigma Sitesは、静的で更新頻度の低いWebサイトにマッチします。
CMSやバックエンドとの連携が不要な場面では、Figma上でのデザインを手軽にWeb公開までできるノーコードツールとして活躍します。
・ポートフォリオサイト
・採用・イベント告知ページ
・更新をあまり想定していないシンプルなランディングページ
一方、高度な要件や更新性が求められるWebサイトには、現段階のFigma Sitesは適していません。
・JavaScriptによる動的処理が必要なWebアプリケーション
Figma Sitesは、ノーコードで作れる範囲のシンプルなWeb制作を一気に手軽にする一方で、複雑な実装やメンテナンス性を必要とする場面にはまだ対応できないというのが実情です。
最終的な調整は人間の目でやる必要があるので、コーディングができるスキルはまだまだ欠かせないといえます。
まとめ：Web制作業界は目まぐるしく進化している
この記事では、2025年5月のWeb制作業界トレンドニュースとして次の3つを紹介しました。
- VS Codeが進化し、Alt属性の自動補完機能が登場した
- Figma Gridでデザイン設計がより柔軟になった
- Figma Sitesの登場でFigmaデザインをそのままWebサイトとして公開可能になった
いずれもWeb制作の常識を大きく変える可能性を秘めたアップデートですが、これらの技術は万能ではなく、それぞれに適した使い方があるという点も重要です。
今後も目まぐるしくWeb制作業界は進化していくと予想されるので、最新情報を見逃さないように注目していきましょう！
未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！
デイトラ情報局は、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Discordによる公式サポートの質問部屋も用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
ショーヘー（@showheyohtaki）
株式会社デイトラ代表。フリーランスプログラマーとして実績を重ねたのちに起業。現在はデイトラWeb制作コースの責任者も務めている。