「Figma Make」からCSSの新機能まで！Web制作業界のトレンドを解説

Web制作業界は、AIや新しい技術の登場によって日々目まぐるしく変化しています。

次々と生まれる新しいツールや機能に、「どうやって情報をキャッチアップすればいいんだろう？」と感じている方も多いのではないでしょうか。

この記事では、2025年8月にWeb制作業界で特に注目を集めた3つのトピックを解説しています。

まだ把握しきれていない部分がある方は、参考にしてください。

※本記事の内容は2025年8月26日時点のものです。本記事で紹介したツール・機能を利用する際には、必ず最新情報をご確認ください。

自然言語でWebサイトを構築する新しいツール「Figma Make」の登場

Figma Makeは、Figmaの画面上でAIと対話しながらWebサイトを制作できる機能です。

画面左側のチャット欄に指示をテキストで入力すると、AIがその内容を解釈し、右側の画面にデザインをリアルタイムで生成してくれます。

Figma Makeのクオリティ

Figma Makeは、テキストだけの指示でもある程度のクオリティのデザインを生成してくれます。

さらに、参考画像の添付や既存のFigmaデザインデータを読み込ませることで、よりイメージに近いサイトを構築することも可能です。

しかし、多くの試用レポートで「一発で完璧なものはできない」という点が指摘されています。

理想の形に近づけるにはAIとの根気強い対話が必要になるようです。

Figma Makeを使うメリット

Figma Makeの大きなメリットの一つは、生成したデザインをコードとしてダウンロードできる点です。

出力されるコードはReactとTailwind CSSをベースにしているため、HTML/CSSで構成された既存サイトへの部分的な適用は難しいかもしれませんが、ReactやNext.jsで新規サイトを構築する際には、そのまま活用できるでしょう。

コードをダウンロードできるため、必ずしもFigmaのサーバーで公開する必要はなく、自分で契約しているレンタルサーバーなどにアップロードすることも可能です。

また、もう一つの強みとしてアニメーション実装の容易さが挙げられます。

「このテキストを1文字ずつ表示させてください」といった自然言語での指示にAIが柔軟に対応してくれるため、コーディングが苦手な人でも動きのあるサイトを作りやすくなっています。

Figma Makeのデメリットと注意点

便利なFigma Makeですが、いくつかの弱点も報告されています。

• ブランドイメージの調整が苦手
• 色の提案がやや弱い
• AIが勝手に作業を進めすぎることがある（※バージョン管理はあり）

そして、押さえておきたい注意点が、Figma Makeで作成したものは、Figmaのデザインデータとして保存されないという点です。

Figma Makeはあくまで別のツールという位置付けであり、生成したデザインを後からFigmaの編集画面に戻して調整することはできません。

Figma Makeのおすすめ活用シーン

これらの特性を踏まえると、Figma Makeは以下のようなシーンで特に力を発揮すると考えられます。

• ゼロからデザイン案を考える際の叩き台として、AIにいくつかパターンを出力してもらう
• Figmaで作成したデザインデータを参考に、コーディング部分をFigma Makeに任せてサイトを完成させる
• クライアントがデザインに強いこだわりを持っていない場合に、コーダーが自然言語でサイトを構築し、調整していく

「function」機能が標準CSSに搭載

Web制作の現場で長年使われてきたCSSの拡張言語「Sass（サス）」。

その大きな魅力の一つであった「関数（function）」機能が、ついに標準のCSSにも搭載されました。

CSSで関数が使えると便利な理由

CSSで関数が使えると便利な理由は「保守性の向上」にあります。

WebサイトのCSSは、時に何千、何万行にも及ぶ膨大な量になります。その中には、同じような計算や処理が何度も登場することが少なくありません。

従来、CSSではこれらの処理をそれぞれ個別に記述する必要がありました。

そのため、仕様変更で一つの値を修正する場合、関連する全ての箇所を手作業で修正する必要があり、手間がかかる上にミスの原因にもなっていました。

関数は、こうした繰り返し使われる処理を一つにまとめ、名前をつけて再利用できるようにする仕組みです。

処理を一つにまとめておくことで、修正が必要になった際も、その関数を定義している一箇所を直すだけでサイト全体に修正が反映されるようになります。

これまで、この便利な関数機能はCSSにはなく、使いたい場合はSassのような専用の言語を導入する必要がありました。

これからSassを学ぶ意味はあるのか？

結論から言うと、今でもSassを学ぶ価値は十分にあります。

理由の一つは、スタイル定義をまとめる機能である「mixin」や、ファイルを効率的に分割・管理するための「@use（インポート機能）」など、まだCSSには搭載されていない便利な機能がSassには残っているからです。

また、既存のWebサイトの多くがSassで構築されています。Web制作の現場では、新規開発だけでなく、既存サイトの修正や更新も重要な仕事です。

過去10年以上にわたって広く使われてきたSassは、今も多くの現場で現役で稼働しており、そのコードを理解できるスキルは依然として求められます。

新しいCSSの知識を積極的に取り入れつつも、Sassの書き方も理解しておくのがおすすめです。

ChatGPTの最新モデル「GPT-5」が登場

2025年8月にChatGPTの新たなモデル「GPT-5」が登場しました。

今回登場した新モデルの大きな特徴は、「美的感覚を備えている」とされている点です。

文字や行の間隔、余白といったデザイン要素への理解が向上しており、より洗練されたUIを生成できるようになったと言われています。

簡単なゲームであればプロンプト一つで一発で生成できてしまうデモも公開されており、従来のモデルからコーディング能力が大きく進化していることが伺えます。

最新ChatGPTモデル「GPT-5」の実務上での評価

その一方で、実際に試した開発者からは「コーディング能力は確かに上がっているが、実務で使うツールとしてはまだ物足りない」という厳しい意見も出ています。

具体的には、以下のような問題点が指摘されています。

• コードの修正を依頼すると、開発者が残しておいたコメントアウトが全て消えてしまうことがある
• バグの修正を依頼した際に、指示していない無関係な部分のコードまで変更してしまい、挙動がおかしくなることがある
• 「〇〇してください」と具体的な修正を依頼しても、「〇〇したら良くなりますよ」とテキストでアドバイスを返してくるだけで、実際のコードを編集してくれないケースがある

コーディング作業を任せるならどのAIがおすすめ？

このような課題から、少なくとも現時点においては、実務でのコーディング作業をAIに任せるのであれば、より安定して意図を汲み取ってくれるClaudeなどのモデルの方が適している可能性があります。

もちろん、Figmaのデザインデータからコーディングを生成させるような単純なタスクでは、新しいChatGPTモデルも高い性能を発揮します。

しかし、細かな修正を繰り返しながらプロジェクトを進めていくような実務の現場では、まだ発展途上です。

AIの進化は速いため、これらの問題点もすぐに改善される可能性は十分にあります。

今後のアップデートに引き続き注目していきましょう。

まとめ：トレンドを押さえてWeb制作を効率化していこう

この記事では、Web制作業界で注目される3つのトレンドについて解説しました。

• Figma Make：サイト制作の叩き台として便利だが、実用にはAIとの対話やツールの理解が必要
• CSSの@function：Sassの役割を代替しうる大きな進化ですが、既存案件も多いためSassの知識はまだ重要
• ChatGPTのGPT-5：コーディング能力は向上したものの、実務で安定して使うにはまだ課題が残る

新しい技術は制作の可能性を広げますが、万能というわけではありません。

それぞれのツールの長所と短所を理解し、適材適所で活用していくスキルが、今後のWeb制作者にとってますます重要になるでしょう。

未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。

また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Discordによる公式サポートの質問部屋も用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！