カテゴリ
本サイトはプロモーションを含みます。

AI時代にWebデザイナーは生き残れるのか?!むしろ最高の状態!

↑この画像はAI(GoogleのGemini)で生成しました。

すっかりAIツールに囲まれる時代になりましたが、Webデザイナーの自分としては最高にハッピーな状態です!
もう毎日ホントに最高!超楽しい!Webデザイナーになってよかった〜!この時代に生まれてよかった!と心から思っています。

この記事では、AI時代に無双できるWebデザイナーの考え方と生き方について紹介します。

おそらく次のような心配をしている人が多いですよね。

「AIの影響でWebデザイナーの需要は無くなるのかな…?」
「Webデザイナーはもう将来性が無いのかな…?」

これは一理あって、Webデザイナーやコーダーの一部は職を失いますが、この話をする上で、以下の3つの視点があることを絶対に忘れてはいけません。

  1. 単純なコーディングとデザインの作業はAIに置き換わり、Webデザイナーの一部が職を失う
  2. むしろ逆にデザインを見る審美眼とプログラミングの知見の需要が高まった
  3. Webデザインの多様なスキルとAI活用スキルの相乗効果で、爆速で多種多様に、さらに創造的に制作と開発が可能になった。もう最高…超楽しい…この時代に生まれてよかった…

1つめの「AIにより職を失う」視点は半分正しいのですが、この1つめの視点だけでしか現状が見れないと、
「コーディングはAIで可能になるからコーダーやエンジニアは不要」
「サイトやバナー、LPのデザインもそのうちAIができるようになるからデザイナーは不要になる」
といった、単純な思考に陥ってしまいます。
2つめと3つめの視点が極めて重要なのでぜひ読んでみてください。

AIはあくまでツールです!上手にしなやかに活用していきましょう!

それぞれの視点を解説します。

目次

1. よく聞く「AIでWebデザイナーは職を失う」という視点は半分正しい

↑この画像もAI(ChatGPT)で生成しました。

「単純なコーディングとデザインの作業はAIに置き換わり、Webデザイナーの一部が職を失う」
これは半分正しいです。半分というのは未熟なWebデザイナーが失職するのであって、十分にスキルがあるWebデザイナーはまだまだ生き残ります。生き残るどころから黄金時代が来ていると僕は思っています。一方で確かに未熟なWebデザイナーはAIのさらなる進化で失職したり案件獲得はできなくなります

【デザイン案件のケース】お客さんが自分でAIでデザインを制作するので、未熟なデザイナーは消える

今後、具体的に何が起きるかと言うと、お客さん側は自分でAIツールでデザインを試してみて、

「おっ!けっこう俺イケるやん!もうデザイナーにお願いしなくてもいいや!人件費が減ってラッキー!」

そう思うお客さんや経営者が一気に増えていきます。そうなると社内のデザイナーを解雇したり、これまで業務委託で外注していたデザイナーの契約を切ります。あるいは少人数だけの優秀なデザイナーを残して、スキルの低いデザイナーを解雇したります。

Figma・Canvaなどのデザイン制作アプリのAI機能がアップデートされたり、ChatGPT・Gemini(Google) あたりのAIツールがさらに画像生成の精度を上げることで、この状況を後押ししていきます。

よく聞く「AIでもたいしたデザインはできないよ!デザイナーは必要だよ!」という主張も正しいのですが、「AIで十分だ」と思うお客さんが増える以上は、Webデザイナーへの依頼数は確実に減ります。もちろん非常に凝ったデザインが必要な案件では、優秀なデザイナーは活躍し続けます。そう考えると未熟なデザイナーには仕事は来なくなります

【コーディング案件のケース】コーディング用AIエージェントの進化とFigma&ノーコードツールの進化で未熟なコーダーは消える

コーディングやプログラミングについても同様です。社内のそこまでコーディングスキルが無いディレクターやWeb担当者が、AIコーディングツールを試して、

「俺でもコーディングできちゃった!もうコーダーいらないわ!人件費が減ってラッキー!」

と思うようになり、社内の未熟なコーダーやエンジニアを解雇したり、業務委託のコーダーの契約を切ります。あるいは少人数の優秀なエンジニアを残して、未熟なエンジニアやコーダーを解雇します。

