Zenn
🤖

Figma Sitesなどデザインがワンタッチでサイトになる時代に、HTML/CSSを学ぶ意味はあるのか？

に公開
AI
CSS
Figma
HTML
webデザイン
idea

昨日、Webデザイナー・マークアップエンジニア界隈をざわつかせるニュースがありました。
それはFigmaの大型アップデートです。

とくに注目が集まったと思われるのがFigma Sites。

Studioなどのノーコードツールと呼ばれるようなものに展開せずともFigmaだけで完結でき、デザインと実装（HTML/CSS）をシームレスに対応でき、そのままサイトの公開までできます。

直感的な操作でレスポンシブにも対応できるのでとても便利そうです。

最初に頭に浮かんだのは「Studio終わったかもな・・・」でした。

これまでFigmaとStudioは親和性高くやって行くのかなぁ、もしかしたら業務提携とか、どちらかがどちらかを買収するなんてこともあるのかな、でもFigmaはAdobeとのこともあったから買収はないかなぁなんて思ってましたが、まさかFigma単体でノーコード的な進化をするとは。

AIでコードを書くという方面の進化はすでにGitHub CopilotやChatGPTなどで実感済みであり、このあたりのことを大きく捉えて「AIの登場と進化で、Webの学習やデザイン・開発の仕事はもう不要になるのでは？」と不安に感じている人も多いのではないでしょうか。

今現在、この領域を生業としている僕自身ももやもやしているので、これからこの業界に入ろうと学習をはじめる方々にとってはもっともやもやしているのではないかと思います。

なのでちょっと頭と気持ちの整理の意味も込めて、

  • AIの台頭で何がどう変わるのか
  • 「HTML/CSSやWebデザインを学ぶ意味」
  • 「これから目指す人が意識すべきこと・具体的な成長ロードマップ」

などについてアウトプットしてみようと思います。

AI時代にHTML/CSS・Webデザインは不要になるのか？

早速これについてですが、AIが得意なのは「パターンを学習し、過去のデータをもとに平均的な答えを出すこと」だと思っています。

つまり、ワンタッチでHTML/CSSを吐き出すのはAIの得意分野。

しかしながら、Webの現場で求められるのは単なる平均値だけではありません。

  • ブランドの文脈を踏まえた独自性
  • コンテンツの背景にある感情や意図
  • ユーザー体験としての心地よさや驚き

こういったことはAIが完璧にこなせる領域ではなく、むしろ人間のクリエイティブな判断力が必要とされます。

なんなら如何に差別化するか？を常に考えているとも言えます。

なのでデザインをすること自体はなくなるということはないと思いますが、平均的・均質的なHTML/CSSの出力は任せてしまえるでしょう。

自動変換の精度はどこまで高まるか？

では今後、HTML/CSSへの自動変換の精度はどうなるか？ですが、さらなる向上を果たすと思われます。

たとえば、

  • 不要なdivだらけのコード → かなり整理される
  • class名の自動命名 → より意味的になる
  • パフォーマンス・アクセシビリティの最適化 → ある程度は自動化可能
    このようなことは大した時間もかからずに近い未来に実現されると思います。

しかし完全とまではならないでしょう。
なぜなら案件ごと、ユーザー層ごと、ビジネス要件ごとに「何が最適か」は異なります。

つまり、AIの出力結果をそのまま使うのではなく、最終的な判断・調整を行える人間が必要な領域は残り続けると考えられます。

では誰がその判断・調整をするのか？そこには有識者がいる必要があります。

有識者とは誰なのか？今現在この職についているシニアエンジニアなのかもしれないですし、これからこの業界に入る若人なのかもしれません。

そういった意味ではいつまでも判断・調整をする人は必要とされ続けるものと思います。

そしてもう少し冷静に考えると、簡単なWEBサイトやちょっとしたCMSを含んだくらいのサイトであれば遜色なく作れるようになっても、大きなシステムが絡んだサイト、とくにユニークな仕様のサイトなどはまだまだデザインからそのまま出力したコードという訳にはいかないと思います。

