Webデザイナーの忍者的生き残り戦術

免責事項

本記事は筆者の個人的な経験と業界観察に基づく考察であり、Webデザイン業界の包括的な実態調査や統計的分析に基づくものではありません。
必ずしも最新の業界を正しく捉えたものではない可能性があります。また、各読者のバックグランドや状況により適用性は異なる場合があります。

Webデザイナーの種別

私自身はITエンジニアまたはアーキテクトとしてWebデザイナーに接することが大半でした。多くのプロジェクトで協業しましたが、一言で「Webデザイナー」と称していても一様でなく以下のようなタイプに分類できるかなと思っています。

スキルレベルをこれまでの観測を元に勝手に忍者的に解釈したものです。特定の職種を貶める意図はありません。
というか単に映画『Under Ninja』を見て感化されただけ・・・

レベル	カテゴリ	仕事内容（Webデザイナーの関与領域）	代表的なツール・技術
特殊	グラフィック忍者	審美眼やデッサン力、デザインセンスでイラスト、画像加工などで勝負する忍者。基本的はHTML/CSSなども多少必要	Adobe Illustrator, Photoshop
一般人	ノーコード/ローコード忍者	コーディングを必要としないタイプCMS機能を利用したサイト構築を支援する対応。専門家でない人がサイトを構築できることを目指したツールなので、これを職種にするのは愚か。	Webflow, Wix, Squarespace
下忍	手打ちHTML忍者	デザインカンプを作成し、HTML/CSSを手書きでコーディング。JSで簡単な動きをつける。お客様が自分で更新することは想定せず、都度修正対応し納品する。	HTML, CSS, CSSフレームーワーク、JavaScript（jQuery） Adobe Illustrator, Photoshop, Figma
下忍	レガシーWebアプリUI忍者	基本的は手打ちHTML忍者。バックエンドについて行うならばデザイナーでなく、ITエンジニアとして設計・開発スキルが必要。大抵は別部隊でバックエンドは開発していて、前提を渡されて画面のHTMLだけを作る。	HTML, CSS, JavaScript（jQuery） Adobe Illustrator, Photoshop, Figma
中忍	CMS設定忍者	手打ちHTML忍者がCMS/SSGの設定方法を習得し、CMS/SSGでHTML/CSSに加えこれらのテンプレート機能の知識を習得してサイトテーマのデザインが可能となる。デザインカンプ作成後、それを具体化するテンプレートをコードできる。さらにCMS/SSGの環境設定、テーマのカスタマイズ、権限設定、本番設置、運用セットアップを行い、非技術者のお客様に引き継げる。企業案件でSSGはほとんど外注されないので、基本的にはCMS、しかもほぼWordPress。	WordPress, MovableType, Drupal, Ghost（CMS） Hugo, Jekyll, Gatsby（SSG）
中忍	EC特化忍者	ECサイトのデザインを作成し、ShopifyやBASEのテンプレートをカスタマイズ。商品ページやカート画面のデザインを調整し、EC運営に必要なバナーや広告素材の制作も担当。 CMS忍者のCMSがECサイトツールになったと思えば良い。SEOに関するノウハウも必要になってくる。	Shopify, BASE, Magento
上忍	フルスタックエンジニア	デザインシステムを構築し、UIコンポーネントの設計/実装。HTML/CSSの知識は必要だが、Nodeなどモダンな技術スタックを駆使し、フロントエンドからバックエンドまで統合してカバーできる開発力が必要。スタイリングに関してはTailwind, CSS-in-JSなどのフレームワークとこれをさらに組み合わせたUIフレームワークもあるので、開発力があればある程度センスはカバーできる（？）。	Next.js, Nuxt.js, Astro, Tailwind CSS, Figma, Storybook

制作するWebサイトの種類

次に「Webデザイナー」が関わりそうな仕事のタイプを分離してみました。どうか動画や音楽配信サイトのようなもの(NetflixやSpotifyのようなサービス)は、Webデザイナーとして出会う方は限られていると思いますので、割愛しています。

カテゴリ	目的	主な特徴	代表的な例
情報提供型サイト	企業・団体・組織の情報を発信し、閲覧者に知識や理解を提供する	静的なコンテンツが中心で、更新頻度は低め。	コーポレートサイト（企業・団体の公式サイト）官公庁・行政サイト（自治体・公共機関）学校・教育機関サイト（大学・専門学校）医療機関サイト（病院・クリニック）
情報配信型サイト	記事・ニュース、企業ブログなどの情報を定期的に発信する。多くはひたすらアフィリエイト的な切り抜き記事を量産するタイプ。	更新頻度は高いが、Webデザインよりはコピーライター的な資質が必要。	ニュースサイト（新聞社・メディア）
商取引型サイト（Eコマース）	商品・サービスをオンライン上で販売する	決済機能、在庫管理、カート機能などとの連携が必要	一般的なECサイト（アパレル、食品、雑貨などのオンラインショップ）
マーケティング・プロモーション型サイト	商品やサービスの認知向上、購買促進、リード獲得を目的とする。一般的にシンプルな構造で、短期間の運用が多い。	シンプルで少ないページの構成が多いがデザイン勝負。短期間の運用が多い。	ランディングページ（広告やキャンペーン向け）ブランドサイト（商品・サービスの世界観を伝える）キャンペーンサイト（期間限定イベント向け）採用サイト（企業の求人特化ページ）
Webアプリ	ユーザーがサイト上で何らかのアクションを行うことを目的とする。	UI/UXデザインが重視されるが、フロントエンドだけでなくバックエンドの能力が必要なのでフルスタックエンジニアか、フロントとバックエンドの混成チームとなる。	Webアプリ（予約システム、インタラクティブなWebコンテンツ）