現在のAI×コーディングの状況は、Cursorで入力を大幅にアシストしてくれたり、ChatGPTやGeminiやClaudeがゼロからコードを生成してくれるレベルです。
今後は、コーディング用のAIエージェントが登場&進化すれば、デザインデータをアップするだけで、複数ページのコーディングを自動で制作できるようになるはずです。
また、Figmaでサイトのデザインをして、ある程度、ここはdivタブ、ここはnavタグ、これはカード型レイアウトと指定しておくと(あるいは全く指定しなくても)、Figma上でAI生成したコーディングデータ(HTML・CSS・JavaScriptのセット)のエクスポートができるようになるはずです。ここまでは割とすぐにできるようになると思うので、実現すればシンプルなコーディングスキルしかないコーダーは不要になります。

こんな感じで、デザイナー、コーダー、デザインとコーディングの両方をやるWebデザイナーもスキルが低いままだとAIに置き換えられて、「キミ、AI以下だね。クビです」となってしまう状況になり始めました。

2. むしろ逆にデザインを見る審美眼とプログラミングの知見の需要が高まってきた

↑この画像もAI(Gemini)で生成しました。

AIで写真やイラストを生成しやすくなったり、コードを一瞬で生成できるようになった一方で、そのクオリティが問題ないかを確認し、ブラッシュアップする人材の需要が高まりました。ある程度スキルのあるデザイナやーエンジニアの需要が高まり、最高の状況です。

デザインを見る審美眼が必要になった

AIでイラストやロゴなどが作りやすくなった一方で、生成したデザインが、デザインとしてまともに成立しているかどうかを判断する必要が出てきました。AIで生成したデザインや動画のクオリティをしっかりと管理し、必要があればそれを修正したり、さらにクオリティを上げるデザイナー人材の価値が高まっている状況です

デザイナーの目は、デザイナー以外の人の目よりもはるかにデザインに対する解像度が高いです。バランスの崩れや配色の気持ち悪さなどを瞬時に見抜きます

一方で、デザイナー以外の人はどんなに気持ち悪いロゴでも自分の好みなどを優先してしまい、「AIで生成したロゴで全然OK!」と社長が自分で生成した低いクオリティのロゴを企業のロゴにしてしまう事態が起こりえます。企業イメージを破壊し、お客さんが離れたり、社員が「なにこの気持ち悪いロゴ!」と悲しんで離職し、業績が大きく低下したり、最悪倒産することもありえます。

もちろんロゴだけではなく、写真やWebサイト、バナー、Youtube動画、ポスター、プレゼン資料にもこの事態が起こり得ます。
写真の選定に慣れているデザイナーはAIが生成した写真の違和感に一瞬で気づきますが、デザイナー以外の人は意外に気づけないものです。
また、現時点ではAIが作った動画もクオリティがピンキリです。以前「これAIが作ってくれたイベントのPR動画だよ〜すごいでしょ!」と僕に見せてくれた人がいましたが、あまりにAI臭く無気味な動画でした。こんな低レベルな動画も良いと思い込んでしまうのか…と愕然としました。それくらい普段デザインに馴染みのない人たちは、AIの生成物がデザイン的にまともかどうかすら判断できないのです。

これ重要なのですが、世の中にはAIを嫌う人間が一定数いることを忘れていはいけません。AIで生成した写真や動画がAI臭くないことがものすごく重要です。AIっぽさがあると、AI嫌いの人や反AI派からバッシングを受けて、途端に炎上のリスクに巻き込まれます。低レベルのAI生成物の使用は企業としては炎上などの大ダメージを受けるリスクがあります。つまり、「AIっぽくないデザインをAIで生成する」スキルが必要なのです。このスキルを持つのがデザイナーです。

AI生成した写真やロゴやイラストは、デザイナーがそれらがブランドイメージに合致しているか、著作権などの問題がないか、最終的なクオリティが商業利用に耐えうるかなどを判断する必要が出てきたのです。

これはデザイナーにとってはすごくラッキーな状況です。デザイナー自身がAIでロゴやイラスト、写真などを生成し、そのクオリティを上げていけば、短期間に大量に良質なデザインの制作物が作れるからです。
また、今までイラストは描けなかったデザイナーもAIでイラストを生成できるようになりました。デザイナーができることが一気に増えたのです。
デザイナーにとっては最高の時代が来たと言えます。無双できますよね。

