AI時代のウェブデザイン
こんにちは、アシカガコウジです。 今回は、AI時代のWeb製作について話をします。
Webデザイナーは今後どうAIを取り入れていくべきか。 未経験者はAIによってWeb製作ができるのか。
のヒントになるような内容を考えています。
WebアプリとかWeb上で使えるツールまで話を広げてしまうと、 開発者とかデベロッパー、プログラマーの話になってきて、私の守備範囲を超えてしまうので、
Webデザイナーに絞った上で、 補足的に未経験者はどうなのかも考えたいと思います。
この番組は、あなたのクリエイティブの背中をちょっと押すをテーマに、 デジタル活用のヒントをわかりやすくお届けすることを目指しています。
今回取り上げるテーマは、AI時代のWebデザイナーは何を学ぶべきかです。
Web製作、Webデザインに現在大きな変化が起こりつつあります。 そこで、
Viveコーディングとノーコードビルダーという2つのキーワードが挙げられます。
Viveコーディングというのは、AIと対話しながらコードを書いていくという、 新しいコーディング手法です。
ウェブサイトを作るには HTML と CSS という言語を
使う必要があるんですが、 人間は普通の言葉でコンピューターにこういうものを作りたいと指示すると、
コンピューターが、AIがコードを書いてくれると。
ここをもっとこうしてほしいとか、何度も AI と対話を繰り返すことによってコードが出来上がる。
ウェブサイトが出来上がるというイメージです。
Viveコーディングという言葉の定義からすると、 コードを作るのは完全に AI に任せて
Vivesで、ノリで開発を進めていこうぜというものらしいです。
ただ実際は AI 任せだけではなかなか難しいので、 人間がコードを部分的に修正したり、
あるいは人間があらかじめある程度コードを書いた上で AI に手伝ってもらったりということの方が一般的かと思います。
なので AI を使ったコーディングがイコール Vive コーディングというわけではないんですが、
今回はちょっと話を簡単にする意味でも AI を使ってコーディングすることを Vive コーディングと呼びたいと思います。
次にノーコードビルダーですが、これはツールを使って HTML とか CSS とかのコードを書かずにウェブサイトを作ると。
まあそういうツールの名前がノーコードビルダーですね。 ツールのカテゴリーですね。
ノーコードビルダーとしては世界的には Webflow とか Framer というのが有名で、日本では Studio という日本の企業が作っているノーコードビルダーがあって、
これはプロのウェブデザイナーの中でも結構使われています。 そして最近
Figma が ウェブデザインツールとしてスタンダードな
Figma が Figma サイトという機能をリリースして、デザインしたものをそのままウェブサイトとして公開できるようになったんですね。
なんで Figma も Figma サイトというノーコードビルダーを提供するようになったということです。
なのでノーコードビルダーが今後ますます プロのウェブデザイナーの間で注目されると思います。
html とか css とかのコードを書けなくてもウェブサイトが作れますよというツールは昔からありましたが
テンプレートを使ってありもののパーツの組み合わせで作っていくのでできることが限定されている
デザインの自由度が少ないという印象があります。
そういうものも今でもありますしそれもノーコードビルダーと言って間違いはないんですが
今ウェブデザイン界隈で注目されているノーコードビルダーは もっとプロ向けなもの
細かいデザインのコントロールができるもの まさに Figma のデザインがそのままサイトとして公開できる
Figma サイトみたいなものをイメージしてください
とはいえノーコードビルダーではウェブページ上でできる インタラクション的なもの
例えばボタンを押した時にボタンが爆発するとかユーザーの入力によって何か 入力内容によって違ったことが起きるみたいなことは
あらかじめツールが用意しているものでない限りできません
Vive コーディングでは指示次第でそういういろんな機能を盛り込むことができる可能性は高いんですね
でも例えば Figma は Figma Make という AI によるコーディング機能も
用意されていて Figma サイトで公開するサイトの中に Figma Make で作った AI でコーディングした要素を入れられるようになっています
Figma サイトのライバルとも言えるノーコードビルダーのフレーマーにも最近同様の AI 機能が搭載されました
なのでノーコードビルダーはデザインツールのように細かくデザインしてウェブサイトを作りつつ
機能的に用意されていないものは AI によるコーディングで作れるようにと進化していっています
今後の課題と展望
一方で Vibe コーディングの方にもデザインツール的な要素が今後追加されていくんじゃないかなと私は予想しています
ちょっと話変わるんですが音楽生成 AI の Suno は編集機能がどんどん充実してきている
進化してるんですね 作った曲をボーカルと楽器それぞれとで分離して編集できるようになったと
最近 なので音楽制作をする人が使っている
DAW と同じようなことが
Suno の画面上でできるようになってきたと ただ曲がポンとできたものをガチャしていく
いろいろ作っていいものを採用するだけでなくその作ったものをさらに編集してブラッシュアップすることができるようになってるんですね
そうなると当然これまで音楽を作ってきた人 知識がある人の方がよりクオリティの高いものを作れるようになりますよね
それと同じようなことが Vibe コーディング AI によるコーディングでウェブサイトを作っていく上でも起きるんじゃないかと思うわけですね
例えば google が提供する UI 作成ツール ユーザーインターフェースを作る
スティッチというツールがあるんですが こういうのを作ってとテキストで指示をすると
AI によってユーザーインターフェースが作られるんですが 作った後でカラーパレットを
色の組み合わせを変えたり フォントを変えたり角丸の調整をしたりできるようになっています
今はそれくらいしかできないんですが このツールが進化していけば今後もっと細かくデザインをコントロールできるようになるんじゃないかなと思います
音楽の知識がある人の方が音楽生成 AI でより良いものを作れるのと同じようにウェブデザインの知識のある人の方が
クオリティの高いウェブサイトを AI と一緒に作れるようになるだろうと
なのでバイブコーディングにもデザインをコントロールする機能が追加されていって 一方ノーコードビルダーにも
AI でない機能を追加していくみたいな部分が強化されていくことで
この2つがだんだん近づいていくんじゃないかと予想します
ウェブデザイナーの人で これまでデザインとコーディングの両方をやってきた人が
ノーコードツールバイブコーディングのどっちに進むかは 悩ましい問題だと思うんですがどっちに進んでも最終的にはだんだん
その両方が近づいてきて差が少なくなってくるんじゃないかと なのでどっちを選んでも選択ミスだったということはそんなにないと思います
どっちも使ってみて自分にしっくりくる方を 仕事に取り入れるところから始めたら
いいんじゃないでしょうか 私も最近仕事で
スタジオを使ってノーコードビルダーのスタジオを使ってのサイト制作をしましたし 仕事でAIを取り入れたコーディング
バイブコーディング的なこともやりました 私がしっくりきたというか
使っていてこれはすごいなとか 楽しいなと思ったのは
バイブコーディングの方です 個人的にはバイブコーディングの方に軸足を置きつつ
ケースバイケースで両方使いたいと考えています スタジオはもう使っていくつか問題点というか
課題も見つかったので 今後はフィグマサイトとかフレーマー
webフローも使ってみたいと考えています 全くの未経験者の場合
ノーコードビルダーバイブコーディングどちらもハードルは高いと思いますが
やっぱり両方やってみるのがいいんじゃないかなと思います
ノーコードからウェブデザインへ
バイブコーディングの場合はうまくいけばすぐに完成形が出来上がるので そこでの達成感とか
楽しさはあると思います デザインツールならある程度使えるとか
デザイナーですという人は ノーコードビルダーから入るのがいいでしょうね
デザインツールの延長線上にあるようなものなので クライアントから仕事をもらってウェブサイト制作をするという
レベルを目指すんだったらやっぱり web デザインに関する
それこそ html とか css も含めた勉強は必要になると思います ただ自分のためのサイトを作りたいと
いうことであれば バイブコーディングだけでなんとかなるかもしれません
モノマネ芸人の金太郎さんの web サイトは
wix というツールを使って作っているんですけども
多分プロが作ったわけじゃないと思うんですがなかなかよくできているんですね 金太郎さんは最近独立して
一人事務所みたいな形で活動しているので web サイトも本人が作ったのか
身内の人とか知り合いみたいなレベルな人と協力して作ったりとか そういうレベルじゃないかなと思うんですが
モノマネで演じるいろんなキャラクターがキャラクター図鑑になっていて 芸能事務所のサイトのタレントメーカーみたいな感じで見られたり
シャレが効いていて面白いんですね 昔から社長が一人で作った
見た目は決して良くないけど そこで売り上げを上げている
サイトとかもありますよね やっぱり思いとか強みを伝えられるのは
当事者だと思いますし 見る側の人間はデザインが洗練されているかどうかとかよりも 知りたいことがわかりやすく伝わるとか
思いが伝わるみたいなところで評価するわけなので 一人社長とか小規模の事業者が自分でサイトを作るという選択肢は
良いと思うんですね なのでノーコードビルダーとか
Viveコーディングでそういう人たちが自分でサイトを作れるようになれば それはすごく良いことだと思います
デベロッパーツールとTailwind CSS
最後にViveコーディング AIでコーディングする上で
これを学んでみた方がいいよというものを2つ紹介します
デベロッパーツールと Tailwind CSS です
デベロッパーツールというのは web ブラウザーに標準でついている機能で
開発者向けのツールですね デベロッパーツールを使うと今表示されている web ページの
解析ができるんですね ここの文字のフォントの種類は何でサイズがいくつだとか
ここの要素は上と下の 空白
いくつ何ピクセル 取られているかみたいなことがわかります
そこに対してどういう指示をされているかと CSS というのがどういう風にかかっているかとか
ここの html がどう書かれているかみたいなことが全部わかるんですね あるいはどういうエラーが起きているか
javascript でこういうエラーが起きていますみたいなことも見ることができます なので AI がコードを作ったものを
web ページ上で確認して デベロッパーツールを使うことによって
ここ表示が崩れているけど何でだろうという原因を探ったり ちょっとここの余白を開けたいとか
デザインを微調整したいときにその場で数値を変えたり 指示する内容を変えたりして変えたらどうなるかを確認したりできるんですね
その後変更点を AI に指示して修正してもらってもいいですし
自分でコードをいじって変更してもいいわけですね ウェブデザインをしている人でデベロッパーツール使ったことないという人はなかなかいないと
思いますが AI でのコーディングとか人が作ったものを違う人が変更する場合とかには特にこの
デベロッパーツールはウェブサイト制作においては欠かせないツールです 未経験の人とかコーディングはそこまで得意じゃないという人の場合はそうやって
AI が作ったものをデベロッパーツールで確認していく作業において HTML や CSS を
学んでいくということもできるかと思います HTML や CSS を基本から初歩から学んでいくということも大事でしょうが
AI が作ってくれた実際に出来上がったものを解析しつつ 実践から学んでいくみたいなやり方もいいのかなと私は思います
そして Tailwind CSS ですがこれは最近結構人気の CSS フレームワークと呼ばれるものです
これは簡単に説明するのがなかなか難しいんですが あらかじめウェブデザインに必要そうな設定を大量に用意しておくことで
CSS を書かずに HTML だけでサイトを作れるようにというコンセプトのものです
例えばここの要素の上に 8ピクセル間隔を空けたいなという時に HTML 上でそこの要素のクラスというものに
MT-8 と入れると8ピクセル間隔が空く これはマージントップ8ピクセルを略して MT-8 とそういうルールを Tailwind CSS が勝手に作っているわけですね
なのでその Tailwind CSS のルールに従えば Text-Center と入れればテキストがセンター揃えになるみたいに
HTML だけでデザインができてしまう でこれがなんで AI 時代におすすめかというと AI に普通にコーディングを頼んだ場合
Tailwind CSS を使ってデザインを調整することが多いからです CSS をいちいち書かずに済むので AI としても使い勝手が良いと
考えているんだと思います 例えば Google の Gemini でウェブページに使う部分的なパーツとかを作ってもらう場合
だいたいデザイン部分に関しては Tailwind CSS が使われています 自分が作っているサイト全体で Tailwind CSS を使っていれば
そうやって AI が作ったコードも Tailwind CSS を使って作ってもらえばそのままコピペで使えるわけですね
この辺の便利さはウェブデザインをやっている人じゃないとわかりにくいと思いますが AI に HTML と CSS を作ってもらった場合
それを自分のサイトに入れる時にそのサイトの既存の CSS とパッティングしてしまうとか問題が起きる可能性があるんですね
もちろん既存のサイト全体を見つつ CSS を AI に作ってもらうことも
カーソルなどのツールを使って行うことはできます ともかく AI によるコーディングと Tailwind CSS という CSS のフレームワークの相性がいいので
これ学んでおくと損はないんじゃないかという話でした というわけで AI 時代のウェブデザイナーは何を学ぶべきかという
答えとしてはブラウザーのデベロッパーツールと Tailwind CSS ですという一応の答えを出してみたんですが
ご意見感想などあればぜひ聞かせてください
ハッシュタグアシカガキャストをつけて X に投稿していただくか お便りのフォームとメールアドレスを概要欄に入れてありますので
そこからメッセージを送っていただけたら嬉しいです それではまた次回お会いしましょう
アシカガコーディでした