Webデザイン市場分析（Webサイトの種類 × Webデザイナータイプ）

これも勝手な分析です。需要の多さや成長性も根拠があるわけでなく、筆者のこれまでの経験からの肌感覚です。

Webサイトの種類	需要の多さ	成長性	グラフィック忍者	ノーコード/ローコード忍者	手打ちHTML忍者	レガシーWebアプリUI忍者	CMS設定忍者	EC特化忍者	フルスタックエンジニア
情報提供型サイト
コンテンツ配信型サイト
商取引型サイト（Eコマース）
マーケティング・プロモーション型サイト
Webアプリ

グラフィックデザイナーはちょっと特殊です。 WebというよりグラフィカルなデザインをWebに適用したり、Web内のグラフィカルなリソースを提供する職種です。領域は限られているように見えますが、単独でなければどの領域でもそれなりの需要があります。センスさえあれば成長が期待できる領域でも活躍し、Webに限定せず紙媒体などでも活躍できます。ただし、狭き門ですし、グラフィックのコンクールなどでそれなりの評価を得ることができるセンス、審美眼を持つ達人でないと悲惨です。

ノンコード/ローコード忍者は論外です。 Webデザイナーを含む非技術者がいなくてもWebサイトを構築できるツールを前提にしているので、これを職種に選ぶ選択は愚かです。

手打ちHTML忍者とレガシーWebアプリUI忍者、いわゆる下忍ですが、非常に活躍できる領域が限られています。 Illustratorでデザインカンプを書いてクライアントを交渉しながら、シコシコとHTML/CSSに書き起こして行くという1990年代的スタイルの Webデザイナーはほとんど見かけなくなりました。10年前ならコーポレートサイトをまだ持っていないという田舎の中小企業があったかもしれませんが、今はどうなのでしょう。

企業の多くがコーポレートサイトにCMSを利用しているのでCMS設定忍者は一定の需要があるでしょう。 HTML/CSSだけでなく、CMSのテーマを開発、カスタマイズできる能力が必要なので、CMS独自のテンプレート機能の理解、 CSSだけでなく、CSSプリコンパイラの使いこなしなどが必要です。また、多くのCMSはHTMLでなくMarkdown記法をサポートしているので、知らないと恥をかきます。 CMSはWordPressが支配的ですが、クライアントがCMSツールに拘っているケースは多くないので、自身が隅から隅まで知って使いこなせるCMSを作ることが重要。SSGも知っていると良いですが、企業がSSGを外注することはまずないでしょう。成長領域で活躍できるかは、グラフィックデザイナーとしてのセンスが問われてきますが、競合相手が中忍、上忍になってくるのでブルーオーシャンではないです。先行きはそれほど明るくない。

EC特化忍者についてはECサイトを構築するツールに長けていれば案件も多く単価も高いので、活躍できる場は多いと思います。ただし、企業のビジネスに直結する領域なので、クライアントとの契約も請負契約で瑕疵担保付きなどになってくるので、それなりの企業に所属して活動するというのが現実的でしょう。 SEOやメールマーケティングなどのスキルやノウハウが必要になってきます。Zeusなどクレジットカード決済との接続なども必要な知識になってきます。

フルスタックエンジニアは、その名の通り、デザインからフロントエンド、バックエンドまでWebサイトのすべてを開発できます。バックエンドを構築しているSIerから仕様を投げられてフロントエンドを組み立ていた20年前と違って、モダンな技術スタックを使ってフロントエンドエンジニアがバックエンド処理も書けるようになりました。 Next.jsなどのモダンな技術スタック、クラウドサービスを駆使し、コードベースでサイトを構築を行います。もはや「デザイナー」ではなく「エンジニア」。

技術力があればCMS対応など造作もないが、今やCMSすら不要。コードベースで統一感のあるサイトとコンテンツを量産できる時代です。美的センスがなくても、モダンなUIフレームワークを使えば破綻しない、それなりにセンスの良いUI は作れます。全員が全てができるから「フルスタック」なのです。ならば、全てできた上で人と違う何ができるかが勝負です。

コードは力なり、まさに上忍。

Conclusion

こう見ていくと、どこを目指すか明確です。

HTML/CSSだけでWebの仕事ができて飯が食える世界がどこかにあると良いのですが、残念ながらそんなお花畑はどこにもありません。

あるとする、 SIerやアフィリエイト業者の下でひたすらHTMLを量産するという、クリエイティブからは程遠い仕事です。競争も激しい。イバラの道です。だって、下忍ですから。

自由に仕事をするには、上忍になるに限ります。 HTML/CSSなんて当たり前、CMSも対応でき、モダンな技術スタックやAI、サービスAPIの活用など新しい技術領域を自分で広げていける。そんなフルスタックエンジニアしか生き残れない世界です。

こう書くと身も蓋もありませんが・・世界は残酷です。