コードの正しさや保守性・拡張性を保証できる人材がさらに必要になった

コーディングやプログラミングについてもデザインとまったく同じ状況です。AIが生成したコードが問題ないか、例えば保守性や拡張性、パフォーマンスに問題が無いか確認し、バグがあれば修正する作業が発生する状況になりました。これを判断できるのは、ある程度スキルの高いエンジニアやコーダーです。

もちろん何十年後の未来には、プログラミングのスキルゼロの人でも、一切コードを見ることなくアプリやシステムを開発できる時代が来るとは思いますが、まだまだプロのエンジニアの知見やプログラミングスキルが必要な状況です。kintoneなどのノーコードツールはやや例外かもしれませんが、やや複雑なシステムやオーダーメイド的な実装はスクラッチで対応する必要があります。

さらにデザイナーと同様の状況で、プログラミングやコーディングの知識があれば、高速に大量にコードが生成できるようになり、エンジニアにとってはこれまた最高の時代が来たと言えます。たくさんの案件をこなしてお金も稼げるし、自分でたくさんアプリを開発したり、既存アプリやシステムに高速に機能追加をしたり、高速に改善のサイクルを回せるようになりました。

僕自身、少しJavaScriptが書ける程度のプログラミングスキルですが、ChatGPTにコードを全部生成してもらって、Unityでアプリを作ってリリースができました。これは本当に夢のようで感動しました…。今までの僕なら絶対にできなかったことです。Unityで必要なプログラミング言語はC#ですが、ChatGPTの助けがあれば、僕ですらできてしまいました。アダルト系アプリなのでここでは公開できないですが笑。

今後、さらにしっかりとしたプログラミングやコーディングのスキルが必要とされる時代になると思っています。もちろん上でも書いた通り、未熟なエンジニアやコーダーはAIに置き換えられてしまうので、AIに負けるのではなく、AIをフル活用できるレベルのプログラミング・コーディングスキルを身につける必要があります。

3. Webデザインの多様なスキルとAI活用スキルの相乗効果で、爆速で多種多様に、さらに創造的に制作と開発が可能になった。もう最高…超楽しい…この時代に生まれてよかった…

↑この画像もAI(Gemini)で生成しました。

これは2の解説からの続きみたいなものですが、AIが登場したことで、自分のようなデザインもコーディングも両方やるタイプのWebデザイナーには最高の時代が到来しました。「仕事の幅が広がった」ことと「頭の中にあるアイデアをデザインやアプリでどんどん具現化できるようになった」からです。

仕事の幅が広がった

AIツールのおかげで本当に仕事の幅が大幅に広がりました。

僕はWebデザイナーとして、これまではデザインとコーディングしかできませんでした。しかし、ChatGPTでプログラミングのコードが生成できることで、さらに踏み込んでJavaScriptを使った実装作業の案件にも対応できるようになりました。もちろん大きなプロジェクトでは、エンジニアの方のレビューを受けたりする必要はありますが、今まで無理だったプログラミング系の実装作業にも対応できるようになりました。

デザインについても、僕はイラストが描けませんが、AdobeのFireflyでイラストを生成できるので、イラストの案件も受けられるようになりました。もちろん生成画像はそのままは使えないケースが多いので、Photoshopで修正したり、さらにクオリティを上げたりしています。

頭の中にあるアイデアをデザインやアプリでどんどん具現化できるようになった

これが一番嬉しいことですね。アイデアをどんどんカタチにできるようになりました。

今までUnityでゲーム開発なんて無理でしたが、ChatGPTのおかげで、わりと簡単に開発できちゃいました。しかも、そのゲームで使用するイラスト素材もStableDiffusionでAI生成しています。プログラミングも苦手で、イラストも描けない自分が、ゲーム開発できるなんて夢のような状況です。本当にAIのおかげでです。

特に、デザインとコーディングの両方をやるWebデザイナーは、AIの登場によってデザインとある程度の開発もできるようになり、「ひとりでできるもん!」という無双状態になれると思っています。

Webデザイナーが使うべきAIツール