※逆説的にdivばかりの出力で構わないという現場もありそうですが…

ただ、そもそも正解がひっくり返る可能性は感じています

しかしながら、極端な未来、たとえば「AIがAI向けに生成し、AIがAI向けに解釈する世界」が訪れればHTML/CSSという表現形式は重要性を失うかもしれません。

今重要視されているアクセシビリティの観点なども根底から覆り、出力自体をAIが考えて消費者それぞれに合ったUIで出力されるようになればHTML/CSSという形である必要性自体がなくなってきます。

もう少し噛み砕いて言えば、今はHTMLを読み上げるというようなことをしたりしていますが、そもそも音声として出力・提供されるような仕組みになったり、画像のままでもリンクが機能したりリアルタイムなOCR変換技術によってテキストを抽出可能であればデザインファイルをそのまま高解像度のjpg・png・WebMで出力することが正しいという世界が来るかもしれません。

個人的には将来的にはそこに行き着く（つまりHTML/CSSという形でなくなってもっとテキスト・オブジェクト単位のモジュールっぽくなる）と思っています。

いまでも既にGoogleなどで検索すると欲している情報の切り取られた答えがAI回答として表示されていると思います。この将来がいつなのかはわかりません。それほど近くはないとは思いますが、遠くもないように思います。

スマートフォンが登場してHTML/CSSの仕様が変わって行ったのと同じように、もしかしたら端末・ハードマターなのかもしれません。

たた現状では、Webサイトは人間が触れるインターフェースであり、閲覧にはWebブラウザを必要としています。

この状態が続く限り、視覚的・感覚的な心地よさ、文脈、文化的背景といった「人間が感じる部分」を設計する役割は当面、人間側に残るでしょう。

ちなみに「マークアップエンジニアは不要になる」というのは20年前から言われ続けていますが未だになくなっていません。

これからAIの成長が加速度的に伸びていくと思うので未来予測は難しいですが、それでもしばらくは人間の変化の方が追い付かないと思いますし、エネルギー・電力問題などの大きな問題が足枷になっている気もします。

AI時代に強いデザイナー・開発者像

そんな過渡期にいる私たちはこれからきっと、
作業をする人ではなく、AIに作業を指示・評価・改善できる人が強い。
ということになっていくのではないかと感じます。

AIに「何を作らせるか」を決め、出力結果をレビューし、必要なら人間の感性や判断で補強・改善できるという流れになり、決断・選択できる人間が求められ、そんな立ち位置のデザイナー・エンジニアが生き残り、活躍するのかなと。

今でも既に「ChatGPTはこう言ってたよ」というだけの文章を丸々コピペして、あたかもそれだけが正しいかのように振る舞う人間も出てきていますが、それでは人間は不要になり衰退していくでしょう。

そうなればもうHTML/CSSとかWebデザインなどといった話に留まらず、社会性そのものが変容していくことになるので、もとよりの心配などあってないようなものです。

これから業界を目指す人が意識すべきこと

くり返しにのようになりますが、これから業界を目指して学びをはじめる人は、基礎技術の知識・構造理解は「AIのアウトプットをただ使うのではなく、正しく使いこなす側に回るための武器」になると意識するのが大事だと思います。

具体的には以下のような点かなと。

1.AIを怖がらず、道具として使う視点を持つ

「AIは敵だ」「AIに奪われる」という恐怖に囚われないこと。

むしろAIツール（ChatGPT, Copilot, Figma Sitesなど）を積極的に使って「どうすれば効率化できるか」「どうすればよりよいアウトプットになるか」を学ぶ。

2️.AIの出力を批判的に見られる目を養う

AIが生成したコード・デザインは万能ではないことを意識し、その場の要件やユーザーに応じて、
「これは正しい？」「もっと良くできる？」と問える力が大事になってくる。