デザインとコーディング作業では、以下のAIツールは最低限使えるようにしましょう。

デザインに使えるAIツール

文章生成:ChatGPT・Gemini

ChatGPTのような文章生成AIは、Webデザインにおいては以下の用途に使えます。

  • サイトのコンテンツの文章作成
  • ユーザーのペルソナを作成
  • サイトマップを作成
  • SEOキーワードの洗い出しと選定

ChatGPTは高性能なモデルが使える有料プランに入っておきましょう。
Geminiも非常に優秀です。GoogleWorkspaceに加入すると、無料でGemini有料版が使えるようになります。

画像生成:Firefly・ChatGPT・Gemini・Illustrator

Firefly・ChatGPT・Gemini・Illustratorで、写真やアイコン、背景素材などを生成できます。FireflyはAdobeStockの素材画像を学習しており、商用利用において安全性が高いのでぜひ使いましょう。AdobeCreativeCloudを契約していたら、1ヶ月に使い切れないほどのクレジットが付与されます。

画像修正:Photoshop

Photoshopは、主にAIで生成した画像の修正に使用します。横と縦が切れてしまっている画像を生成拡張したり、削除ツールで不要なものを消したりします。

コーディングに使えるAIツール

Cursor

CursorのようなAIエディタはどんどん使っていきましょう。僕がプログラミング方面に明るくないので、現時点ではコーディング系のAIツールはCursorだけを使っています。

AI時代に必要なWebデザイナーのスキルと姿勢

↑この画像もAI(Firefly)で生成しました。

今までの話を踏まえて、今後Webデザイナーに必要なスキルと姿勢は以下だと思っています。

  • AIツールの知識(生成と修正の方法)
  • AI生成物をブラッシュアップ&カスマイズできるスキル
  • 積極的にAIを使う姿勢
  • 新しいAIの情報を常にキャッチアップする姿勢
  • AIとかどうでもいい

AIツールの知識(生成と修正の方法)

「この案件にはこのAIを使おう」という判断ができる必要があります。
例えば、画像生成をする時に、日本人らしい顔の人間の画像を生成するなら、現時点では「Gemini」か「Firefly」を使用するといいかも!という知識があり、判断ができるかどうかです。上でWebデザイナーが活用できるAIツールを紹介しているので、とにかく触って遊んでおきましょう。

また、プロンプトの入力方法も覚えておきましょう。全然難しくはないですが、上の画像であれば、「タブレットを見て、情報をキャッチアップしている日本人女性。ショートヘア。カジュアルな服。PC画面にはWebサイトのデザインが写っている。」と具体的にプロンプトを入力して生成しています。しかし、実際に生成された画像のPC画面にはWebサイトは写っていません…。なので、この画像をPhotoshopで修正しています。横幅も足りなかったので、Photoshopで生成拡張しています。このように具体的にプロンプトを入力&Photoshopでの修正といった作業があることを理解しておきましょう。

AI生成物をブラッシュアップ&カスマイズできるスキル

デザインの例では、「ChatGPTやAdobeのFirelfyで生成した画像が横幅が足りないので伸ばしたいし不要な物が写っているから消したい」、こんな時にすぐにPhotoshopのAI機能で修正できるスキルが必要です。Photoshopの「生成拡張」や「削除ツール」を使いこなせるスキルはとても役立ちます。

プログラミングの例では、ChatGPTやGeminiでJavaScritpでスライドショーのコードをゼロから書いてもらったら、そのコードをしっかり読めて、必要に応じてスライドの内容を変えたり、スライドの数を増やしたりスライドの切り替え時間を変更したりはできる必要があります。

つまり「AI生成物をブラッシュアップ&カスマイズできるスキル」とは、ある程度の「デザインスキル」や「プログラミングスキル」のことです。「これからはAIが何でも作ってくれるからデザインスキルもプログラミングスキルも不要だ!」という意見は僕は完全に間違っていると思っています。

積極的にAIを使う姿勢

AIは積極的にどんどん使っていきましょう。いまCursorなどのAIアシストをしてくれるエディタを使っていないと、かなり遅れている人という印象があります。僕もAIを使わない日は無いくらいデザインやコーディングで使っています。

新しいAIの情報を常にキャッチアップする姿勢

例えば、Webデザイナーはあまり使わないかもしれませんが、画像生成AIのStableDiffusionは、SD1.5の時代からSDXLになり、大幅にイラストと写真の描写力が向上しました。しかし、もしSD1.5のままの知識で留まっていて、SD1.5で画像の生成を続けていたら、見る人に「なんだこの写真いまいちだな」とか「いかにも量産型のイラストだな」と思われてしまいます。新しいモデルのキャッチアップができないと、このようにあっという間に時代遅れの人材になってしまいます。

コーディングについても最初はVScode×GitHubCopilotの組み合わせがベストでしたが、すぐにさらに優れたCursorが登場しました。今もCursor以上のエディタが登場しつつあるようです。

常にAI系のニュースは読んでおきたいところです。一番情報が速いのはエックスです。エックスでAIの情報を配信しているニュースアカウントやAIジャンルで有名な人はフォローしておきましょう。

AIとかどうでもいい

たまにサイトのコメント欄に、

「AIが登場したからWebデザイナーの需要はもう無くなりますか?今からWebデザイナーになるのはやめたほうがいいですか?」

という質問が来るのですが、極論を言うと、Webデザイナーを目指したいという気持ちとAIは関係が無くてどうでもいいんですよね。

デザインやコーディングを本気でやりたければ、AIの影響とか関係なく、Webデザイナーになろう!と思えるはずです。もし不安に思っているのなら、ご自身に「自分は本当にWebデザイナーになりたいのか?」と自問自答をした方が良いです。もし「デザインとコーディング、あるいはプログラミングが楽しい!もっとやりたい!」と思えるのなら、AIによる影響など気にせず、Webデザイナーやエンジニアの道を突き進みましょう!

まとめ:AI時代にWebデザイナーはオススメ!

↑この画像もAI(Gemini)で生成しました。

やはり、これからの時代を生き残っていくには、「キミ、AI以下だね」と言われないレベルのWebデザインのスキルが必要ですね。

個人的には、AIツールのおかげで、Webデザイナーの自分は本当に毎日楽しい日々を送っています。
「次はAIで何を作ろうかな〜」と考えることがとても楽しく幸せです。
AIに負けないで、AIをフル活用してやる!という気概で、AIと戯れながら楽しんで生活していきましょう!

コラム:正社員のWebデザイナーを強くオススメする理由

このサイトでは、本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社か教育体制のしっかりしている事業会社に正社員で入社することを強くオススメしています。

やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』です。ワークポートでも、さすがに未経験の方にWeb制作会社を紹介するのは難しいですが、事業会社のWebデザイナー・フロントエンドエンジニアを紹介してもらえる可能性があります。また、Webデザイナーにこだわらなければ、WebディレクターやECサイト担当者などの求人も多数保有しているため選択肢の幅が広がります。一度面談を受けておきましょう。

Web/IT系特化の転職サイト『Green』に登録しておきましょう。Web系転職の定番サイトです。

コラム:デザインスキルを一気に上げる方法

「デザインスキルを一気に上げる方法は「レビュー」です。つまりデザインに対するダメ出しを何度もしてもらって直すことを繰り返すことで、デザインスキルは急激にレベルアップします!

これを一番実現しやすいのが会社です。会社なら現場で上司や先輩にサイトやバナーのデザインのレビューをしてもらえるからです。じゃあ就職しておらず未経験のうちはどうすればいいかというと、「レビュー付きのデザインスクールの活用」です。普通のスクールはPhotoshopの使い方やコーディングの基礎を学ぶだけで「デザインスキル」についてはほぼ教えてくれません。レビュー付きのデザインスクールは運営側にも高いデザインスキルが求められるため非常に少なく希少性が高く『fullme』が現在は最高峰だと僕は思っています。「けっきょく、よはく」「ほんとに、フォント」など有名デザイン書籍を手がけるingectar-eの運営です。
僕が駆け出しの頃に『fullme』があれば絶対に受講していました...。デザインスキルを高めたい人はぜひ受講しましょう。

コラム:ポートフォリオのチェックリストをnoteで販売中!

「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました!27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう!

ご質問や感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。
こちらで承認後にコメントは表示されます。
* が付いている欄は必須項目です。

上への矢印