3.あなた自身の「個性」を持つ

AIは平均点を出すのは得意だが、唯一無二の感性・表現は出せないので、自分ならではのスタイルや強み、得意な業界やテーマを持つことが大事。

といったあたりのことかなと思います。

具体的な成長ロードマップ

細かい抜け漏れはたくさんあってとても大雑把なマップですが「正しい知識を身につける」という軸と、「作業は正確なAIに任せる」という2軸を意識するとフットワークが軽くなるのではないかと思います。

STEP 1：基礎技術の理解・再現

  • デザインツールの使いからを学ぶ
  • HTML/CSSの基本を学ぶ
  • 簡単なレスポンシブページを作れるようにする
  • SEOやAIO、GEO（Generative Engine Optimization）などの知識を学び、何が正しくて最適なのかを知る

STEP 2：AIの使いこなし練習

  • ChatGPTやCopilotを使ってコード補助を体験
  • デザインAIでプロトタイプ作成を試す
  • 「なぜこれが良いのか」を説明できる目を養う（出力結果にツッコミを入れて、自分の修正案を考える）

STEP 3：仕事レベルの品質意識

  • 実務で必要な要件（アクセシビリティ、SEO、パフォーマンス）を学ぶ
  • Gitやチーム開発の基本を理解する
  • 小さな案件で実践経験を積む

STEP 4：あなた自身の価値を育てる。自分だけの表現を持つ。

  • 特定業界やテーマを絞って強みを作る
  • ポートフォリオを整えて「自分の色」を見せる
  • 継続して学び・発信し、自分のスキルを育て続ける

まとまらないまとめ

Figma Sitesに限らずAIの進化は、たしかに学習者にとってプレッシャーになるものと思います。
でもだからといって学ぶ意味が消える訳ではありません。

AIが代替するのは「平均値の作業」や「正確性」の部分が主になり、意図を含める力、個性を表現する力、人間ならではの判断力は残り続けるものと思います。（文中に書いた通り、判断自体をAIに任せてしまう世界が訪れてしまえばそれはそれで終焉かもです）

今から基礎を学びはじめることは時代遅れで遠回りだったり無意味に感じるかもしれませんが、その知識や経験はAIを活用する側に回るための土台として必要なことになってきます。

そしてそれが、これからのWebデザイナー・エンジニアに求められる最大の武器になるのではないでしょうか。

AIを使いこなすための基礎知識であり、学ぶことを恐れず、AIを恐れず、未来を楽しむ側に立つにはどう進むかを常に考えることが大事だと思いました。

もうすこしまとめると、効率的な学び方は変わってくるかもしれないけれど、基礎を学ぶことそれ自体は無駄になることはないのではないかと思います。

まとめのあとにふと思ったこと

思想的にはホームページビルダーと同じなはずなのに、ホームページビルダーは出力コードの問題やメンテナンス性、デザイン性の問題などから制作現場からは敬遠され、今では一線を退いた感がありますよね。

最新のホームページビルダー22の発売日は2020年4月22日なので5年前でレスポンシブの対応も怪しい感じがしますが、ある意味では時代に合わなかっただけで開発が継続されていれば復権できるのではないかとさえ思ったりします。

裏を返せばFigma SitesもStudioもホームページビルダーと同じ問題を抱えたまま払拭できないようであれば同じ道を辿るのかもしれません（その可能性は低いとは思いますが）。

もしくはStudioがデザインツールを発表したり、Canvaあたりと提携したり、いや…Canva自体がノーコードツールを発表したり…

先は読めないですね。AIの登場如何に関わらず未来を読めたことなんてないですが…。

僕の職業も30年前には無かったものですし、職業の衰退や繁栄は将来性だけで決まる訳ではないと思うので、過度な悲観も楽観もせずに真摯に向き合えば道はひらける…といいなぁと思います。

Discussion